/* BeanTeam Hub shares Blackoffice's Kanit type, blue palette and compact workspace. */
:root {
  color-scheme: light;
  font-family: "Kanit", "Noto Sans Thai", Tahoma, sans-serif;
  font-synthesis: none;
  font-size: 16px;
  --radius: 12px;
  --background: oklch(0.977 0.003 260);
  --foreground: oklch(0.2 0.01 270);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.488 0.243 264.376);
  --primary-foreground: oklch(0.97 0.014 254.604);
  --primary-text: var(--primary);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.95 0.005 270);
  --muted-foreground: oklch(0.5 0.02 275);
  --accent: oklch(0.955 0.005 270);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.91 0.006 270);
  --input: oklch(0.9 0.006 270);
  --ring: oklch(0.488 0.243 264.376);
  --chart-1: oklch(0.809 0.105 251.813);
  --chart-2: oklch(0.623 0.214 259.815);
  --chart-3: oklch(0.546 0.245 262.881);
  --chart-4: oklch(0.488 0.243 264.376);
  --chart-5: oklch(0.424 0.199 265.638);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.546 0.245 262.881);
  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.708 0 0);
  --blue: #2563eb;
  --violet: #7c3aed;
  --emerald: #059669;
  --amber: #d97706;
  --rose: #e11d48;
  --slate: #475569;
  --success-text: #047857;
  --warning-text: #92400e;
  --danger-text: #be123c;
  --surface-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px -16px rgb(0 0 0 / 12%);
  --soft-primary: color-mix(in srgb, var(--primary) 8%, var(--card));
  --soft-muted: color-mix(in srgb, var(--muted) 40%, var(--card));
  --soft-border: color-mix(in srgb, var(--border) 70%, var(--card));
  /* Compatibility aliases for the Hub's existing component classes. */
  --ink: var(--foreground);
  --line: var(--border);
  --teal: var(--primary);
  --teal-soft: var(--soft-primary);
  --nav: var(--sidebar);
}
html.dark {
  color-scheme: dark;
  --background: oklch(0.15 0.008 270);
  --foreground: oklch(0.96 0.005 270);
  --card: oklch(0.205 0.01 270);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(56.294% 0.19767 258.141);
  --primary-foreground: #fff;
  --primary-text: oklch(0.65 0.214 259.815);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.623 0.214 259.815);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.623 0.214 259.815);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.439 0 0);
  --blue: #60a5fa;
  --violet: #a78bfa;
  --emerald: #34d399;
  --amber: #fbbf24;
  --rose: #fb7185;
  --slate: #94a3b8;
  --success-text: #6ee7b7;
  --warning-text: #fcd34d;
  --danger-text: #fda4af;
  --surface-shadow: none;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent; }
body { margin: 0; background: var(--background); color: var(--foreground); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
button, summary { cursor: pointer; }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--primary-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid color-mix(in srgb, var(--ring) 35%, transparent); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--primary) 20%, transparent); }
svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1 { margin: 0; color: var(--foreground); font-size: 22px; font-weight: 500; line-height: 1.4; }
h2 { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; }
h3 { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; }
p { line-height: 1.7; }

/* Workspace shell */
.app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100dvh; transition: grid-template-columns .2s; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 40; display: flex; flex-direction: column; padding: 16px 8px 12px; background: var(--sidebar); color: var(--sidebar-foreground); border-right: 1px solid var(--sidebar-border); transition: width .2s, transform .2s; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px; margin: 0 0 14px; border: 1px solid var(--sidebar-border); border-radius: 12px; background: color-mix(in srgb, var(--muted) 40%, var(--sidebar)); color: var(--foreground); }
.brand-icon { flex: none; display: grid; place-items: center; width: 52px; height: 44px; border-radius: 8px; background: linear-gradient(135deg, #334155, #0f172a); color: #fff; font-size: 26px; font-weight: 600; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); }
.brand-icon svg { width: 26px; height: 26px; }
.brand-copy, .brand-name { min-width: 0; }
.brand-copy { flex: 1; }
.brand-copy > strong { display: block; font-size: 15px; font-weight: 600; }
.brand-name { font-size: 15px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.brand-name strong { font-weight: 400; }
.brand small { display: block; color: var(--muted-foreground); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.brand > svg { margin-left: auto; width: 16px; color: var(--muted-foreground); }
.workspace-pill { display: flex; align-items: center; gap: 8px; margin: 0 4px 12px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted-foreground); font-size: 12px; }
.workspace-pill span:first-child { display: grid; place-items: center; }
.workspace-pill svg { width: 16px; height: 16px; }
.workspace-pill .live-dot { margin-left: auto; }
.sidebar nav { min-height: 0; overflow: auto; flex: 1; }
.nav-group + .nav-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.nav-label { margin-top: 12px; padding: 12px 12px 6px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; }
.nav-label:first-child { margin-top: 0; padding-top: 2px; border: 0; }
.nav-link { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; margin: 1px 0; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: color-mix(in srgb, var(--foreground) 80%, transparent); text-align: left; font-size: 14px; font-weight: 400; transition: background-color .15s, color .15s; }
.nav-link:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--foreground); }
.nav-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 6px; background: color-mix(in srgb, var(--tone, var(--blue)) 10%, transparent); color: var(--tone, var(--blue)); }
.nav-link svg { width: 18px; height: 18px; }
/* The drawer menu on tablets and phones keeps 44px touch targets. */
@media (max-width: 1023px) { .nav-link { min-height: 44px; } }
.tone-blue { --tone: var(--blue); }
.tone-violet { --tone: var(--violet); }
.tone-emerald { --tone: var(--emerald); }
.tone-amber { --tone: var(--amber); }
.tone-rose { --tone: var(--rose); }
.tone-slate { --tone: var(--slate); }
.nav-link.active { background: var(--primary); color: var(--primary-foreground); font-weight: 500; box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.nav-link.active .nav-icon { background: rgb(255 255 255 / 15%); color: var(--primary-foreground); }
.nav-count { margin-left: auto; padding: 1px 6px; min-width: 22px; border-radius: 5px; background: var(--muted); color: var(--muted-foreground); text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.nav-link.active .nav-count { background: rgb(255 255 255 / 18%); color: var(--primary-foreground); }
.sidebar-footer, .sidebar-bottom { margin-top: auto; padding: 16px 8px 4px; }
.sidebar-footer { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--sidebar-border); color: var(--muted-foreground); font-size: 12px; line-height: 1.7; }
.sidebar-footer strong { color: var(--foreground); font-weight: 500; }
.sidebar-footer svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; color: var(--primary-text); }
.workspace-note { color: var(--muted-foreground); font-size: 12px; line-height: 1.7; }
.workspace-note strong { display: block; margin: 6px 0 3px; color: var(--foreground); font-weight: 500; }
.workspace-note svg { color: var(--primary-text); }
.profile { display: flex; align-items: center; gap: 10px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); }
.avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary-text); font-size: 12px; font-weight: 600; }
.profile-info { min-width: 0; flex: 1; text-align: left; line-height: 1.3; }
.profile-info strong { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; color: var(--foreground); font-size: 14px; font-weight: 500; white-space: nowrap; }
.profile-info small { display: block; color: var(--muted-foreground); font-size: 11px; margin-top: 2px; }
.main-shell { grid-column: 2; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 7px 12px; border-bottom: 1px solid var(--soft-border); background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(12px); }
.header-tools, .topbar-right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.topbar-right { gap: 12px; color: var(--muted-foreground); font-size: 12px; }
.header-divider { height: 24px; width: 1px; background: var(--border); margin: 0 4px; }
.header-title { min-width: 0; overflow: hidden; color: var(--muted-foreground); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.header-metrics { display: flex; align-items: center; gap: 6px; }
.header-metrics > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--amber) 20%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--amber) 8%, transparent); color: var(--muted-foreground); font-size: 12px; white-space: nowrap; }
.header-metrics > span + span { border-color: color-mix(in srgb, var(--blue) 20%, transparent); background: color-mix(in srgb, var(--blue) 8%, transparent); }
.header-metrics svg { width: 14px; height: 14px; color: var(--amber); }
.header-metrics > span + span svg { color: var(--blue); }
.header-metrics strong { color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
.topbar-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.env-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--emerald) 20%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--emerald) 8%, transparent); color: var(--success-text); font-size: 12px; white-space: nowrap; }
.live-dot { display: inline-block; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--emerald); }
.profile-dropdown { position: relative; }
.header-profile { display: flex; align-items: center; gap: 10px; min-height: 40px; border: 1px solid var(--soft-border); border-radius: 10px; padding: 4px 8px 4px 5px; background: var(--card); list-style: none; }
.header-profile::-webkit-details-marker { display: none; }
.header-profile:hover, .profile-dropdown[open] .header-profile { background: var(--muted); }
.header-profile > svg { width: 15px; height: 15px; color: var(--muted-foreground); transform: rotate(90deg); }
.profile-dropdown[open] .header-profile { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 15%, transparent); }
.profile-dropdown[open] .header-profile > svg { transform: rotate(-90deg); }
.profile-popover { position: absolute; right: 0; top: calc(100% + 8px); width: 248px; max-width: calc(100vw - 24px); padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--popover); color: var(--popover-foreground); box-shadow: 0 12px 36px rgb(0 0 0 / 18%), 0 2px 6px rgb(0 0 0 / 6%); }
.profile-popover .button { width: 100%; min-height: 40px; justify-content: flex-start; border: 0; border-radius: 7px; box-shadow: none; }
.profile-popover [data-action="logout"] { color: var(--danger-text); }
.profile-popover [data-action="logout"]:hover { background: color-mix(in srgb, var(--destructive) 9%, transparent); }
.profile-popover p { margin: 6px 8px 10px; color: var(--muted-foreground); font-size: 12px; }
.profile-popover strong { color: var(--foreground); font-weight: 500; }
.profile-popover > strong { overflow-wrap: anywhere; display: block; margin: 7px 8px 2px; font-size: 14px; }
.profile-popover > small { display: block; margin: 0 8px 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); font-size: 12px; }
.sidebar-backdrop, .sidebar .sidebar-close { display: none; }
.mobile-menu { display: inline-flex; }
.content { max-width: 1680px; margin: 0 auto; padding: 16px 16px 24px; }
.breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; color: var(--muted-foreground); font-size: 13px; }
.breadcrumb svg { width: 15px; height: 15px; }
.breadcrumb strong { color: var(--foreground); font-weight: 400; }
.breadcrumb-home { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: -6px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted-foreground); }
.breadcrumb-home:hover { background: var(--accent); color: var(--foreground); }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.eyebrow { margin: 0 0 4px; color: var(--muted-foreground); font-size: 12px; font-weight: 400; }
.page-subtitle { margin: 5px 0 0; color: var(--muted-foreground); font-size: 13px; }

/* Controls and fields */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / 3%); font-size: 14px; font-weight: 400; line-height: 1.4; white-space: nowrap; transition: background-color .15s, border-color .15s, transform .1s; }
.button:hover { background: var(--soft-muted); text-decoration: none; }
.button:active:not(:disabled) { transform: scale(.98); }
.button svg { width: 16px; height: 16px; }
.button.primary { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.button.primary:hover { background: color-mix(in srgb, var(--primary) 90%, var(--card)); }
.button.danger { color: var(--danger-text); border-color: color-mix(in srgb, var(--destructive) 25%, var(--card)); }
.button.danger:hover { background: color-mix(in srgb, var(--destructive) 8%, var(--card)); }
.button.small { min-height: 32px; padding: 5px 10px; gap: 6px; font-size: 12px; }
.button.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.button.ghost:hover { background: var(--accent); }
.button.full { width: 100%; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted-foreground); }
.icon-button:hover { background: var(--accent); color: var(--foreground); }
.icon-button svg { width: 17px; height: 17px; }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.field-control, input[type="text"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="time"], input[type="search"], select, textarea { width: 100%; min-width: 0; min-height: 36px; padding: 6px 12px; border: 1px solid var(--input); border-radius: 8px; outline: none; background: var(--card); color: var(--foreground); font-size: 14px; line-height: 1.5; box-shadow: 0 1px 2px rgb(0 0 0 / 3%); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.field-control:not(textarea), input:not([type="checkbox"]):not([type="radio"]), select { height: 36px; }
input::placeholder, textarea::placeholder { color: var(--muted-foreground); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
textarea { min-height: 104px; resize: vertical; line-height: 1.7; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .field-label { color: var(--foreground); font-size: 14px; font-weight: 400; }
.field small { color: var(--muted-foreground); font-size: 12px; line-height: 1.6; }
.field.span-2 { grid-column: 1 / -1; }
.required { color: var(--destructive); }
.form-section { margin: 24px 0 16px; padding-top: 20px; border-top: 1px solid var(--border); }
.form-section h3 { margin-bottom: 6px; }
.form-section p { margin: 0 0 12px; color: var(--muted-foreground); font-size: 12px; }
.form-error { display: none; margin-bottom: 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--destructive) 25%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--destructive) 8%, var(--card)); color: var(--danger-text); font-size: 13px; line-height: 1.7; white-space: pre-line; }
.form-error.visible { display: block; }
.form-error:focus { outline: none; }
.form-error:focus-visible { outline: 3px solid color-mix(in srgb, var(--ring) 35%, transparent); outline-offset: 2px; }
.field-error { margin: 10px 0 0; color: var(--danger-text); font-size: 13px; line-height: 1.6; }
.checkbox-line { display: flex; align-items: flex-start; gap: 8px; color: var(--foreground); font-size: 13px; line-height: 1.6; cursor: pointer; }
.checkbox-line input { flex: none; width: 15px; height: 15px; margin: 3px 0 0; accent-color: var(--primary); }
.checkbox-line strong { font-weight: 500; }
.checkbox-list { display: grid; gap: 12px; }
.checkbox-list.columns { grid-template-columns: 1fr 1fr; }
.inline-select { max-width: 240px; font-size: 13px; }

/* Dashboard and shared surfaces */
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card { --stat-tone: var(--blue); --stat-solid: #2563eb; position: relative; min-height: 126px; padding: 18px 14px 16px 78px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--stat-tone) 10%, var(--card)); border-radius: 12px; background: color-mix(in srgb, var(--stat-tone) 8%, var(--card)); }
.stat-card:nth-child(2) { --stat-tone: var(--emerald); --stat-solid: #059669; }
.stat-card:nth-child(3) { --stat-tone: var(--violet); --stat-solid: #7c3aed; }
.stat-card:nth-child(4) { --stat-tone: var(--amber); --stat-solid: #d97706; }
/* Tone by meaning (stat(..., tone)) wins over the position colours above. */
.stat-card.stat-blue { --stat-tone: var(--blue); --stat-solid: #2563eb; }
.stat-card.stat-good { --stat-tone: var(--emerald); --stat-solid: #059669; }
.stat-card.stat-warn { --stat-tone: var(--amber); --stat-solid: #d97706; }
.stat-card.stat-bad { --stat-tone: var(--rose); --stat-solid: #e11d48; }
.stat-card.stat-neutral { --stat-tone: var(--slate); --stat-solid: #475569; }
.stat-top { margin-bottom: 4px; color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }
.stat-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 8px; background: var(--soft-primary); color: var(--primary-text); }
.stat-card .stat-icon { position: absolute; top: 26px; left: 14px; width: 52px; height: 52px; border-radius: 50%; background: var(--stat-solid); color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
.stat-icon svg { width: 18px; height: 18px; }
.stat-card .stat-icon svg { width: 26px; height: 26px; }
.stat-card strong { display: block; color: var(--foreground); font-size: 26px; font-weight: 500; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-card strong .unit { margin-left: 5px; color: var(--muted-foreground); font-size: 12px; font-weight: 400; white-space: nowrap; }
.stat-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 7px; color: var(--muted-foreground); font-size: 11px; line-height: 1.5; }
.stat-bottom .green { color: var(--success-text); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr); gap: 16px; }
.panel, .office-card, .payment-card, .announcement-card { min-width: 0; border: 1px solid var(--soft-border); border-radius: var(--radius); background: var(--card); color: var(--card-foreground); box-shadow: var(--surface-shadow); }
.panel, .office-card { overflow: hidden; }
.office-card { display: flex; flex-direction: column; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--soft-border); }
.panel-header p { margin: 4px 0 0; color: var(--muted-foreground); font-size: 12px; }
.panel-header .text-link { flex: none; font-size: 12px; }
.panel-body { padding: 20px; }
.text-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: var(--primary-text); font-size: 13px; }
.text-link:hover { text-decoration: underline; }
.text-link svg { width: 14px; height: 14px; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.section-space { margin-top: 20px; }
.section-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-topline > :not(.button) { min-width: 0; overflow-wrap: anywhere; }
.section-topline h2 { font-size: 16px; }
.subtle, .muted { color: var(--muted-foreground); }
.subtle { font-size: 12px; }
.detail-caption { margin: 10px 0 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.7; }
.welcome-banner { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--card)); border-radius: var(--radius); background: var(--soft-primary); }
.banner-mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary-text); }
.banner-mark svg { width: 23px; height: 23px; }
.welcome-banner h2 { margin-bottom: 4px; font-size: 15px; }
.welcome-banner p { margin: 0; max-width: 680px; color: var(--muted-foreground); font-size: 13px; }
.welcome-banner .button { flex: none; margin-left: auto; }
.empty-state { max-width: 540px; margin: auto; padding: 40px 24px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 12px; background: var(--soft-primary); color: var(--primary-text); }
.empty-icon svg { width: 24px; height: 24px; }
.empty-state h3 { font-size: 15px; }
.empty-state p { max-width: 365px; margin: 8px auto 18px; color: var(--muted-foreground); font-size: 13px; }
.mini-office { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--soft-border); }
.mini-office:last-child { border-bottom: 0; }
.office-avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--card)); border-radius: 9px; background: var(--soft-primary); color: var(--primary-text); font-size: 15px; font-weight: 500; }
.mini-office-body { flex: 1; min-width: 0; }
.mini-office-body strong { display: block; overflow-wrap: anywhere; font-size: 14px; font-weight: 500; }
.mini-office-body small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted-foreground); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 400; line-height: 1.45; white-space: nowrap; }
.status.good { background: color-mix(in srgb, var(--emerald) 12%, transparent); color: var(--success-text); }
.status.warn { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--warning-text); }
.status.bad { background: color-mix(in srgb, var(--rose) 12%, transparent); color: var(--danger-text); }
.status.neutral { background: var(--muted); color: var(--muted-foreground); }
.status.blue { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); }
.status .live-dot { width: 5px; height: 5px; background: currentColor; }
.setup-list { padding: 0 20px 4px; }
.setup-item { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--soft-border); }
.setup-item:last-child { border: 0; }
.step-num { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 50%; background: var(--soft-muted); color: var(--muted-foreground); font-size: 12px; }
.step-num.done { border-color: color-mix(in srgb, var(--emerald) 20%, transparent); background: color-mix(in srgb, var(--emerald) 10%, transparent); color: var(--success-text); }
.setup-item strong { display: block; margin: 2px 0 4px; font-size: 13px; font-weight: 500; }
.setup-item p { margin: 0; color: var(--muted-foreground); font-size: 12px; }
.activity-list { padding: 0 20px; }
.activity { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--soft-border); }
.activity:last-child { border: 0; }
.activity-dot { flex: none; width: 7px; height: 7px; margin-top: 6px; border: 2px solid var(--primary); border-radius: 50%; }
.activity strong { display: block; font-size: 12px; font-weight: 400; line-height: 1.65; }
.activity small { display: block; margin-top: 4px; color: var(--muted-foreground); font-size: 11px; }
.quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.quick-action { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--soft-border); border-radius: 10px; background: var(--card); text-align: left; }
.quick-action:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--card)); background: var(--soft-primary); }
.quick-action strong { display: block; color: var(--foreground); font-size: 13px; font-weight: 500; }
.quick-action small { display: block; margin-top: 3px; color: var(--muted-foreground); font-size: 11px; }
.quick-action > svg { margin-left: auto; width: 14px; color: var(--muted-foreground); }

/* Backoffices, lists and announcements */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.search-wrap { position: relative; flex: 1; max-width: 340px; }
.search-wrap svg { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.search-wrap input { padding-left: 36px; }
.office-grid, .payment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.office-card-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 14px; }
.office-card-head > div { min-width: 0; }
.office-card-head h3 { margin: 2px 0 7px; font-size: 16px; }
.office-card-head .icon-button { margin-left: auto; }
.office-card-body { flex: 1; padding: 0 20px 18px; }
.url-line { display: flex; align-items: center; gap: 7px; min-width: 0; margin-bottom: 14px; color: var(--muted-foreground); font-size: 12px; }
.url-line a { overflow: hidden; color: var(--muted-foreground); text-overflow: ellipsis; white-space: nowrap; }
.url-line svg { width: 14px; height: 14px; }
.agent-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; margin-top: 10px; }
.chip { min-width: 0; max-width: 100%; overflow-wrap: anywhere; padding: 3px 8px; border: 1px solid var(--soft-border); border-radius: 6px; background: var(--soft-muted); color: var(--muted-foreground); font-size: 11px; }
.office-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--soft-border); color: var(--muted-foreground); font-size: 11px; }
.office-card-footer { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--soft-border); background: var(--soft-muted); }
.office-card-footer .primary { flex: 1; }
.table-wrap { max-width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
th { height: 40px; padding: 10px 12px; border-bottom: 1px solid var(--soft-border); background: var(--soft-muted); color: var(--muted-foreground); text-align: left; font-size: 12px; font-weight: 500; white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid var(--soft-border); color: var(--foreground); vertical-align: middle; }
tbody tr { transition: background-color .15s; }
tbody tr:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
tr:last-child td { border-bottom: 0; }
td strong { color: var(--foreground); font-size: 13px; font-weight: 500; }
td small { display: block; margin-top: 3px; color: var(--muted-foreground); font-size: 11px; }
.table-name { display: flex; align-items: center; gap: 10px; }
/* The record's name opens it, the same as the row's action button (reachable without scrolling sideways). */
.table-link { display: block; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.table-link.table-name { display: flex; }
.table-link:hover strong { color: var(--primary-text); text-decoration: underline; }
.table-name .avatar { width: 32px; height: 32px; }
.align-right { text-align: right; }
.nowrap { white-space: nowrap; }
.announcement-card { margin-bottom: 14px; padding: 20px; }
.announcement-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.announcement-card-head > div { min-width: 0; overflow-wrap: anywhere; }
.announcement-card-head h3 { overflow-wrap: anywhere; }
.announcement-card h3 { margin: 8px 0; font-size: 16px; }
.announcement-card p { margin: 10px 0 16px; color: var(--muted-foreground); font-size: 14px; white-space: pre-wrap; }
.announcement-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--soft-border); color: var(--muted-foreground); font-size: 12px; }

/* Operations, gateways and permissions */
.operation-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 16px; }
.operation-menu { padding: 8px; }
.operation-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted-foreground); text-align: left; font-size: 13px; }
.operation-link:hover { background: var(--soft-muted); color: var(--foreground); }
.operation-link.active { background: var(--soft-primary); color: var(--primary-text); font-weight: 500; }
.operation-select { padding: 18px; border-bottom: 1px solid var(--soft-border); }
.operation-content { min-width: 0; padding: 20px; }
.code-output { max-height: 420px; overflow: auto; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--soft-muted); color: var(--foreground); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.info-box { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--card)); border-radius: 8px; background: color-mix(in srgb, var(--primary) 5%, var(--card)); color: var(--muted-foreground); font-size: 13px; line-height: 1.7; }
.info-box svg { width: 17px; height: 17px; margin-top: 2px; color: var(--primary-text); }
.info-box > div { min-width: 0; overflow-wrap: anywhere; }
.info-box strong { color: var(--foreground); font-weight: 500; }
.info-box.warning { border-color: color-mix(in srgb, var(--amber) 25%, transparent); background: color-mix(in srgb, var(--amber) 8%, var(--card)); color: var(--warning-text); }
.info-box.warning svg { color: var(--amber); }
.gateway-stack { display: flex; flex-direction: column; gap: 16px; }
.gateway-card { padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.gateway-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gateway-overview { display: flex; flex-wrap: wrap; gap: 20px; margin: 16px 0; color: var(--muted-foreground); font-size: 12px; }
.gateway-overview strong { margin-left: 5px; color: var(--foreground); font-weight: 500; }
.gateway-table { margin-top: 18px; border: 1px solid var(--border); border-radius: 8px; }
.gateway-table table { min-width: 450px; }
.gateway-table td, .gateway-table th { padding: 10px 12px; }
.grant-block { margin: 12px 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; }
.grant-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; background: var(--soft-muted); }
.grant-content { padding: 14px; border-top: 1px solid var(--border); }
.grant-content[hidden] { display: none; }
.grant-permissions { max-height: 240px; overflow: auto; margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--soft-muted); }
.grant-permissions .checkbox-line { margin-bottom: 10px; font-size: 12px; overflow-wrap: anywhere; }
.grant-permissions .checkbox-line:last-child { margin-bottom: 0; }
.grant-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 6px; color: var(--muted-foreground); font-size: 12px; }
.permission-key { display: block; margin-top: 2px; color: var(--muted-foreground); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; overflow-wrap: anywhere; }
.permission-row + .permission-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.read-only-note { margin: 0; color: var(--muted-foreground); font-size: 13px; }

/* Payments and invoices */
.payment-card { padding: 20px; }
.payment-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.payment-card h3 { margin: 10px 0 14px; font-size: 16px; }
.payment-detail { color: var(--muted-foreground); font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.payment-detail strong { color: var(--foreground); font-weight: 500; }
.payment-card .button-row { margin-top: 18px; }
.invoice-summary { margin: 18px 0; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--card)); border-radius: 10px; background: var(--soft-primary); }
.summary-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0; color: var(--muted-foreground); font-size: 13px; }
.summary-row strong { color: var(--foreground); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.summary-row > *, .invoice-header > *, .invoice-details > * { min-width: 0; overflow-wrap: anywhere; }
.invoice-sheet p { overflow-wrap: anywhere; }
.summary-row.total { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.summary-row.total strong { color: var(--primary-text); font-size: 22px; }
.invoice-sheet { max-width: 760px; margin: 0 auto; padding: 30px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.invoice-header { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.invoice-header h2 { margin: 4px 0 12px; font-size: 24px; font-weight: 500; }
.invoice-header p { margin: 3px 0; color: var(--muted-foreground); font-size: 12px; }
.invoice-box { margin: 20px 0; padding: 18px 0; border-block: 1px solid var(--border); }
/* Invoice line items: form rows and the printed table. */
.invoice-items { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.invoice-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) 140px 36px; gap: 8px; align-items: center; }
.invoice-item-number { color: var(--muted-foreground); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.invoice-item input[name=item-amount] { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-items-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.invoice-items-footer strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.invoice-lines { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 14px; }
.invoice-lines th { color: var(--muted-foreground); font-weight: 400; text-align: left; padding: 6px 0; border-bottom: 1px solid var(--border); }
.invoice-lines td { padding: 8px 0; border-bottom: 1px solid var(--soft-border, var(--border)); vertical-align: top; overflow-wrap: anywhere; }
.invoice-lines th:first-child, .invoice-lines td:first-child { width: 32px; color: var(--muted-foreground); }
.invoice-lines .align-right { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
@media (max-width: 560px) {
  .invoice-item { grid-template-columns: 20px minmax(0, 1fr) 36px; }
  .invoice-item input[name=item-amount] { grid-column: 2; }
}
.invoice-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.invoice-details h3 { margin-bottom: 7px; color: var(--muted-foreground); font-size: 12px; font-weight: 400; }
.invoice-details p { margin: 0; color: var(--foreground); font-size: 14px; }

/* Feedback, dialogs and login */
.loader { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 200px; color: var(--muted-foreground); font-size: 14px; }
.compact-loader { min-height: 80px; }
.spinner { display: inline-block; width: 19px; height: 19px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
.button-spinner { width: 14px; height: 14px; flex: none; border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }
@keyframes spin { to { transform: rotate(360deg); } }
.boot-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100dvh; color: var(--muted-foreground); font-size: 14px; }
.boot-error { gap: 8px; height: auto; min-height: 100dvh; padding: 24px 16px; text-align: center; }
.boot-error .empty-icon { margin-bottom: 4px; }
.boot-error h1 { font-size: 20px; }
.boot-error p { max-width: 420px; margin: 0 0 12px; }
.toast-region { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--emerald) 25%, var(--card)); border-radius: 10px; background: var(--card); color: var(--success-text); box-shadow: 0 8px 30px rgb(0 0 0 / 12%); font-size: 14px; line-height: 1.6; }
.toast.error { border-color: color-mix(in srgb, var(--destructive) 30%, var(--card)); color: var(--danger-text); }
dialog { width: 660px; max-width: min(660px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow: auto; padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--card); color: var(--foreground); box-shadow: 0 24px 70px rgb(0 0 0 / 25%); }
dialog::backdrop { background: rgb(0 0 0 / 50%); }
dialog.wide { width: 820px; max-width: min(820px, calc(100% - 32px)); }
.modal-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--card); }
.modal-header h2 { font-size: 18px; font-weight: 500; }
.modal-body { padding: 24px; }
.modal-footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--card); }
/* Large text: labels wrap inside the button rather than pushing a button off-screen. */
.modal-footer .button { max-width: 100%; white-space: normal; }
.modal-footer .footer-note { margin-right: auto; color: var(--muted-foreground); font-size: 11px; }
.divider { height: 1px; margin: 22px 0; background: var(--border); }
.footer-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 28px; color: var(--muted-foreground); font-size: 11px; }
.login-page { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100dvh; padding: 32px 20px; background: radial-gradient(ellipse at 12% 10%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 45%), radial-gradient(ellipse at 90% 90%, rgb(34 211 238 / 8%), transparent 45%), var(--background); }
.login-story { position: relative; width: min(100%, 560px); padding: 16px 16px 0; border: 1px solid var(--soft-border); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--card); }
.login-story .brand { min-height: 82px; margin: 0; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--card)); background: var(--soft-primary); }
.login-story .brand-icon { width: 46px; height: 46px; background: var(--primary); border-radius: 10px; color: var(--primary-foreground); }
.login-story .brand-name { font-size: 22px; color: var(--primary-text); }
.login-story .brand small { font-size: 11px; color: var(--muted-foreground); }
.login-story-content { padding: 16px 20px 0; }
.login-story-content h1 { color: var(--muted-foreground); font-size: 14px; font-weight: 400; }
.login-story-content h1 br { display: none; }
.login-story-content .eyebrow, .login-story-content > p:not(.eyebrow), .login-features, .login-footer { display: none; }
.login-theme { position: absolute; top: 20px; right: 20px; }
.login-form-side { width: min(100%, 560px); padding: 26px 36px 30px; border: 1px solid var(--soft-border); border-top: 0; border-radius: 0 0 16px 16px; background: var(--card); box-shadow: 0 20px 35px -20px color-mix(in srgb, var(--primary) 20%, transparent); }
.login-form-wrap { width: 100%; }
.login-form-wrap .eyebrow { display: none; }
.login-form-wrap h2 { margin: 0 0 8px; font-size: 24px; font-weight: 500; }
.login-form-wrap > p { margin: 0 0 22px; color: var(--muted-foreground); font-size: 13px; }
.login-form-wrap .field { margin-bottom: 16px; }
.login-form-wrap .button { min-height: 40px; margin-top: 4px; }
.login-form-wrap .info-box { margin-top: 22px; font-size: 12px; }
.login-lock { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; color: var(--muted-foreground); font-size: 11px; }
.login-lock svg { width: 13px; height: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* First Tab stop of the signed-in shell; off-screen until focused. */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 60; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 8px; background: var(--primary); color: var(--primary-foreground); font-weight: 500; box-shadow: 0 8px 24px rgb(0 0 0 / 20%); transform: translateY(calc(-100% - 16px)); }
.skip-link:focus { transform: none; text-decoration: none; }
[hidden] { display: none !important; }

/* The same compact sidebar behavior as Blackoffice, with an accessible mobile drawer. */
@media (min-width: 1024px) {
  .app-shell.sidebar-collapsed { grid-template-columns: 70px minmax(0, 1fr); }
  .sidebar-collapsed .sidebar { width: 70px; }
  .sidebar-collapsed .brand { min-height: 54px; justify-content: center; padding: 4px; }
  .sidebar-collapsed .brand-icon { width: 40px; height: 40px; }
  .sidebar-collapsed .brand-copy, .sidebar-collapsed .brand-name, .sidebar-collapsed .brand > svg, .sidebar-collapsed .workspace-pill, .sidebar-collapsed .nav-text, .sidebar-collapsed .nav-count, .sidebar-collapsed .sidebar-footer, .sidebar-collapsed .sidebar-bottom { display: none; }
  .sidebar-collapsed .nav-link { justify-content: center; padding-inline: 4px; }
  .sidebar-collapsed .nav-label { height: 14px; margin: 10px 8px 0; padding: 0; overflow: hidden; font-size: 0; }
  .sidebar-collapsed .nav-label:first-child { height: 0; margin: 0; }
}
@media (max-width: 1360px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-height: 114px; }
  .office-grid, .payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }
  .quick-actions { grid-template-columns: 1fr; }
}
@media (max-width: 1120px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-action { padding: 12px; }
  .quick-action > svg { display: none; }
}
@media (max-width: 1023px) {
  body.menu-open { overflow: hidden; }
  .app-shell { display: block; }
  .sidebar { width: 260px; transform: translateX(-100%); visibility: hidden; }
  .app-shell.sidebar-open .sidebar, .sidebar.open { visibility: visible; transform: translateX(0); box-shadow: 10px 0 40px rgb(0 0 0 / 15%); }
  .sidebar-open .sidebar-backdrop { position: fixed; inset: 0; z-index: 35; display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: rgb(0 0 0 / 40%); }
  .main-shell { width: 100%; }
  .sidebar .sidebar-close { display: inline-flex; margin-left: auto; }
  .content { padding: 16px; }
  .operation-layout { grid-template-columns: 235px minmax(0, 1fr); }
  .welcome-banner { flex-wrap: wrap; align-items: flex-start; }
  .welcome-banner > div { flex: 1; min-width: 240px; }
  .welcome-banner .button { margin-left: 60px; }
}
@media (max-width: 720px) {
  .content { padding: 14px 12px 22px; }
  .topbar { min-height: 60px; gap: 8px; padding: 7px 8px; }
  .button, .button.small { min-height: 44px; }
  .icon-button, .breadcrumb-home { width: 44px; height: 44px; }
  .header-profile, .text-link, .operation-link { min-height: 44px; }
  .topbar-right { gap: 8px; }
  .topbar-date { display: none; }
  .header-metrics { display: none; }
  .page-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .page-heading > .button { margin-left: auto; }
  h1 { font-size: 21px; }
  .page-subtitle { font-size: 12px; }
  .breadcrumb { font-size: 12px; margin-bottom: 12px; }
  .stats-grid { gap: 10px; }
  .stat-card { min-height: 132px; padding: 14px 12px; }
  .stat-card .stat-icon { position: static; display: inline-grid; width: 28px; height: 28px; margin-right: 7px; border-radius: 7px; vertical-align: middle; box-shadow: none; }
  .stat-card .stat-icon svg { width: 16px; height: 16px; }
  .stat-top { font-size: 12px; min-height: 30px; margin-bottom: 7px; }
  .stat-card strong { font-size: 24px; }
  .stat-bottom { margin-top: 5px; }
  .dashboard-grid, .stack { gap: 14px; }
  .panel-header, .panel-body { padding: 16px; }
  .panel-header h2 { font-size: 15px; }
  .mini-office { padding: 14px 16px; gap: 10px; flex-wrap: wrap; }
  .mini-office-body { min-width: calc(100% - 54px); }
  .mini-office > .status { margin-left: 50px; }
  .mini-office > .button { margin-left: auto; }
  .setup-list { padding-inline: 16px; }
  .activity-list { padding-inline: 16px; }
  .quick-actions { grid-template-columns: 1fr; }
  .quick-action > svg { display: block; }
  .office-grid, .payment-grid { grid-template-columns: 1fr; }
  .toolbar { flex-wrap: wrap; gap: 10px; }
  .search-wrap { min-width: 190px; }
  .toolbar .button-row { flex-wrap: wrap; }
  .operation-layout { grid-template-columns: 1fr; gap: 14px; }
  .operation-menu { display: flex; gap: 4px; overflow: auto; }
  .operation-link { width: auto; flex: none; padding: 10px; white-space: nowrap; }
  .operation-select, .operation-content { padding: 16px; }
  .form-grid, .checkbox-list.columns { grid-template-columns: 1fr; }
  .field.span-2 { grid-column: 1; }
  .field-control, input[type="text"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="time"], input[type="search"], select, textarea { min-height: 44px; padding-block: 9px; font-size: 16px; }
  textarea { min-height: 104px; }
  .field-control:not(textarea), input:not([type="checkbox"]):not([type="radio"]), select { height: 44px; }
  .modal-header, .modal-body { padding: 18px; }
  .modal-footer { padding: 14px 18px; }
  .modal-footer .footer-note { display: none; }
  dialog, dialog.wide { max-width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .announcement-card { padding: 16px; }
  .announcement-card-footer { align-items: flex-start; flex-direction: column; }
  .table-wrap table { min-width: 610px; }
  .gateway-table table { min-width: 450px; }
  .gateway-card { padding: 14px; }
  .gateway-card-header { align-items: flex-start; }
  .invoice-sheet { padding: 20px; }
  .invoice-header { flex-wrap: wrap; }
  .invoice-details { grid-template-columns: 1fr; }
  .summary-row { align-items: flex-start; }
  .summary-row.total strong { font-size: 20px; }
  .login-page { padding: 24px 16px; }
  .login-form-side { padding: 24px; }
  .login-form-wrap .button { min-height: 44px; }
  .login-story .brand { padding: 14px; }
  .login-form-wrap h2 { font-size: 22px; }
  .toast-region { bottom: 16px; right: 16px; }
}
@media (max-width: 480px) {
  .header-title { font-size: 12px; }
  .header-profile .profile-info { display: none; }
  .header-divider { display: none; }
  .env-chip { font-size: 12px; padding-inline: 8px; }
  .topbar-right { gap: 5px; }
  .welcome-banner { padding: 16px; }
  .welcome-banner > div { min-width: 180px; }
  .welcome-banner .button { margin-left: 0; }
  .stat-card { padding: 12px 10px; }
  .stat-card .stat-icon { width: 24px; height: 24px; margin-right: 4px; }
  .stat-top, .stat-bottom, .stat-card strong .unit { font-size: 12px; }
  .invoice-sheet { padding: 16px; }
  .summary-row { gap: 10px; font-size: 12px; }
  .grant-header, .grant-tools { align-items: flex-start; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  :root, html.dark { color-scheme: light; --background: #fff; --card: #fff; --card-foreground: #111827; --foreground: #111827; --muted: #f1f5f9; --muted-foreground: #475569; --primary: #1d4ed8; --primary-text: #1d4ed8; --primary-foreground: #fff; --border: #d1d5db; --blue: #2563eb; --violet: #7c3aed; --emerald: #059669; --amber: #d97706; --rose: #e11d48; --slate: #475569; --success-text: #047857; --warning-text: #92400e; --danger-text: #be123c; }
  body { background: #fff; color: #111827; }
  .sidebar, .sidebar-backdrop, .topbar, .breadcrumb, .page-heading, .toast-region, .modal-header, .modal-footer, .footer-caption, .button, .icon-button { display: none !important; }
  .app-shell { display: block; }
  .main-shell { grid-column: 1; }
  .content, .modal-body { padding: 0; }
  body:has(dialog[open]) #app { display: none !important; }
  dialog, dialog.wide, dialog[open] { position: static; width: 100%; max-width: none; height: auto; max-height: none; margin: 0; padding: 0; border: 0; box-shadow: none; overflow: visible; }
  dialog::backdrop { background: #fff; }
  dialog[open] .button-row, dialog[open] .modal-body > .section-space, .no-print { display: none !important; }
  /* No page margin: the browser then prints no URL/title header or footer. The sheet keeps its own
     margin on every page (clone repeats the padding where the sheet breaks across pages). */
  @page { size: A4; margin: 0; }
  body:not(:has(dialog[open])) .content { padding: 12mm; }
  .invoice-sheet { max-width: none; padding: 14mm 16mm; border: 0; border-radius: 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .invoice-box { break-inside: avoid; }
  .status { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
.proof-pending { color: var(--primary-text); }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; margin-top: 12px; }
.proof-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; min-width: 0; }
.proof-thumbnail { display: block; width: 100%; padding: 0; border: 0; background: var(--muted); cursor: zoom-in; }
.proof-thumbnail:focus-visible { outline-offset: -4px; }
.proof-card img { display: block; width: 100%; height: 200px; object-fit: contain; }
.proof-card > div { padding: 16px; }
.proof-card p, .proof-note { overflow-wrap: anywhere; }
.proof-note { white-space: pre-wrap; }

/* Keep invoice context underneath the large, independently scrollable image. */
html.proof-viewer-open { overflow: hidden; }
dialog.proof-viewer { width: 1440px; max-width: calc(100% - 32px); height: calc(100dvh - 32px); max-height: 1400px; margin: auto; overflow: hidden; }
dialog.proof-viewer[open] { display: flex; flex-direction: column; }
.proof-viewer::backdrop { background: rgb(0 0 0 / 78%); }
.proof-viewer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px 12px; }
.proof-viewer-header > div { min-width: 0; }
.proof-viewer-header h2 { margin: 0; font-size: 17px; font-weight: 500; overflow-wrap: anywhere; }
.proof-viewer-caption { margin: 4px 0 0; color: var(--muted-foreground); font-size: 12px; overflow-wrap: anywhere; }
.proof-viewer-header .icon-button { width: 44px; height: 44px; flex: none; }
.proof-viewer-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; border-bottom: 1px solid var(--border); }
.proof-viewer-toolbar .button { min-height: 44px; min-width: 44px; }
.proof-viewer-toolbar [aria-pressed="true"] { border-color: var(--primary); color: var(--primary-text); background: var(--soft-primary); }
.proof-viewer-zoom { min-width: 54px; text-align: center; font-variant-numeric: tabular-nums; }
.proof-viewer-stage { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: #101116; }
.proof-viewer-stage:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.proof-viewer-canvas { display: grid; place-items: center; }
.proof-viewer-canvas img { display: block; max-width: none; max-height: none; flex: none; user-select: none; box-shadow: 0 4px 28px rgb(0 0 0 / 30%); }
.proof-viewer-canvas[hidden], .proof-viewer-message[hidden] { display: none; }
.proof-viewer-message { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 100%; padding: 24px; text-align: center; color: #e5e7eb; }
.proof-viewer-stage.is-zoomed { cursor: grab; }
.proof-viewer-stage.is-dragging { cursor: grabbing; }
.proof-viewer > footer { padding: 10px 20px; color: var(--muted-foreground); font-size: 12px; border-top: 1px solid var(--border); }
@media (max-width: 639px) {
  dialog.proof-viewer { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .proof-viewer-header { padding: max(12px, env(safe-area-inset-top)) 12px 8px; gap: 8px; }
  .proof-viewer-header h2 { font-size: 15px; }
  .proof-viewer-toolbar { gap: 6px; padding: 0 12px 10px; }
  .proof-viewer-toolbar .button { padding-inline: 10px; font-size: 13px; }
  .proof-viewer-zoom { min-width: 45px; }
  .proof-viewer > footer { padding: 8px 12px max(8px, env(safe-area-inset-bottom)); font-size: 12px; }
}
@media print { dialog.proof-viewer { display: none !important; } }

/* Usability round: pending work, office health, quick agent search, filters, account security. */
.nav-count.attention { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--warning-text); font-weight: 500; }
.nav-link.active .nav-count.attention { background: rgb(255 255 255 / 22%); color: var(--primary-foreground); }
kbd { display: inline-flex; align-items: center; min-width: 18px; padding: 0 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--soft-muted); color: var(--muted-foreground); font-family: inherit; font-size: 11px; line-height: 1.6; }
.palette-trigger { color: var(--muted-foreground); }
.palette-trigger kbd { margin-left: 2px; }
.agent-palette { width: 620px; max-width: min(620px, calc(100% - 32px)); margin-top: min(12vh, 120px); }
.agent-palette[open] { display: flex; flex-direction: column; max-height: min(70dvh, 640px); }
.palette-search { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--border); }
.palette-search > svg { width: 18px; height: 18px; flex: none; color: var(--muted-foreground); }
.palette-search input { border: 0; box-shadow: none; padding-left: 4px; font-size: 15px; }
.palette-search input:focus { box-shadow: none; }
.palette-results { flex: 1; min-height: 0; margin: 0; padding: 6px; overflow: auto; list-style: none; }
.palette-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.palette-option.active { background: var(--soft-primary); }
.palette-option.unavailable { cursor: not-allowed; opacity: .62; }
.palette-code { flex: none; min-width: 64px; padding: 3px 8px; border-radius: 6px; background: var(--soft-muted); color: var(--foreground); font-size: 12px; font-weight: 500; text-align: center; overflow-wrap: anywhere; }
.palette-copy { flex: 1; min-width: 0; }
.palette-copy strong { display: block; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.palette-copy small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 12px; overflow-wrap: anywhere; }
.palette-open { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--primary-text); font-size: 12px; }
.palette-open svg { width: 14px; height: 14px; }
.palette-empty { padding: 28px 12px; color: var(--muted-foreground); font-size: 13px; text-align: center; }
.palette-hint { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 11px; }
.pending-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--emerald) 12%, transparent); color: var(--success-text); }
.pending-mark.has-items { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--warning-text); }
.pending-mark svg { width: 16px; height: 16px; }
.pending-list { padding: 4px 0; }
.pending-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--soft-border); }
.pending-item:last-child { border-bottom: 0; }
.pending-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; }
.pending-icon svg { width: 16px; height: 16px; }
.pending-item.tone-bad .pending-icon { background: color-mix(in srgb, var(--rose) 12%, transparent); color: var(--danger-text); }
.pending-item.tone-warn .pending-icon { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--warning-text); }
.pending-item.tone-blue .pending-icon { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); }
.pending-copy { flex: 1; min-width: 0; }
.pending-copy strong { display: block; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.pending-copy small { display: block; margin-top: 3px; color: var(--muted-foreground); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.pending-actions { flex: none; justify-content: flex-end; }
.sync-note { display: flex; align-items: center; gap: 6px; margin: -6px 0 16px; color: var(--muted-foreground); font-size: 12px; }
.sync-note svg { width: 14px; height: 14px; flex: none; }
.office-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip-button { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 11px; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.chip-button svg { width: 11px; height: 11px; }
.chip-button:hover, .chip-button:focus-visible { border-color: var(--primary); background: var(--soft-primary); color: var(--primary-text); }
.office-meta.attention { color: var(--warning-text); }
.sync-error { flex-basis: 100%; color: var(--warning-text); line-height: 1.6; overflow-wrap: anywhere; }
.invoice-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: -4px 0 16px; }
.invoice-filters select { width: auto; min-width: 150px; }
.invoice-filters .cb-field { width: auto; flex: 0 1 220px; min-width: 160px; }
.filter-toggle { align-items: center; white-space: nowrap; }
.filter-toggle input { margin: 0; }
.overdue-note { color: var(--danger-text) !important; }
.audit-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr) auto; align-items: end; gap: 12px; margin-bottom: 16px; }
.audit-filters .field label { font-size: 12px; color: var(--muted-foreground); }
.audit-more { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--soft-border); }
.audit-target { max-width: 360px; overflow-wrap: anywhere; }
.audit-more .delivery-error { color: var(--danger-text); font-size: 12px; }
.security-section + .security-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--soft-border); }
.security-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.security-heading > div { flex: 1; min-width: 0; }
.security-heading h3 { margin: 0; font-size: 15px; font-weight: 500; }
.security-heading p { margin: 4px 0 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.6; }
.mfa-steps { display: grid; gap: 18px; margin: 0; padding-left: 20px; }
.mfa-steps li::marker { color: var(--primary-text); font-weight: 500; }
.mfa-steps p { margin: 4px 0 8px; color: var(--muted-foreground); font-size: 13px; }
.mfa-secret { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 8px; background: var(--soft-muted); }
.mfa-secret code, .recovery-codes code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .06em; overflow-wrap: anywhere; }
.mfa-secret code { flex: 1; min-width: 0; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 18px 0 0; padding: 14px 14px 14px 36px; border: 1px solid var(--soft-border); border-radius: 8px; background: var(--soft-muted); }
.login-back { margin-top: 10px; }
.mfa-confirm { margin-top: 8px; }
.readonly-banner { padding: 16px 20px 0; }
.section-space-bottom { margin-bottom: 16px; }
@media (max-width: 1120px) {
  .audit-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .audit-search { grid-column: span 2; }
}
@media (max-width: 720px) {
  .palette-trigger-label, .palette-trigger kbd { display: none; }
  .palette-trigger { min-width: 44px; padding-inline: 10px; }
  .pending-item { flex-wrap: wrap; padding: 14px 16px; }
  .pending-actions { width: 100%; padding-left: 42px; justify-content: flex-start; }
  .audit-filters { grid-template-columns: 1fr 1fr; }
  .audit-search, .audit-actions { grid-column: 1 / -1; }
  .invoice-filters select, .invoice-filters .cb-field { flex: 1 1 140px; min-width: 0; }
  .recovery-codes { grid-template-columns: 1fr; }
  .agent-palette { margin-top: 16px; }
  .palette-hint { display: none; }
}

/* Agent feature availability editor */
.feature-scope { max-width: 420px; margin-bottom: 16px; }
.feature-toolbar { margin-top: 16px; }
.feature-table td { vertical-align: middle; }
.feature-table select { min-width: 190px; }
.feature-name strong { display: block; font-weight: 500; }
.feature-name small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 11px; overflow-wrap: anywhere; }
.feature-depth-1 { padding-left: 18px; border-left: 2px solid var(--soft-border); }
.feature-depth-2 { padding-left: 36px; border-left: 2px solid var(--soft-border); }
.feature-depth-3, .feature-depth-4 { padding-left: 54px; border-left: 2px solid var(--soft-border); }
.feature-note { display: block; margin-top: 3px; color: var(--muted-foreground); font-size: 11px; }
.feature-changes { margin: 14px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.8; }
.feature-actions { justify-content: flex-end; }
.feature-policy { display: grid; gap: 10px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--soft-border); border-radius: 10px; background: var(--soft-muted); }
.feature-new-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.feature-toolbar select { width: auto; min-width: 200px; }
.feature-table select { height: 32px; min-height: 32px; padding-block: 4px; font-size: 13px; }
.feature-kind-action strong, .feature-kind-endpoint strong { font-weight: 400; font-size: 13px; }
.feature-kind-endpoint small { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.feature-toggle { margin-top: 4px; font-size: 12px; }
.feature-toggle svg { width: 12px; height: 12px; transition: transform .15s; }
.feature-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.feature-group-row td { background: var(--soft-muted); }
.feature-new { margin-left: 6px; vertical-align: middle; }
@media (max-width: 720px) {
  .feature-table select { min-width: 150px; }
  .feature-actions { justify-content: stretch; }
  .feature-actions .button { flex: 1 1 100%; }
}

/* Small screens: 44px touch targets, 12px minimum text and a visible cue on tables wider than the screen. */
@media (max-width: 720px) {
  .topbar .icon-button, .topbar .palette-trigger { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  /* The tools keep their size; the page title gives way (ellipsis, hidden at ≤360px). */
  .topbar-right { flex-shrink: 0; }
  .profile-popover .button { min-height: 44px; }
  .panel-header .text-link { min-width: 44px; justify-content: center; }
  .checkbox-line { min-height: 44px; align-items: center; }
  .checkbox-line input { margin-top: 0; }
  .modal-footer .button { flex: 1 1 auto; }
  /* Edge shadows appear only on the side that has more columns to scroll to. */
  .table-wrap {
    background:
      linear-gradient(to right, var(--card) 30%, transparent) left / 32px 100% no-repeat local,
      linear-gradient(to left, var(--card) 30%, transparent) right / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--foreground) 22%, transparent), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--foreground) 22%, transparent), transparent) right / 12px 100% no-repeat;
  }
  .table-link { min-height: 44px; }
  .table-link strong { color: var(--primary-text); }
  .nav-label, .nav-count, .profile-info small, .stat-bottom, .mini-office-body small, .status, .activity small, .quick-action small,
  .chip, .chip-button, .office-meta, td small, .footer-caption, .login-story .brand small, .login-lock, .feature-name small, .feature-note { font-size: 12px; }
}
@media (max-width: 360px) {
  .header-title { display: none; }
}

/* Billing: status tabs, sectioned invoice form, revision history and the printable sheet. */
.heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.status-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.status-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 8px 4px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--muted-foreground); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.status-tab:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--foreground); }
.status-tab[aria-pressed="true"] { border-color: var(--primary); background: var(--soft-primary); color: var(--primary-text); font-weight: 500; }
.status-tab-count { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--soft-muted); color: var(--foreground); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.status-tab.attention .status-tab-count { background: color-mix(in srgb, var(--rose) 14%, transparent); color: var(--danger-text); }
.invoice-table small + small { margin-top: 2px; }
.row-actions { justify-content: flex-end; }
.invoice-form-section + .invoice-form-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.invoice-form-section > h3 { margin: 0 0 12px; font-size: 15px; font-weight: 500; }
.invoice-form-section .field small { color: var(--muted-foreground); font-size: 12px; }
.due-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.due-preset { min-height: 28px; padding: 4px 12px; border-radius: 999px; font-size: 12px; }
.rate-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; border: 0; }
.rate-mode legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 500; }
.rate-mode .checkbox-line { padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.rate-mode .checkbox-line:has(input:checked) { border-color: var(--primary); background: var(--soft-primary); }
.muted-note { color: var(--muted-foreground); font-size: 12px; font-weight: 400; }
.invoice-totals { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.invoice-totals .summary-row.total { margin-top: 0; padding-top: 8px; border-top: 0; }
.invoice-totals .summary-row.total span { color: var(--foreground); font-size: 14px; }
.invoice-totals .summary-row.total small { font-size: 14px; font-weight: 500; }
.invoice-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.invoice-meta { text-align: right; }
.invoice-meta strong { color: var(--foreground); font-weight: 500; }
.invoice-header .invoice-number { margin: 0; color: var(--foreground); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.invoice-header .eyebrow { letter-spacing: .08em; }
.invoice-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.invoice-channels .payment-detail { padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; }
.invoice-history { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.invoice-history li { padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--slate); border-radius: 8px; }
.invoice-history li.tone-good { border-left-color: var(--emerald); }
.invoice-history li.tone-warn { border-left-color: var(--amber); }
.invoice-history li.tone-bad { border-left-color: var(--rose); }
.invoice-history li.tone-blue { border-left-color: var(--blue); }
.history-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.history-head strong { font-size: 14px; font-weight: 500; }
.history-head time, .invoice-history small { color: var(--muted-foreground); font-size: 12px; }
.invoice-history small { display: block; margin-top: 2px; }
.invoice-history p { margin: 6px 0 0; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .status-tab, .due-preset { min-height: 44px; }
  .heading-actions { width: 100%; justify-content: stretch; }
  .heading-actions .button { flex: 1 1 auto; }
  .invoice-toolbar { flex-direction: column; align-items: stretch; }
  .invoice-toolbar .button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .invoice-toolbar .button { justify-content: center; width: 100%; height: auto; white-space: normal; text-align: center; }
  .invoice-toolbar .button.primary { grid-column: 1 / -1; order: -1; }
  .invoice-toolbar .button-row:last-child { order: -1; }
  .invoice-header { flex-direction: column; }
  .invoice-meta { text-align: left; }
}
@media print {
  .invoice-meta .status { display: inline-flex; }
  .invoice-channels .payment-detail { break-inside: avoid; }
}
.toolbar-main { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-width: 0; }
.toolbar-main .invoice-filters { flex: 1 1 auto; margin: 0; }
/* Phones: each invoice row becomes a card (number + status, items, due date + amounts, actions). */
@media (max-width: 720px) {
  .table-wrap table.invoice-table { min-width: 0; }
  .invoice-table thead { display: none; }
  .invoice-table, .invoice-table tbody { display: block; }
  .invoice-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id status" "desc desc" "due thb" "due usdt" "actions actions"; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--soft-border); }
  .invoice-table tr:last-child { border-bottom: 0; }
  .invoice-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .invoice-table td:nth-child(1) { grid-area: id; }
  .invoice-table td:nth-child(2) { grid-area: desc; color: var(--muted-foreground); overflow-wrap: anywhere; }
  .invoice-table td:nth-child(3) { grid-area: due; align-self: center; }
  .invoice-table td:nth-child(3)::before { content: "กำหนดชำระ "; color: var(--muted-foreground); font-size: 12px; }
  .invoice-table td:nth-child(4) { grid-area: thb; font-size: 15px; font-weight: 500; }
  .invoice-table td:nth-child(4)::after { content: " THB"; color: var(--muted-foreground); font-size: 12px; font-weight: 400; }
  .invoice-table td:nth-child(5) { grid-area: usdt; }
  .invoice-table td:nth-child(5)::after { content: " USDT"; color: var(--muted-foreground); font-size: 12px; }
  .invoice-table td:nth-child(6) { grid-area: status; text-align: right; }
  .invoice-table td:nth-child(7) { grid-area: actions; margin-top: 4px; }
  .invoice-table .row-actions { justify-content: flex-start; }
}