@charset "UTF-8";
/* ==========================================================================
   Projukti Dashboard theme (brand redesign, October 2026)

   The one committed stylesheet for every screen: tokens, base rules, the
   shell (sidebar, topbar, page header) and the shared component layer.
   resources/views/partials/brand-head.blade.php links it from the three
   Tyro layouts, the login layout and the error pages, cache-busted by
   App\Support\Brand::asset().

   Why it looks the way it does:
   - Plain CSS, no build step: public/build is gitignored and the deploy
     never runs npm. No @layer (Tyro's unlayered inline CSS would beat any
     layered rule) and no nesting (older iPads).
   - It loads AFTER Tyro's inline <style> in <head>, so a rule with the same
     specificity wins by order. Tyro's modal and pagination views print their
     <style> later, inside <body>; those overrides carry an extra `body`
     qualifier.
   - Light is the default; html.dark switches the tokens. :root.dark (0,2,0)
     beats Tyro's .dark whatever the order.
   - Tyro emits the six sidebar colours from .env with !important, so the
     brand declares them with !important too. The theme then wins whatever
     the server's .env or the "Branding & login" colour tabs hold.
   - Page-specific rules live in public/css/app/<group>.css, one file per
     page group (see Brand::PAGE_GROUPS). Anything two groups share belongs
     here.

   Contents
     1. Fonts            5. Buttons            9.  Status: badges, pills, notices
     2. Tokens           6. Cards and tiles    10. Navigation: tabs, chips, pagination
     3. Base             7. Tables             11. Disclosure, code, copy, steps
     4. Shell            8. Forms              12. Dialogs, empty states, misc
                                               13. Utilities   14. Login and errors
   ========================================================================== */


/* ── 1. Fonts ─────────────────────────────────────────────────────────────
   Self-hosted (OFL, licences beside the files) so no third-party font origin
   sees our users. Both files are variable fonts, so one file covers every
   weight. Anek Bangla only downloads when Bengali text is on the page
   (unicode-range): lead and customer names are sometimes in Bengali script. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Anek Bangla';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/anek-bangla/anek-bangla-bengali.woff2') format('woff2');
    unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1;
}


/* ── 2. Tokens ────────────────────────────────────────────────────────────
   Light: projuktiteam.com (navy text, #2263EE, soft blue page).
   Dark: the UK agency site's dark palette.
   Every text/background pair below was checked at 4.5:1 or better, input
   borders and focus rings at 3:1. Chart series passed the dataviz
   validator (CVD, normal vision, lightness band, 3:1) in both modes.
   .theme-light / .theme-dark re-declare the tokens on one element, so a
   panel can show the other mode (the UI kit does). */
:root, .theme-light {
    color-scheme: light;

    /* Tyro / shadcn names: Tyro's own CSS reads these, so they all stay. */
    --background: #FFFFFF;            /* surfaces: cards, topbar, inputs */
    --foreground: #12233A;            /* navy: headings and strong text */
    --card: #FFFFFF;
    --card-foreground: #12233A;
    --popover: #FFFFFF;
    --popover-foreground: #12233A;
    --primary: #2263EE;
    --primary-foreground: #FFFFFF;
    --secondary: #EEF3FD;
    --secondary-foreground: #12233A;
    --muted: #F1F5FB;                 /* sunken: table heads, hovers */
    --muted-foreground: #56677E;      /* 5.3:1 on --muted, 5.8:1 on white */
    --accent: #E0E9FF;
    --accent-foreground: #12233A;
    --destructive: #C8283E;
    --destructive-foreground: #FFFFFF;
    --border: #E4E9F2;
    --input: #7D8AA0;                 /* input outline, 3.5:1 on white */
    --ring: #2263EE;
    --radius: 0.625rem;
    --success: #1A7F45;
    --success-foreground: #FFFFFF;
    --warning: #F5A524;
    --warning-foreground: #12233A;
    --info: #2263EE;
    --info-foreground: #FFFFFF;
    --danger: #C8283E;
    --card-shadow: 0 4px 18px rgba(18, 35, 58, 0.06);
    --card-shadow-hover: 0 8px 28px rgba(18, 35, 58, 0.10);

    /* The sidebar is navy in both modes (the website footer). */
    --sidebar: #0F1E30 !important;
    --sidebar-foreground: #C3CDDB !important;
    --sidebar-primary: #2263EE !important;
    --sidebar-primary-foreground: #FFFFFF;
    --sidebar-accent: #1A2B41 !important;
    --sidebar-accent-foreground: #FFFFFF !important;
    --sidebar-header-border: #1E3048 !important;
    --sidebar-border: #0F1E30;
    --sidebar-ring: #6B91FF;
    --sidebar-muted: #93A3BA;          /* group titles, 6.6:1 */

    /* Brand surfaces and text */
    --page: #F4F7FE;
    --surface: #FFFFFF;
    --surface-sunken: #F1F5FB;
    --surface-hover: #F6F9FF;
    --text-strong: #12233A;
    --text-body: #3F5673;
    --text-muted: #56677E;
    --border-soft: #EEF2F9;
    --border-button: #C9D3E4;
    --link: #1D56D6;
    --link-hover: #1747B5;
    --primary-hover: #1B55D9;
    --primary-soft: #E8EFFE;
    --primary-soft-strong: #E0E9FF;
    /* White text stays at 4.5:1 or better from a quarter of the way down
       (where a button's text starts); the top stop is the lightest the
       brand allows within that. Hover is darker, never lighter. */
    --primary-gradient: linear-gradient(180deg, #4274F0 0%, #1B55D9 100%);
    --primary-gradient-hover: linear-gradient(180deg, #4073EE 0%, #164BC4 100%);

    /* Status: -text is for words (4.5:1 on white and on -soft), -soft is the
       tint behind them, -border outlines a soft box. Never use the solid
       --success/--warning/--danger as small text. */
    --success-text: #146A39;
    --success-soft: #E5F5EC;
    --success-border: #A9DDBF;
    --warning-text: #8A5300;
    --warning-soft: #FFF4DB;
    --warning-border: #F5CF7A;
    --danger-text: #B4232F;
    --danger-soft: #FDECEE;
    --danger-border: #F3B4BD;
    --info-text: #1D55D0;
    --info-soft: #E8EFFE;
    --info-border: #B8CCF8;
    --neutral-text: #3F5673;
    --neutral-soft: #EEF2F9;
    --neutral-border: #D5DDEA;

    /* Chart series, fixed order (assign 1, 2, 3... never cycle): brand blue,
       orange, magenta, logo yellow, logo blue, logo green. This order passed
       the dataviz validator in both modes: worst neighbouring pair CVD ΔE 15.1,
       normal vision 18; the first three also pass for scatter plots and small
       multiples (any pair side by side). More than three series in those?
       Fold the rest into "Other". */
    --chart-1: #2263EE;
    --chart-2: #DB6400;
    --chart-3: #BC3181;
    --chart-4: #B98A07;
    --chart-5: #0584B8;
    --chart-6: #4A9C36;
    --chart-grid: #E4E9F2;
    --chart-axis: #C5CEDC;

    /* The logo's four marks (21 Oct 2026), for icons that must tell apart at a glance: -ink is the
       icon colour (3:1 or more on --surface and on its own -soft), -soft the round tint behind it. */
    --mark-blue: #298FCB;    --mark-blue-ink: #1C6E9F;    --mark-blue-soft: #E3F1FA;
    --mark-green: #81C24D;   --mark-green-ink: #3F7F1D;   --mark-green-soft: #EAF5E1;
    --mark-yellow: #F7C236;  --mark-yellow-ink: #8A6200;  --mark-yellow-soft: #FDF3D6;
    --mark-red: #DF2B2E;     --mark-red-ink: #C21F24;     --mark-red-soft: #FCE6E6;

    /* Type: Inter for UI, Anek Bangla for Bengali. 13px is the floor. */
    --font-sans: 'Inter', 'Anek Bangla', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Bengali', sans-serif;
    --font-bangla: 'Anek Bangla', 'Inter', 'Noto Sans Bengali', system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    --fs-xs: 0.8125rem;    /* 13px: captions, badges, table heads (the floor) */
    --fs-sm: 0.875rem;     /* 14px: secondary text, table cells, small buttons */
    --fs-base: 0.9375rem;  /* 15px: body */
    --fs-md: 1rem;         /* 16px: inputs on phones, lead text */
    --fs-lg: 1.125rem;     /* 18px: card titles */
    --fs-xl: 1.375rem;     /* 22px: section headings */
    --fs-2xl: 1.75rem;     /* 28px: page title */
    --fs-3xl: 2.125rem;    /* 34px: stat values */

    /* Shape and space */
    --radius-sm: 8px;
    --radius-control: 10px;
    --radius-card: 16px;
    --radius-pill: 999px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --control-height: 44px;
    --control-height-sm: 40px;
    --sidebar-width: 264px;
    --sidebar-collapsed-width: 76px;
    --topbar-height: 64px;
    --content-max: 1440px;

    /* Elevation */
    --shadow-soft: 0 4px 18px rgba(18, 35, 58, 0.06);
    --shadow-card: 0 8px 28px rgba(18, 35, 58, 0.08);
    --shadow-pop: 0 16px 40px rgba(18, 35, 58, 0.16);
    --shadow-glow: 0 8px 20px rgba(34, 99, 238, 0.28);
    --focus-ring: 0 0 0 3px rgba(34, 99, 238, 0.35);
}

:root.dark, .theme-dark {
    color-scheme: dark;

    --background: #151A1E;
    --foreground: #F5F7FA;
    --card: #151A1E;
    --card-foreground: #F5F7FA;
    --popover: #1F232A;
    --popover-foreground: #F5F7FA;
    --primary: #2F64FF;
    --primary-foreground: #FFFFFF;
    --secondary: #1F232A;
    --secondary-foreground: #F5F7FA;
    --muted: #1B2026;
    --muted-foreground: #A3ABB8;
    --accent: #1A2540;
    --accent-foreground: #F5F7FA;
    --destructive: #D92D42;
    --destructive-foreground: #FFFFFF;
    --border: #2D3138;
    --input: #6B7380;
    --ring: #5095FF;
    --success: #1A7F45;
    --success-foreground: #FFFFFF;
    --warning: #F0AD4E;
    --warning-foreground: #12233A;
    --info: #2F64FF;
    --info-foreground: #FFFFFF;
    --danger: #D92D42;
    --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
    --card-shadow-hover: 0 8px 30px rgba(107, 145, 255, 0.15);

    --sidebar: #0A0F1A !important;
    --sidebar-foreground: #B9C4D4 !important;
    --sidebar-primary: #2F64FF !important;
    --sidebar-primary-foreground: #FFFFFF;
    --sidebar-accent: #161E2C !important;
    --sidebar-accent-foreground: #FFFFFF !important;
    --sidebar-header-border: #1A2232 !important;
    --sidebar-border: #1A2232;
    --sidebar-ring: #5095FF;
    --sidebar-muted: #93A3BA;

    --page: #111113;
    --surface: #151A1E;
    --surface-sunken: #1B2026;
    --surface-hover: #1C2229;
    --text-strong: #F5F7FA;
    --text-body: #D4D9E1;
    --text-muted: #A3ABB8;
    --border-soft: #23272E;
    --border-button: #3A414B;
    --link: #88BAFF;
    --link-hover: #B3D1FF;
    --primary-hover: #2559F5;
    --primary-soft: #18233D;
    --primary-soft-strong: #1A2540;
    --primary-gradient: linear-gradient(180deg, #3F6EFF 0%, #1350FF 100%);
    --primary-gradient-hover: linear-gradient(180deg, #3A6BFF 0%, #1146E0 100%);

    --success-text: #38C976;
    --success-soft: #13251A;
    --success-border: #1F4A31;
    --warning-text: #F0AD4E;
    --warning-soft: #2A2113;
    --warning-border: #5A4520;
    --danger-text: #FF6B6B;
    --danger-soft: #2C1517;
    --danger-border: #5C2A2E;
    --info-text: #88BAFF;
    --info-soft: #15213A;
    --info-border: #2A3F66;
    --neutral-text: #C5CCD6;
    --neutral-soft: #222831;
    --neutral-border: #3A414B;

    --chart-1: #558CFF;
    --chart-2: #E46904;
    --chart-3: #E356A2;
    --chart-4: #B98A07;
    --chart-5: #259ED6;
    --chart-6: #57A943;
    --chart-grid: #2D3138;
    --chart-axis: #3F4650;

    --mark-blue: #298FCB;    --mark-blue-ink: #5DB4E6;    --mark-blue-soft: #13283A;
    --mark-green: #81C24D;   --mark-green-ink: #96D464;   --mark-green-soft: #18291A;
    --mark-yellow: #F7C236;  --mark-yellow-ink: #F7C236;  --mark-yellow-soft: #2D2512;
    --mark-red: #DF2B2E;     --mark-red-ink: #FF6B6E;     --mark-red-soft: #33171A;

    --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.30);
    --shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.55);
    --shadow-glow: 0 8px 30px rgba(107, 145, 255, 0.15);
    --focus-ring: 0 0 0 3px rgba(80, 149, 255, 0.40);
}


/* ── 3. Base ─────────────────────────────────────────────────────────────── */

/* Per-class colour-scheme: a dark-OS user who picked light must not get the
   browser's dark-mode link and form colours on white. */
html.light { color-scheme: light; }
html.dark { color-scheme: dark; }

/* Tyro resets these on its own pages; the error pages have only this file. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--border-button) var(--page);
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--text-body);
    background-color: var(--page);
    font-feature-settings: 'cv11', 'ss01';
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-strong);
    line-height: 1.25;
    letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-2xl); font-weight: 700; }
h2 { font-size: var(--fs-xl); font-weight: 650; }
h3 { font-size: var(--fs-lg); font-weight: 600; }
h4 { font-size: var(--fs-md); font-weight: 600; }

p { max-width: 75ch; }
strong, b { font-weight: 600; color: var(--text-strong); }
small { font-size: var(--fs-xs); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }

/* Bengali text keeps its own face even when Inter would match first. */
:lang(bn), .bangla { font-family: var(--font-bangla); }

/* Links: Tyro has no global rule, so body links were browser blue/purple. */
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
a:visited { color: var(--link); }
.link-quiet, .link-quiet:visited { color: inherit; text-decoration: none; }
.link-quiet:hover { color: var(--link); text-decoration: underline; }
a[target="_blank"].link-external::after {
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.25em;
    vertical-align: -0.05em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* One visible focus ring for every control (Tyro removes outlines). */
:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}
.btn:focus-visible, .form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible,
.chip:focus-visible, .tab-link:focus-visible, .vtabs-item:focus-visible, .pg:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Native checkboxes, radios, ranges and date pickers take the brand colour. */
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--primary); }
input[type="checkbox"]:not(.checkbox-input):not(.switch):not(.toggle-input),
input[type="radio"]:not(.radio-input) {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    cursor: pointer;
}

::selection { background: var(--primary-soft-strong); color: var(--text-strong); }

/* Whatever the page jumps to (an #anchor, a message or a field with an
   error that projukti.js focuses) clears the sticky top bar. */
:target, [data-focus-on-load], .is-invalid { scroll-margin-top: calc(var(--topbar-height) + var(--space-4)); }
/* A message focused by script is not a control: no focus ring. */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* Tyro's layout bug: a flex child without min-width:0 lets any wide table
   push the whole page sideways (Customers was 1,577px wide at 1280). */
.main-content { min-width: 0; }

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 1000;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--link);
    font-weight: 600;
    box-shadow: var(--shadow-pop);
}
.skip-link:focus { top: var(--space-3); }

.sr-only, .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ── 4. Shell: sidebar, topbar, page ─────────────────────────────────────── */

/* Sidebar: navy, white wordmark, grouped links. */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar);
    border-right: 0;
    display: flex;
    flex-direction: column;
    scrollbar-color: #2A3D57 transparent;
}
.sidebar::-webkit-scrollbar-thumb { background-color: #2A3D57; }
.main-content { margin-left: var(--sidebar-width); background-color: var(--page); }

.sidebar-header {
    min-height: var(--topbar-height);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--sidebar-header-border);
    gap: var(--space-2);
}
.sidebar-logo { gap: var(--space-3); text-decoration: none; }
.sidebar-logo:focus-visible { outline-color: var(--sidebar-ring); }
.sidebar-logo-full { display: block; height: 34px; width: auto; }
.sidebar-logo-mark { display: none; width: 36px; height: 36px; }
.sidebar-logo-img { border-radius: 0; width: auto; object-fit: contain; }

.sidebar-collapse-btn,
.sidebar-close-btn,
.sidebar-expand-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-control);
    color: var(--sidebar-foreground);
    background: transparent;
    border: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.sidebar-collapse-btn:hover,
.sidebar-close-btn:hover,
.sidebar-expand-btn:hover { background-color: var(--sidebar-accent); color: #FFFFFF; }
.sidebar-collapse-btn:focus-visible,
.sidebar-close-btn:focus-visible,
.sidebar-expand-btn:focus-visible { outline: 2px solid var(--sidebar-ring); outline-offset: 1px; }
.sidebar-close-btn { display: none; }
.sidebar-close-btn svg { width: 20px; height: 20px; }

.sidebar-nav { padding: var(--space-3) 0 var(--space-6); flex: 1; }
.sidebar-section { padding: 0 var(--space-3); margin-bottom: var(--space-2); }
.sidebar-section-title {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--sidebar-muted);
    opacity: 1;
    padding: var(--space-3) var(--space-3) var(--space-1);
}
[data-sidebar-accordion] .sidebar-section-title { border-radius: var(--radius-sm); }
[data-sidebar-accordion] .sidebar-section-title:hover { background-color: transparent; color: #FFFFFF; }
[data-sidebar-accordion] .sidebar-section-title:focus-visible { outline: 2px solid var(--sidebar-ring); outline-offset: 0; }
[data-sidebar-accordion] .sidebar-section-title::after { right: var(--space-3); width: 0.4rem; height: 0.4rem; opacity: 0.6; }

.sidebar-link {
    position: relative;
    gap: var(--space-3);
    min-height: 42px;
    padding: var(--space-2) var(--space-3);
    margin-bottom: 2px;
    border-radius: var(--radius-control);
    color: var(--sidebar-foreground);
    font-size: var(--fs-base);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-link:visited { color: var(--sidebar-foreground); }
.sidebar-link:hover { background-color: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.sidebar-link.active,
.sidebar-link.active:visited {
    background: var(--primary-gradient);
    color: var(--sidebar-primary-foreground);
    box-shadow: 0 6px 16px rgba(34, 99, 238, 0.35);
}
.sidebar-link:focus-visible { outline: 2px solid var(--sidebar-ring); outline-offset: 1px; }
.sidebar-link svg { width: 20px; height: 20px; opacity: 0.85; }
.sidebar-link-text { flex: 1; min-width: 0; }
/* The count bubble on a link (exports waiting for approval). */
.sidebar .badge,
.sidebar-count {
    margin-left: auto;
    min-width: 22px;
    padding: 0 7px;
    line-height: 22px;
    border-radius: var(--radius-pill);
    background: #FFE16C;
    color: #12233A;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-align: center;
    border: 0;
}

/* Collapsed (desktop): an icon rail with the four-colour mark on top.
   Labels stay in the DOM, visually hidden, so links keep their names. */
@media (min-width: 1025px) {
    .sidebar.collapsed { width: var(--sidebar-collapsed-width); overflow-x: hidden; overflow-y: auto; }
    .sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-collapsed-width); }
    .sidebar.collapsed .sidebar-header { display: flex; justify-content: center; padding: var(--space-3) 0; }
    .sidebar.collapsed .sidebar-logo { flex: 0 0 auto; justify-content: center; }
    .sidebar.collapsed .sidebar-logo-full { display: none; }
    .sidebar.collapsed .sidebar-logo-mark { display: block; }
    .sidebar.collapsed .sidebar-collapse-btn { display: none !important; }
    .sidebar.collapsed .sidebar-expand-btn { position: static; transform: none; margin: var(--space-2) auto 0; display: flex !important; }
    .sidebar.collapsed .sidebar-section { padding: 0 var(--space-3); }
    .sidebar.collapsed .sidebar-section-title {
        opacity: 1;
        visibility: visible;
        height: 1px;
        padding: 0;
        margin: var(--space-3) var(--space-2);
        overflow: hidden;
        background: var(--sidebar-header-border);
        color: transparent;
        pointer-events: none;
    }
    .sidebar.collapsed .sidebar-section-title::after { display: none; }
    .sidebar.collapsed .sidebar-section-content[hidden] { display: block; }
    .sidebar.collapsed .sidebar-link { opacity: 1; visibility: visible; justify-content: center; padding: var(--space-2); }
    .sidebar.collapsed .sidebar-link-text {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
    }
    .sidebar.collapsed .sidebar-link .badge,
    .sidebar.collapsed .sidebar-count { position: absolute; top: 2px; right: 2px; min-width: 18px; line-height: 18px; padding: 0 5px; font-size: 11px; }
}

/* Phones and tablets: the sidebar is a drawer, never the collapsed rail. */
@media (max-width: 1024px) {
    .sidebar { width: min(300px, 86vw); box-shadow: var(--shadow-pop); }
    .sidebar.collapsed { width: min(300px, 86vw); overflow-y: auto; }
    .sidebar.collapsed .sidebar-header { display: flex; }
    .sidebar.collapsed .sidebar-logo-text,
    .sidebar.collapsed .sidebar-section-title,
    .sidebar.collapsed .sidebar-link { opacity: 1; visibility: visible; }
    .sidebar.collapsed .sidebar-expand-btn { display: none !important; }
    .sidebar-collapse-btn { display: none !important; }
    .sidebar-close-btn { display: flex; margin-left: auto; }
    .main-content, .sidebar.collapsed ~ .main-content { margin-left: 0; }
    .sidebar-overlay { background-color: rgba(10, 15, 26, 0.55); }
}

/* Topbar */
.topbar {
    height: var(--topbar-height);
    padding: 0 var(--space-6);
    background-color: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
            backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--border);
    gap: var(--space-4);
}
.topbar-left { min-width: 0; flex: 1; gap: var(--space-3); }
.topbar-right { gap: var(--space-2); flex-shrink: 0; }
.mobile-menu-btn,
.topbar-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
}
.topbar-btn { display: inline-flex; }
.mobile-menu-btn:hover,
.topbar-btn:hover { background-color: var(--primary-soft); color: var(--text-strong); }
.topbar-btn svg, .mobile-menu-btn svg { width: 20px; height: 20px; }

.breadcrumb {
    min-width: 0;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
}
.breadcrumb a, .breadcrumb a:visited { color: var(--text-muted); text-decoration: none; padding: 10px 0; }
.breadcrumb a:hover { color: var(--link); text-decoration: underline; }
.breadcrumb > :last-child { color: var(--text-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-separator { opacity: 0.6; }

.user-dropdown-btn {
    min-height: 44px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
}
.user-dropdown-btn:hover { background-color: var(--surface-hover); border-color: var(--border-button); }
.user-avatar, .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: #FFFFFF;
    font-size: var(--fs-sm);
    font-weight: 700;
}
.user-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); }
.user-role { font-size: var(--fs-xs); color: var(--text-muted); }
.user-dropdown-menu,
.tyro-dropdown-menu {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--popover);
    box-shadow: var(--shadow-pop);
    padding: var(--space-2);
    min-width: 220px;
}
.dropdown-item {
    min-height: 40px;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: var(--fs-sm);
    text-decoration: none;
}
.dropdown-item:visited { color: var(--text-body); }
.dropdown-item:hover { background: var(--primary-soft); color: var(--text-strong); }
.dropdown-item svg { width: 18px; height: 18px; }
.dropdown-item-danger, .dropdown-item-danger:visited { color: var(--danger-text); }
.dropdown-item-danger:hover { background: var(--danger-soft); color: var(--danger-text); }
.dropdown-header { padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); }
.dropdown-header strong { display: block; font-size: var(--fs-sm); }
.dropdown-header span { display: block; font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }

/* Page */
.page-content {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-8) var(--space-8) var(--space-10);
    background-color: transparent;
}
.page-content:focus { outline: none; }

/* Page header: title, one plain sentence, actions on the right.
   An eyebrow appears only on a page that sits under another page, and names
   that page ("Connections" over a set-up, "Roles" over one role); the
   sidebar already shows every page's group, so top-level pages have none.
   <div class="page-header"><div class="page-header-row"><div class="page-heading">
     <p class="page-eyebrow">Connections</p><h1 class="page-title">…</h1><p class="page-description">…</p>
   </div><div class="page-actions">…buttons…</div></div><p class="page-meta">Updated 3 min ago</p></div> */
.page-header { margin-bottom: var(--space-6); }
.page-header-row { align-items: flex-end; gap: var(--space-4) var(--space-6); }
.page-heading { min-width: 0; flex: 1 1 360px; }
.page-eyebrow {
    margin-bottom: var(--space-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--primary);
}
:root.dark .page-eyebrow, .theme-dark .page-eyebrow { color: var(--link); }
.page-title { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-strong); letter-spacing: -0.02em; line-height: 1.2; }
.page-description { margin-top: var(--space-2); font-size: var(--fs-md); color: var(--text-body); max-width: 70ch; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.page-meta { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); }
/* "Page settings" (dashboard.partials.page-settings) and "Help" links in a page header. */
.page-settings-link, .page-help-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--link);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}
.page-settings-link:visited, .page-help-link:visited { color: var(--link); }
.page-settings-link:hover, .page-help-link:hover { background: var(--primary-soft); color: var(--link-hover); }
.page-settings-link svg, .page-help-link svg { width: 16px; height: 16px; }

/* Sections inside a page */
.section { margin-bottom: var(--space-8); }
.section-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.section-title { font-size: var(--fs-xl); font-weight: 650; color: var(--text-strong); }
.section-description { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--fs-sm); }


/* ── 5. Buttons ──────────────────────────────────────────────────────────
   Pill shaped. One primary per area; secondary for everything ordinary;
   ghost for low-emphasis links; danger ONLY for actions that stop, delete
   or sign out. Every size is at least 40px tall (touch). */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
    min-height: var(--control-height);
    padding: 0 var(--space-5);
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.btn:visited { color: inherit; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-sm { min-height: var(--control-height-sm); padding: 0 var(--space-4); font-size: var(--fs-sm); }
.btn-lg { min-height: 52px; padding: 0 var(--space-8); font-size: var(--fs-md); }
.btn-block { display: flex; width: 100%; }
.btn-icon { width: var(--control-height); padding: 0; }
.btn-icon.btn-sm { width: var(--control-height-sm); }

.btn-primary, .btn-default,
.btn-primary:visited, .btn-default:visited {
    background: var(--primary-gradient);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(34, 99, 238, 0.20);
}
.btn-primary:hover, .btn-default:hover {
    background: var(--primary-gradient-hover);
    color: #FFFFFF;
    box-shadow: var(--shadow-glow);
    opacity: 1;
}

.btn-secondary, .btn-outline, .btn-outline-btn,
.btn-secondary:visited, .btn-outline:visited, .btn-outline-btn:visited {
    background: var(--surface);
    color: var(--text-strong);
    border-color: var(--border-button);
}
.btn-secondary:hover, .btn-outline:hover, .btn-outline-btn:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--text-strong);
    opacity: 1;
}

.btn-ghost, .btn-ghost-btn,
.btn-ghost:visited, .btn-ghost-btn:visited {
    background: transparent;
    color: var(--link);
    border-color: transparent;
}
.btn-ghost:hover, .btn-ghost-btn:hover { background: var(--primary-soft); color: var(--link-hover); }

.btn-link-btn, .btn-link-btn:visited { background: transparent; color: var(--link); padding: 0 var(--space-1); min-height: auto; }

.btn-danger, .btn-destructive,
.btn-danger:visited, .btn-destructive:visited {
    background: var(--danger);
    color: #FFFFFF;
    border-color: var(--danger);
}
.btn-danger:hover, .btn-destructive:hover {
    background: color-mix(in srgb, var(--danger), black 12%);
    border-color: color-mix(in srgb, var(--danger), black 12%);
    color: #FFFFFF;
    opacity: 1;
}
/* Quieter danger, for a row action that still deletes or stops something. */
.btn-danger-outline, .btn-danger-outline:visited {
    background: var(--surface);
    color: var(--danger-text);
    border-color: var(--danger-border);
}
.btn-danger-outline:hover { background: var(--danger-soft); border-color: var(--danger-text); color: var(--danger-text); }

.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-color: rgba(255, 255, 255, 0.9) rgba(255, 255, 255, 0.9) rgba(255, 255, 255, 0.9) transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after { border-color: var(--primary) var(--primary) var(--primary) transparent; }

/* Tyro's small icon buttons in tables (edit, suspend, delete). */
.action-buttons { gap: var(--space-1); }
.action-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
}
.action-btn:hover { background: var(--primary-soft); color: var(--link); }
.action-btn.action-btn-danger:hover { background: var(--danger-soft); color: var(--danger-text); }

.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.button-row-end { justify-content: flex-end; }
.button-row-center { justify-content: center; }


/* ── 6. Cards and tiles ─────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    color: var(--text-body);
}
.card-header {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-soft);
    gap: var(--space-3);
    flex-wrap: wrap;
}
.card-title { font-size: var(--fs-lg); font-weight: 650; color: var(--text-strong); line-height: 1.3; }
.card-description { margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--text-muted); }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; }
.card-body { padding: var(--space-6); }
.card-body > :first-child { margin-top: 0; }
.card-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-soft);
    background: var(--surface-sunken);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.card-flush .card-body { padding: 0; }
/* A card that is one big link (task cards, drill-downs). */
a.card, a.card:visited { display: block; color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
a.card:hover { border-color: var(--primary); box-shadow: var(--shadow-card); }

/* Stat tiles: label, big number, one line of context.
   <div class="stat-card"><div class="stat-label">Enrolments</div><div class="stat-value num">42</div>
   <div class="stat-meta"><span class="delta delta-good">▲ 12%</span> vs last month</div></div> */
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.stat-card {
    display: block;
    position: relative;
    padding: var(--space-5) var(--space-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    color: inherit;
    text-decoration: none;
}
a.stat-card, a.stat-card:visited, button.stat-card { color: inherit; text-decoration: none; text-align: left; font: inherit; cursor: pointer; width: 100%; }
button.stat-card { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
a.stat-card:hover, button.stat-card:hover { border-color: var(--primary); box-shadow: var(--shadow-card); }
.stat-card.active, .stat-card[aria-current="true"], .stat-card[aria-pressed="true"] {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-soft);
    background: linear-gradient(180deg, var(--primary-soft) 0%, var(--surface) 70%);
}
.stat-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); margin-bottom: var(--space-2); }
/* Big standalone numbers read tighter in proportional figures; tables keep tabular ones. */
.stat-value { font-size: var(--fs-3xl); font-weight: 700; color: var(--text-strong); letter-spacing: -0.02em; line-height: 1.1; }
/* A "?" hint in a tile's label opens across the whole tile, so it never runs
   off the edge of a phone screen. */
.stat-label:has(> .hint) { display: flex; align-items: center; gap: var(--space-1); }
.stat-card .hint { position: static; }
.stat-card .hint > summary { position: relative; }
.stat-card .hint-body { left: var(--space-3); right: var(--space-3); top: 48px; width: auto; max-width: none; transform: none; }
.stat-meta { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); }
.stat-change { font-size: var(--fs-xs); font-weight: 600; margin-top: var(--space-2); }
.stat-change-up { color: var(--success-text); }
.stat-change-down { color: var(--danger-text); }
.stat-icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: var(--space-4); }
.stat-icon-primary { background: var(--primary-soft); color: var(--link); }
.stat-icon-success { background: var(--success-soft); color: var(--success-text); }
.stat-icon-warning { background: var(--warning-soft); color: var(--warning-text); }
.stat-icon-danger { background: var(--danger-soft); color: var(--danger-text); }
.stat-icon-info { background: var(--info-soft); color: var(--info-text); }

/* Compact stat tiles: many figures in little room (the top of Analytics).
   Same parts, smaller: a 13px label row that can end in a small action link,
   the value with its comparison beside it (under it when the tile is narrow),
   then optional extras (.stat-note lines, a split bar and legend). Tiles in
   a row stretch to one height, so keep their extras about the same length.
   A group of tiles gets a small heading, .stats-group-title (not an eyebrow).
   <section class="stats-group"><h2 class="stats-group-title">Enrolments and money</h2>
   <div class="stats-grid stats-compact"><div class="stat-card stat-card-compact">
     <div class="stat-label">Refunds <details class="hint">…</details><a class="stat-link" href="#refunds">See Refunds</a></div>
     <div class="stat-figure"><span class="stat-value">£43.49</span><span class="stat-meta"><span class="delta delta-bad">▲ 12%</span> (£38.80 before)</span></div>
     <p class="stat-note">2 refunds (6 before)</p></div></div></section> */
.stats-group { margin-bottom: var(--space-3); }
.stats-group-title { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.stats-grid.stats-compact { gap: var(--space-3); margin-bottom: 0; }
.stat-card.stat-card-compact { display: flex; flex-direction: column; gap: 3px; padding: var(--space-3) var(--space-4); min-width: 0; }
.stat-card-compact .stat-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-height: 24px; margin: 0; font-size: var(--fs-xs); line-height: 1.3; }
.stat-card-compact .stat-value { font-size: 1.5rem; line-height: 1.15; }
.stat-card-compact .stat-meta { margin: 0; font-size: var(--fs-xs); line-height: 1.4; }
.stat-card-compact .hint-body { top: 40px; }
.stat-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); }
.stat-note { margin: 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-muted); }
.stat-note strong { color: var(--text-strong); font-weight: 600; }
/* A small action inside a tile ("See Who Enrolled"): a link, or a button
   that looks like one, at the end of the label row. 24px to see, 40px to tap. */
.stat-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-left: auto;
    padding: 0 var(--space-1);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--link);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}
.stat-link:visited { color: var(--link); }
.stat-link:hover { background: var(--primary-soft); color: var(--link-hover); }
.stat-link::after { content: ''; position: absolute; inset: -8px -4px; }
@media (max-width: 768px) {
    .stat-card.stat-card-compact { padding: var(--space-3); }
    .stat-card-compact .stat-value { font-size: var(--fs-xl); }
    /* Two tiles to a row: a "?" opens under itself but across the whole
       grid, not squeezed into one half-width tile. */
    .stats-grid.stats-compact { position: relative; }
    .stats-compact .stat-card.stat-card-compact { position: static; }
    .stats-compact .stat-card-compact .hint-body { top: auto; left: 0; right: 0; margin-top: var(--space-2); }
}

/* Delta: colour follows good/bad, not up/down (fewer refunds going up is bad). */
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta-good { color: var(--success-text); }
.delta-bad { color: var(--danger-text); }
.delta-flat { color: var(--text-muted); }

/* Status strip: a row of small summary tiles (Connections, Home). */
.status-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.status-tile { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.status-tile-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--link); }
.status-tile-icon svg { width: 22px; height: 22px; }
.status-tile-icon.tone-success { background: var(--success-soft); color: var(--success-text); }
.status-tile-icon.tone-warning { background: var(--warning-soft); color: var(--warning-text); }
.status-tile-icon.tone-danger { background: var(--danger-soft); color: var(--danger-text); }
.status-tile-icon.tone-neutral { background: var(--neutral-soft); color: var(--neutral-text); }
.status-tile > div { min-width: 0; }
/* A tile that links to the page it sums up. */
a.status-tile, a.status-tile:visited { color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
a.status-tile:hover { border-color: var(--primary); box-shadow: var(--shadow-card); }
.status-tile-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.status-tile-value { font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong); line-height: 1.3; }
.status-tile-text { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }

/* Task cards: "What would you like to do?" grids. The whole card is the link. */
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.task-card {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    color: inherit;
    text-decoration: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.task-card:visited { color: inherit; }
.task-card:hover { border-color: var(--primary); box-shadow: var(--shadow-card); transform: translateY(-1px); color: inherit; }
.task-card-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--link); }
.task-card-icon svg { width: 22px; height: 22px; }
.task-card-title { display: block; font-size: var(--fs-md); font-weight: 650; color: var(--text-strong); margin-bottom: 2px; }
.task-card-text { display: block; font-size: var(--fs-sm); color: var(--text-muted); }
.task-card-danger .task-card-icon { background: var(--danger-soft); color: var(--danger-text); }
.task-card-danger:hover { border-color: var(--danger-text); }

/* Danger zone: the bottom-of-page box for stop and delete actions. */
.danger-zone { border: 1px solid var(--danger-border); border-radius: var(--radius-card); background: var(--surface); }
.danger-zone-header { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--danger-border); background: var(--danger-soft); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.danger-zone-title { font-size: var(--fs-lg); font-weight: 650; color: var(--danger-text); }
.danger-zone-item { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); }
.danger-zone-item + .danger-zone-item { border-top: 1px solid var(--border-soft); }
.danger-zone-item p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }


/* ── 7. Tables ──────────────────────────────────────────────────────────── */
/* A scroll box for wide tables. width:0 + min-width:100% stops the table
   from widening its flex or grid parent; the gradients hint that it scrolls.
   position:relative keeps absolutely placed bits inside it (the .sr-only
   "Actions" heading of a wide table made the whole page scroll sideways). */
.table-container, .table-scroll {
    position: relative;
    width: 0;
    min-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(to right, var(--surface) 30%, transparent) left center / 24px 100% no-repeat local,
        linear-gradient(to left, var(--surface) 30%, transparent) right center / 24px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(18, 35, 58, 0.14), transparent) left center / 10px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(18, 35, 58, 0.14), transparent) right center / 10px 100% no-repeat scroll;
}
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-soft); vertical-align: middle; text-align: left; }
.table th {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-sunken);
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.table thead th:first-child { border-top-left-radius: var(--radius-sm); }
.table thead th:last-child { border-top-right-radius: var(--radius-sm); }
.table td { font-size: var(--fs-sm); color: var(--text-body); }
/* Row headers (<th scope="row">) read as the first cell, not as a column head. */
.table tbody th { background: transparent; font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); white-space: normal; letter-spacing: 0; }
/* An address or setting name in a cell may break anywhere, so a reference
   table fits its box instead of hiding its last column off to the side. */
.table td code { overflow-wrap: anywhere; }
/* The first column stays put while the rest scrolls sideways on a phone. */
.table-pin-first th:first-child, .table-pin-first td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border-soft); }
.table-pin-first thead th:first-child { z-index: 2; background: var(--surface-sunken); }
.table-pin-first tbody tr:hover > :first-child { background: var(--surface-hover); }
/* Strong text in a cell is navy, unless it carries a status colour ("Never" in amber). */
.table td strong:not([class*="text-"]), .table td .strong:not([class*="text-"]) { color: var(--text-strong); }
.table tbody tr { transition: background-color 0.12s ease; }
.table tbody tr:hover { background-color: var(--surface-hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num, .table th.num { text-align: right; white-space: nowrap; }
.table td.actions, .table th.actions { text-align: right; white-space: nowrap; width: 1%; }
.table-sticky thead th { position: sticky; top: var(--topbar-height); z-index: 2; }
.table-compact th, .table-compact td { padding: var(--space-2) var(--space-3); }
.card > .table-container .table th:first-child,
.card > .table-scroll .table th:first-child,
.card > .table-container .table td:first-child,
.card > .table-scroll .table td:first-child { padding-left: var(--space-6); }
.card > .table-container .table th:last-child,
.card > .table-scroll .table th:last-child,
.card > .table-container .table td:last-child,
.card > .table-scroll .table td:last-child { padding-right: var(--space-6); }
.card > .table-container .table thead th,
.card > .table-scroll .table thead th { border-radius: 0; }
.cell-sub { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.user-cell-avatar { background: var(--primary-gradient); color: #FFFFFF; font-size: var(--fs-xs); }
.user-cell-name { color: var(--text-strong); font-weight: 600; }
.user-cell-email { color: var(--text-muted); font-size: var(--fs-xs); }

/* Phone: a table with class "table-stack" turns each row into a card.
   Give every <td> a data-label="Column name" (data-label="" for the actions
   cell). The selectors are long on purpose: they must beat the card padding
   rules above whatever the order. */
@media (max-width: 640px) {
    .table.table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .table.table-stack, .table.table-stack tbody, .table.table-stack tr, .table.table-stack td { display: block; width: 100%; }
    .table.table-stack tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
    .table.table-stack tbody tr:hover { background: transparent; }
    /* Label in the left 38%, the cell's own content (any markup) on the right. */
    .table.table-stack td,
    .card > .table-container .table.table-stack tr td,
    .card > .table-scroll .table.table-stack tr td { position: relative; min-height: 28px; padding: var(--space-1) 0 var(--space-1) 38%; border: 0; text-align: left; }
    .table.table-stack td::before { content: attr(data-label); position: absolute; left: 0; top: var(--space-1); width: 35%; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
    .table.table-stack td[data-label=""],
    .table.table-stack td:not([data-label]),
    .card > .table-container .table.table-stack tr td[data-label=""],
    .card > .table-scroll .table.table-stack tr td[data-label=""] { padding-left: 0; }
    .table.table-stack td[data-label=""]::before, .table.table-stack td:not([data-label])::before { content: none; }
    .table.table-stack td.actions { padding-top: var(--space-2); }
}


/* ── 8. Forms ───────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-5); }
.form-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); margin-bottom: var(--space-2); }
.form-label-optional { font-weight: 400; color: var(--text-muted); }
.form-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-2); line-height: 1.45; }
.form-error { font-size: var(--fs-xs); font-weight: 600; color: var(--danger-text); margin-top: var(--space-2); }
.form-input, .form-select, .form-textarea {
    min-height: var(--control-height);
    padding: 0.5rem 0.875rem;
    font-size: var(--fs-base);
    font-family: inherit;
    color: var(--text-strong);
    background-color: var(--surface);
    border: 1px solid var(--input);
    border-radius: var(--radius-control);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-textarea { min-height: 96px; padding-top: 0.625rem; line-height: 1.5; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); opacity: 1; }
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--text-muted); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.form-input.is-invalid, .form-select.is-invalid, .form-textarea.is-invalid { border-color: var(--danger-text); }
.form-input.is-invalid:focus, .form-select.is-invalid:focus, .form-textarea.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-text), transparent 70%); }
.form-input:disabled, .form-select:disabled, .form-textarea:disabled { background: var(--surface-sunken); color: var(--text-muted); cursor: not-allowed; }
.form-input[readonly] { background: var(--surface-sunken); }
.form-select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2356677E' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-size: 1.1rem;
    cursor: pointer;
}
:root.dark .form-select, .theme-dark .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23A3ABB8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
:root.dark .theme-light .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2356677E' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
input[type="date"].form-input, input[type="time"].form-input { min-width: 0; }
.form-row { gap: var(--space-4); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding-top: var(--space-2); }
/* Phones: 16px stops iOS zooming into a focused field. */
@media (max-width: 640px) {
    .form-input, .form-select, .form-textarea { font-size: var(--fs-md); }
}

/* Input with a unit or a button stuck to it: <div class="input-group"><input class="form-input"><span class="input-suffix">days</span></div> */
.input-group { display: flex; align-items: stretch; }
.input-group > .form-input, .input-group > .form-select { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-suffix, .input-group > .btn {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-4);
    border: 1px solid var(--input);
    border-left: 0;
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
    min-height: var(--control-height);
}
.input-group > .btn { color: var(--text-strong); background: var(--surface); }

/* Search field with an icon: <div class="search-box"><svg…/><input class="form-input" type="search"></div> */
.search-box { max-width: 360px; }
.search-box svg { width: 18px; height: 18px; left: 0.875rem; color: var(--text-muted); }
.search-box input { padding-left: 2.6rem; }

/* Filter bar: fields in one wrapping row, labels above, Apply/Reset last. */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
}
.filter-bar .form-group { margin: 0; min-width: 160px; flex: 0 1 220px; }
@media (max-width: 640px) { .filter-bar .form-group, .filter-bar .form-group-grow { flex: 1 1 100%; } }
.filters-bar { gap: var(--space-3); }
.filter-bar .form-group-grow { flex: 1 1 260px; }
.filter-bar .form-label { font-size: var(--fs-xs); }
.filter-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.filter-more > summary { list-style: none; }

/* Checkboxes and radios (Tyro classes): 20px, brand colour when on. */
.checkbox-input, .radio-input { width: 20px; height: 20px; border: 1.5px solid var(--input); background: var(--surface); }
.checkbox-input:checked, .radio-input:checked, .checkbox-input:indeterminate { background-color: var(--primary); border-color: var(--primary); }
.checkbox-input:checked::after { border-color: #FFFFFF; }
.radio-input:checked::after { background: #FFFFFF; }
.checkbox-label { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 40px; }
.checkbox-text { font-size: var(--fs-base); color: var(--text-strong); font-weight: 500; }
/* A checkbox or radio with a title and a line of help, the whole row clickable.
   <label class="choice"><input type="checkbox"><span><span class="choice-title">…</span><span class="choice-help">…</span></span></label> */
.choice {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    cursor: pointer;
}
.choice + .choice { margin-top: var(--space-2); }
.choice:hover { border-color: var(--border-button); background: var(--surface-hover); }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.choice input { margin-top: 2px; flex-shrink: 0; }
.choice > input[type="checkbox"]:not(.checkbox-input):not(.switch):not(.toggle-input),
.choice > input[type="radio"]:not(.radio-input) { width: 20px; height: 20px; }
/* A labelled set of choices: <fieldset class="choice-group"><legend class="choice-group-title">…</legend><label class="choice">…</label>…</fieldset> */
.choice-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice-group-title { margin-bottom: var(--space-2); padding: 0; font-size: var(--fs-sm); font-weight: 650; color: var(--text-strong); }
.choice-title { display: block; font-weight: 600; color: var(--text-strong); }
.choice-help { display: block; font-size: var(--fs-sm); color: var(--text-muted); }

/* Switch: a real on/off control. Use a checkbox with class="switch" and
   role="switch"; its label says what ON means.
   <label class="switch-row"><span><span class="switch-label">Customer details</span>
   <span class="switch-help">Names, emails and phone numbers</span></span>
   <input type="checkbox" class="switch" role="switch"></label> */
.switch {
    -webkit-appearance: none;
            appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    margin: 0;
    border-radius: var(--radius-pill);
    background: var(--input);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.switch::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}
.switch:checked { background: var(--primary); }
.switch:checked::before { transform: translateX(20px); }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }
.switch-danger:checked { background: var(--danger); }
.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 56px;
    padding: var(--space-3) 0;
    cursor: pointer;
}
.switch-row + .switch-row { border-top: 1px solid var(--border-soft); }
.switch-label { display: block; font-weight: 600; color: var(--text-strong); }
.switch-help { display: block; font-size: var(--fs-sm); color: var(--text-muted); }
.switch-state { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); min-width: 2.2em; text-align: right; }
.switch:checked + .switch-state { color: var(--success-text); }
/* Tyro's toggle (label.toggle-label > input.toggle-input + span.toggle-slider). */
.toggle-slider { width: 46px; height: 26px; background-color: var(--input); }
.toggle-slider:before { width: 20px; height: 20px; left: 3px; bottom: 3px; }
.toggle-input:checked + .toggle-slider { background-color: var(--primary); }
.toggle-input:focus-visible + .toggle-slider { outline: 2px solid var(--ring); outline-offset: 2px; }
.toggle-text { font-size: var(--fs-base); color: var(--text-strong); }


/* ── 9. Status: badges, pills, notices ──────────────────────────────────
   Words carry the meaning; colour only backs them up. Text uses the
   -text token on the -soft tint (always 4.5:1). */
.badge, .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    min-height: 24px;
    border: 1px solid var(--neutral-border);
    border-radius: var(--radius-pill);
    background: var(--neutral-soft);
    color: var(--neutral-text);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}
.badge-primary, .pill-primary { background: var(--primary-soft); color: var(--info-text); border-color: var(--info-border); }
.badge-secondary, .pill-neutral { background: var(--neutral-soft); color: var(--neutral-text); border-color: var(--neutral-border); }
.badge-success, .pill-success { background: var(--success-soft); color: var(--success-text); border-color: var(--success-border); }
.badge-warning, .pill-warning { background: var(--warning-soft); color: var(--warning-text); border-color: var(--warning-border); }
.badge-danger, .pill-danger { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger-border); }
.badge-info, .pill-info { background: var(--info-soft); color: var(--info-text); border-color: var(--info-border); }
/* A dot before the word, for live states ("Working", "Paused"). */
.pill-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
/* Solid version for one strong state on a row (e.g. "Your lead"). */
.pill-solid { background: var(--primary); color: #FFFFFF; border-color: var(--primary); }
.badge-list { gap: var(--space-1); }

/* Notice: a persistent message box. Use this, NOT Tyro's .alert, for
   anything that must stay on screen: Tyro's script fades every .alert out
   after five seconds.
   <div class="notice notice-warning" role="status"><svg class="notice-icon">…</svg>
   <div class="notice-body"><p class="notice-title">…</p><p>…</p>
   <div class="notice-actions">…</div></div></div> */
.notice, .alert {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    border: 1px solid var(--info-border);
    border-radius: 14px;
    background: var(--info-soft);
    color: var(--text-strong);
    font-size: var(--fs-sm);
}
.notice-icon, .alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: var(--info-text); }
.notice-body, .alert-content { flex: 1; min-width: 0; }
.notice-body > * + * { margin-top: var(--space-1); }
.notice-body > .notice-actions { margin-top: var(--space-3); }
.notice-title, .alert-title { font-size: var(--fs-base); font-weight: 650; color: var(--text-strong); }
.alert-message { font-size: var(--fs-sm); }
.notice-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.notice-success, .alert-success { background: var(--success-soft); border-color: var(--success-border); color: var(--text-strong); }
.notice-success .notice-icon, .alert-success svg { color: var(--success-text); }
.notice-warning, .alert-warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--text-strong); }
.notice-warning .notice-icon, .alert-warning svg { color: var(--warning-text); }
.notice-danger, .notice-error, .alert-error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--text-strong); }
.notice-danger .notice-icon, .notice-error .notice-icon, .alert-error svg { color: var(--danger-text); }
.notice-info, .alert-info { background: var(--info-soft); border-color: var(--info-border); color: var(--text-strong); }
.notice-neutral { background: var(--surface-sunken); border-color: var(--border); }
.notice-neutral .notice-icon { color: var(--text-muted); }
.notice-compact { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
/* A result moved into its card (projukti.js placeNotice) sits inside the card's padding, not edge to edge. */
.card > .notice { margin: var(--space-4) var(--space-6) 0; overflow-wrap: anywhere; }
.card > .notice + .card-body { padding-top: var(--space-4); }
/* A notice people may hide for themselves: .notice-dismissible, with
   @include('dashboard.partials.notice-dismiss') as its last child (an X, 40px
   to tap, top right). Information only: never on an error, a security
   warning or a list of things to act on. projukti.js sets [hidden]. */
.notice[hidden] { display: none !important; }
.notice-dismissible { align-items: flex-start; }
.notice-dismiss { flex-shrink: 0; margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0; }
.notice-dismiss-btn {
    display: inline-grid;
    place-items: center;
    width: var(--control-height-sm);
    height: var(--control-height-sm);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.notice-dismiss-btn:hover { background: var(--surface); color: var(--text-strong); }
.notice-dismiss-btn svg { width: 18px; height: 18px; }
/* One paragraph with the title in bold at its start: a notice that must stay
   short (above figures) reads in one or two lines instead of three. */
.notice-lead { font-weight: 650; color: var(--text-strong); }


/* Toasts (only shown when notification_style is "toast"). */
.toast { border-radius: 14px; box-shadow: var(--shadow-pop); font-family: var(--font-sans); }


/* ── 10. Navigation: tabs, chips, segmented, pagination ──────────────── */

/* Horizontal tabs: <nav class="tabs" aria-label="…"><a class="tab-link active" aria-current="page">…</a></nav>
   A wide screen scrolls a long row sideways; a phone wraps it (below). */
.tabs {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.tab-link:visited { color: var(--text-muted); }
.tab-link:hover { color: var(--text-strong); border-bottom-color: var(--border-button); }
.tab-link.active, .tab-link[aria-current="page"], .tab-link[aria-selected="true"] { color: var(--link); border-bottom-color: var(--primary); }
.tab-count { min-width: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--neutral-soft); color: var(--neutral-text); font-size: var(--fs-xs); line-height: 22px; text-align: center; }
.tab-link.active .tab-count { background: var(--primary-soft); color: var(--info-text); }
/* Phones: a sideways-scrolling row hid its last tabs with nothing half in
   view to say there were more, so the tabs wrap onto a second row as pills. */
@media (max-width: 640px) {
    .tabs { flex-wrap: wrap; gap: var(--space-2); overflow: visible; padding-bottom: var(--space-4); }
    .tab-link { min-height: 40px; margin: 0; padding: 0 var(--space-4); border: 1px solid var(--border-button); border-radius: var(--radius-pill); background: var(--surface); }
    .tab-link:hover { border-color: var(--primary); }
    .tab-link.active, .tab-link[aria-current="page"], .tab-link[aria-selected="true"] { border-color: var(--primary); background: var(--primary-soft); }
}

/* Vertical tabs (Tyro's vtabs, also for plain links): a sticky list on the
   left, the panel on the right; a row of buttons on phones.
   <div class="vtabs-layout"><nav class="vtabs-sidebar"><a class="vtabs-item active" aria-current="page">…</a></nav><div>…</div></div> */
.vtabs-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-6); }
.vtabs-sidebar {
    top: calc(var(--topbar-height) + var(--space-6));
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    gap: 2px;
}
.vtabs-item {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    color: var(--text-body);
    font-size: var(--fs-base);
    font-weight: 500;
    text-decoration: none;
}
.vtabs-item:visited { color: var(--text-body); }
.vtabs-item:hover { background: var(--surface-hover); color: var(--text-strong); }
.vtabs-item.active, .vtabs-item[aria-current="page"] { background: var(--primary-soft); color: var(--link); font-weight: 650; }
.vtabs-group-title { padding: var(--space-3) var(--space-3) var(--space-1); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
@media (max-width: 900px) {
    .vtabs-layout { grid-template-columns: minmax(0, 1fr); }
    .vtabs-sidebar { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .vtabs-sidebar .vtabs-item { width: auto; flex: 0 0 auto; white-space: nowrap; }
    .vtabs-group-title { display: none; }
}

/* Chips: filters you switch on and off. <div class="chips"><button class="chip active" aria-pressed="true">Website <span class="chip-count">12</span></button></div> */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-button);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-strong);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.chip:visited { color: var(--text-strong); }
.chip:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--text-strong); }
.chip.active, .chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.chip-count { min-width: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--neutral-soft); color: var(--neutral-text); font-size: var(--fs-xs); line-height: 22px; text-align: center; }
.chip.active .chip-count, .chip[aria-pressed="true"] .chip-count, .chip[aria-current="page"] .chip-count { background: #FFFFFF; color: var(--primary); }
.chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--swatch, var(--chart-1)); flex-shrink: 0; }

/* Segmented control: two to five mutually exclusive views ("Day / Week / Month"). */
.segmented { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--border); gap: 2px; max-width: 100%; overflow-x: auto; }
.segmented-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 38px;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-body);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.segmented-item:visited { color: var(--text-body); }
.segmented-item:hover { color: var(--text-strong); background: var(--surface); }
.segmented-item.active, .segmented-item[aria-pressed="true"], .segmented-item[aria-current="page"] { background: var(--surface); color: var(--link); box-shadow: 0 1px 3px rgba(18, 35, 58, 0.12); }

/* Pagination: the app's partial (dashboard.partials.pagination: .pager-nav .pg)
   and Tyro's (.tyro-pagination, its <style> sits in <body>, hence `body`). */
.pager, .pager-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding: var(--space-4) 0; }
.pager-info { margin-right: auto; font-size: var(--fs-sm); color: var(--text-muted); }
.card-footer .pager, .card-footer .pager-nav { padding: 0; }
body .pg, body .tyro-pagination-links a, body .tyro-pagination-links span,
body .tyro-pagination-link, body .tyro-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-strong);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}
body .pg:visited { color: var(--text-strong); }
body .pg:hover, body .tyro-pagination-links a:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--text-strong); }
body .pg-active, body .pg[aria-current="page"], body .tyro-pagination-links [aria-current="page"], body .tyro-pagination-link.active, body .tyro-pagination-links .active {
    background: var(--primary);
    border-color: var(--primary);
    color: #FFFFFF;
}
body .pg-disabled, body .tyro-pagination-links .disabled { color: var(--text-muted); background: transparent; border-color: transparent; cursor: default; }
body .tyro-pagination-info, body .tyro-pagination-info-total { color: var(--text-muted); font-size: var(--fs-sm); }
body .tyro-pagination-info-label { font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; }
body .tyro-pagination-info-range { background: var(--surface-sunken); color: var(--text-strong); font-size: var(--fs-sm); }


/* ── 11. Disclosure, code, copy, steps ───────────────────────────────── */

/* "Show technical details": developer-only detail behind a plain summary.
   <details class="tech-details"><summary>Show technical details</summary><div class="tech-details-body">…</div></details> */
details > summary { cursor: pointer; }
.tech-details, .disclosure { border-top: 1px solid var(--border-soft); margin-top: var(--space-4); }
.tech-details > summary, .disclosure > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    list-style: none;
    color: var(--link);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.tech-details > summary::-webkit-details-marker, .disclosure > summary::-webkit-details-marker { display: none; }
.tech-details > summary::before, .disclosure > summary::before {
    content: '';
    width: 8px;
    height: 8px;
    margin: 0 4px 0 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}
.tech-details[open] > summary::before, .disclosure[open] > summary::before { transform: rotate(45deg); }
.tech-details > summary:hover, .disclosure > summary:hover { color: var(--link-hover); text-decoration: underline; }
.tech-details-body {
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-control);
    background: var(--surface-sunken);
    border: 1px solid var(--border-soft);
    font-size: var(--fs-sm);
}
.tech-details-body > * + * { margin-top: var(--space-3); }

/* Help hint: a "?" that opens a short explanation on click or tap (title=
   tooltips never show on phones). <details class="hint"><summary aria-label="What does this mean?">?</summary><div class="hint-body">…</div></details> */
.hint { position: relative; display: inline-block; vertical-align: middle; }
.hint > summary {
    list-style: none;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border-button);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    background: var(--surface);
}
.hint > summary::-webkit-details-marker { display: none; }
.hint > summary::after { content: ''; position: absolute; inset: -10px; }
.hint[open] > summary, .hint > summary:hover { border-color: var(--primary); color: var(--link); }
.hint-body {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(300px, 80vw);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--popover);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-pop);
    color: var(--text-body);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
}

/* A status pill that opens its detail like a hint: <details class="hint hint-pill"><summary aria-label="OK. Show technical detail">
   <span class="pill pill-success">OK</span></summary><div class="hint-body">…</div></details>. The detail opens to the
   left, so it can't widen a phone screen. */
.hint-pill > summary { display: inline-flex; align-items: center; width: auto; height: auto; min-height: 32px; border: 0; border-radius: var(--radius-pill); background: transparent; }
.hint-pill > summary:hover .pill, .hint-pill[open] > summary .pill { border-color: currentColor; }
.hint-pill .hint-body { left: auto; right: 0; transform: none; font-family: var(--font-mono); font-size: var(--fs-xs); }

/* A card that folds open: <details class="card fold-card"><summary><span><span class="card-title">…</span>
   <span class="card-description">…</span></span></summary><div class="card-body">…</div></details> */
.fold-card > summary { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); list-style: none; border-radius: var(--radius-card); }
.fold-card > summary::-webkit-details-marker { display: none; }
.fold-card > summary > span { flex: 1; min-width: 0; }
.fold-card > summary .card-title, .fold-card > summary .card-description { display: block; }
.fold-card > summary::after {
    content: '';
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-right: var(--space-1);
    border-right: 2px solid var(--link);
    border-bottom: 2px solid var(--link);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
.fold-card[open] > summary::after { transform: rotate(-135deg); }
.fold-card > summary:hover { background: var(--surface-hover); }
.fold-card[open] > summary { border-bottom: 1px solid var(--border-soft); border-radius: var(--radius-card) var(--radius-card) 0 0; }
@media (max-width: 768px) { .fold-card > summary { padding: var(--space-4); } }

/* Code */
code, kbd, samp, .mono { font-family: var(--font-mono); font-size: max(0.875em, var(--fs-xs)); }
:not(pre) > code {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--surface-sunken);
    border: 1px solid var(--border-soft);
    color: var(--text-strong);
    overflow-wrap: break-word;
}
pre, .code-block, .code-block-pre {
    position: relative;
    margin: var(--space-3) 0;
    padding: var(--space-4) var(--space-5);
    border-radius: 12px;
    background: #0F1E30;
    color: #E6EDF7;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.6;
    overflow-x: auto;
    tab-size: 2;
}
:root.dark pre, :root.dark .code-block, :root.dark .code-block-pre,
.theme-dark pre, .theme-dark .code-block, .theme-dark .code-block-pre { background: #0A0D12; border: 1px solid var(--border); }
:root.dark .theme-light pre, :root.dark .theme-light .code-block { background: #0F1E30; border: 0; }
:root.dark .theme-light .page-eyebrow { color: var(--primary); }
pre code { font-size: inherit; color: inherit; background: none; border: 0; padding: 0; }
/* A code block with a Copy button in the corner: <div class="code-wrap"><pre id="x">…</pre><button class="btn btn-sm copy-btn" data-copy="#x">Copy</button></div> */
.code-wrap { position: relative; }
/* The Copy button sits in its own band above the first line: padding on the
   right edge alone scrolls away with a long line (a curl, a URL). */
.code-wrap > pre { padding-top: calc(40px + var(--space-3)); padding-right: var(--space-5); }
.code-wrap > .copy-btn { position: absolute; top: var(--space-2); right: var(--space-2); background: rgba(255, 255, 255, 0.10); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.18); }
.code-wrap > .copy-btn:hover { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.3); }

/* Copy field: a value (address, key) with a Copy button.
   <div class="copy-field"><code class="copy-value" id="k">…</code><button class="btn btn-secondary btn-sm" data-copy="#k">Copy</button></div> */
.copy-field {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-1);
    border: 1px solid var(--border-button);
    border-radius: 14px;
    background: var(--surface-sunken);
}
.copy-field .copy-value {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-strong);
    overflow-x: auto;
    white-space: nowrap;
    user-select: all;
}
.copy-btn.is-copied, [data-copy].is-copied { color: var(--success-text); border-color: var(--success-border); background: var(--success-soft); }
/* The one-time secret (a new key): a stronger box that says it shows once. */
.secret-box { padding: var(--space-5); border: 1px solid var(--warning-border); border-radius: var(--radius-card); background: var(--warning-soft); }
.secret-box .copy-field { background: var(--surface); }

/* Steps: numbered instructions or the screens of a wizard.
   <ol class="steps"><li class="step is-done"><span class="step-marker">1</span><div class="step-body">
   <p class="step-title">…</p><p class="step-text">…</p></div></li>…</ol> */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { position: relative; display: flex; gap: var(--space-4); padding-bottom: var(--space-5); }
.step:not(:last-child)::after { content: ''; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: var(--border); }
.step-marker {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid var(--border-button);
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 700;
    font-size: var(--fs-sm);
}
.step-body { flex: 1; min-width: 0; padding-top: 6px; }
.step-title { font-weight: 650; color: var(--text-strong); font-size: var(--fs-md); }
.step-text { margin-top: 2px; color: var(--text-body); font-size: var(--fs-sm); }
.step-body > * + * { margin-top: var(--space-2); }
.step.is-current .step-marker { border-color: var(--primary); background: var(--primary); color: #FFFFFF; box-shadow: var(--focus-ring); }
.step.is-done .step-marker { border-color: var(--success-text); background: var(--success-soft); color: var(--success-text); }
.step.is-done:not(:last-child)::after { background: var(--success-border); }
/* A step as its own card (wizard screens, "Done when you see…" checkpoints). */
.step-card { padding: var(--space-5) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-soft); }
.step-card + .step-card { margin-top: var(--space-4); }
.step-card-header { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.step-card .step-marker { width: 32px; height: 32px; }
.checkpoint { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--success-soft); color: var(--text-strong); font-size: var(--fs-sm); }
.checkpoint::before { content: '\2713'; color: var(--success-text); font-weight: 700; }

/* Stepper: where you are in a wizard. Collapses to "Step 2 of 4" on phones.
   <ol class="stepper" data-progress="Step 2 of 4"><li class="is-done">Who</li><li class="is-current" aria-current="step">Assistant</li><li>Customer details</li></ol> */
.stepper { display: flex; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-6); padding: 0; counter-reset: stepper; }
.stepper li {
    counter-increment: stepper;
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 3px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.stepper li::before { content: counter(stepper); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-sunken); color: var(--text-muted); font-size: var(--fs-xs); flex-shrink: 0; }
.stepper li.is-done { border-top-color: var(--success-text); color: var(--text-body); }
.stepper li.is-done::before { content: '\2713'; background: var(--success-soft); color: var(--success-text); }
.stepper li.is-current { border-top-color: var(--primary); color: var(--text-strong); }
.stepper li.is-current::before { background: var(--primary); color: #FFFFFF; }
@media (max-width: 640px) {
    .stepper li { font-size: 0; gap: 0; }
    .stepper li::before { display: none; }
    .stepper[data-progress]::after { content: attr(data-progress); position: absolute; }
    .stepper { position: relative; padding-bottom: var(--space-6); }
    .stepper[data-progress]::after { left: 0; bottom: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); }
}
.wizard-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; align-items: center; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-soft); }
/* The same row as a card footer: Back on the left, the next step on the right (full width on phones). */
.wizard-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.wizard-footer form { margin: 0; }
@media (max-width: 640px) {
    .wizard-footer > .btn, .wizard-footer > form, .wizard-footer > form .btn { flex: 1 1 100%; width: 100%; }
    .wizard-footer > span:empty { display: none; }
}
/* A wizard screen's own heading and the sentence under it. */
.step-heading { font-size: var(--fs-xl); font-weight: 650; color: var(--text-strong); line-height: 1.3; }
.step-lead { margin-top: var(--space-2); margin-bottom: var(--space-5); color: var(--text-body); max-width: 65ch; }

/* Side-by-side choices, each with its own button; one may be recommended.
   <div class="option-grid"><div class="option-card is-recommended"><p class="option-title">…</p><p>…</p><a class="btn">…</a></div>…</div> */
.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-4); }
.option-grid > * { min-width: 0; }
.option-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.option-card.is-recommended { border-color: var(--primary); background: var(--primary-soft); }
.option-card p { color: var(--text-body); }
.option-card .btn { margin-top: auto; }
.option-card .option-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-md); font-weight: 650; color: var(--text-strong); }

/* Key-value list: <dl class="kv"><div><dt>Created</dt><dd>6 Oct 2026</dd></div></dl> */
.kv { display: grid; gap: 0; margin: 0; }
.kv > div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.kv dd { margin: 0; color: var(--text-strong); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .kv > div { grid-template-columns: 1fr; gap: 2px; } }


/* ── 12. Dialogs, empty states, charts, misc ─────────────────────────── */

/* Tyro's global confirm modal (showConfirm/showDanger). Its <style> comes
   after this file, so each rule carries `body`. */
body .modal-overlay { background-color: rgba(10, 15, 26, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body .modal-container, body .modal {
    max-width: 460px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-pop);
}
body .modal-body { padding: var(--space-6) var(--space-6) var(--space-4); }
body .modal-body-inner { gap: var(--space-4); }
body .modal-icon { width: 44px; height: 44px; background: var(--primary-soft); color: var(--link); }
body .modal-icon.danger { background: var(--danger-soft); color: var(--danger-text); }
body .modal-icon.success { background: var(--success-soft); color: var(--success-text); }
body .modal-title { font-size: var(--fs-lg); font-weight: 650; color: var(--text-strong); padding-right: var(--space-6); }
body .modal-message { margin-top: var(--space-1); font-size: var(--fs-base); color: var(--text-body); line-height: 1.55; white-space: pre-line; }
body .modal-footer { padding: var(--space-3) var(--space-6) var(--space-6); gap: var(--space-2); border-top: 0; }
body .modal-header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-soft); }
body .modal-close { top: var(--space-4); right: var(--space-4); width: 36px; height: 36px; border-radius: 50%; }
body .modal-close:hover { background: var(--surface-sunken); }
body .btn-modal-cancel, body .btn-modal-confirm, body .btn-modal-danger {
    min-height: var(--control-height);
    padding: 0 var(--space-5);
    border-radius: var(--radius-pill);
    font-size: var(--fs-base);
    font-weight: 600;
}
body .btn-modal-cancel { background: var(--surface); color: var(--text-strong); border: 1px solid var(--border-button); }
body .btn-modal-cancel:hover { background: var(--primary-soft); border-color: var(--primary); }
body .btn-modal-confirm { background: var(--primary-gradient); color: #FFFFFF; border: 1px solid transparent; }
body .btn-modal-confirm:hover { background: var(--primary-gradient-hover); opacity: 1; box-shadow: var(--shadow-glow); }
body .btn-modal-danger { background: var(--danger); color: #FFFFFF; border: 1px solid var(--danger); }
body .btn-modal-danger:hover { background: color-mix(in srgb, var(--danger), black 12%); border-color: color-mix(in srgb, var(--danger), black 12%); }

/* Native <dialog class="dialog">: use for any new modal (it traps focus,
   closes on Esc and is full screen on phones).
   <dialog class="dialog"><div class="dialog-header"><h2 class="dialog-title">…</h2><button class="dialog-close" aria-label="Close">×</button></div>
   <div class="dialog-body">…</div><div class="dialog-footer">…</div></dialog> */
.dialog {
    margin: auto;   /* Tyro's reset zeroes every margin, which pinned dialogs top-left */
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text-body);
    box-shadow: var(--shadow-pop);
}
.dialog[open] { display: flex; flex-direction: column; }
.dialog-wide { width: min(880px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(10, 15, 26, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialog-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-soft); }
.dialog-title { flex: 1; font-size: var(--fs-lg); font-weight: 650; }
.dialog-close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.dialog-close:hover { background: var(--surface-sunken); color: var(--text-strong); }
.dialog-body { flex: 1 1 auto; padding: var(--space-5) var(--space-6); overflow-y: auto; }
.dialog-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6) var(--space-5); border-top: 1px solid var(--border-soft); }
@media (max-width: 640px) {
    .dialog, .dialog-wide { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
    body .modal-container { width: calc(100vw - 24px); border-radius: 18px; }
    /* Tyro stacks the buttons but widens only Cancel and a non-danger
       confirm, so "Pause All AI" looked like the lesser choice. */
    body .modal-footer .btn { width: 100%; }
}

/* Empty state: say what is missing and what to do next.
   <div class="empty-state"><svg class="empty-state-icon">…</svg><p class="empty-state-title">…</p>
   <p class="empty-state-description">…</p><div class="empty-state-actions">…</div></div> */
.empty-state { padding: var(--space-10) var(--space-6); text-align: center; }
.empty-state-icon { width: 56px; height: 56px; padding: 14px; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--primary-soft); color: var(--link); }
/* margin-inline auto: the global p { max-width: 75ch } made the title's box
   narrower than a wide card and left it at the left edge (Knowledge base, 12 Oct). */
.empty-state-title { font-size: var(--fs-lg); font-weight: 650; color: var(--text-strong); margin-bottom: var(--space-1); margin-left: auto; margin-right: auto; }
.empty-state-description { font-size: var(--fs-base); color: var(--text-muted); margin: 0 auto var(--space-4); max-width: 46ch; }
.empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

/* Charts and legends. Series colours are --chart-1..6 in that fixed order;
   labels and values stay in text colours, never the series colour.
   <ul class="legend"><li class="legend-item"><span class="legend-swatch swatch-1"></span>Leads</li></ul> */
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--text-body); }
.legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--swatch, var(--chart-1)); flex-shrink: 0; }
.legend-line { width: 18px; height: 3px; border-radius: 2px; background: var(--swatch, var(--chart-1)); }
.swatch-1 { --swatch: var(--chart-1); }
.swatch-2 { --swatch: var(--chart-2); }
.swatch-3 { --swatch: var(--chart-3); }
.swatch-4 { --swatch: var(--chart-4); }
.swatch-5 { --swatch: var(--chart-5); }
.swatch-6 { --swatch: var(--chart-6); }
/* "Not known yet" in a split is grey on purpose: the absence of a category, not another series colour. */
.swatch-none { --swatch: var(--text-muted); }
.chart-frame { position: relative; }
.chart-frame svg text { fill: var(--text-muted); font-family: var(--font-sans); font-size: 12px; }
.chart-tooltip { position: absolute; z-index: 20; pointer-events: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--popover); border: 1px solid var(--border); box-shadow: var(--shadow-pop); font-size: var(--fs-sm); color: var(--text-strong); }

/* Meter / bar rows: label, a track with a filled part, the value.
   <div class="bar-row"><span class="bar-label">Website</span><span class="meter"><span class="meter-fill" style="--value: 62%"></span></span><span class="bar-value num">62</span></div> */
.meter { position: relative; display: block; height: 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.meter-fill { display: block; height: 100%; width: var(--value, 0%); border-radius: var(--radius-pill); background: var(--swatch, var(--chart-1)); }
.bar-row { display: grid; grid-template-columns: minmax(90px, 28%) 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; font-size: var(--fs-sm); }
.bar-label { color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { color: var(--text-strong); font-weight: 600; min-width: 3ch; text-align: right; }
.progress-track { background: var(--surface-sunken); }
.progress-bar-primary { background: var(--primary); }
.progress-label { font-size: var(--fs-xs); }

/* Event log: one plain sentence per event (named "event", not "activity":
   Tyro's own .activity-* classes would clash).
   <ul class="events"><li class="event"><span class="event-time">Today 15:29</span><span class="event-text">…</span><span class="pill pill-success">OK</span></li></ul> */
.events { list-style: none; margin: 0; padding: 0; }
.event { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-sm); }
.event:last-child { border-bottom: 0; }
.event-time { color: var(--text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.event-text { color: var(--text-body); min-width: 0; }
@media (max-width: 640px) { .event { grid-template-columns: minmax(0, 1fr) auto; } .event-time { grid-column: 1 / -1; } }

.spinner { border-color: var(--border); border-top-color: var(--primary); }
.divider { height: 1px; background: var(--border); margin: var(--space-5) 0; border: 0; }
.profile-avatar { background: var(--primary-gradient); color: #FFFFFF; }
.quick-action-card, .activity-item { border-radius: var(--radius-control); }


/* ── 13. Utilities ──────────────────────────────────────────────────────── */
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.strong { font-weight: 600; color: var(--text-strong); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Text in a status colour (a word inside a sentence, not a whole block). */
.text-success { color: var(--success-text); }
.text-warning { color: var(--warning-text); }
.text-danger { color: var(--danger-text); }
.text-info { color: var(--info-text); }
.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--space-3); }
.prose h2, .prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--space-1); }

/* Layout helpers: stack (vertical rhythm), cluster (wrapping row), split
   (two ends of a row), grid-auto (responsive cards; set --min to change). */
.stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-2)); }
.split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr)); gap: var(--gap, var(--space-4)); }
.grid-2, .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-2, .grid2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
@media (max-width: 640px) { .hide-sm { display: none !important; } }
.show-sm { display: none !important; }
@media (max-width: 640px) { .show-sm { display: revert !important; } }


/* ── 14. Phones, login and error pages ───────────────────────────────── */
@media (max-width: 1024px) {
    .topbar { padding: 0 var(--space-4); }
    .page-content { padding: var(--space-6) var(--space-5) var(--space-10); }
}
@media (max-width: 768px) {
    /* Tyro turns .page-header-row into a column here, where the heading's
       360px flex-basis would become a 360px HEIGHT (a blank band under every
       title) and flex-end would push a short heading to the right edge. */
    .page-heading { flex: 0 1 auto; width: 100%; }
    .page-header-row { align-items: stretch; }
    .page-content { padding: var(--space-5) var(--space-4) var(--space-10); }
    .page-title { font-size: 1.5rem; }
    .page-description { font-size: var(--fs-base); }
    .page-actions { width: 100%; }
    .card-header, .card-body, .card-footer { padding-left: var(--space-4); padding-right: var(--space-4); }
    .card > .notice { margin-left: var(--space-4); margin-right: var(--space-4); }
    .card > .table-container .table th:first-child, .card > .table-scroll .table th:first-child,
    .card > .table-container .table td:first-child, .card > .table-scroll .table td:first-child { padding-left: var(--space-4); }
    .card > .table-container .table th:last-child, .card > .table-scroll .table th:last-child,
    .card > .table-container .table td:last-child, .card > .table-scroll .table td:last-child { padding-right: var(--space-4); }
    .table th, .table td { padding: var(--space-3); }
    .stat-card { padding: var(--space-4); }
    .stat-value { font-size: 1.75rem; }
    /* One crumb fits: the page's own name (the second crumb), not the tab or
       set-up under it, so Settings never reads "Analytics" on a phone. */
    .breadcrumb > :not(:nth-child(3)) { display: none; }
    .breadcrumb > :only-child { display: revert; }
    .breadcrumb > a:nth-child(3), .breadcrumb > a:nth-child(3):visited { color: var(--text-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
    .user-dropdown-btn { padding-right: 4px; }
    .user-dropdown-arrow { display: none; }
}

/* Login (tyro-login's .auth-container): the brand page with a white card. */
.auth-container { background: var(--page); }
.auth-container .form-panel { max-width: 480px; }
.auth-container .form-card {
    max-width: 420px;
    padding: var(--space-8) var(--space-8) var(--space-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
}
.auth-container .logo-container { margin-bottom: var(--space-6); }
.auth-container .logo-container img { height: 44px; }
.auth-container .form-header { margin-bottom: var(--space-6); }
.auth-container .form-header h1, .auth-container .form-header h2 { margin: 0 0 var(--space-2); font-size: var(--fs-xl); font-weight: 700; color: var(--text-strong); }
.auth-container .form-header p { color: var(--text-muted); font-size: var(--fs-base); }
.auth-container .form-input { min-height: 48px; }
.auth-container .btn { min-height: 48px; width: 100%; }
.auth-container .form-link, .auth-container .form-link:visited { color: var(--link); }
.auth-container .form-link:hover { color: var(--link-hover); }
.auth-container .checkbox-input { width: 20px; height: 20px; border-radius: 5px; }
.auth-container .checkbox-input:checked::after { left: 6px; top: 2px; border-color: #FFFFFF; }
.auth-container .error-message { color: var(--danger-text); font-weight: 600; }
.auth-container .alert { margin-bottom: var(--space-5) !important; border-radius: 12px !important; }
.auth-footnote { margin-top: var(--space-5); text-align: center; font-size: var(--fs-xs); color: var(--text-muted); }
.theme-toggle { width: 44px; height: 44px; border-radius: 50%; border-color: var(--border); background: var(--surface); color: var(--text-muted); box-shadow: var(--shadow-soft); }
.theme-toggle:hover { color: var(--text-strong); background: var(--primary-soft); }
@media (max-width: 520px) {
    .auth-container { padding: var(--space-4); align-items: flex-start; padding-top: 72px; }
    .auth-container .form-panel { padding: 0; }
    .auth-container .form-card { padding: var(--space-6) var(--space-5) var(--space-5); }
    .theme-toggle { top: var(--space-4); right: var(--space-4); }
}

/* Error pages (resources/views/errors/minimal.blade.php). */
.error-page { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6) var(--space-4); background: var(--page); }
.error-card { width: min(520px, 100%); padding: var(--space-8); text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-card); }
.error-logo { display: block; height: 40px; width: auto; margin: 0 auto var(--space-6); }
.error-logo.logo-on-dark { display: none; }
:root.dark .error-logo.logo-on-dark { display: block; }
:root.dark .error-logo.logo-on-light { display: none; }
.error-code { display: inline-block; margin-bottom: var(--space-3); padding: 2px 12px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--info-text); font-size: var(--fs-xs); font-weight: 700; }
.error-title { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.error-text { color: var(--text-body); margin: 0 auto var(--space-6); }