/* HomelandFlow — minimal, functional stylesheet */

:root {
  --brand:       #1e4d5e;
  --brand-light: #2c6e85;
  /* Text-role variants: identical to --brand/--brand-light in light mode
     (already 8:1+ on white), but lightened in dark mode so brand-colored
     *text* stays legible on dark surfaces. --brand/--brand-light themselves
     stay fixed dark-teal in both themes because they also back solid,
     white-on-brand surfaces (topnav, thead, primary buttons) that must not
     flip. */
  --brand-text:       var(--brand);
  --brand-light-text: var(--brand-light);
  --accent:      #d4703a;
  --accent-h:    #b25726;
  --bg:          #f5f6f8;
  --surface:     #ffffff;
  --surface-alt: #f0f0f0;
  --border:      #d9dde3;
  --text:        #1a1e23;
  --muted:       #6b7280;
  --success:     #1a7f4b;
  --success-bg:  #d1f5e4;
  --warning:     #92620a;
  --warning-bg:  #fef3cd;
  --danger:      #9b2335;
  --danger-bg:   #fde8ec;
  --info:        #1a4d7e;
  --info-bg:     #d6eaf8;
  --on-strong:   #ffffff;
  --theme-color: #1e4d5e;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius: var(--radius-md);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.14);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.18);
  --shadow: var(--shadow-sm);
  --tap: 44px;
  --nav-h: 52px;

  --topnav-link: rgba(255,255,255,.82);
  --topnav-link-muted: rgba(255,255,255,.75);
  --topnav-link-soft: rgba(255,255,255,.9);
  --topnav-active-bg: rgba(255,255,255,.15);
  --topnav-control-bg: rgba(255,255,255,.1);
  --topnav-control-border: rgba(255,255,255,.25);
  --topnav-control-hover: rgba(255,255,255,.22);
  --topnav-search-bg: rgba(255,255,255,.12);
  --topnav-search-border: rgba(255,255,255,.22);
  --topnav-search-focus-bg: rgba(255,255,255,.18);
  --topnav-search-focus-border: rgba(255,255,255,.4);
  --topnav-search-placeholder: rgba(255,255,255,.5);
  --topnav-shadow: 0 2px 6px rgba(0,0,0,.18);
  --backdrop: rgba(0,0,0,.38);
  --dialog-backdrop: rgba(0,0,0,.35);
  --focus-ring: rgba(44,110,133,.15);
  --table-row-hover: #f0f4f7;
  --badge-neutral-bg: #e9ecef;
  --badge-sent-bg: #e8d5f5;
  --badge-sent-text: #6a1b9a;
  --alert-warning-border: #e8a82a;
  --alert-info-border: #3a82c4;
  --text-muted-strong: #4b5563;
  --workflow-contractor: #7b5e28;
  --workflow-bookkeeping: #4b6b3c;
  --workflow-creative: #8b3f7a;
  --workflow-delivery: #256a73;
  --workflow-partner: #6a4b9a;
  --workflow-status-bg: #eef2f5;
  --workflow-line: #d7dde4;
  --workflow-node-border: #cbd3dc;
  --workflow-complete-mix: #ffffff;
  --training: #7c3aed;
  --payment-unpaid-bg: #fef2f2;
  --payment-unpaid-border: #fecaca;
  --payment-partial-bg: #fffbeb;
  --payment-partial-border: #fde68a;
  --payment-paid-bg: #f0fdf4;
  --payment-paid-border: #bbf7d0;
  --toast-undo-bg: #1f2937;
  --toast-undo-text: #f9fafb;
  --readiness-pass-bg: #f0faf0;
  --readiness-pass-text: #1a6b2a;
  --readiness-pass-icon: #2a9a44;
  --readiness-warn-bg: #fffbe6;
  --readiness-warn-text: #7a5c00;
  --readiness-warn-icon: #e0a000;
  --readiness-block-bg: #fff0f0;
  --readiness-block-text: #8b1a1a;
  --readiness-block-icon: #cc2222;
  --credit-active-bg: #d4edda;
  --credit-active-text: #155724;
  --credit-warning-bg: #fff3cd;
  --credit-warning-text: #856404;
  --credit-hold-bg: #f8d7da;
  --credit-hold-text: #721c24;
  --credit-blocked-bg: #d6d6d6;
  --credit-blocked-text: #333333;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f171b;
    --surface: #162126;
    --surface-alt: #1c2a30;
    --border: #2d3a40;
    --text: #edf3f5;
    --muted: #a6b3ba;
    --success: #8be1af;
    --success-bg: #173828;
    --warning: #f3cf7a;
    --warning-bg: #3b2f12;
    --danger: #f0a0ad;
    --danger-bg: #3c1820;
    --info: #9dc9ed;
    --info-bg: #16324a;
    --theme-color: #102a34;
    --brand-text: #7fb8c9;
    --brand-light-text: #93c8d6;
    --text-muted-strong: #a6b3ba;
    --table-row-hover: #1c2a30;
    --badge-neutral-bg: #2b363c;
    --badge-sent-bg: #342845;
    --badge-sent-text: #d9b6f5;
    --workflow-status-bg: #243138;
    --workflow-line: #3a4850;
    --workflow-node-border: #4a5a63;
    --workflow-complete-mix: #162126;
    --payment-unpaid-bg: #3c1820;
    --payment-unpaid-border: #70404a;
    --payment-partial-bg: #3b2f12;
    --payment-partial-border: #725f28;
    --payment-paid-bg: #173828;
    --payment-paid-border: #34664a;
    --readiness-pass-bg: #173828;
    --readiness-pass-text: #a2e6bd;
    --readiness-pass-icon: #8be1af;
    --readiness-warn-bg: #3b2f12;
    --readiness-warn-text: #f3cf7a;
    --readiness-warn-icon: #ffd36c;
    --readiness-block-bg: #3c1820;
    --readiness-block-text: #f0a0ad;
    --readiness-block-icon: #ff9dac;
    --credit-active-bg: #173828;
    --credit-active-text: #a2e6bd;
    --credit-warning-bg: #3b2f12;
    --credit-warning-text: #f3cf7a;
    --credit-hold-bg: #3c1820;
    --credit-hold-text: #f0a0ad;
    --credit-blocked-bg: #2b363c;
    --credit-blocked-text: #d7e0e4;
  }
}

:root[data-theme="dark"] {
  --bg: #0f171b;
  --surface: #162126;
  --surface-alt: #1c2a30;
  --border: #2d3a40;
  --text: #edf3f5;
  --muted: #a6b3ba;
  --success: #8be1af;
  --success-bg: #173828;
  --warning: #f3cf7a;
  --warning-bg: #3b2f12;
  --danger: #f0a0ad;
  --danger-bg: #3c1820;
  --info: #9dc9ed;
  --info-bg: #16324a;
  --theme-color: #102a34;
  --brand-text: #7fb8c9;
  --brand-light-text: #93c8d6;
  --text-muted-strong: #a6b3ba;
  --table-row-hover: #1c2a30;
  --badge-neutral-bg: #2b363c;
  --badge-sent-bg: #342845;
  --badge-sent-text: #d9b6f5;
  --workflow-status-bg: #243138;
  --workflow-line: #3a4850;
  --workflow-node-border: #4a5a63;
  --workflow-complete-mix: #162126;
  --payment-unpaid-bg: #3c1820;
  --payment-unpaid-border: #70404a;
  --payment-partial-bg: #3b2f12;
  --payment-partial-border: #725f28;
  --payment-paid-bg: #173828;
  --payment-paid-border: #34664a;
  --readiness-pass-bg: #173828;
  --readiness-pass-text: #a2e6bd;
  --readiness-pass-icon: #8be1af;
  --readiness-warn-bg: #3b2f12;
  --readiness-warn-text: #f3cf7a;
  --readiness-warn-icon: #ffd36c;
  --readiness-block-bg: #3c1820;
  --readiness-block-text: #f0a0ad;
  --readiness-block-icon: #ff9dac;
  --credit-active-bg: #173828;
  --credit-active-text: #a2e6bd;
  --credit-warning-bg: #3b2f12;
  --credit-warning-text: #f3cf7a;
  --credit-hold-bg: #3c1820;
  --credit-hold-text: #f0a0ad;
  --credit-blocked-bg: #2b363c;
  --credit-blocked-text: #d7e0e4;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 15px;
  overflow-x: hidden;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
}

/* ── Top navigation ── */

.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--brand);
  color: var(--on-strong);
  display: flex;
  align-items: center;
  padding: 0 .75rem;
  gap: .5rem;
  box-shadow: var(--topnav-shadow);
}

.topnav .brand {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--on-strong);
  text-decoration: none;
  letter-spacing: .03em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topnav .brand span { color: var(--accent); }

.nav-links {
  display: none;
  align-items: center;
  gap: .25rem;
  min-width: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: .35rem .65rem;
  border-radius: var(--radius);
  color: var(--topnav-link);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.nav-link:hover,
.nav-link:focus-visible {
  background: var(--topnav-control-hover);
  color: var(--topnav-link-soft);
}

.nav-link.active {
  background: var(--topnav-active-bg);
  color: var(--on-strong);
  font-weight: 600;
}

.nav-user {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
}

.nav-user .username {
  color: var(--topnav-link-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.nav-user .role-badge {
  background: var(--topnav-active-bg);
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .78rem;
  color: var(--topnav-link-soft);
}

/* Below tablet, username/role are dropped (identity is reachable via
   Settings) and Settings/Logout collapse to icon-only to keep the topnav
   from overflowing narrow phone widths — see the tablet-and-up tier at the
   bottom of this file where both are restored. */
.nav-user .username, .nav-user .role-badge { display: none; }

.nav-user-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn-logout {
  background: var(--topnav-control-bg);
  border: 1px solid var(--topnav-control-border);
  color: var(--on-strong);
  min-height: var(--tap);
  padding: .3rem .75rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .85rem;
  transition: background .15s;
}

.btn-logout:hover { background: var(--topnav-control-hover); }

.nav-user .btn-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: var(--tap);
  padding: .3rem .75rem;
  border-radius: var(--radius);
  background: transparent;
  border: none;
  color: var(--on-strong);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.nav-user .btn-logout:hover,
.nav-user .btn-logout:focus-visible {
  background: var(--topnav-control-hover);
  filter: none;
}

.nav-user .form-inline {
  display: flex;
  margin: 0;
}

.nav-user .nav-icon {
  width: var(--tap);
  padding-inline: 0;
  background: transparent;
  border: none;
}

.nav-user sup {
  min-width: 1rem;
  margin-left: -.15rem;
  padding: .08rem .25rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-strong);
  font-size: .68rem;
  line-height: 1;
  text-align: center;
}


/* ── Hamburger nav toggle (shown on mobile, hidden at tablet+) ──
   Selector is `button.nav-toggle`, not just `.nav-toggle`: this button also
   matches the generic `button[type="button"]` reset below (a tag+attribute
   selector, which outranks a plain class), so a bare class selector here
   would silently lose the display/font-size properties to that rule
   regardless of source order. Tying its specificity avoids that.
*/
button.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--on-strong);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}

button.nav-toggle:hover { background: var(--topnav-control-hover); }

/* ── Page layout ── */

.page { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; overflow-x: auto; }

/* Layout chrome for _layouts/error.html -- lives here (not error.css) since
   it's the shared error layout wrapper, not error-page content. */
.err-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7);
  background: var(--bg);
}

/* ── App layout (sidebar + main content) ── */

.app-layout {
  display: flex;
  min-height: calc(100vh - var(--nav-h));
}

/* Mobile-first: an off-canvas drawer, opened by #nav-toggle (see forms.js),
   closed via the backdrop, Escape, or clicking a link. Becomes a persistent
   sticky rail at the tablet-and-up tier (bottom of this file). */
.sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  width: 280px;
  max-width: 82vw;
  height: 100vh;
  z-index: 200;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: .5rem 0 2rem;
  overflow-y: auto;
  transition: left .22s ease;
}

.sidebar.open { left: 0; }

.sidebar-section { margin-bottom: .25rem; }

.sidebar-section-label {
  display: block;
  padding: .5rem 1rem .2rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

/* Collapsible sidebar sections (native <details>/<summary> — no JS) */
.sidebar-section-group { margin-bottom: .25rem; }

.sidebar-section-group > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem 1rem;
  font-size: .875rem;
}

.sidebar-section-group > summary::-webkit-details-marker { display: none; }

.sidebar-section-group > summary::before {
  content: "▸";
  display: inline-block;
  font-size: .65rem;
  transition: transform .15s ease;
}

.sidebar-section-group[open] > summary::before { transform: rotate(90deg); }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--tap);
  padding: .4rem 1rem;
  font-size: .875rem;
  color: var(--text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .12s, border-color .12s, color .12s;
}

.sidebar-link:hover { background: var(--bg); color: var(--brand-text); }

.sidebar-link.active {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border-left-color: var(--brand);
  color: var(--brand-text);
  font-weight: 600;
}

.app-main {
  flex: 1;
  min-width: 0;
  padding: 1rem .75rem 2rem;
  overflow-x: auto;
}

/* ── Mobile nav backdrop (shown while the drawer is open) ── */

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  z-index: 199;
}

.nav-backdrop.open { display: block; }

.surface,
.attention-card,
.card,
.form-card,
.section,
.confirm-dialog,
.login-card,
.sf-section,
.sf-auth-card,
.err-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ── Inline form utility ── */

.form-inline { display: inline; }

/* ── Button group utility ── */

.btn-group { display: flex; gap: .5rem; align-items: center; }

/* ── Compact text input (for inline table actions) ── */

.input-sm { width: 150px; font-size: .85rem; }

/* ── Top nav search ── */

.topnav-search {
  display: none;
  flex: 1;
  max-width: 280px;
}

.topnav-search-input {
  width: 100%;
  background: var(--topnav-search-bg);
  border: 1px solid var(--topnav-search-border);
  border-radius: var(--radius);
  color: var(--on-strong);
  padding: .32rem .7rem;
  font-size: .85rem;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}

.topnav-search-input::placeholder { color: var(--topnav-search-placeholder); }

.topnav-search-input:focus {
  outline: none;
  background: var(--topnav-search-focus-bg);
  border-color: var(--topnav-search-focus-border);
}

/* ── Sortable table headers ── */

.th-sort {
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.th-sort a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.th-sort .sort-icon { font-size: .75em; opacity: .55; }
.th-sort.sort-asc .sort-icon::after  { content: " ▲"; }
.th-sort.sort-desc .sort-icon::after { content: " ▼"; }
.th-sort:not(.sort-asc):not(.sort-desc) .sort-icon::after { content: " ⇅"; }

/* ── Active filter chips ── */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .5rem 1.25rem;
  align-items: center;
  font-size: .85rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--info-bg);
  color: var(--info);
  border-radius: 999px;
  padding: .18rem .6rem;
  font-size: .8rem;
  font-weight: 500;
  text-decoration: none;
}

.filter-chip-remove {
  color: var(--info);
  font-size: .9em;
  text-decoration: none;
  line-height: 1;
}

/* ── Dashboard attention cards ── */

.attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.attention-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.attention-card-count {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.attention-card-count.warn { color: var(--warning); }
.attention-card-count.danger { color: var(--danger); }
.attention-card-count.ok { color: var(--success); }

.attention-card-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 600;
}

.attention-card-action {
  margin-top: .5rem;
}

/* ── Activity feed ── */

.activity-feed { list-style: none; }

.activity-row {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .875rem;
}

.activity-row:last-child { border-bottom: none; }

.activity-time {
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
}

.activity-text { flex: 1; }

/* ── Status timeline ── */

.status-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-row {
  display: flex;
  gap: .75rem;
  padding: .4rem 0;
  font-size: .875rem;
  position: relative;
}

.timeline-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: .55rem;
  top: 1.4rem;
  bottom: -.4rem;
  width: 2px;
  background: var(--border);
}

.timeline-dot {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--surface);
  flex-shrink: 0;
  margin-top: .1rem;
  box-shadow: 0 0 0 2px var(--border);
}

.timeline-dot.current { background: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }

.timeline-content { flex: 1; }

.timeline-action { font-weight: 600; }

.timeline-meta { font-size: .78rem; color: var(--muted); }

.page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.page-header h1 { font-size: 1.5rem; font-weight: 700; }

.page-header-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ── Breadcrumb ── */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  /* --muted alone is 4.47:1 here — a hair under the 4.5:1 minimum for this
     text size (only ever caught once a breadcrumb-bearing page got an a11y
     scan; --text-muted-strong is the same fix already used for
     .onboarding-banner .text-muted, now also given a dark-mode value). */
  color: var(--text-muted-strong);
  margin-bottom: .75rem;
}

.breadcrumb a { color: var(--brand-light-text); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--border); }


.flash-area {
  max-width: 1080px;
  margin: 1rem auto 0;
  padding: 0 1.25rem;
}

.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .5rem 1rem;
  background: var(--warning-bg);
  color: var(--warning);
  border-bottom: 1px solid var(--alert-warning-border);
  font-size: .9rem;
}

/* ── Flash alerts ── */

.alert {
  padding: .7rem 1rem;
  border-radius: var(--radius);
  font-size: .9rem;
  margin-bottom: .5rem;
  border-left: 4px solid;
}

.alert-success { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.alert-warning  { background: var(--warning-bg); color: var(--warning); border-color: var(--alert-warning-border); }
.alert-error, .alert-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.alert-info     { background: var(--info-bg); color: var(--info); border-color: var(--alert-info-border); }

/* ── Toast notifications ── */

.toast-stack {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  z-index: 500;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: .875rem;
  max-width: 360px;
  pointer-events: auto;
  animation: toast-in .2s ease;
  transition: opacity .3s, transform .3s;
}

.toast.toast-hiding {
  opacity: 0;
  transform: translateY(-.5rem);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.toast-success { background: var(--success); color: var(--on-strong); }
.toast-info    { background: var(--brand); color: var(--on-strong); }
.toast-warning { background: var(--warning); color: var(--on-strong); }
.toast-danger,
.toast-error   { background: var(--danger); color: var(--on-strong); }

.toast-close {
  background: none;
  border: none;
  color: inherit;
  opacity: .7;
  cursor: pointer;
  font-size: 1.1em;
  padding: 0;
  margin-left: auto;
  line-height: 1;
}

.toast-close:hover { opacity: 1; }

/* ── Onboarding banner ── */

.onboarding-banner {
  background: var(--info-bg);
  border-bottom: 2px solid var(--info);
  padding: .6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .875rem;
}

.onboarding-banner strong { color: var(--info); }

/* .text-muted's default (--muted on --info-bg) is 3.9:1, below WCAG AA's
   4.5:1 — override locally rather than darkening --muted everywhere else
   it's already passing (white/light-gray backgrounds). */
.onboarding-banner .text-muted { color: var(--text-muted-strong); }

.onboarding-progress {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.onboarding-step {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--info);
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 700;
  color: var(--info);
}

.onboarding-step.done {
  background: var(--info);
  color: var(--on-strong);
}

/* ── Density toggle ── */

[data-density="compact"] table td,
[data-density="compact"] table th { padding: .35rem .75rem; }

[data-density="compact"] .section-body { padding: .75rem; }

[data-density="compact"] .card { padding: .75rem 1rem; }

[data-density="compact"] .page,
[data-density="compact"] .app-main { padding-top: 1rem; padding-bottom: 2rem; }

/* ── Dashboard cards ── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Tighter tile width for compact KPI/attention-card grids (small numeric
   stat tiles, not full .card content) -- pair with .card-grid. */
.card-grid-compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.card h2 { font-size: 1.05rem; font-weight: 700; color: var(--brand-text); }
.card p  { font-size: .88rem; color: var(--muted); flex: 1; }

/* A <a class="card"> is a whole-card link (e.g. a dashboard summary card
   that opens its list) -- undo the browser's link underline/color so it
   reads like the plain (non-link) card, with a hover cue instead. */
a.card { text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s; }
a.card:hover { box-shadow: var(--shadow-lg); border-color: var(--brand-light); }

.card .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}

.card .stat { font-size: 1.6rem; font-weight: 700; color: var(--text); }
.card .stat-label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.card-head,
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.card-body {
  display: grid;
  gap: .75rem;
}

.kpi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .9rem 1rem;
  display: grid;
  gap: .25rem;
}

.kpi-label,
.ws-customer-label,
.err-status {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.kpi-value {
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
}

/* ── Buttons ── */

.btn, button[type="submit"], button[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: var(--tap);
  padding: .45rem .95rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: .9rem;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  transition: filter .15s, opacity .15s;
  white-space: nowrap;
}

.btn:hover, button[type="submit"]:hover { filter: brightness(.92); }
.btn:active { filter: brightness(.85); }

/* btn-primary is the canonical primary action app-wide (what page_header's
   and empty_state's action slots default to) — btn-accent is reserved for a
   single emphasized marketing/positive CTA elsewhere on a page, not a page
   header's main action. Existing pages using btn-accent as their header CTA
   predate this decision; retrofitted to btn-primary module-by-module in the
   Phase 5/6 rollout, not app-wide in one pass. */
.btn-primary, button[type="submit"] {
  background: var(--brand);
  color: var(--on-strong);
}

.btn-accent { background: var(--accent-h); color: var(--on-strong); }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-danger  { background: var(--danger); color: var(--on-strong); }
.btn-ghost   { background: transparent; color: var(--brand-light-text); border: 1px solid var(--border); }
.btn-sm      { min-height: auto; padding: .3rem .65rem; font-size: .82rem; }

/* ── Forms ── */

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 520px;
  box-shadow: var(--shadow);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

label, .field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .9rem;
  font-size: .9rem;
  font-weight: 500;
}

label .hint { font-size: .8rem; color: var(--muted); font-weight: 400; }

.field-hint,
.section-hint,
.form-hint {
  display: block;
  font-size: .8rem;
  color: var(--muted);
  margin-top: .2rem;
}

.field-msg.error {
  display: block;
  color: var(--danger);
  font-size: .8rem;
  margin-top: .2rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-light);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

input[type="checkbox"] { width: auto; margin-right: .4rem; accent-color: var(--brand); }

.form-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }

/* ── Tables ── */

.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: .9rem;
}

thead th {
  background: var(--brand);
  color: var(--on-strong);
  font-weight: 600;
  padding: .65rem 1rem;
  text-align: left;
  white-space: nowrap;
}

thead th:first-child { border-radius: var(--radius) 0 0 0; }
thead th:last-child  { border-radius: 0 var(--radius) 0 0; }

tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--table-row-hover); }

td { padding: .6rem 1rem; vertical-align: middle; }
td a { color: var(--brand-light-text); text-decoration: none; }
td a:hover { text-decoration: underline; }

.table-empty { text-align: center; color: var(--muted); padding: 2rem !important; font-style: italic; }

/* ── Responsive read-only table (any table-wrap needing the phone card
   collapse) ── Same mobile-first card-collapse technique as
   .line-item-editor above, for plain read-only tables (PO/goods-order item
   tables, status-history tables): add class="responsive-table" alongside
   table-wrap and a data-label on each <td>. See
   docs/plans/completed/unify-order-creation.md Phase 4. */
.responsive-table table, .responsive-table thead, .responsive-table tbody,
.responsive-table tr, .responsive-table th, .responsive-table td { display: block; }

.responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.responsive-table tbody tr {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .6rem .75rem;
  margin-bottom: .75rem;
}

.responsive-table td {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  border: none;
}

.responsive-table td[data-label]::before {
  content: attr(data-label);
  flex: 0 0 40%;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
}

.responsive-table tfoot tr { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; border: none; }
.responsive-table tfoot td { display: block; padding: .3rem 0; }

/* ── Status badges ── */

.badge {
  display: inline-block;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

.badge-draft, .badge-pending   { background: var(--badge-neutral-bg); color: var(--muted); }
.badge-confirmed, .badge-approved { background: var(--info-bg); color: var(--info); }
.badge-completed, .badge-received, .badge-active { background: var(--success-bg); color: var(--success); }
.badge-cancelled, .badge-void  { background: var(--danger-bg); color: var(--danger); }
.badge-partial                 { background: var(--warning-bg); color: var(--warning); }
.badge-sent                    { background: var(--badge-sent-bg); color: var(--badge-sent-text); }

.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-error, .badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-muted { background: var(--badge-neutral-bg); color: var(--muted); }
.badge-discount { margin-left: .35rem; }

/* ── Section headers ── */

.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--border);
  gap: .75rem;
  flex-wrap: wrap;
}

.section-head h2 { font-size: 1rem; font-weight: 700; }
.section-body    { padding: 1.25rem; }

/* ── Category tree (inventory/categories.html) ── */

.category-child-name { padding-left: 2rem; }

/* Toggled open via toggleEdit()'s classList.toggle('is-open') -- a hidden
   inline-edit row directly under its parent/child row. */
.category-edit-row { display: none; background: var(--surface-alt); }
.category-edit-row.is-open { display: table-row; }
.category-edit-form { padding: .5rem 0; }
.category-edit-name { max-width: 200px; }
.category-edit-sort { width: 80px; }

/* ── Detail page layout ── */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}


.detail-field { margin-bottom: .6rem; }
.detail-field dt { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.detail-field dd { font-size: .95rem; font-weight: 500; margin: .1rem 0 0; }

.details-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .35rem 1rem;
  margin: 0 0 1rem;
}

.details-grid dt {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.details-grid dd { margin: 0; }

/* ── Inline form row (table actions) ── */

.row-actions { display: flex; gap: .4rem; align-items: center; }

/* ── Utility ── */

/* Visually hides content while keeping it in the accessibility tree — use
   for a screen-reader-only label, e.g. an otherwise-empty <th>. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-muted { color: var(--muted); }
.text-xs { font-size: .8rem; }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.fw-600 { font-weight: 600; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.gap-1 { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.nowrap { white-space: nowrap; }

/* Single-line ellipsis truncation for free-text table cells (order summary,
   delivery package, document title, ...) -- pair with a `title="..."`
   attribute on the same element so the full text is still available on
   hover/focus. Without this, one long value blows out every row's height
   and misaligns the whole table (docs/references/best_practices/ui_ux.md
   §30.4 review of the B2B dashboard). */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }

/* Full-width action button (POS action rail). .btn is already
   inline-flex + justify-content:center, so width is the only thing a
   full-width variant needs -- no display/text-align override required. */
.btn-block { width: 100%; }
.uppercase { text-transform: uppercase; }
.text-sm { font-size: .85rem; }
/* A checkbox + its label text, laid out as a row instead of label's default
   column stack — the repeated inline style on every checkbox field in the
   inventory product forms. */
.field-checkbox { flex-direction: row; align-items: center; gap: .5rem; padding-top: 1.6rem; }


.action-group {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.pagination {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.recovery-code-list {
  display: grid;
  gap: .35rem;
  list-style: none;
  margin: 1rem 0;
}

.checkbox-label { flex-direction: row; align-items: center; gap: .5rem; }
.row-check { width: auto; margin: 0; }
hr { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* ── Confirm dialog ── */

.confirm-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem 1.5rem 1.25rem;
  max-width: 420px;
  width: calc(100vw - 2rem);
}

.confirm-dialog::backdrop {
  background: var(--dialog-backdrop);
  backdrop-filter: blur(2px);
}

.confirm-dialog-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .6rem;
}

.confirm-dialog-body {
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  line-height: 1.55;
}

.confirm-dialog-actions {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
}

/* ── Sticky form actions ── */

.form-sticky-actions {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: .75rem 1.25rem;
  margin: 0 -1.5rem -1.5rem;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  z-index: 10;
}

/* ── Field error ── */

.field-error {
  display: block;
  color: var(--danger);
  font-size: .8rem;
  margin-top: .2rem;
}

/* ── Button loading spinner ── */

.btn-loading {
  opacity: .7;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-loading::after {
  content: "";
  display: inline-block;
  width: .85em;
  height: .85em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
  margin-left: .4em;
  vertical-align: middle;
}

@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── Empty state ── */

.empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--muted);
}

.empty-state-heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .4rem;
}

.empty-state-desc {
  font-size: .88rem;
  margin-bottom: 1rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.empty-state-actions {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
}


/* ── Credit status badges ────────────────────────────────────────────────── */
.badge-credit-active  { background: var(--credit-active-bg); color: var(--credit-active-text); }
.badge-credit-warning { background: var(--credit-warning-bg); color: var(--credit-warning-text); }
.badge-credit-hold    { background: var(--credit-hold-bg); color: var(--credit-hold-text); }
.badge-credit-blocked { background: var(--credit-blocked-bg); color: var(--credit-blocked-text); }

/* ── Tablet-and-up tier ──────────────────────────────────────────────────
   Everything above this point is the mobile (phone) base. This is the one
   consolidated breakpoint that restores the persistent-rail/multi-column
   desktop-like layout — tablets are this app's primary device, so this tier
   covers both tablet and desktop; nothing here needs a distinct third tier
   since .app-main/.page already cap width gracefully at very wide viewports.
   Placed at the end of the file so every override in here reliably wins
   over its mobile-first base rule regardless of that rule's position above.
*/
@media (min-width: 768px) {
  .topnav { padding: 0 1.25rem; gap: 1.5rem; }
  .nav-links { display: flex; }
  .nav-user { gap: .75rem; }
  .nav-user .username, .nav-user .role-badge { display: inline-block; }
  .nav-user-label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 0 0 .35rem;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    border: 0;
  }

  button.nav-toggle { display: none; }

  .sidebar {
    position: sticky;
    top: var(--nav-h);
    left: auto;
    width: 220px;
    max-width: none;
    height: calc(100vh - var(--nav-h));
  }

  .app-main { padding: 1.5rem 1.25rem 3rem; max-width: 900px; }

  .topnav-search { display: block; }

  .page-header { flex-direction: row; align-items: baseline; }

  .form-row { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr 1fr; }

  .responsive-table table, .responsive-table thead, .responsive-table tbody,
  .responsive-table tr, .responsive-table th, .responsive-table td { display: revert; }
  .responsive-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .responsive-table tbody tr { border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0; margin-bottom: 0; }
  .responsive-table td { display: table-cell; }
  .responsive-table td[data-label]::before { content: none; }
  .responsive-table tfoot tr { display: table-row; }
  .responsive-table tfoot td { display: table-cell; }
}