/* Tamanly admin design system.
   Tokens live in @theme: Tailwind builds the utilities from them (bg-indigo, text-muted, text-sm, rounded-xl…)
   and emits them as CSS variables that the component classes below read. Change a value here, not in a view. */
@import "tailwindcss";

@theme static {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Brand. Indigo leads; coral marks what needs attention; sun is for waiting states. */
  --color-indigo: #3D2B6B;
  --color-indigo-deep: #2A1D4D;
  --color-indigo-tint: #ECE9F3;
  --color-indigo-tint-2: #E1DCEE;
  --color-lav: #C9C1E0;            /* secondary text on indigo */
  --color-on-dark: #EEEBF6;        /* primary text on indigo */
  --color-coral: #E87A6B;
  --color-coral-tint: #FBE6E2;
  --color-coral-ink: #A23F31;
  --color-coral-on-dark: #F3A79C;
  --color-sun: #E8B84A;
  --color-sun-tint: #FBF3DE;
  --color-sun-ink: #7A5A12;

  /* Warm neutrals */
  --color-cream: #FFFFFF;          /* page */
  --color-canvas: #F8FAFC;         /* admin page: light grey under white surfaces (VL invoicing slate-50) */
  --color-paper: #F8F9FB;          /* wells, table heads */
  --color-ink: #1F1A2E;            /* text */
  --color-muted: #636878;          /* secondary text, 4.8:1 on cream */
  --color-line: #E5E7EB;           /* dividers, card edges */
  --color-edge: #D9DCE3;           /* control borders */
  --color-edge-strong: #C2C7D0;    /* control borders on hover */
  --color-mute-tint: #F1F3F6;
  --color-mute-ink: #5E586E;

  /* Status */
  --color-ok: #2E9E6B;
  --color-mint: #E3F3EC;
  --color-ok-ink: #1F7A50;
  --color-live: #48C98C;
  --color-live-on-dark: #7ED8AE;
  --color-bad: #D64545;
  --color-bad-tint: #FBE4E4;
  --color-bad-tint-2: #F7D4D4;
  --color-bad-ink: #B33232;

  /* Type: Inter on a 14px UI base. Medium (500) for controls, semibold (600) for headings and figures. */
  --text-2xs: 11px;  --text-2xs--line-height: calc(16 / 11);
  --text-xs: 12px;   --text-xs--line-height: calc(16 / 12);
  --text-sm: 13px;   --text-sm--line-height: calc(20 / 13);
  --text-base: 14px; --text-base--line-height: calc(20 / 14);
  --text-md: 16px;   --text-md--line-height: calc(24 / 16); --text-md--letter-spacing: -0.01em;
  --text-lg: 18px;   --text-lg--line-height: calc(26 / 18); --text-lg--letter-spacing: -0.01em;
  --text-xl: 20px;   --text-xl--line-height: calc(28 / 20); --text-xl--letter-spacing: -0.015em;
  --text-2xl: 24px;  --text-2xl--line-height: calc(32 / 24); --text-2xl--letter-spacing: -0.02em;

  /* Radii: chips 6, controls 8, cards and popovers 12, sheets and drawers 16. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  /* Elevation: cards sit on a hairline; only layers that float cast a shadow. */
  --shadow-card: 0 1px 2px rgb(15 23 42 / 0.03);
  --shadow-card-hover: 0 2px 4px -1px rgb(16 24 40 / 0.06), 0 6px 16px -4px rgb(16 24 40 / 0.10);
  --shadow-pop: 0 16px 40px -12px rgb(31 26 46 / 0.28), 0 0 0 1px rgb(31 26 46 / 0.06);

  --ease-soft: cubic-bezier(.2, .8, .2, 1);
}

@layer base {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: var(--text-base); line-height: var(--text-base--line-height); font-feature-settings: "cv11"; }
  ::selection { background: var(--color-coral-tint); color: var(--color-ink); }
  :focus-visible { outline: 2px solid var(--color-indigo); outline-offset: 2px; }
  .on-dark :focus-visible, .on-dark:focus-visible { outline-color: #fff; }
  input, textarea { caret-color: var(--color-indigo); }
  * { scrollbar-width: thin; scrollbar-color: var(--color-edge-strong) transparent; }
  .on-dark, .on-dark * { scrollbar-color: rgb(255 255 255 / .2) transparent; }
  .num { font-variant-numeric: tabular-nums; }
  a { text-underline-offset: 3px; }
  [hidden] { display: none !important; }
  .grid > * { min-width: 0; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
}

@layer components {
  .ms { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; width: 1em; overflow: hidden; display: inline-block; white-space: nowrap; text-transform: none; letter-spacing: normal; direction: ltr; flex: none; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; user-select: none; }
  .ms.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }

  /* crops the mark out of logo.jpg; swap for the real SVG mark when it exists */
  .mark { width: 44px; height: 44px; border-radius: 10px; flex: none; background: #FBF7EF url("/assets/logo.jpg") -5px -15px / 140px auto no-repeat; }

  /* Containers: one radius (12), one hairline, one quiet two-layer shadow. Headers sit on a 20/24 rhythm. */
  .panel { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
  .panel-head { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 20px; border-bottom: 1px solid var(--color-line); }
  .panel-head > :first-child { min-width: 0; }
  .panel-title { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
  .panel-sub { margin-top: 1px; font-size: var(--text-sm); color: var(--color-muted); }
  .panel-head .panel-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
  .panel-body { padding: 20px; }
  .panel-foot { padding: 12px 20px; border-top: 1px solid var(--color-line); background: var(--color-paper); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
  @media (min-width: 640px) { .panel-head { padding-inline: 24px; } .panel-body { padding: 20px 24px 24px; } .panel-foot { padding-inline: 24px; } }
  .panel-link { color: var(--color-indigo); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: var(--radius-sm); }
  .panel-link:hover { text-decoration: underline; }
  a.panel { transition: box-shadow .2s var(--ease-soft), border-color .2s; }
  a.panel:hover { border-color: var(--color-edge); box-shadow: var(--shadow-card-hover); }
  /* Index toolbar + count row share the panel's 20/24 gutter */
  .ix-bar { padding: 14px 20px; border-bottom: 1px solid var(--color-line); }
  .ix-count { min-height: 44px; padding: 8px 20px; border-bottom: 1px solid var(--color-line); }
  @media (min-width: 640px) { .ix-bar { padding-inline: 24px; } .ix-count { padding-inline: 24px; } }
  /* Form actions: a white bar that closes the form instead of a button floating on the canvas */
  .form-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
  @media (min-width: 640px) { .form-bar { padding-inline: 24px; } }
  /* KPI tiles: label, figure, footnote */
  .stat { display: flex; flex-direction: column; padding: 20px; text-decoration: none; color: inherit; }
  .stat-label { font-size: var(--text-sm); font-weight: 500; color: #475569; }
  .stat-value { margin-top: 12px; font-size: var(--text-2xl); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--color-ink); }
  .stat-foot { margin-top: auto; padding-top: 10px; font-size: var(--text-xs); color: var(--color-muted); }
  .stat .ms.go { margin-left: auto; font-size: 18px; color: var(--color-edge-strong); transition: color .2s, transform .2s var(--ease-soft); }
  .stat:hover .ms.go { color: var(--color-indigo); transform: translateX(2px); }
  .avatar { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; flex: none; background: var(--color-coral-tint); color: var(--color-coral-ink); font-size: var(--text-sm); font-weight: 600; }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color .15s, box-shadow .15s, color .15s; }
  .btn .ms { font-size: 18px; }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
  .btn-p { background: var(--color-indigo); color: #fff; }
  .btn-p:hover:not(:disabled) { background: var(--color-indigo-deep); }
  .btn-t { background: var(--color-indigo-tint); color: var(--color-indigo); }
  .btn-t:hover:not(:disabled) { background: var(--color-indigo-tint-2); }
  .btn-o { background: #fff; color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-edge); }
  .btn-o:hover:not(:disabled) { background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-edge-strong); }
  .btn-d { background: var(--color-bad-tint); color: var(--color-bad-ink); }
  .btn-d:hover:not(:disabled) { background: var(--color-bad-tint-2); }
  .btn-g { background: transparent; color: var(--color-indigo); padding: 0 10px; }
  .btn-g:hover:not(:disabled) { background: var(--color-indigo-tint); }
  .btn-dark { background: transparent; color: #fff; }
  .btn-dark:hover { background: rgb(255 255 255 / .1); }
  .btn-sm { height: 32px; padding: 0 10px; border-radius: var(--radius-md); font-size: var(--text-sm); gap: 4px; }
  .btn-sm .ms { font-size: 17px; }
  .btn-icon { width: 40px; padding: 0; }
  .btn-sm.btn-icon { width: 32px; }

  /* Badges: status colour only; the label always says it too */
  .chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; line-height: 1; }
  .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
  .chip.plain::before { display: none; }
  .chip-sun { background: var(--color-sun-tint); color: var(--color-sun-ink); }
  .chip-coral { background: var(--color-coral-tint); color: var(--color-coral-ink); }
  .chip-ok { background: var(--color-mint); color: var(--color-ok-ink); }
  .chip-indigo { background: var(--color-indigo-tint); color: var(--color-indigo); }
  .chip-bad { background: var(--color-bad-tint); color: var(--color-bad-ink); }
  .chip-mute { background: var(--color-mute-tint); color: var(--color-mute-ink); }
  .chip-dark { background: rgb(255 255 255 / .14); color: #fff; }

  .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--color-coral); color: var(--color-indigo-deep); font-size: var(--text-2xs); font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
  .count-live { background: var(--color-live-on-dark); }
  .live { width: 8px; height: 8px; border-radius: 50%; background: var(--color-live); flex: none; }

  /* Icon well. Neutral on purpose: colour is kept for status. */
  .tile { width: 36px; height: 36px; border-radius: var(--radius-lg); display: grid; place-items: center; flex: none; background: var(--color-paper); color: var(--color-muted); box-shadow: inset 0 0 0 1px var(--color-line); }
  .tile .ms { font-size: 20px; }

  /* Sidebar: the current page is cut from the same cream as the page sheet */
  .nl { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; border-radius: var(--radius-lg); color: var(--color-on-dark); font-size: var(--text-base); font-weight: 500; text-align: left; text-decoration: none; transition: background-color .15s; }
  .nl > .ms { color: var(--color-lav); }
  .nl:hover { background: rgb(255 255 255 / .08); color: #fff; }
  .nl[aria-current="page"] { background: var(--color-cream); color: var(--color-indigo); font-weight: 600; }
  .nl[aria-current="page"] > .ms { color: var(--color-indigo); }
  .nl > span:not(.ms):not(.count) { flex: 1; }
  .nl .chev { order: 2; margin-left: auto; color: var(--color-lav); transition: transform .2s var(--ease-soft); }
  .nl[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .nl.holds-current[aria-expanded="false"]::after { content: ""; order: 1; width: 6px; height: 6px; border-radius: 50%; background: var(--color-cream); }
  .sub { margin: 2px 0 8px 21px; padding-left: 10px; border-left: 1px solid rgb(255 255 255 / .14); display: grid; gap: 2px; }
  .ns { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 12px; border-radius: var(--radius-md); color: var(--color-lav); font-size: var(--text-sm); line-height: 1.3; text-decoration: none; transition: background-color .15s, color .15s; }
  .ns:hover { color: #fff; background: rgb(255 255 255 / .08); }
  .ns[aria-current="page"] { background: var(--color-cream); color: var(--color-indigo); font-weight: 600; }
  .ns .count { margin-left: auto; margin-right: 32px; }

  /* Top bar */
  .scope-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--radius-lg); background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); color: #fff; font-size: var(--text-base); font-weight: 500; min-width: 0; max-width: 100%; }
  .search-btn { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 6px 0 12px; border-radius: var(--radius-lg); background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); color: var(--color-lav); font-size: var(--text-base); width: 100%; max-width: 420px; transition: background-color .15s; }
  .search-btn:hover { background: rgb(255 255 255 / .14); }
  .search-btn kbd { margin-left: auto; font: 500 var(--text-2xs)/1 var(--font-sans); color: var(--color-lav); background: rgb(255 255 255 / .1); border-radius: var(--radius-sm); padding: 5px 6px; }

  /* Inputs */
  .input { width: 100%; height: 40px; padding: 0 12px; border-radius: var(--radius-lg); background: #fff; color: var(--color-ink); font-size: var(--text-base); box-shadow: inset 0 0 0 1px var(--color-edge); transition: box-shadow .15s, background-color .15s; }
  .input:hover { box-shadow: inset 0 0 0 1px var(--color-edge-strong); }
  .input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--color-indigo), 0 0 0 4px rgb(61 43 107 / .12); }
  .input::placeholder { color: var(--color-muted); }
  .input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--color-bad), 0 0 0 4px rgb(214 69 69 / .12); }
  .input:disabled { background: var(--color-paper); color: var(--color-muted); }
  textarea.input { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
  select.input { appearance: none; padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%236E6880'%3E%3Cpath d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4 1.4 1.4z'/%3E%3C/svg%3E") no-repeat right 10px center; }
  /* iOS zooms into inputs under 16px */
  @media (pointer: coarse) { .input { font-size: 16px; } }
  /* :where keeps this below any class, so .sw keeps its own size */
  :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--color-indigo); width: 18px; height: 18px; flex: none; }
  .err { color: var(--color-bad-ink); font-size: var(--text-sm); margin-top: 6px; }
  .err:empty { display: none; }
  .search { position: relative; }
  .search > .ms { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
  .search .input { padding-left: 40px; background: var(--color-paper); }
  .search .input:focus { background: #fff; }

  .sw { appearance: none; width: 40px; height: 24px; border-radius: 999px; background: var(--color-edge-strong); position: relative; cursor: pointer; flex: none; transition: background-color .2s; }
  .sw::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(31 26 46 / .2); transition: transform .2s var(--ease-soft); }
  .sw:checked { background: var(--color-indigo); }
  .sw:checked::before { transform: translateX(16px); }

  /* Filter selects in index toolbars: same well as the search box, indigo once applied */
  .fsel { position: relative; flex: none; display: inline-flex; }
  .fsel select, .fsel-btn { height: 36px; max-width: 220px; padding: 0 32px 0 12px; border-radius: var(--radius-lg); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; cursor: pointer; box-shadow: inset 0 0 0 1px var(--color-edge); transition: box-shadow .15s, background-color .15s; }
  .fsel select { appearance: none; field-sizing: content; text-overflow: ellipsis; }
  .fsel-btn { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fsel select:hover, .fsel-btn:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--color-edge-strong); }
  .fsel .ms { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 18px; pointer-events: none; color: var(--color-muted); }
  .fsel.on select, .fsel.on .fsel-btn { background: var(--color-indigo-tint); color: var(--color-indigo); font-weight: 600; box-shadow: inset 0 0 0 1px var(--color-lav); }
  .fsel.on .ms { color: var(--color-indigo); }
  .fsel-pop { width: 260px; }
  .fsel-list { max-height: 320px; overflow-y: auto; margin-top: 6px; }
  .fsel-list [aria-selected="true"] { background: var(--color-indigo-tint); color: var(--color-indigo); font-weight: 600; }
  .fsel-empty { padding: 12px; font-size: var(--text-sm); color: var(--color-muted); }
  .fsel-field { position: relative; }
  .fsel-field-btn { display: flex; align-items: center; text-align: left; cursor: pointer; padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%236E6880'%3E%3Cpath d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4 1.4 1.4z'/%3E%3C/svg%3E") no-repeat right 10px center; }
  .fsel-field-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-lg); background: var(--color-mute-tint); flex: none; }
  .seg > button, .seg > a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; text-decoration: none; transition: background-color .15s, color .15s; }
  .seg > button:hover, .seg > a:hover { color: var(--color-ink); }
  .seg > [aria-pressed="true"], .seg > [aria-selected="true"], .seg > [aria-current="page"] { background: #fff; color: var(--color-indigo); font-weight: 600; box-shadow: 0 0 0 1px var(--color-line), var(--shadow-card); }
  .seg .ms { font-size: 18px; }
  .seg .n { font-variant-numeric: tabular-nums; opacity: .7; }

  .pick { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--color-edge); cursor: pointer; transition: box-shadow .15s; }
  .pick:hover { box-shadow: inset 0 0 0 1px var(--color-edge-strong); }
  .pick:has(input:checked) { box-shadow: inset 0 0 0 2px var(--color-indigo); }
  .pick input { margin-top: 1px; }
  .pickc { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 10px; border-radius: var(--radius-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--color-edge); font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
  .pickc:has(input:checked) { background: var(--color-indigo-tint); box-shadow: inset 0 0 0 1px var(--color-lav); color: var(--color-indigo); }

  /* Tables */
  .tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
  .tbl th { text-align: left; font-weight: 600; font-size: var(--text-2xs); letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); height: 38px; padding: 0 16px; background: var(--color-paper); border-bottom: 1px solid var(--color-line); white-space: nowrap; }
  .tbl th.num { text-align: right; }
  .tbl th :is(a, button) { display: inline-flex; align-items: center; gap: 2px; font: inherit; color: inherit; }
  .tbl th :is(a, button):hover { color: var(--color-ink); }
  .tbl th .ms { font-size: 16px; }
  .tbl td { padding: 11px 16px; font-variant-numeric: tabular-nums; transition: background-color .15s; border-bottom: 1px solid var(--color-line); vertical-align: middle; }
  .tbl tbody tr:last-child td { border-bottom: 0; }
  .tbl td.num { text-align: right; white-space: nowrap; }
  /* rows that open their record */
  [data-controller~="admin--dialog"]:not(button) { cursor: pointer; }
  .tbl tbody tr:hover td { background: #FBFBFD; }
  .tbl tbody tr[data-controller~="admin--dialog"]:hover td { background: var(--color-paper); }
  .t2 { min-width: 0; }
  .t2 > b { display: block; font-weight: 600; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
  .t2 > small { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; margin-top: 1px; }

  .bar { height: 6px; border-radius: 999px; background: var(--color-line); overflow: hidden; }
  .bar > span { display: block; height: 100%; border-radius: inherit; background: var(--color-indigo); }

  /* Dialogs: drawer, palette, popovers, toast */
  dialog { color: var(--color-ink); }
  .drawer { margin: 0 0 0 auto; padding: 0; border: 0; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; background: var(--color-indigo); border-radius: var(--radius-2xl) 0 0 var(--radius-2xl); box-shadow: -24px 0 48px rgb(31 26 46 / .2); display: none; flex-direction: column; overflow: hidden; }
  .drawer.wide { width: min(760px, 100vw); }
  .drawer[open] { display: flex; animation: drIn .24s var(--ease-soft); }
  .drawer::backdrop { background: rgb(31 26 46 / .45); }
  .dr-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 36px 24px; color: #fff; }
  .dr-body { flex: 1; overflow-y: auto; margin-top: -16px; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; background: var(--color-cream); padding: 24px; }
  .dr-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--color-line); }
  @keyframes drIn { from { transform: translateX(48px); opacity: 0; } }
  @keyframes drUp { from { transform: translateY(48px); opacity: 0; } }
  @media (max-width: 640px) {
    .drawer, .drawer.wide { margin: auto 0 0 0; width: 100vw; height: 94dvh; max-height: 94dvh; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
    .drawer[open] { animation-name: drUp; }
    .dr-body { padding: 20px 16px; }
    .dr-foot { padding-left: 16px; padding-right: 16px; }
  }
  .palette { margin: 10vh auto auto; padding: 0; border: 0; width: min(640px, calc(100vw - 24px)); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-pop); overflow: hidden; }
  .palette::backdrop { background: rgb(31 26 46 / .45); }
  .palette[open] { animation: fadeUp .18s var(--ease-soft); }
  @keyframes fadeUp { from { transform: translateY(8px); opacity: 0; } }
  .pal-opt { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-lg); text-align: left; cursor: pointer; }
  .pal-opt:hover, .pal-opt[aria-selected="true"] { background: var(--color-indigo-tint); }
  [popover] { margin: 0; padding: 6px; border: 0; border-radius: var(--radius-xl); background: #fff; color: var(--color-ink); box-shadow: var(--shadow-pop); }
  #bell-pop { position: fixed; inset: 60px 20px auto auto; width: 360px; }
  @media (max-width: 1023px) { #bell-pop { inset: 60px 12px auto 12px; width: auto; } }
  .pop-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: var(--radius-lg); text-align: left; }
  .pop-item:hover { background: var(--color-paper); }
  .pop-item[aria-checked="true"], .pop-item[aria-current="true"] { background: var(--color-indigo-tint); color: var(--color-indigo); }

  /* Flash toast: fades itself after 6s (animationend → toast#hide); hover or focus holds it */
  .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 90; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 6px 6px 6px 14px; border-radius: var(--radius-lg); background: var(--color-ink); color: #fff; font-size: var(--text-base); box-shadow: var(--shadow-pop); transition: opacity .2s, transform .2s var(--ease-soft); }
  .toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; animation: toastOut .2s var(--ease-soft) 6s forwards; }
  .toast.show:is(:hover, :focus-within) { animation-play-state: paused; }
  @keyframes toastOut { to { opacity: 0; transform: translate(-50%, 16px); } }
  .toast > .ms { color: var(--color-live-on-dark); }
  .toast-bad > .ms { color: var(--color-coral-on-dark); }

  /* Contractor / visitor pass preview, same ticket as the mobile app */
  .ticket { position: relative; background: #fff; border-radius: var(--radius-xl); overflow: hidden; }
  .tear { position: relative; border-top: 2px dashed var(--color-edge); margin: 0 18px; }
  .tear::before, .tear::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-indigo); }
  .tear::before { left: -29px; }
  .tear::after { right: -29px; }

  /* Roles matrix cells: level is spelled out and carries an icon, colour only repeats it */
  .perm { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; transition: box-shadow .15s; }
  .perm .ms { font-size: 16px; }
  .perm:disabled { cursor: not-allowed; opacity: .8; }
  .perm.l0 { background: var(--color-mute-tint); color: var(--color-mute-ink); }
  .perm.l1 { background: var(--color-indigo-tint); color: var(--color-indigo); }
  .perm.l2 { background: var(--color-sun-tint); color: var(--color-sun-ink); }
  .perm.l3 { background: var(--color-mint); color: var(--color-ok-ink); }
  .perm.ovr { box-shadow: inset 0 0 0 2px var(--color-coral); }
  .perm.dirty { box-shadow: inset 0 0 0 2px var(--color-indigo); }
  /* Sign-in card */
  .auth-card { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-2xl); box-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 12px 32px -12px rgb(16 24 40 / .12); padding: 28px; }
  @media (min-width: 640px) { .auth-card { padding: 36px 36px 32px; } }
  /* Light shell (admin): white sidebar + top bar on a slate-50 canvas, indigo only as accent */
  .shell-light { background: #fff; color: var(--color-ink); }
  .shell-light .nl { height: 40px; padding: 0 14px; border-radius: 999px; color: #334155; font-size: var(--text-sm); }
  .shell-light .nl > .ms { color: #64748B; }
  .shell-light .nl:hover { background: #F1F5F9; color: var(--color-ink); }
  .shell-light .nl[aria-current="page"] { background: var(--color-indigo-tint); color: var(--color-indigo); }
  .shell-light .nl[aria-current="page"] > .ms, .shell-light .nl .chev { color: var(--color-indigo); }
  .shell-light .nl .chev { color: #94A3B8; }
  .shell-light .nl.holds-current[aria-expanded="false"]::after { background: var(--color-indigo); }
  .shell-light .sub { border-left-color: var(--color-line); }
  .shell-light .ns { color: #475569; border-radius: 999px; }
  .shell-light .ns:hover { color: var(--color-ink); background: #F1F5F9; }
  .shell-light .ns[aria-current="page"] { background: var(--color-indigo-tint); color: var(--color-indigo); }
  .shell-light .count { color: #fff; background: var(--color-coral); }
  .shell-light .count-live { background: var(--color-ok); }
  .shell-light .btn-dark { color: #475569; }
  .shell-light .btn-dark:hover { background: #F1F5F9; color: var(--color-ink); }
  .shell-light .scope-pill { background: #fff; box-shadow: inset 0 0 0 1px var(--color-line); color: var(--color-ink); border-radius: 999px; padding: 0 14px 0 10px; font-size: var(--text-sm); }
  .shell-light .scope-pill .ms { color: var(--color-indigo); }
  .shell-light .search-btn { background: #F1F5F9; box-shadow: none; color: #64748B; border-radius: 999px; padding: 0 6px 0 14px; font-size: var(--text-sm); }
  .shell-light .search-btn:hover { background: #E9EEF4; }
  .shell-light .search-btn kbd { color: #64748B; background: #fff; box-shadow: inset 0 0 0 1px var(--color-line); border-radius: 999px; padding: 5px 8px; }
  /* Indigo sidebar: quiet white fills, a 3px coral rail marks the current page. Fills/colour only, so nothing shifts. */
  .side-indigo .nl, .side-indigo .ns { position: relative; color: rgb(255 255 255 / .72); transition: background-color .15s, color .15s; }
  .side-indigo .nl { font-size: var(--text-sm); }
  .side-indigo .nl > .ms, .side-indigo .ns > .ms { color: rgb(255 255 255 / .6); transition: color .15s; }
  .side-indigo .nl .chev { color: rgb(255 255 255 / .45); }
  .side-indigo :is(.nl, .ns):hover { background: rgb(255 255 255 / .06); color: #fff; }
  .side-indigo :is(.nl, .ns):hover > .ms { color: #fff; }
  .side-indigo :is(.nl, .ns)[aria-current="page"] { background: rgb(255 255 255 / .12); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
  .side-indigo :is(.nl, .ns)[aria-current="page"] > .ms { color: #fff; }
  .side-indigo :is(.nl, .ns)[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-coral); }
  .side-indigo .nl.holds-current { color: #fff; }
  .side-indigo .nl.holds-current > .ms { color: #fff; }
  .side-indigo .nl.holds-current[aria-expanded="false"]::after { background: var(--color-coral); }
  .side-indigo .sub { border-left-color: rgb(255 255 255 / .12); }
  .side-indigo :is(.nl, .ns):focus-visible { outline: 2px solid rgb(255 255 255 / .9); outline-offset: -2px; }
  .side-indigo .count { background: var(--color-coral); color: var(--color-indigo-deep); }
  .no-sb { scrollbar-width: none; }
  .no-sb::-webkit-scrollbar { display: none; }
}