/* Shared touch, readability and form layer. Keep financial/print layouts intact. */
.form-field { display: grid; gap: 8px; min-width: 0; align-content: start; }
.form-field > label { display: block; margin: 0; font-size: 14px; font-weight: 650; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-width: 0; font-size: 16px; }
.form-field .field-help, .form-field .field-error { font-size: 13px; line-height: 1.5; font-weight: 400; }
.field-error ul, .form-error-summary ul { margin: 0; padding: 0; list-style: none; }
.form-error-summary { grid-column: 1/-1; margin: 0 0 16px; padding: 14px 16px; color: #812d25; background: #fff0ec; border: 1px solid #dfa99b; border-radius: 12px; font-size: 14px; }
.password-control { position: relative; display: block; width: 100%; min-width: 0; }
.password-control input { width: 100%; padding-right: 88px !important; }
.password-control .password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 76px; min-height: 44px; margin: 0; padding: 6px; background: transparent; border: 0; border-radius: 8px; color: var(--portal-accent-deep, var(--primary, #984532)); font: 650 14px/1.2 system-ui, sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; box-shadow: none; }
.password-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.caps-lock-hint { color: var(--portal-accent-deep, var(--primary, #984532)); font-size: 13px; font-weight: 500; }
.caps-lock-hint[hidden] { display: none; }
.access-form { display: grid; gap: 18px; }
.access-form input { min-height: 52px; }
.access-form .primary { min-height: 52px; font-size: 15px; letter-spacing: .02em; }
.login-portals { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 26px; padding: 4px; background: var(--portal-sand); border-radius: 12px; }
.login-portals a { min-height: 46px; padding: 10px 6px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 9px; font-size: 13px; line-height: 1.4; font-weight: 650; }
.login-portals a[aria-current=page] { background: var(--portal-paper); box-shadow: 0 2px 6px #37241f12; color: var(--portal-accent-deep); }
.portal-login-page .login-card { width: min(460px,100%); }
.portal-login-page .login-card > p { font-size: 15px; line-height: 1.6; }
.portal-login-page .login-card .login-first-access { margin: 18px 0; padding: 12px 14px; background: var(--portal-rose); border-radius: 10px; font-size: 13px; }
.login-support { display: grid; justify-items: center; gap: 4px; font-size: 13px; text-align: center; }
.login-support a { min-height: 44px; color: #226a48; font-size: 14px; }
.login-switch-links a { display: flex; align-items: center; min-height: 44px; font-size: 13px; }
.portal-mobile-header, .mobile-module-picker { display: none; }
.portal-page .data-form .form-field > label { font-size: 14px; }
.portal-page .data-form .form-field { gap: 8px; }

/* Bag typography: 1.2 × the normal 16/20/12px reading scale. */
.bag-detail-card { margin-bottom: 24px; font-size: 19.2px; }
.bag-detail-card .card-heading h2 { font-size: 28.8px; }
.bag-detail-card .card-heading p, .bag-detail-card .status-pill { font-size: 14.4px; line-height: 1.6; white-space: normal; }
.bag-detail-card .bag-summary-row { padding: 18px 0; margin: 0; border-top: 1px solid var(--portal-line); flex-wrap: wrap; }
.bag-detail-card .bag-summary-row strong { font-size: 28.8px; }
.bag-pieces { list-style: none; margin: 0; padding: 0; }
.bag-piece { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 22px 0; border-top: 1px solid var(--portal-line); }
.bag-piece-info { min-width: 0; }
.bag-piece h2 { margin: 6px 0 10px; font: 600 24px/1.3 var(--serif); overflow-wrap: anywhere; }
.bag-piece-sku { color: var(--portal-accent-deep); font: 600 14.4px/1.5 ui-monospace, monospace; overflow-wrap: anywhere; }
.bag-piece-date { margin: 0; color: var(--portal-ink-soft); font-size: 16px; line-height: 1.5; }
.bag-piece-date time { font-weight: 650; white-space: nowrap; }
.bag-piece-price { display: grid; gap: 4px; text-align: right; }
.bag-piece-price span { color: var(--portal-muted); font-size: 14.4px; }
.bag-piece-price strong { font-size: 19.2px; white-space: nowrap; }
.bag-card .item-info { display: grid; gap: 12px; }
.bag-card .item-info > div { flex-wrap: wrap; }
.bag-card .item-info h2 { font-size: 24px; }
.bag-card .item-info p, .bag-card .item-info small { font-size: 14.4px; margin: 0; }
.bag-card .item-info p strong { font-size: 24px; color: var(--portal-ink); }
.bag-card .status-pill { font-size: 12px; white-space: normal; }

@media screen and (max-width: 760px) {
  html { scroll-padding-top: 88px; scroll-padding-bottom: 110px; -webkit-text-size-adjust: 100%; }
  body { overflow-wrap: break-word; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea,
  .data-form input:not([type=checkbox]):not([type=radio]), .data-form select,
  .toolbar input, .pdv-page input, .pdv-page select { font-size: 16px !important; min-height: 48px; max-width: 100%; }
  input[type=checkbox], input[type=radio] { min-width: 20px; min-height: 20px; }
  input, select, textarea, button, summary, a { touch-action: manipulation; }
  input, select, textarea { scroll-margin-block: 100px; }
  .button, .primary, .secondary, .portal-button, .portal-button.compact, .back-link { min-height: 48px; }
  .back-link { display: flex; align-items: center; font-size: 14px; }
  .form-field > label, .data-form label { font-size: 14px; }
  .form-field { max-width: 100%; }
  .data-form, .forms-grid { grid-template-columns: minmax(0,1fr); }
  .data-form > *, .portal-main > *, .app-content > * { min-width: 0; }
  .portal-button { font-size: 13px; letter-spacing: .025em; }
  .portal-topbar h1 { overflow-wrap: anywhere; }
  .portal-topbar p { font-size: 15px; max-width: none; }
  .portal-page .eyebrow { font-size: 11px; }
  .welcome-copy p, .page-intro { font-size: 15px; }
  .welcome-actions > a:last-child { font-size: 14px; min-height: 44px; display: flex; align-items: center; }
  .summary-grid article > span:not(.summary-icon), .summary-grid article small,
  .portal-list small, .portal-quick-links small { font-size: 12px; }
  .summary-grid .balance-card a { font-size: 13px; min-height: 44px; }
  .portal-list strong, .portal-list b, .portal-quick-links strong { font-size: 15px; }
  .portal-list strong { white-space: normal; overflow-wrap: anywhere; }
  .card-heading p, .payout-next p, .item-info p, .portal-message { font-size: 14px; }
  .card-heading > a { min-height: 44px; font-size: 12px; white-space: normal; }
  .portal-list > div { grid-template-columns: 28px minmax(0,1fr); gap: 10px; }
  .portal-list b { grid-column: 2; }
  .item-sku, .status-pill { font-size: 12px; white-space: normal; }
  .responsive-table td { font-size: 15px; gap: 14px; flex-wrap: wrap; overflow-wrap: anywhere; }
  .responsive-table td::before { font-size: 12px; }
  .portal-footer { font-size: 12px; }
  .portal-sidebar nav a { min-width: 0; flex: 1; font-size: 11px; min-height: 62px; line-height: 1.15; overflow-wrap: normal; }
  .portal-sidebar nav { overflow: visible; align-items: stretch; }
  .portal-sidebar { padding-inline: 4px; }
  .portal-shell { padding-bottom: calc(95px + env(safe-area-inset-bottom)); }
  .portal-mobile-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
  .portal-mobile-header .portal-mobile-brand { margin: 0; min-width: 0; }
  .portal-mobile-account { display: flex; align-items: center; gap: 6px; }
  .portal-mobile-account form { margin: 0; }
  .portal-mobile-account button, .portal-mobile-account a { min-height: 44px; padding: 10px; background: transparent; border: 1px solid var(--portal-line); border-radius: 10px; color: var(--portal-ink); font-size: 14px; }
  .portal-main { padding-inline: max(16px, env(safe-area-inset-left)); }
  .portal-login-shell { min-height: 100svh; display: block; }
  .login-visual { min-height: 0; padding: 18px 20px; flex-direction: row; align-items: center; gap: 12px; }
  .login-visual .portal-brand { font-size: 21px; }
  .login-visual .portal-brand small { font-size: 10px; letter-spacing: .06em; }
  .login-visual .login-story { display: none; }
  .login-visual > .login-back { display: flex; align-items: center; min-height: 44px; font-size: 12px; text-align: right; }
  .login-form-panel { padding: 24px 20px max(28px,env(safe-area-inset-bottom)); }
  .portal-login-page .login-card { padding: 0; }
  .portal-login-page .login-card h2 { font-size: 32px; }
  .portal-login-page .login-card > p { margin-bottom: 20px; }
  .portal-login-page .login-card label { font-size: 14px; }
  .portal-login-page .login-card .portal-button { font-size: 15px; }
  .login-portals { margin-bottom: 22px; }
  .password-gate { margin-top: 22px; padding: 22px 18px; }
  .bag-detail-card { padding: 20px 16px; }
  .bag-piece { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .bag-piece-price { display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
  .bag-piece h2 { font-size: 24px; }

  /* Give the public entry points a full row instead of squeezing the brand. */
  .public-header { position: relative; grid-template-columns: minmax(0,1fr); padding: 14px 16px; }
  .public-header .header-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) 48px; align-items: stretch; width: 100%; gap: 8px; }
  .public-header .header-actions .button-chip { width: 100%; padding: 10px 7px; min-height: 48px; font-size: 12px; white-space: normal; gap: 5px; }
  .public-header .management-link { width: 100%; height: 100%; min-height: 48px; margin: 0; }
  .public-nav { display: none; }
  .public-footer { padding-inline: 20px; }
  .footer-social { flex-wrap: wrap; }
  .footer-social a { display: inline-flex; align-items: center; min-height: 44px; }
  .faq summary { min-height: 48px; }
  .portal-preview { grid-template-columns: 76px minmax(0,1fr); }
  .portal-preview > div { min-width: 0; }
  .preview-cards { grid-template-columns: 1fr; }
  .preview-cards b { min-width: 0; }

  /* Mobile ERP keeps the full content width; modules live inside the menu. */
  .app-rail { inset: 0 0 auto; width: 100%; height: 64px; padding: 8px 12px; flex-direction: row; gap: 8px; border-bottom: 1px solid var(--line); }
  .app-rail .rail-nav { display: none; }
  .app-rail .rail-logo { margin-right: auto; }
  .rail-menu-button { margin: 0; order: -1; }
  .app-rail .rail-settings { margin: 0; }
  .app-rail .rail-avatar { margin: 0; width: 44px; height: 44px; }
  .app-content, .app-content.menu-open { margin-left: 0; padding: 86px 16px 32px; min-width: 0; }
  .context-menu { top: 64px; left: 0; bottom: 0; width: min(360px,100vw); padding: 22px; overflow-y: auto; overscroll-behavior: contain; }
  .mobile-module-picker { display: grid; gap: 8px; margin-top: 20px; color: var(--ink); font-size: 14px; }
  .context-section { margin-top: 24px; }
  .context-section nav { margin-top: 14px; }
  .context-section nav a { min-height: 48px; font-size: 15px; }
  .context-footer { padding-top: 24px; }
  .context-account button { min-height: 44px; }
  .app-body .theme-picker { left: 12px !important; width: calc(100vw - 24px) !important; }
  .app-body .panel { max-width: 100%; }
  .app-body .panel:has(> table) { overflow-x: auto; }
  .toolbar, .panel-head { flex-wrap: wrap; }
  .app-body .form-actions { flex-wrap: wrap; }
  .app-body .dashboard-toolbar { padding: 18px 14px; }
  .app-body .dashboard-toolbar p { font-size: 14px; }
  .app-body .dashboard-filter { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; width: 100%; padding: 10px; }
  .app-body .dashboard-filter .period-switch { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1.4fr 1fr; order: 0; }
  .app-body .period-switch a { min-height: 48px; padding: 8px 5px; display: flex; align-items: center; justify-content: center; font-size: 14px; text-align: center; }
  .app-body .dashboard-filter label { order: 1; min-width: 0; font-size: 12px; }
  .app-body .dashboard-filter label select { width: 100%; }
  .app-body .dashboard-filter .day-select { grid-column: 1/-1; }
  .app-body .dashboard-filter .period-step { order: 2; width: 100%; height: 44px; }
  .app-body .dashboard-filter .period-update { order: 3; grid-column: 1/-1; width: 100%; font-size: 15px; }
  .app-body .sales-kpi > div { flex-wrap: wrap; }
  .app-body .sales-kpi span { font-size: 14px; }
  .app-body .sales-kpi > small { font-size: 12px; }
  .login-page .login-shell { width: 100%; min-height: 100svh; display: block; padding: 24px 20px; }
  .login-page .login-card { width: 100%; padding: 0; }
  .login-page .login-showcase { margin-top: 28px; padding: 24px 0 0; }
  .login-page .login-showcase > div:first-child { display: none; }
}

@media screen and (min-width: 761px) and (max-width: 1100px) {
  .app-body .dashboard-toolbar { flex-wrap: wrap; }
  .app-body .dashboard-filter { width: 100%; min-width: 0; flex-wrap: wrap; }
  .app-body .dashboard-filter .period-switch { flex-basis: 100%; }
  .app-body .dashboard-filter label { flex: 1; min-width: 0; }
  .app-body .dashboard-filter select { width: 100%; }
}

@media screen and (max-width: 360px) {
  .app-body .sales-kpis { grid-template-columns: minmax(0,1fr); }
  .login-visual { padding-inline: 16px; }
  .login-visual .portal-brand { gap: 8px; font-size: 19px; }
  .login-form-panel { padding-inline: 16px; }
  .portal-sidebar nav a { font-size: 10px; }
  .portal-mobile-brand { font-size: 17px; }
}