/* ── @tendance style — single stylesheet - Layered on top of Bootstrap 5.3 ── */

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-Thin-sRm5u4l.otf") format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-ThinItalic-yg58w9A.otf") format('opentype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-ExtraLight-9K51O37.otf") format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-ExtraLightItalic-I9SDxeO.otf") format('opentype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-Light-T6tu3gz.otf") format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-LightItalic-MKrD3bw.otf") format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-Regular-KyFaJIw.otf") format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-Italic-6LQsUl_.otf") format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-Medium-QKcdJ_j.otf") format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-MediumItalic-Zf8Afm2.otf") format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-SemiBold-tInq8-L.otf") format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-SemiBoldItalic-qEnSkn4.otf") format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-Bold-NDDLSD-.otf") format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-BoldItalic-ms4lNZf.otf") format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-ExtraBold-hu6i7Xc.otf") format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-ExtraBoldItalic-iJ4uaXV.otf") format('opentype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-Black-DX09VZH.otf") format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url("../fonts/Exo-BlackItalic-HJTn0Yt.otf") format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* Fraunces - local @font-face declarations */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/Fraunces-Light-5W6J7yg.ttf") format('truetype');
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Fraunces-Regular-aHk7kbA.ttf") format('truetype');
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Fraunces-Medium-9yDrR6B.ttf") format('truetype');
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Fraunces-SemiBold-yKNN_kz.ttf") format('truetype');
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Fraunces-Bold-oVxjaJ3.ttf") format('truetype');
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/Fraunces-ExtraBold-ntKZQg1.ttf") format('truetype');
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/Fraunces-Black-v5lGzLU.ttf") format('truetype');
}

:root {
    --cream:        #FAF3E8;
    --cream-2:      #F1E7D5;
    --paper:        #FFFBF3;
    --paper-2:      #FCF6EA;
    --ink:          #2D1B3D;
    --ink-2:        #4A2E5E;
    --ink-3:        #1C0F2A;
    --muted:        #7A6A86;
    --line:         #E0D3BE;
    --line-2:       #F1E7D5;
    --line-soft:    #E0D3BE;
    --apricot:      #FF8C61;
    --apricot-2:    #E66E40;
    --apricot-soft: #FFE5D6;
    --apricot-ink:  #7A2E12;
    --success:      #2E7D5B;
    --success-bg:   #DFEFE3;
    --success-fg:   #1F5740;
    --warn:         #B57A1F;
    --warn-bg:      #F5E7C8;
    --warn-fg:      #7A4F0E;
    --danger:       #B5391F;
    --danger-bg:    #F6D9CE;
    --danger-fg:    #7A2412;
    --info:         #3A5A8C;
    --info-bg:      #DCE6F4;
    --info-fg:      #243B5C;
    --neutral-bg:   #F1E7D5;
    --neutral-fg:   #4A2E5E;
    --shadow-xs:   0 1px 2px rgba(45,27,61,0.06);
    --shadow-sm:   0 2px 6px -2px rgba(45,27,61,0.10), 0 1px 2px rgba(45,27,61,0.04);
    --shadow-md:   0 8px 24px -8px rgba(45,27,61,0.18), 0 2px 6px rgba(45,27,61,0.06);
    --shadow-lg:   0 24px 48px -20px rgba(45,27,61,0.28), 0 4px 8px rgba(45,27,61,0.06);
    --shadow-xl:   0 40px 80px -32px rgba(45,27,61,0.35);
}

/* dark surface (tweak) — swap cream → near-aubergine, paper → ink-2 layered */
body.surface-dark {
    --cream:        #1C0F2A;
    --cream-2:      #261736;
    --paper:        #2D1B3D;
    --paper-2:      #34204A;
    --ink:          #F8EFE0;
    --ink-2:        #E2D6C0;
    --ink-3:        #FFFBF3;
    --muted:        #A89AB6;
    --line:         #4A2E5E;
    --line-2:       #3A2350;
    --line-soft:    #4A2E5E;
    --apricot-soft: #4A2A1E;
    --apricot-ink:  #FFD3B8;
    --success-bg:   #1D3A2C;
    --success-fg:   #B0DBC2;
    --warn-bg:      #4A3618;
    --warn-fg:      #ECD49A;
    --danger-bg:    #4A2218;
    --danger-fg:    #F1B19E;
    --info-bg:      #1F2B45;
    --info-fg:      #B0C2E0;
    --neutral-bg:   #34204A;
    --neutral-fg:   #D2C2DD;

    /* ---------- COLOR · BRAND ---------- */
    --aubergine:        #2D1B3D;
    --aubergine-2:      #4A2E5E;
    --aubergine-3:      #6B4E80;
    --apricot:          #FF8C61;
    --apricot-2:        #E66E40;

    /* ---------- COLOR · INK & LINES ---------- */

    --line-ink:         #2D1B3D;   /* punchy outline borders */

    /* ---------- COLOR · SEMANTIC ---------- */
    --success:          #2E7D5B;   /* checked-in, confirmed */
    --success-soft:     #DFEFE3;
    --warn:             #B57A1F;   /* pending, awaiting */
    --warn-soft:        #F5E7C8;
    --danger:           #B5391F;   /* no-show, removed */
    --danger-soft:      #F6D9CE;
    --info:             #3A5A8C;
    --info-soft:        #DCE6F4;

    /* ---------- TYPE · FAMILIES ---------- */
    --font-serif:  'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-sans:   'Exo', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:   ui-monospace, 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
    --font-brand-italic: 700 'Exo', sans-serif;

    /* ---------- TYPE · SIZE SCALE ---------- */
    --t-xs:    11px;
    --t-sm:    13px;
    --t-base:  15px;
    --t-md:    17px;
    --t-lg:    20px;
    --t-xl:    24px;
    --t-2xl:   32px;
    --t-3xl:   44px;
    --t-4xl:   60px;
    --t-5xl:   84px;
    --t-6xl:   120px;

    /* ---------- TYPE · ROLES ----------
       Use these as composite shorthands.
       Display titles want Fraunces low-opsz + softness.
    -------------------------------------- */
    --display:  700 var(--t-5xl)/0.95 var(--font-serif);
    --h1:       600 var(--t-4xl)/1.02 var(--font-serif);
    --h2:       600 var(--t-3xl)/1.08 var(--font-serif);
    --h3:       600 var(--t-2xl)/1.15 var(--font-serif);
    --h4:       600 var(--t-xl)/1.25 var(--font-sans);
    --h5:       600 var(--t-lg)/1.3 var(--font-sans);
    --eyebrow:  600 var(--t-xs)/1.2 var(--font-sans);
    --lede:     400 var(--t-lg)/1.5 var(--font-sans);
    --body:     400 var(--t-base)/1.55 var(--font-sans);
    --body-sm:  400 var(--t-sm)/1.5 var(--font-sans);
    --label:    500 var(--t-sm)/1.3 var(--font-sans);
    --code:     400 var(--t-sm)/1.5 var(--font-mono);

    /* Fraunces variable-font feature defaults — gentle wonk for display, none for body */
    --fraunces-display-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
    --fraunces-body-settings:    "opsz" 16,  "SOFT" 0,  "WONK" 0;

    /* ---------- SPACING (4 base) ---------- */
    --s-0:   0px;
    --s-1:   4px;
    --s-2:   8px;
    --s-3:   12px;
    --s-4:   16px;
    --s-5:   20px;
    --s-6:   24px;
    --s-8:   32px;
    --s-10:  40px;
    --s-12:  48px;
    --s-16:  64px;
    --s-20:  80px;
    --s-24:  96px;
    --s-32:  128px;

    /* ---------- RADII ----------
       We mix two scales: soft pill-y on chips, calmer on cards.
    -------------------------------- */
    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   18px;
    --r-xl:   28px;
    --r-2xl:  40px;
    --r-pill: 999px;

    /* ---------- SHADOWS ----------
       Warm-tinted shadows; never neutral grey. Aubergine at low alpha.
    -------------------------------- */
    --shadow-inset: inset 0 1px 0 rgba(255, 251, 243, 0.6), inset 0 -1px 0 rgba(45, 27, 61, 0.05);
    --ring-focus: 0 0 0 3px rgba(255, 140, 97, 0.35);

    /* ---------- MOTION ---------- */
    --ease:        cubic-bezier(.22, 1, .36, 1);   /* default — gentle settle */
    --ease-out:    cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast:    120ms;
    --dur:         200ms;
    --dur-slow:    420ms;

    /* ---------- LAYOUT ---------- */
    --container:    1200px;
    --container-sm: 720px;
    --gutter:       var(--s-6);

    /* ---------- ELEVATION TIERS ---------- */
    --z-base: 1;
    --z-sticky: 10;
    --z-overlay: 100;
    --z-modal: 200;
    --z-toast: 300;
}

/* ── base ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Exo', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-width: 1280px;
}

body.modal-open {
    overflow: hidden !important;
}

button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── wordmark ────────────────────────────────────────────────────────────── */
.wordmark {
    font-family: 'Exo', sans-serif;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.035em;
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    white-space: nowrap;
    display: inline-block;
}
.wordmark .dot { color: var(--apricot); font-style: normal; }
.wordmark-dark { color: #FFFBF3; }
.wordmark-dark .dot { color: var(--apricot); }
.wordmark-lg { font-size: 30px; }

.studio-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font: 600 9px 'Exo', sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    vertical-align: middle;
    background: rgba(255,140,97,0.16);
    color: var(--apricot);
}

/* ── eyebrow ─────────────────────────────────────────────────────────────── */
.eyebrow {
    font-family: 'Exo', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--apricot-2);
}
.eyebrow-on-dark { color: var(--apricot); }
.eyebrow-muted { color: var(--muted); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn-pill {
    font-family: 'Exo', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.22,1,.36,1), color 200ms, border-color 200ms;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
}
.btn-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--apricot-soft);
}
.btn-pill.justify-center { justify-content: center; }
.btn-pill-primary { background: var(--apricot); color: var(--ink); }
.btn-pill-primary:hover { background: var(--apricot-2); color: #fff; }
.btn-pill-ink { background: var(--ink); color: var(--paper); }
.btn-pill-ink:hover { background: var(--ink-2); color: var(--paper); }
.btn-pill-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-pill-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-pill-ghost-dark { background: transparent; color: #FFFBF3; border: 1.5px solid rgba(255,251,243,0.35); }
.btn-pill-ghost-dark:hover { background: rgba(255,251,243,0.1); color: #fff; }
.btn-pill-quiet { background: var(--cream-2); color: var(--ink); }
.btn-pill-quiet:hover { background: var(--line); }
.btn-pill-sm { padding: 7px 14px; font-size: 13px; }
.btn-pill-lg { padding: 14px 26px; font-size: 16px; }
.btn-pill-danger { background: var(--danger-bg); color: var(--danger-fg); }
.btn-pill-danger:hover { background: var(--danger); color: #fff; }

/* icon-only buttons */
.iconbtn {
    width: 36px; height: 36px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-2);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: background 160ms;
    flex: none;
}
.iconbtn:hover { background: var(--cream-2); }
.iconbtn-sm { width: 28px; height: 28px; border: none; }
.iconbtn-sm:hover { background: var(--cream-2); }
.iconbtn-dark {
    border: 1px solid rgba(255,251,243,0.15);
    color: rgba(255,251,243,0.7);
}
.iconbtn-dark:hover { background: rgba(255,251,243,0.08); color: #FFFBF3; }

/* ── chips ───────────────────────────────────────────────────────────────── */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Exo', sans-serif;
    font-weight: 600; font-size: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 999px; flex: none; }
.chip-success { background: var(--success-bg); color: var(--success-fg); }
.chip-success .dot { background: var(--success); }
.chip-warn    { background: var(--warn-bg);    color: var(--warn-fg); }
.chip-warn    .dot { background: var(--warn); }
.chip-danger  { background: var(--danger-bg);  color: var(--danger-fg); }
.chip-danger  .dot { background: var(--danger); }
.chip-info    { background: var(--info-bg);    color: var(--info-fg); }
.chip-info    .dot { background: var(--info); }
.chip-neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
.chip-neutral .dot { background: var(--muted); }
.chip-brand   { background: var(--apricot-soft); color: var(--apricot-ink); }
.chip-brand   .dot { background: var(--apricot); }
.chip-lg { font-size: 13px; padding: 7px 12px; }

/* ── avatar ──────────────────────────────────────────────────────────────── */
.avatar {
    width: 32px; height: 32px;
    border-radius: 999px;
    background: var(--apricot-soft);
    color: var(--apricot-ink);
    display: inline-grid;
    place-items: center;
    font: 600 14px 'Fraunces', Georgia, serif;
    letter-spacing: -0.01em;
    flex: none;
}
.avatar-dark { background: var(--ink-2); color: var(--apricot); }
.avatar-sm { width: 24px; height: 24px; font-size: 11px; }
.avatar-lg { width: 44px; height: 44px; font-size: 18px; }
.avatar-xl { width: 56px; height: 56px; font-size: 22px; }

/* tenant logo — soft square */
.tenant-logo {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--apricot-soft);
    color: var(--apricot-ink);
    display: grid;
    place-items: center;
    font: 700 16px 'Exo', sans-serif;
    letter-spacing: -0.01em;
    flex: none;
}
.tenant-logo.alt-1 { background: #DCE6F4; color: #243B5C; }
.tenant-logo.alt-2 { background: #DFEFE3; color: #1F5740; }
.tenant-logo.alt-3 { background: #F5E7C8; color: #7A4F0E; }
.tenant-logo.alt-4 { background: #ECD4F5; color: #4B1E63; }
.tenant-logo.alt-5 { background: #FFE5D6; color: #7A2E12; }
.tenant-logo.alt-6 { background: var(--ink-2); color: var(--apricot); }
.tenant-logo-sm { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.tenant-logo-lg { width: 64px; height: 64px; border-radius: 18px; font-size: 26px; }

/* ── layout ──────────────────────────────────────────────────────────────── */
.layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: stretch;
    min-height: 100vh;
}
body.sidebar-collapsed .layout { grid-template-columns: 72px 1fr; }
.main { min-height: 100vh; }

/* ── sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
    padding: 18px 14px;
    background: var(--ink);
    color: #FFFBF3;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}
.sidebar > turbo-frame {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

.sidebar-brand {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tenant-switcher {
    margin: 0 4px;
    background: rgba(255,251,243,0.05);
    border: 1px solid rgba(255,251,243,0.1);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: unset;
    transition: background 160ms, border-color 160ms;
    position: relative;
}

/*.tenant-switcher:hover { background: rgba(255,251,243,0.09); border-color: rgba(255,251,243,0.18); }*/
.tenant-switcher .tenant-logo { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }
.tenant-switcher .tenant-meta { min-width: 0; flex: 1; }
.tenant-switcher .tenant-meta .label {
    font: 600 9px 'Exo', sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--apricot);
}
.tenant-switcher .tenant-meta .name {
    font: 600 13px 'Exo', sans-serif;
    color: #FFFBF3;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tenant-switcher .chevrons { color: rgba(255,251,243,0.55); }

.sidebar-cta {
    width: auto;
    justify-content: center;
    margin: 0 4px;
}
.side-nav {
    display: grid;
    gap: 2px;
    margin-top: 6px;
    padding: 0 4px;
}
.side-nav-group-label {
    padding: 14px 12px 6px;
    font: 700 9px 'Exo', sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,251,243,0.4);
}
.side-nav-item {
    all: unset;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: rgba(255,251,243,0.78);
    font: 500 13.5px 'Exo', sans-serif;
    transition: background 140ms, color 140ms;
    position: relative;
}
.side-nav-item:hover { color: #FFFBF3; }
.side-nav-item.active {
    background: rgba(255,140,97,0.14);
    color: var(--apricot);
}
.side-nav-item .ic { width: 18px; height: 18px; }
.side-nav-item .badge-count {
    margin-left: auto;
    background: var(--apricot);
    color: var(--ink);
    font: 700 10px 'Exo', sans-serif;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 0;
}
.sidebar-user {
    padding: 12px 8px 4px;
    border-top: 1px solid rgba(255,251,243,0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-user-meta { min-width: 0; flex: 1; }
.sidebar-user-meta .name { font: 500 13px 'Exo', sans-serif; color: #FFFBF3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-meta .sub  { font: 400 11px 'Exo', sans-serif; color: rgba(255,251,243,0.55); }

/* super-admin chrome — slightly inverted, more austere */
.sidebar.is-super {
    background: var(--ink-3);
}
.sidebar.is-super .tenant-switcher {
    background: rgba(255,140,97,0.08);
    border-color: rgba(255,140,97,0.22);
}
.role-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    font: 700 9px 'Exo', sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: rgba(255,140,97,0.16);
    color: var(--apricot);
    margin-left: 8px;
    vertical-align: middle;
}
.role-pill .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--apricot); }

/* collapsed state */
body.sidebar-collapsed .sidebar { padding: 18px 8px; }
body.sidebar-collapsed .sidebar-brand .wordmark .at-only { display: inline; }
body.sidebar-collapsed .sidebar-brand .wordmark .full { display: none; }
body.sidebar-collapsed .sidebar-brand .studio-tag { display: none; }
body.sidebar-collapsed .tenant-switcher,
body.sidebar-collapsed .sidebar-user-meta,
body.sidebar-collapsed .side-nav-group-label,
body.sidebar-collapsed .side-nav-item span.lbl,
body.sidebar-collapsed .sidebar-cta .lbl,
body.sidebar-collapsed .side-nav-item .badge-count { display: none; }
body.sidebar-collapsed .side-nav-item { justify-content: center; padding: 10px 0; }
body.sidebar-collapsed .sidebar-cta { padding: 10px 0; }
.wordmark .at-only { display: none; }

/* ── topbar ──────────────────────────────────────────────────────────────── */
.topbar {
    padding: 20px 32px 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--cream) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 5;
}
.topbar-title {
    margin: 4px 0 0;
    font: 600 28px/1.1 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 80;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.topbar-search {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    min-width: 260px;
    color: var(--muted);
}
.topbar-search input {
    border: none;
    outline: none;
    background: transparent;
    font: 500 13px 'Exo', sans-serif;
    color: var(--ink);
    width: 100%;
}
.topbar-search input::placeholder { color: var(--muted); }
.topbar-search kbd {
    background: var(--cream-2);
    color: var(--muted);
    font: 600 10px 'Exo', sans-serif;
    padding: 3px 6px;
    border-radius: 6px;
    border: none;
}

/* impersonation banner — PLATFORM ADMIN only */
.impersonating-banner {
    background: linear-gradient(90deg, rgba(255,140,97,0.95), rgba(230,110,64,0.95));
    color: var(--ink-3);
    padding: 9px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font: 600 13px 'Exo', sans-serif;
    position: sticky;
    top: 0;
    z-index: 9;
}
.impersonating-banner .ic { stroke: currentColor; }
.impersonating-banner .left { display: flex; align-items: center; gap: 10px; }
.impersonating-banner .btn-pill-ink { padding: 6px 14px; font-size: 12px; }

/* ── screens ─────────────────────────────────────────────────────────────── */
.screen-body { padding: 28px 32px; }
.screen-body-tight { padding-top: 14px; }
.screen-back { padding: 10px 32px 6px; }
.link-back {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--muted);
    font: 500 13px 'Exo', sans-serif;
}
.link-back .ic { width: 14px; height: 14px; }
.link-back:hover { color: var(--ink); }
.link-quiet {
    background: transparent;
    border: none;
    padding: 0;
    font: 500 13px 'Exo', sans-serif;
    color: var(--ink-2);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.link-quiet:hover { color: var(--ink); }
.link-quiet:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--apricot-soft);
    border-radius: 6px;
}
.section-h {
    margin: 0;
    font: 600 22px 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 80;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.section-sub {
    font: 400 13px 'Exo', sans-serif;
    color: var(--muted);
    margin-top: 4px;
}

/* ── KPI cards ───────────────────────────────────────────────────────────── */
.kpi {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.kpi-label {
    font: 500 11px 'Exo', sans-serif;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.kpi-value {
    font: 600 30px/1 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 80;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.kpi-value-sm { font-size: 24px; }
.kpi-hint {
    font: 500 12px 'Exo', sans-serif;
    color: var(--muted);
}
.kpi-trend {
    display: inline-flex; align-items: center; gap: 4px;
    font: 600 11px 'Exo', sans-serif;
    color: var(--success-fg);
    margin-top: 2px;
}
.kpi-trend.is-down { color: var(--danger-fg); }
.kpi-accent { background: var(--apricot-soft); border: none; }
.kpi-accent .kpi-label,
.kpi-accent .kpi-value,
.kpi-accent .kpi-hint { color: var(--apricot-ink); }
.kpi-dark {
    background: var(--ink);
    border: none;
}
.kpi-dark .kpi-label { color: rgba(255,251,243,0.55); }
.kpi-dark .kpi-value { color: var(--paper); }
.kpi-dark .kpi-hint  { color: rgba(255,251,243,0.7); }

/* ── soft + dark cards ───────────────────────────────────────────────────── */
.card-soft {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
}
.card-soft.card-flat { border-radius: 14px; }
.card-soft-2 { background: var(--paper-2); }
.card-dark {
    background: var(--ink);
    color: var(--paper);
    border-radius: 18px;
}
.p-22 { padding: 22px; }
.p-26 { padding: 26px; }
.card-h {
    font: 600 18px 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 80;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}
.card-h-sm {
    margin: 0;
    font: 600 16px 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 80;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.card-h.on-dark { color: var(--paper); }
.card-p {
    font: 400 14px/1.5 'Exo', sans-serif;
    color: var(--ink-2);
    margin: 0 0 16px;
    max-width: 380px;
}
.card-p.on-dark { color: rgba(255,251,243,0.7); }
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line-2);
    gap: 12px;
}
.card-head .left { display: flex; align-items: center; gap: 12px; }

/* ── event list (dashboard) ─────────────────────────────────────────────── */
.event-list { color: inherit; }
.event-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 110px 32px;
    align-items: center;
    padding: 16px 22px;
    gap: 16px;
    cursor: pointer;
    border-top: 1px solid var(--line-2);
    transition: background 160ms;
    color: inherit;
}
.event-row:first-child { border-top: none; }
.event-row:hover { background: var(--apricot-soft); }
.event-row-title .t {
    font: 600 16px 'Exo', sans-serif;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.event-row-title .s {
    font: 400 12px 'Exo', sans-serif;
    color: var(--muted);
    margin-top: 2px;
}
.event-row-when {
    font: 500 13px 'Exo', sans-serif;
    color: var(--ink-2);
}
.event-row-count {
    font: 600 14px 'Exo', sans-serif;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.event-row-arrow {
    width: 16px; height: 16px;
    stroke-width: 2;
    color: var(--ink-2);
}

/* ── spark ───────────────────────────────────────────────────────────────── */
.spark {
    width: 100%;
    height: 110px;
    display: block;
}

/* ── tables (tenants, attendees, members) ───────────────────────────────── */
.tbl {
    width: 100%;
}
.tbl-head, .tbl-row {
    display: grid;
    align-items: center;
    gap: 16px;
    padding: 12px 22px;
}
.tbl-head {
    font: 700 10px 'Exo', sans-serif;
    color: var(--muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line-2);
    background: var(--paper-2);
}
.tbl-row {
    border-top: 1px solid var(--line-2);
    font: 500 13px 'Exo', sans-serif;
    color: var(--ink);
    transition: background 140ms;
}
.tbl-row:first-of-type { border-top: none; }
.tbl-row:hover { background: var(--cream-2); }
.tbl-row.is-clickable { cursor: pointer; }
.tbl-row .num { font-variant-numeric: tabular-nums; }

/* tenants table */
.tbl-tenants .tbl-head,
.tbl-tenants .tbl-row {
    grid-template-columns: 2.2fr 1.2fr 1fr 1fr 0.9fr 40px;
}
.tenant-cell {
    display: flex; align-items: center; gap: 12px; min-width: 0;
}
.tenant-cell .meta { min-width: 0; }
.tenant-cell .name {
    font: 600 14px 'Exo', sans-serif;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.tenant-cell .slug {
    font: 500 11px 'JetBrains Mono', ui-monospace, monospace;
    color: var(--muted);
    margin-top: 1px;
}

/* members table */
.tbl-members .tbl-head,
.tbl-members .tbl-row {
    grid-template-columns: 2fr 1fr 1.2fr 1fr 40px;
}
.member-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.member-cell .name { font: 600 13.5px 'Exo', sans-serif; color: var(--ink); }
.member-cell .email { font: 400 11.5px 'Exo', sans-serif; color: var(--muted); }

/* attendee table */
.tbl-attendees .tbl-head,
.tbl-attendees .tbl-row {
    grid-template-columns: 1.6fr 1.2fr 1fr 110px 40px;
}

/* audit table */
.tbl-audit .tbl-head,
.tbl-audit .tbl-row {
    grid-template-columns: 130px 1fr 1.6fr 1fr 110px;
}
.audit-event {
    font: 600 13px 'Exo', sans-serif;
    color: var(--ink);
}
.audit-mono {
    font: 500 12px 'JetBrains Mono', ui-monospace, monospace;
    color: var(--ink-2);
}
.audit-time {
    font: 500 12px 'Exo', sans-serif;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ── forms ───────────────────────────────────────────────────────────────── */
.field-label {
    display: block;
    font: 600 12px 'Exo', sans-serif;
    color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.field-hint {
    font: 400 11.5px 'Exo', sans-serif;
    color: var(--muted);
    margin-top: 4px;
}
.input,
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field input[type="url"],
.field input[type="search"],
.field input[type="tel"],
.field textarea,
.field select {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    padding: 11px 14px;
    border-radius: 12px;
    font: 500 14px 'Exo', sans-serif;
    outline: none;
    transition: border-color 140ms, box-shadow 140ms;
}
.field textarea { resize: vertical; min-height: 90px; }

/* Native select — strip UA chrome, paint our own chevron so it matches the inputs. */
.field select,
.input.input-select,
select.input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%237A6A86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
}
.field select::-ms-expand { display: none; }
.field select:focus { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23E66E40' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>"); }
.field select option { font: 500 14px 'Exo', sans-serif; color: var(--ink); background: var(--paper); }

.input:focus,
.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--apricot);
    box-shadow: 0 0 0 3px var(--apricot-soft);
}

.input.is-invalid,
.field input.is-invalid,
.field textarea.is-invalid,
.field select.is-invalid {
    border-color: var(--bs-form-invalid-color);
    box-shadow: 0 0 0 3px var(--danger-soft);
}

/* ── input with prefix/suffix ──
   The wrapper carries the border, radius and focus ring. The inner <input>
   must NOT re-paint its own border — higher specificity selectors above
   (`.field input[type="text"]`) would otherwise win, so reset them here. */
.input-affix {
    display: flex; align-items: stretch;
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 140ms, box-shadow 140ms;
}
.input-affix:focus-within {
    border-color: var(--apricot);
    box-shadow: 0 0 0 3px var(--apricot-soft);
}
.input-affix .affix {
    padding: 11px 12px 11px 14px;
    font: 500 14px 'JetBrains Mono', ui-monospace, monospace;
    color: var(--muted);
    background: transparent;
    border-right: 1px solid var(--line);
    display: flex; align-items: center;
    white-space: nowrap;
}
.input-affix .affix + input,
.input-affix > input,
.field .input-affix input[type="text"],
.field .input-affix input[type="email"],
.field .input-affix input[type="url"],
.field .input-affix input[type="search"],
.field .input-affix input[type="tel"],
.field .input-affix input[type="number"],
.field .input-affix input {
    flex: 1;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 11px 14px;
    font: 500 14px 'Exo', sans-serif;
    color: var(--ink);
    outline: none;
    box-shadow: none;
}
.input-affix input:focus,
.field .input-affix input:focus { border: 0; box-shadow: none; }
.field { margin-bottom: 18px; }
.field-grid { display: grid; gap: 18px; }

/* ── Custom Checkbox Implementation ── */

.custom-icon {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

/* The actual hidden input */
.custom-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* The visual box */
.checkbox-visual {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--paper);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    transition: all 140ms var(--ease);
    flex-shrink: 0;
}

/* The icon inside the box (hidden by default) */
.checkbox-visual .ic {
    width: 14px;
    height: 14px;
    stroke: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 140ms var(--ease);
}

/* State: Hover */
.custom-icon:hover .checkbox-visual {
    border-color: var(--ink-2);
}

/* State: Checked */
.custom-checkbox:checked + .checkbox-visual {
    background: var(--apricot);
    border-color: var(--apricot);
}

.custom-checkbox:checked + .checkbox-visual .ic {
    opacity: 1;
    transform: scale(1);
}

/* State: Focus (Accessibility) */
.custom-checkbox:focus-visible + .checkbox-visual {
    box-shadow: 0 0 0 3px var(--apricot-soft);
}

/* State: Invalid */
.custom-checkbox:invalid + .checkbox-visual {
    border-color: var(--danger);
}

/* segmented control / pill-radio */
.seg {
    display: inline-flex;
    background: var(--cream-2);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}
.seg button {
    all: unset;
    cursor: pointer;
    padding: 7px 14px;
    border-radius: 999px;
    font: 600 12.5px 'Exo', sans-serif;
    color: var(--ink-2);
    transition: background 140ms, color 140ms;
}
.seg button.active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-xs); }
.seg button:hover:not(.active) { color: var(--ink); }

/* checkbox (squared, brand) */
.cb {
    width: 20px; height: 20px;
    border-radius: 6px;
    background: var(--paper);
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--ink);
    flex: none;
    cursor: pointer;
}
.cb-on {
    background: var(--apricot);
    border: none;
    color: var(--ink);
}
.cb .ic { width: 14px; height: 14px; }

/* radio tiles (approval mode) */
.radio-tiles { display: grid; gap: 10px; }
.radio-tile {
    display: grid;
    grid-template-columns: 28px 1fr 24px;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 140ms, background 140ms;
    align-items: start;
}
.radio-tile:hover { border-color: var(--ink-2); }
.radio-tile.is-active {
    border-color: var(--apricot);
    background: var(--apricot-soft);
}
.radio-tile.is-active .radio-dot { border-color: var(--apricot); background: var(--paper); }
.radio-tile.is-active .radio-dot::after { background: var(--apricot); }
.radio-tile .icon-wrap {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--cream-2);
    display: grid; place-items: center;
    color: var(--ink-2);
}
.radio-tile.is-active .icon-wrap { background: var(--paper); color: var(--apricot-2); }
.radio-tile .meta .t { font: 600 14px 'Exo', sans-serif; color: var(--ink); }
.radio-tile .meta .s { font: 400 12.5px 'Exo', sans-serif; color: var(--muted); margin-top: 2px; }
.radio-dot {
    width: 18px; height: 18px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--paper);
    display: grid; place-items: center;
    margin-top: 2px;
}
.radio-dot::after { content: ''; width: 8px; height: 8px; border-radius: 999px; background: transparent; }

/* ── wizard ──────────────────────────────────────────────────────────────── */
.wizard {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}
.wizard-rail {
    position: sticky;
    top: 90px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
}
.wizard-rail .eyebrow { margin-bottom: 14px; }
.wizard-step {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 14px;
    align-items: start;
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 140ms;
    position: relative;
}
.wizard-step:hover { background: var(--cream-2); }
.wizard-step::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 38px;
    bottom: -6px;
    width: 2px;
    background: var(--line);
    z-index: 0;
}
.wizard-step:last-child::before { display: none; }
.wizard-step .step-num {
    width: 28px; height: 28px;
    border-radius: 999px;
    background: var(--paper);
    border: 1.5px solid var(--line);
    color: var(--ink-2);
    display: grid;
    place-items: center;
    font: 600 12px 'Exo', sans-serif;
    z-index: 1;
    position: relative;
}
.wizard-step.is-done .step-num {
    background: var(--success-bg); border-color: var(--success); color: var(--success-fg);
}
.wizard-step.is-active .step-num {
    background: var(--apricot); border-color: var(--apricot); color: var(--ink);
}
.wizard-step .step-meta .t {
    font: 600 14px 'Exo', sans-serif; color: var(--ink-2);
}
.wizard-step.is-active .step-meta .t { color: var(--ink); }
.wizard-step .step-meta .s {
    font: 400 12px 'Exo', sans-serif; color: var(--muted); margin-top: 2px;
}

.wizard-pane {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 32px;
}
.wizard-pane h2 {
    font: 600 28px 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 80;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    color: var(--ink);
}
.wizard-pane .sub {
    font: 400 14px 'Exo', sans-serif;
    color: var(--muted);
    margin: 0 0 28px;
}
.wizard-foot {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* form-builder field rows */
.fb-row {
    display: grid;
    grid-template-columns: 28px 1.4fr 1fr 80px 32px;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 8px;
}
.fb-row .grip { color: var(--muted); cursor: grab; }
.fb-row .fb-label {
    font: 600 13px 'Exo', sans-serif;
    color: var(--ink);
}
.fb-row .fb-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 12px 'Exo', sans-serif;
    color: var(--ink-2);
}
.fb-row .fb-required {
    font: 600 11px 'Exo', sans-serif;
    color: var(--muted);
}
.fb-row .fb-required.is-on { color: var(--apricot-2); }
.fb-add {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.fb-add .chip-add {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border: 1px dashed var(--line);
    background: transparent;
    border-radius: 999px;
    color: var(--ink-2);
    font: 500 12px 'Exo', sans-serif;
    cursor: pointer;
    transition: border-color 140ms, color 140ms;
}
.fb-add .chip-add:hover { border-color: var(--ink); color: var(--ink); }

/* ── empty states ───────────────────────────────────────────────────────── */
.empty {
    padding: 56px 32px;
    text-align: center;
    display: grid;
    place-items: center;
    gap: 14px;
    color: var(--muted);
}
.empty .empty-art {
    width: 88px; height: 88px;
    border-radius: 28px;
    background: var(--apricot-soft);
    color: var(--apricot-ink);
    display: grid; place-items: center;
}
.empty .empty-art .ic { width: 36px; height: 36px; stroke-width: 1.5; }
.empty .empty-h {
    font: 600 22px 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 80;
    color: var(--ink);
    margin: 0;
}
.empty .empty-p {
    font: 400 14px 'Exo', sans-serif;
    color: var(--muted);
    max-width: 380px;
    margin: 0;
}

/* ── attendee table extras ──────────────────────────────────────────────── */
.att-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.att-person .name { font: 600 13.5px 'Exo', sans-serif; color: var(--ink); }
.att-person .email { font: 400 11.5px 'Exo', sans-serif; color: var(--muted); }
.att-company {
    display: flex; align-items: center; gap: 8px;
    font: 500 12.5px 'Exo', sans-serif;
    color: var(--ink-2);
}
.att-time {
    font: 500 12px 'Exo', sans-serif;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* ── side panel pieces (event detail) ────────────────────────────────────── */
.link-block {
    font: 600 13px 'JetBrains Mono', ui-monospace, monospace;
    color: var(--paper);
    background: var(--ink-2);
    padding: 10px 14px;
    border-radius: 12px;
    word-break: break-all;
}
.flex-fill { flex: 1; }
.follow-list {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    gap: 10px;
}
.follow-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 13px 'Exo', sans-serif;
    color: var(--ink);
}

/* sign-in styles moved to assets/css/sign-in.css */

/* ── modal ──────────────────────────────────────────────────────────────── */
.modal-scrim {
    position: fixed; inset: 0;
    background: rgba(45,27,61,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 40px;
}
.modal-shell {
    width: 100%;
    max-width: 560px;
    background: var(--paper);
    border-radius: 24px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}
.modal-shell.modal-wide { max-width: 720px; }
.modal-head {
    padding: 22px 26px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.modal-head h3 {
    font: 600 22px 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 80;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--ink);
}
.modal-body {
    padding: 4px 26px 22px;
    overflow-y: auto;
}
.modal-foot {
    padding: 16px 26px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--line-2);
    background: var(--paper-2);
}
.modal-step-dots {
    display: flex; gap: 6px;
}
.modal-step-dots span {
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--line);
}
.modal-step-dots span.is-done { background: var(--apricot); }
.modal-step-dots span.is-active {
    background: var(--apricot);
    width: 22px;
}

/* ── usage bars ─────────────────────────────────────────────────────────── */
.usage-bar {
    width: 100%;
    height: 6px;
    background: var(--cream-2);
    border-radius: 999px;
    overflow: hidden;
}
.usage-bar .fill {
    height: 100%;
    background: var(--apricot);
    border-radius: 999px;
}
.usage-bar .fill.is-danger { background: var(--danger); }
.usage-bar .fill.is-warn { background: var(--warn); }

/* mini cells inside tables */
.cell-key { font: 600 12px 'Exo', sans-serif; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; }
.cell-val { font: 600 13px 'Exo', sans-serif; color: var(--ink); }
.cell-val .num { font-variant-numeric: tabular-nums; }

/* dot status (small inline) */
.s-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.s-dot.is-active { background: var(--success); }
.s-dot.is-trial { background: var(--warn); }
.s-dot.is-suspended { background: var(--danger); }
.s-dot.is-cancelled { background: var(--danger-fg); }
.s-dot.is-archived { background: var(--muted); }

/* ── stat ribbon (PLATFORM ADMIN top) ─────────────────────────────────────── */
.stat-ribbon {
    background: var(--ink);
    color: var(--paper);
    border-radius: 18px;
    padding: 22px 26px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}
.stat-ribbon .item {
    border-left: 1px solid rgba(255,251,243,0.1);
    padding-left: 22px;
}
.stat-ribbon .item:first-child { border-left: none; padding-left: 0; }
.stat-ribbon .label {
    font: 600 10px 'Exo', sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,251,243,0.55);
    margin-bottom: 6px;
}
.stat-ribbon .value {
    font: 600 36px/1 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 80;
    letter-spacing: -0.02em;
    color: var(--paper);
}
.stat-ribbon .hint {
    font: 500 12px 'Exo', sans-serif;
    color: rgba(255,251,243,0.6);
    margin-top: 6px;
}
.stat-ribbon .hint .up { color: #84D2A4; }
.stat-ribbon .hint .down { color: #F1B19E; }

/* ── tweaks panel (matches design system aesthetic) ─────────────────────── */
.tweaks-panel {
    position: fixed;
    right: 18px; bottom: 18px;
    width: 280px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-xl);
    z-index: 60;
    overflow: hidden;
    font-family: 'Exo', sans-serif;
}
.tweaks-panel.is-hidden { display: none; }
.tweaks-head {
    padding: 14px 16px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line-2);
}
.tweaks-head .ttl {
    font: 600 14px 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 80;
    color: var(--ink);
}
.tweaks-body { padding: 14px 16px; display: grid; gap: 14px; }
.tweaks-body .row { display: grid; gap: 6px; }
.tweaks-body .lbl {
    font: 600 10px 'Exo', sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.tweak-seg {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: var(--cream-2);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.tweak-seg.three { grid-template-columns: repeat(3, 1fr); }
.tweak-seg button {
    all: unset;
    cursor: pointer;
    text-align: center;
    padding: 6px 10px;
    border-radius: 999px;
    font: 600 11px 'Exo', sans-serif;
    color: var(--ink-2);
    transition: background 140ms, color 140ms;
}
.tweak-seg button.active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-xs); }

/* hide elements toggled by state */
body:not(.role-super) [data-role-only="super"] { display: none !important; }
body:not(.role-org) [data-role-only="org"] { display: none !important; }
body.state-empty [data-state="populated"] { display: none !important; }
body:not(.state-empty) [data-state="empty"] { display: none !important; }

/* utility — dark surface fine-tune */
body.surface-dark .topbar {
    background: color-mix(in srgb, var(--cream) 85%, transparent);
    border-bottom-color: var(--line);
}
body.surface-dark .topbar-search {
    background: var(--paper-2);
    border-color: var(--line);
}
body.surface-dark .kpi { background: var(--paper); border-color: var(--line); }
body.surface-dark .card-soft { background: var(--paper); border-color: var(--line); }
body.surface-dark .card-soft-2 { background: var(--paper-2); }
body.surface-dark .tbl-head { background: var(--paper-2); }
body.surface-dark .tbl-row { color: var(--ink); }
body.surface-dark .tbl-row:hover { background: var(--paper-2); }
body.surface-dark .iconbtn { color: var(--ink-2); border-color: var(--line); }
body.surface-dark .iconbtn:hover { background: var(--paper-2); }
body.surface-dark .seg { background: var(--paper-2); }
body.surface-dark .seg button.active { background: var(--ink-3); color: var(--apricot); }
body.surface-dark .fb-row { background: var(--paper-2); border-color: var(--line); }
body.surface-dark .field input,
body.surface-dark .field textarea,
body.surface-dark .field select,
body.surface-dark .input { background: var(--paper-2); }
body.surface-dark .btn-pill-quiet { background: var(--paper-2); }
body.surface-dark .modal-shell { background: var(--paper); }
body.surface-dark .modal-foot { background: var(--paper-2); }
body.surface-dark .stat-ribbon { background: var(--ink-3); }
body.surface-dark .usage-bar { background: var(--paper-2); }
body.surface-dark .tweaks-panel { background: var(--paper); border-color: var(--line); }

/* misc */
.divider-h {
    height: 1px; background: var(--line-2); margin: 22px 0;
}
.muted { color: var(--muted); }
.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.text-end { text-align: right; }
.flex-grow { flex: 1; }

/* tabs row */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    padding: 0 32px;
    background: color-mix(in srgb, var(--cream) 88%, transparent);
}
.tab {
    all: unset;
    cursor: pointer;
    padding: 12px 16px;
    font: 600 13px 'Exo', sans-serif;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 140ms, border-color 140ms;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--apricot); }
.tab .count {
    margin-left: 6px;
    font: 600 11px 'Exo', sans-serif;
    color: var(--muted);
    background: var(--cream-2);
    padding: 2px 7px;
    border-radius: 999px;
}
.tab.active .count { background: var(--apricot-soft); color: var(--apricot-ink); }

/* role indicator dot in top-bar */
.role-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--apricot-soft);
    color: var(--apricot-ink);
    border-radius: 999px;
    font: 700 10px 'Exo', sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.role-indicator .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--apricot); }

/* ── tables: all-users & invoices (PLATFORM ADMIN) ─────────────────────────── */
.tbl-all-users .tbl-head,
.tbl-all-users .tbl-row {
    grid-template-columns: 1.8fr 1.2fr 1fr 0.9fr 0.9fr 1.1fr 40px;
}
.tbl-invoices .tbl-head,
.tbl-invoices .tbl-row {
    grid-template-columns: 1.1fr 1.4fr 1.2fr 0.7fr 1fr 40px;
}

/* ── New classes to replace inline styles ── */

/* For the avatar with specific brand colors */
.avatar-apricot-ink {
    background: var(--apricot) !important;
    color: var(--ink) !important;
}

/* For the usage text in the tenant table */
.usage-text {
    font-size: 12px;
    margin-bottom: 4px;
}

/* For the usage bar fill, using a CSS variable for width */
.usage-fill {
    width: var(--usage-width, 0%);
}

/* For the pagination info footer */
.pagination-info {
    font-size: 12px;
    color: var(--muted);
}

/* Custom padding for pagination buttons */
.btn-pill-sm-custom {
    padding: 4px 12px;
}

.btn-pill-sm-transparent {
    padding: 4px 12px;
    background: transparent !important;
}

/* For the small icons in radio tiles */
.icon-sm {
    width: 14px;
    height: 14px;
}

/* For the indented field hint in the modal */
.field-hint-indented {
    padding-left: 30px;
}

/* ── Sidebar specific utilities ─────────────────────────────────────────── */

.sidebar-divider-v {
    border-top: 1px solid rgba(255,251,243,0.08);
    margin: 4px 12px;
}

.sidebar-version-info {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 18px;
    margin-left: 4px;
    margin-right: 4px;
    font-family: 'Exo', sans-serif;
    color: rgba(255,251,243,0.45);
}

.sidebar-version-info .version-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sidebar-version-info .version-details {
    text-align: left;
    font: 600 11px 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
    color: rgba(255,251,243,0.72);
}

.sidebar-version-info .version-build {
    color: rgba(255,251,243,0.35);
    margin-left: 4px;
}