/*
 * Shared utility classes
 */

/* ── Square icon / avatar containers ─────────────────────────────────────── */
.icon-box-24 { width: 24px; height: 24px; }
.icon-box-28 { width: 28px; height: 28px; }
.icon-box-30 { width: 30px; height: 30px; }
.icon-box-32 { width: 32px; height: 32px; }
.icon-box-36 { width: 36px; height: 36px; }
.icon-box-40 { width: 40px; height: 40px; }
.icon-box-44 { width: 44px; height: 44px; }
.icon-box-48 { width: 48px; }
.icon-box-52 { width: 52px; }

/* ── Max-width helpers (pixel values Bootstrap does not provide) ─────────── */
.mw-200 { max-width: 200px; }
.mw-260 { max-width: 260px; }
.mw-280 { max-width: 280px; }
.mw-420 { max-width: 420px; }
.mw-440 { max-width: 440px; }
.mw-560 { max-width: 560px; }
.mw-600 { max-width: 600px; }
.mw-640 { max-width: 640px; }
.mw-720 { max-width: 720px; }

/* ── Fixed pixel widths for form controls and table columns ─────────────── */
.w-px-80  { width: 80px;  }
.w-px-110 { width: 110px; }
.w-px-130 { width: 130px; }
.w-px-140 { width: 140px; }
.w-px-150 { width: 150px; }
.w-px-160 { width: 160px; }
.w-px-180 { width: 180px; }
.w-px-200 { width: 200px; }
.w-px-220 { width: 220px; }
.w-px-280 { width: 280px; }

/* ── Sub-small font sizes (Bootstrap .small = .875rem; these go smaller) ── */
.text-xs  { font-size: .75rem !important; }
.text-xxs { font-size: .70rem !important; }
.text-2xs { font-size: .65rem !important; }

/* ── White-space preservation (notes, pre-formatted text) ──────────────── */
.text-prewrap { white-space: pre-wrap; }

/* ── Slim progress bar (password-strength indicator) ────────────────────── */
.progress-xs          { height: 4px; }
.pw-strength          { width: 0; transition: width .2s ease; }

/* ── Icon-only square action buttons (appointment list row actions) ─────── */
.btn-sq { width: 2.15rem; }

/* ── Table column: sequential row number ───────────────────────────────── */
.col-num { width: 2.5rem; }

/* ── Offcanvas width overrides ──────────────────────────────────────────── */
.offcanvas-260   { width: 260px; }
.offcanvas-quick { --bs-offcanvas-width: min(540px, 100vw); }

/* ── Error / empty-state hero icon ─────────────────────────────────────── */
.icon-hero { font-size: 5rem; line-height: 1; }

/* ── Sticky mobile header needs a higher z-index than Bootstrap's navbar ── */
.z-200 { z-index: 200; }

/* ── Orange text — Bootstrap 5.3 defines --bs-orange but ships no utility ── */
.text-orange { color: var(--bs-orange) !important; }

/* ── An icon that only explains: help on hover or focus, never an action ── */
.hint-icon { cursor: help; }

/* ── Tooltips carrying a sentence or two rather than a label ────────────── */
.tooltip-wide { --bs-tooltip-max-width: 22rem; }

/* ── Bot-protection: off-screen ── */
.bp-trap {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * MAIN DESIGN LAYER
 *
 * Frosted-glass aesthetic layered on top of Bootstrap 5.3.
 * CSS custom properties scoped to [data-bs-theme] keep the layer fully
 * synchronised with Bootstrap's own light/dark engine.
 *
 * Layer map
 *   §1  Design tokens (light)
 *   §2  Design tokens (dark)
 *   §3  Canvas — gradient body background
 *   §4  Sidebar (desktop + admin)
 *   §5  Sticky navigation bars (public navbar + mobile app header)
 *   §6  Cards
 *   §7  Offcanvas panels
 *   §8  Modals
 *   §9  Dropdowns
 *   §10 Form controls
 *   §11 Buttons — glows and lifts
 *   §12 Nav links — sidebar & mobile nav
 *   §13 List groups
 *   §14 Tables
 *   §15 Alerts
 *   §16 Badges
 *   §17 Progress bars
 *   §18 Public page sections and footer
 *   §19 Scrollbar (webkit)
 *   §20 Focus rings
 *   §21 Reduced-motion / accessibility reset
 *   ...
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── §1  Design tokens — light mode ─────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
    /* Gradient canvas painted on <body> */
    --ta-canvas: linear-gradient(
        135deg,
        #eef2ff   0%,   /* soft indigo */
        #f5f0ff  42%,   /* soft violet */
        #ecfdf5 100%    /* soft mint   */
    );

    /* Blur recipe applied to every glass surface */
    --ta-glass-blur: blur(18px) saturate(190%);

    /* Surface backgrounds */
    --ta-glass-bg:    rgba(255, 255, 255, 0.62); /* sidebar, navbar          */
    --ta-card-bg:     rgba(255, 255, 255, 0.72); /* .card                    */
    --ta-panel-bg:    rgba(255, 255, 255, 0.84); /* offcanvas, modals        */

    /* Borders */
    --ta-glass-border: rgba(120, 90, 255, 0.13);

    /* Shadows */
    --ta-shadow-card:       0 2px 14px rgba(100, 80, 220, 0.09), 0 1px 3px rgba(0,0,0,0.05);
    --ta-shadow-card-hover: 0 6px 28px rgba(100, 80, 220, 0.18), 0 2px 8px rgba(0,0,0,0.07);
    --ta-shadow-sidebar:    3px 0 28px rgba(100, 80, 220, 0.12);
    --ta-shadow-navbar:     0 2px 20px rgba(100, 80, 220, 0.10);
    --ta-shadow-float:      0 20px 60px rgba(100, 80, 220, 0.18), 0 4px 16px rgba(0,0,0,0.07);

    /* Form inputs */
    --ta-input-bg:           rgba(255, 255, 255, 0.72);
    --ta-input-border:       rgba(120, 90, 255, 0.20);
    --ta-input-bg-focus:     rgba(255, 255, 255, 0.98);
    --ta-input-glow:         rgba(99, 102, 241, 0.17);

    /* Nav active pill */
    --ta-nav-active-shadow:  0 2px 10px rgba(var(--bs-primary-rgb), 0.24);
}

/* ── §2  Design tokens — dark mode ──────────────────────────────────────── */
[data-bs-theme="dark"] {
    --ta-canvas: linear-gradient(
        135deg,
        #0d1117   0%,
        #111827  55%,
        #0f1b2d 100%
    );

    --ta-glass-blur: blur(20px) saturate(160%);

    --ta-glass-bg:    rgba(255, 255, 255, 0.055);
    --ta-card-bg:     rgba(255, 255, 255, 0.065);
    --ta-panel-bg:    rgba(18, 24, 38, 0.88);

    --ta-glass-border: rgba(255, 255, 255, 0.10);

    --ta-shadow-card:       0 2px 14px rgba(0,0,0,0.38), 0 1px 3px rgba(0,0,0,0.24);
    --ta-shadow-card-hover: 0 6px 28px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.32);
    --ta-shadow-sidebar:    4px 0 28px rgba(0,0,0,0.30);
    --ta-shadow-navbar:     0 2px 20px rgba(0,0,0,0.28);
    --ta-shadow-float:      0 24px 64px rgba(0,0,0,0.62), 0 4px 16px rgba(0,0,0,0.35);

    --ta-input-bg:           rgba(255, 255, 255, 0.07);
    --ta-input-border:       rgba(255, 255, 255, 0.12);
    --ta-input-bg-focus:     rgba(255, 255, 255, 0.11);
    --ta-input-glow:         rgba(99, 102, 241, 0.24);

    --ta-nav-active-shadow:  0 2px 10px rgba(var(--bs-primary-rgb), 0.32);
}

/* ── §3  Canvas ──────────────────────────────────────────────────────────── */
body {
    background: var(--ta-canvas) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

/* ── §4  Sidebar ─────────────────────────────────────────────────────────── */
.sidebar {
    background: var(--ta-glass-bg) !important;
    -webkit-backdrop-filter: var(--ta-glass-blur);
    backdrop-filter: var(--ta-glass-blur);
    border-right-color: var(--ta-glass-border) !important;
    box-shadow: var(--ta-shadow-sidebar);
}

/* ── §5  Sticky navigation bars ─────────────────────────────────────────── */
/*  Public marketing navbar  */
nav.navbar.sticky-top,
/*  App mobile sticky header */
header.sticky-top {
    background: var(--ta-glass-bg) !important;
    -webkit-backdrop-filter: var(--ta-glass-blur);
    backdrop-filter: var(--ta-glass-blur);
    border-bottom-color: var(--ta-glass-border) !important;
    box-shadow: var(--ta-shadow-navbar);
}

/* ── §6  Cards ───────────────────────────────────────────────────────────── */
.card {
    --bs-card-border-radius: 14px;      /* propagates to .card-header etc. */
    background: var(--ta-card-bg) !important;
    -webkit-backdrop-filter: var(--ta-glass-blur);
    backdrop-filter: var(--ta-glass-blur);
    border-color: var(--ta-glass-border) !important;
    box-shadow: var(--ta-shadow-card) !important;
    transition: box-shadow .22s ease;
}
.card:hover {
    box-shadow: var(--ta-shadow-card-hover) !important;
}
/* backdrop-filter makes every card its own stacking context, so a dropdown
   opened inside one is painted under the next card however high its own
   z-index. Lift the card while it holds an open menu: above its siblings,
   still below the sticky navbar (1030) and modals (1055). */
.card:has(.dropdown-menu.show) {
    z-index: 1000;
}
.card-header,
.card-footer {
    border-color: var(--ta-glass-border) !important;
}
/* Only make headers/footers transparent when no explicit Bootstrap bg-* class
   is present. An explicit bg-primary (or any bg-*) must keep its own colour —
   otherwise the card header text becomes invisible in light mode. */
.card-header:not([class*="bg-"]),
.card-footer:not([class*="bg-"]) {
    background: transparent !important;
}

/* ── §7  Offcanvas panels ────────────────────────────────────────────────── */
.offcanvas {
    background: var(--ta-panel-bg) !important;
    -webkit-backdrop-filter: var(--ta-glass-blur);
    backdrop-filter: var(--ta-glass-blur);
    border-color: var(--ta-glass-border) !important;
}
.offcanvas-header {
    border-bottom-color: var(--ta-glass-border) !important;
}

/* ── Tables inside cards: strip last-row bottom border (mirrors list-group-flush) */
.card .table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

/* ── §8  Modals ──────────────────────────────────────────────────────────── */
.modal-content {
    --bs-modal-border-radius: 16px;
    background: var(--ta-panel-bg) !important;
    -webkit-backdrop-filter: var(--ta-glass-blur);
    backdrop-filter: var(--ta-glass-blur);
    border-color: var(--ta-glass-border) !important;
    box-shadow: var(--ta-shadow-float);
}
.modal-header,
.modal-footer {
    border-color: var(--ta-glass-border) !important;
}

/* ── §9  Dropdowns ───────────────────────────────────────────────────────── */
.dropdown-menu {
    --bs-dropdown-border-radius: 12px;
    background: var(--ta-panel-bg) !important;
    -webkit-backdrop-filter: var(--ta-glass-blur);
    backdrop-filter: var(--ta-glass-blur);
    border-color: var(--ta-glass-border) !important;
    box-shadow: var(--ta-shadow-float);
}
.dropdown-divider {
    border-top-color: var(--ta-glass-border) !important;
}

/* ── §10 Form controls ───────────────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--ta-input-bg) !important;
    border-color: var(--ta-input-border) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.form-control:focus,
.form-select:focus {
    background-color: var(--ta-input-bg-focus) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.50) !important;
    box-shadow: 0 0 0 .2rem var(--ta-input-glow) !important;
}
/* Plaintext inputs keep transparent background */
.form-control-plaintext {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* ── §11 Buttons — lifts ─────────────────────────────────────────────────── */
.btn {
    transition: transform .14s ease;
}
.btn:active {
    transform: translateY(1px) !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover {
    transform: translateY(-1px);
}

/* ── §12 Nav links — sidebar & mobile nav ────────────────────────────────── */
.sidebar .nav-link,
.mobile-nav .nav-link {
    transition: color .18s ease, background .18s ease, transform .14s ease;
}
.sidebar .nav-link:hover,
.mobile-nav .nav-link:hover {
    transform: translateX(2px);
}

/* ── §13 List groups ─────────────────────────────────────────────────────── */
/* Items inside glass cards should be transparent so the card bg shows through */
.card > .list-group .list-group-item,
.card > .card-body .list-group-item,
.list-group-flush .list-group-item {
    background-color: transparent !important;
    border-color: var(--ta-glass-border) !important;
}

/* ── §14 Tables ──────────────────────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg:  rgba(var(--bs-primary-rgb), 0.03);
    --bs-table-hover-bg:    rgba(var(--bs-primary-rgb), 0.05);
    --bs-table-border-color: var(--ta-glass-border);
}
.table thead th {
    border-bottom-color: var(--ta-glass-border) !important;
}
/* Light header row — subtle tint in light mode only; let Bootstrap own dark mode */
[data-bs-theme="light"] .table-light {
    --bs-table-bg: rgba(var(--bs-primary-rgb), 0.04);
}

/* ── §15 Alerts ──────────────────────────────────────────────────────────── */
.alert {
    border-radius: 10px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* ── §16 Badges ──────────────────────────────────────────────────────────── */
.badge.text-bg-primary { box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.38); }
.badge.text-bg-success { box-shadow: 0 2px 6px rgba(var(--bs-success-rgb), 0.38); }
.badge.text-bg-danger  { box-shadow: 0 2px 6px rgba(var(--bs-danger-rgb),  0.38); }
.badge.text-bg-warning { box-shadow: 0 2px 6px rgba(var(--bs-warning-rgb), 0.30); }

/* ── §17 Progress bars ───────────────────────────────────────────────────── */
.progress {
    background-color: rgba(var(--bs-primary-rgb), 0.10) !important;
    border-radius: 100px;
    overflow: hidden;
}
.progress-bar {
    border-radius: 100px;
    box-shadow: 0 0 8px rgba(var(--bs-primary-rgb), 0.42);
}

/* ── §18 Public page sections & footer ───────────────────────────────────── */
/* Let the canvas bleed through marketing sections */
section.bg-body,
section.bg-body-tertiary {
    background: transparent !important;
}
/* Give the CTA section a richer backdrop since it uses a solid bg-primary */
section.bg-primary {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* Public site footer: frosted glass strip */
footer.bg-body-tertiary {
    background: var(--ta-glass-bg) !important;
    -webkit-backdrop-filter: var(--ta-glass-blur);
    backdrop-filter: var(--ta-glass-blur);
    border-top-color: var(--ta-glass-border) !important;
}

/* ── §19 Scrollbar (webkit — Chrome, Edge, Safari) ───────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(var(--bs-primary-rgb), 0.24); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(var(--bs-primary-rgb), 0.46); }

/* ── §20 Focus rings ─────────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb), 0.55);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── §21 Reduced-motion / accessibility reset ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .card,
    .btn,
    .btn-primary,
    .btn-success,
    .btn-danger,
    .btn-warning,
    .form-control,
    .form-select,
    .sidebar .nav-link,
    .mobile-nav .nav-link {
        transition: none !important;
        transform: none !important;
    }
    .sidebar,
    header.sticky-top,
    nav.navbar.sticky-top,
    .card,
    .offcanvas,
    .modal-content,
    .dropdown-menu,
    footer.bg-body-tertiary,
    .alert {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .hero-float-card {
        animation: none !important;
        opacity: 1 !important;
    }
    .appt-hint-card {
        animation: none !important;
    }
}

/* ── §22 Layout — sidebar widths, positioning, and nav links ────────────── */

/*  Nav-link pill styles shared by every sidebar and the mobile offcanvas  */
.sidebar .nav-link,
.mobile-nav .nav-link {
    color: var(--bs-secondary-color);
    border-radius: .375rem;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active,
.mobile-nav .nav-link:hover,
.mobile-nav .nav-link.active {
    color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}
.sidebar .nav-link .fa-fw,
.mobile-nav .nav-link .fa-fw {
    width: 1.25em;
}

/*  Tenant-app sidebar: 240 px, fixed on md+  */
.sidebar-app { width: 240px; min-width: 240px; }
@media (min-width: 768px) {
    .sidebar-app {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        overflow-y: auto;
        z-index: 100;
    }
    .sidebar-app ~ main { margin-left: 240px; }
}

/*  Main content — prevent flex children from expanding wider than the viewport. */
.app-main,
.app-main-content { min-width: 0; }

/*  Fill-viewport pages (team chat) — body.app-fill, set by layouts/app.php when
    the controller passes fillViewport. The page is exactly one screen tall and
    the window never scrolls: each level of the shell is a flex column handing
    its leftover height down, so the page's own scroll area (the chat message
    list) gets whatever the mobile header, banners and footer leave. On a
    screen too short even for that area's minimum, <main> scrolls instead of
    clipping the compose box off the bottom. */
body.app-fill {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.app-fill > header { flex-shrink: 0; }
body.app-fill .app-shell {
    flex: 1 1 auto;
    min-height: 0;
}
body.app-fill .app-main {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
body.app-fill .app-main-content {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}
body.app-fill .app-main > footer { padding-top: .75rem !important; }
@media (max-width: 767.98px) {
    /* A phone has no height to spare: tighter padding, and no footer. */
    body.app-fill .app-main { padding: .75rem !important; }
    body.app-fill .app-main > footer { display: none; }
}

/* ── Sidebar storage quota widget ────────────────────────────────────────── */
.sidebar-storage {
    font-size: .72rem;
}
.sidebar-storage-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--bs-secondary-bg);
}

/*  Admin sidebar: 220 px, fixed on md+, hidden on mobile (offcanvas replaces it)  */
.sidebar-admin { width: 220px; min-width: 220px; }
@media (min-width: 768px) {
    .sidebar-admin {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        overflow-y: auto;
        z-index: 100;
    }
    .sidebar-admin ~ main { margin-left: 220px; }
}

/* ── §23 Public marketing site ───────────────────────────────────────────── */

/*  Brand gradient tokens — strategic depth accents, theme-aware  */
:root,
[data-bs-theme="light"] {
    --ta-grad-brand:      linear-gradient(135deg, #0d6efd 0%, #6366f1 50%, #8b5cf6 100%);
    --ta-grad-brand-soft: linear-gradient(135deg, rgba(13,110,253,.10) 0%, rgba(139,92,246,.10) 100%);
    --ta-hero-glow:       radial-gradient(closest-side, rgba(99,102,241,.32), transparent 78%);
    --ta-cta-grad:        linear-gradient(135deg, #0d6efd 0%, #6366f1 55%, #8b5cf6 100%);
}
[data-bs-theme="dark"] {
    --ta-grad-brand:      linear-gradient(135deg, #3b82f6 0%, #818cf8 50%, #a78bfa 100%);
    --ta-grad-brand-soft: linear-gradient(135deg, rgba(59,130,246,.16) 0%, rgba(167,139,250,.16) 100%);
    --ta-hero-glow:       radial-gradient(closest-side, rgba(129,140,248,.30), transparent 78%);
    --ta-cta-grad:        linear-gradient(135deg, #1d4ed8 0%, #4f46e5 55%, #7c3aed 100%);
}

/*  Utility: allow flex children to truncate  */
.min-w-0 { min-width: 0; }

/*  Gradient text accent (hero headline, stat values)  */
.text-gradient {
    background: var(--ta-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/*  Section eyebrow label  */
.section-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-primary);
}

/*  Hero  */
.hero-section { position: relative; padding: 5.5rem 0 3rem; overflow: hidden; }
.hero-section > .container { position: relative; z-index: 1; }
/* Below lg the preview mockup is hidden (d-none d-lg-block), so the tall top
   padding that balances it against the mockup becomes dead space under the
   sticky navbar — 88px of it, which is the first thing a phone visitor sees.
   3rem matches the py-5 that every other public page opens with. */
@media (max-width: 991.98px) {
    .hero-section { padding-top: 3rem; }
}
.hero-glow {
    position: absolute;
    top: -16%; right: -3%;
    width: 62%; height: 130%;
    background: var(--ta-hero-glow);
    filter: blur(22px);
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 767.98px) {
    .hero-glow { display: none; }
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: 50rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-primary);
    background: var(--ta-grad-brand-soft);
    border: 1px solid var(--ta-glass-border);
}
.hero-title { letter-spacing: -.02em; }
.hero-trust li { white-space: nowrap; }

/*  FAQ (pricing page)
    Native <details>/<summary>, not Bootstrap's JS accordion. Bootstrap keys the
    open state on a .collapsed class only JavaScript toggles, and hides closed
    panels with display:none — so without script the answers are unreachable.
    <details> keeps every answer in the DOM and works with no JS at all, which
    is what lets the section collapse without costing the page its SEO weight.
    Each item borrows the site's glass-card tokens so it sits naturally beside
    the pricing card above it, in both themes. */
.faq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.25rem;
    color: var(--bs-primary);
    background: var(--ta-grad-brand-soft);
    border: 1px solid var(--ta-glass-border);
}
.faq-item {
    background: var(--ta-card-bg);
    -webkit-backdrop-filter: var(--ta-glass-blur);
    backdrop-filter: var(--ta-glass-blur);
    border: 1px solid var(--ta-glass-border);
    border-radius: 14px;
    box-shadow: var(--ta-shadow-card);
    transition: box-shadow .22s ease, border-color .22s ease;
}
.faq-item:hover { box-shadow: var(--ta-shadow-card-hover); }
.faq-item[open] { border-color: rgba(var(--bs-primary-rgb), .35); }
.faq-item > summary {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.1rem 1.25rem;
    cursor: pointer;
    list-style: none;            /* Firefox, and Chromium's list-item marker */
    border-radius: 14px;
    color: var(--bs-body-color);
}
.faq-item > summary::-webkit-details-marker { display: none; }  /* Safari */
.faq-item > summary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.faq-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
    transition: color .22s ease, background-color .22s ease;
}
.faq-item[open] .faq-num {
    color: #fff;
    background: var(--bs-primary);
}
.faq-question {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}
.faq-chevron {
    flex-shrink: 0;
    font-size: .85rem;
    color: var(--bs-secondary-color);
    transition: transform .22s ease, color .22s ease;
}
.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
    color: var(--bs-primary);
}
/* Indented to line up under the question text, past the number bubble. */
.faq-answer {
    padding: 0 1.25rem 1.15rem calc(1.25rem + 2rem + .9rem);
    color: var(--bs-secondary-color);
    line-height: 1.65;
}
@media (max-width: 575.98px) {
    .faq-answer { padding-left: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .faq-item, .faq-num, .faq-chevron { transition: none; }
}

/*  Hero preview mockup + floating toast  */
.hero-preview { position: relative; }
@keyframes hero-float-in {
    0%   { opacity: 0; transform: translateY(16px) scale(.9); }
    60%  { opacity: 1; transform: translateY(-4px) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hero-float-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}
.hero-float-card {
    position: absolute;
    bottom: -1.25rem;
    left: -1.5rem;
    z-index: 3;
    border-radius: 14px;
    opacity: 0;
    animation: hero-float-in .7s cubic-bezier(.34, 1.56, .64, 1) forwards,
               hero-float-pulse 1.6s ease-in-out .7s 2;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.slide-up-fade {
  animation: slideUpFade 0.7s ease-out forwards;
}

/*  Gradient icon tiles (features + verticals)  */
.feature-tile {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 6px 18px rgba(var(--bs-primary-rgb), .26);
}
.feature-tile.icon-box-40 { width: 40px; height: 40px; border-radius: .7rem; }
.tile-grad-1 { background: linear-gradient(135deg, #0d6efd, #4f46e5); }
.tile-grad-2 { background: linear-gradient(135deg, #10b981, #059669); }
.tile-grad-3 { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.tile-grad-4 { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.tile-grad-5 { background: linear-gradient(135deg, #f59e0b, #f97316); }
.tile-grad-6 { background: linear-gradient(135deg, #ec4899, #d946ef); }

/*  Value strip  */
.stat-value { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; }

/*  Feature cards — lift on hover  */
.feature-card { transition: transform .18s ease, box-shadow .22s ease; }
.feature-card:hover { transform: translateY(-4px); }

/*  Vertical showcase cards — gradient top accent  */
.vertical-card { position: relative; overflow: hidden; transition: transform .18s ease; }
.vertical-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--ta-grad-brand);
}
.vertical-card:hover { transform: translateY(-4px); }
.vertical-list li span { line-height: 1.45; }

/*  Security band — soft gradient glass panel  */
.security-band {
    background: var(--ta-grad-brand-soft) !important;
    border: 1px solid var(--ta-glass-border) !important;
}

/*  Bottom CTA — rich gradient band with light/shadow overlay for depth  */
.cta-band {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    background: var(--ta-cta-grad);
    box-shadow: var(--ta-shadow-float);
}
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(42% 80% at 14% 8%,  rgba(255,255,255,.26), transparent 60%),
        radial-gradient(52% 90% at 90% 95%, rgba(0,0,0,.20),       transparent 60%);
    pointer-events: none;
}
.cta-band-inner { position: relative; z-index: 1; }

/*  Pricing cards: lift on hover (shadow comes from the glass card layer)  */
.pricing-card { transition: transform .18s ease, box-shadow .18s ease; }
.pricing-card:hover { transform: translateY(-4px); }

/* ── §24 Installer ───────────────────────────────────────────────────────── */
.installer-wrap { max-width: 660px; margin: 2.5rem auto 4rem; }
.step-bar { display: flex; gap: 0; counter-reset: step; }
.step-bar .s {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: .78rem;
    color: var(--bs-secondary-color);
    position: relative;
}
.step-bar .s::before {
    counter-increment: step;
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    border: 2px solid var(--bs-border-color);
    font-weight: 700;
    margin-bottom: .25rem;
}
.step-bar .s.active::before { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.step-bar .s.done::before   { background: var(--bs-success); border-color: var(--bs-success); color: #fff; }

/* ── §25 Appointment calendar ────────────────────────────────────────────── */
.cal-shell { overflow-x: auto; }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 700px;
    border-top: 1px solid var(--bs-border-color);
    border-left: 1px solid var(--bs-border-color);
}

/* Day-of-week header row */
.cal-dow {
    padding: 7px 4px;
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}
.cal-dow.is-weekend { color: var(--bs-primary); }

/* Day cells */
.cal-day {
    min-height: 130px;
    padding: 5px 5px 6px;
    background: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    transition: background .12s;
    position: relative;
}
.cal-day:hover                     { background: var(--bs-tertiary-bg); }
.cal-day.is-weekend                { background: color-mix(in srgb, var(--bs-secondary-bg) 60%, var(--bs-body-bg) 40%); }
.cal-day.is-today                  { background: rgba(var(--bs-primary-rgb), .06) !important; }
.cal-day.is-today.is-weekend       { background: rgba(var(--bs-primary-rgb), .09) !important; }
.cal-day.is-other-month            { background: var(--bs-secondary-bg); opacity: .5; pointer-events: none; }

/* Day number + add button header */
.cal-day-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    min-height: 28px;
}
.cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 500;
    color: var(--bs-body-color);
    line-height: 1;
    flex-shrink: 0;
}
.cal-day.is-today .cal-day-num { background: var(--bs-primary); color: #fff !important; font-weight: 700; }

/* Add-appointment button (appears on cell hover) */
.cal-add-btn {
    opacity: 0;
    transition: opacity .15s, background .12s, color .12s;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: .7rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    flex-shrink: 0;
}
.cal-day:hover .cal-add-btn { opacity: 1; }
.cal-add-btn:hover          { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
button.cal-add-btn          { border: none; padding: 0; cursor: pointer; }

/* Event pills */
.cal-event {
    display: flex;
    align-items: baseline;
    gap: 3px;
    padding: 2px 5px 2px 4px;
    border-radius: 4px;
    font-size: .71rem;
    line-height: 1.45;
    text-decoration: none !important;
    overflow: hidden;
    white-space: nowrap;
    border-left: 3px solid transparent;
    transition: filter .1s, transform .1s;
    margin-bottom: 2px;
    cursor: pointer;
}
.cal-event:hover    { filter: brightness(.88); transform: translateX(2px); }
.cal-event .ev-time   { font-weight: 700; flex-shrink: 0; font-size: .68rem; }
.cal-event .ev-client { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.cal-event .ev-mine-dot { flex-shrink: 0; font-size: .52rem; opacity: .85; margin-left: 1px; }

/* Busy slot — another practitioner's appointment, shown to a staff member
   without can_view_all_appointments. Nothing to open, so it must not invite a
   click: no pointer cursor and no hover lift, unlike every other pill. */
.cal-event.ev-busy         { cursor: default; opacity: .72; font-style: italic; }
.cal-event.ev-busy:hover   { filter: none; transform: none; }
.cal-event .ev-busy-dot    { flex-shrink: 0; font-size: .52rem; opacity: .7; margin-left: 1px; }

/* Status colours — light */
.ev-scheduled { background: rgba(13,110,253,.13);  color: #0a58ca; border-left-color: #0d6efd; }
.ev-completed  { background: rgba(108,117,125,.13); color: #495057; border-left-color: #6c757d; }
.ev-cancelled  { background: rgba(220,53,69,.10);   color: #842029; border-left-color: #dc3545; text-decoration: line-through !important; opacity: .8; }
.ev-no_show    { background: rgba(253,126,20,.13);  color: #92420a; border-left-color: #fd7e14; }
.ev-pending_confirmation { background: rgba(13,202,240,.13); color: #087990; border-left-color: #0dcaf0; }

/* Status colours — dark */
[data-bs-theme=dark] .ev-scheduled { background: rgba(13,110,253,.22);  color: #6ea8fe; }
[data-bs-theme=dark] .ev-completed  { background: rgba(108,117,125,.22); color: #adb5bd; }
[data-bs-theme=dark] .ev-cancelled  { background: rgba(220,53,69,.18);   color: #ea868f; }
[data-bs-theme=dark] .ev-no_show    { background: rgba(253,126,20,.22);  color: #feb272; }
[data-bs-theme=dark] .ev-pending_confirmation { background: rgba(13,202,240,.22); color: #6edff6; }

/* "+N more" button — opens the day view */
.cal-more-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 1px 4px;
    font-size: .7rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    border-radius: 3px;
    transition: background .12s, color .12s;
    margin-top: 1px;
}
.cal-more-btn:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }

/* Status filter toggle buttons */
.sf-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 500;
    border: 1.5px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: all .15s;
    user-select: none;
    opacity: .55;
}
.sf-btn.sf-on { opacity: 1; }
.sf-btn.sf-on.sf-scheduled { background: rgba(13,110,253,.10);  border-color: #0d6efd; color: #0d6efd; }
.sf-btn.sf-on.sf-completed  { background: rgba(108,117,125,.10); border-color: #6c757d; color: #6c757d; }
.sf-btn.sf-on.sf-cancelled  { background: rgba(220,53,69,.08);   border-color: #dc3545; color: #dc3545; }
.sf-btn.sf-on.sf-no_show    { background: rgba(253,126,20,.10);  border-color: #fd7e14; color: #fd7e14; }
.sf-btn.sf-on.sf-pending_confirmation { background: rgba(13,202,240,.10); border-color: #0dcaf0; color: #087990; }

[data-bs-theme=dark] .sf-btn.sf-on.sf-scheduled { background: rgba(13,110,253,.20);  color: #6ea8fe; border-color: #6ea8fe; }
[data-bs-theme=dark] .sf-btn.sf-on.sf-completed  { background: rgba(108,117,125,.20); color: #adb5bd; border-color: #adb5bd; }
[data-bs-theme=dark] .sf-btn.sf-on.sf-cancelled  { background: rgba(220,53,69,.15);   color: #ea868f; border-color: #ea868f; }
[data-bs-theme=dark] .sf-btn.sf-on.sf-no_show    { background: rgba(253,126,20,.20);  color: #feb272; border-color: #feb272; }
[data-bs-theme=dark] .sf-btn.sf-on.sf-pending_confirmation { background: rgba(13,202,240,.20); color: #6edff6; border-color: #6edff6; }

.sf-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-scheduled { background: #0d6efd; }
.dot-completed  { background: #6c757d; }
.dot-cancelled  { background: #dc3545; }
.dot-no_show    { background: #fd7e14; }
.dot-pending_confirmation { background: #0dcaf0; }

/* Stat summary chips */
.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--bs-secondary-bg);
    transition: opacity .15s;
}
.stat-chip.stat-dim { opacity: .35; }

/* Month title + navigation */
.cal-nav { min-width: 260px; }
.cal-month-title {
    font-size: 1.2rem;
    font-weight: 700;
    min-width: 160px;
    text-align: center;
    letter-spacing: -.01em;
}

/* Keyboard shortcut hint */
.kbd-hint { font-size: .68rem; color: var(--bs-secondary-color); }

/* Staff filter dropdown (>7 staff) */
.cal-staff-dropdown { min-width: 220px; }
.cal-staff-dropdown-scroll { max-height: 240px; overflow-y: auto; }

/* Day number clickable — cursor + subtle hover ring */
.cal-day-num.dv-open { cursor: pointer; transition: background .12s, color .12s; }
.cal-day:not(.is-today) .cal-day-num.dv-open:hover {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

@media (max-width: 575.98px) {
    .cal-day          { min-height: 90px; }
    .cal-month-title  { min-width: 120px; font-size: 1rem; }
}

/* ── §26 Day view modal ──────────────────────────────────────────────────── */
.dv-row {
    display: flex;
    align-items: flex-start;
    min-height: 44px;
    padding: 5px 0;
    border-top: 1px solid var(--bs-border-color);
    transition: background .1s;
}
.dv-row.dv-has-appt { background: rgba(var(--bs-primary-rgb), .025); }

.dv-hour-lbl {
    width: 68px;   /* holds "< 07:00" and "21:00 +" on one line */
    flex-shrink: 0;
    white-space: nowrap;
    padding: 5px 6px 0 12px;
    font-size: .72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
    line-height: 1.4;
}

.dv-hour-body {
    flex: 1;
    min-width: 0;
    padding: 2px 12px 4px 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Appointment card inside the day view */
.dv-event {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    border-left: 3px solid transparent;
    font-size: .82rem;
    text-decoration: none !important;
    line-height: 1.4;
    overflow: hidden;
    transition: filter .12s, transform .1s;
}
.dv-event:hover { filter: brightness(.88); transform: translateX(2px); }

.dv-ev-time {
    font-weight: 700;
    font-size: .72rem;
    flex-shrink: 0;
    min-width: 95px;
    font-variant-numeric: tabular-nums;
}
.dv-ev-client {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dv-ev-staff {
    font-size: .7rem;
    opacity: .75;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}
.dv-event .ev-mine-dot,
.dv-event .ev-virtual-dot { flex-shrink: 0; font-size: .6rem; opacity: .85; }

/* Busy slot in the day view — same treatment as on the month grid: nothing to
   open, so no hover lift and no pointer. */
.dv-event.ev-busy         { cursor: default; opacity: .72; font-style: italic; }
.dv-event.ev-busy:hover   { filter: none; transform: none; }
.dv-event .ev-busy-dot    { flex-shrink: 0; font-size: .6rem; opacity: .7; }

/* Free-slot quick-add button — appears on row hover */
.dv-add-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 10px;
    font-size: .78rem;
    color: var(--bs-secondary-color);
    background: transparent;
    border: 1px dashed var(--bs-border-color);
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, background .12s, color .12s, border-color .12s, border-style .12s;
}
.dv-row.dv-free:hover .dv-add-slot { opacity: 1; }
.dv-add-slot:hover {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    border-style: solid;
}

/* Row layout for an hour that already has an appointment */
.dv-hour-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
}

.dv-appts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Compact quick-add trigger shown beside an hour that already has an
   appointment. */
.dv-add-slot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    color: var(--bs-secondary-color);
    background: transparent;
    border: 1px dashed var(--bs-border-color);
    border-radius: 6px;
    cursor: pointer;
    opacity: .45;
    transition: opacity .15s, background .12s, color .12s, border-color .12s, border-style .12s;
}
.dv-row.dv-has-appt:hover .dv-add-slot-icon,
.dv-add-slot-icon:focus-visible {
    opacity: 1;
}
.dv-add-slot-icon:hover {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    border-style: solid;
}

@media (max-width: 575.98px) {
    .dv-ev-time  { min-width: 78px; }
    /* Under the client instead of hidden: on a phone the practitioner (or
       everyone on a co-therapy session) is still worth seeing. */
    .dv-event    { flex-wrap: wrap; row-gap: 0; }
    /* Wraps rather than ellipsis: a phone has no hover to show the rest. */
    .dv-ev-staff { order: 5; flex-basis: 100%; max-width: none; padding-left: calc(78px + 8px); white-space: normal; }
}

/* ── §27 Icon picker ─────────────────────────────────────────────────────── */
#iconGrid {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    max-height: 420px;
    overflow-y: auto;
}

.icon-tile {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: border-color .12s, background .12s;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.icon-tile:hover {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .06);
}
.icon-tile--active {
    border-color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb), .14) !important;
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .35);
}
.icon-preview-box {
    width: 56px;
    height: 56px;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

/* ── §28 Notification cards ─────────────────────────────────────────────── */
.notif-icon-bubble {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* Unread indicator dot — primary-coloured circle with a soft halo */
.notif-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18);
}

/* ── Mobile nav hamburger unread dot ────────────────────────────────────── */
.nav-unread-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-danger);
    border: 2px solid var(--bs-body-bg);
    pointer-events: none;
}

/* ── §29 Team Chat ─────────────────────────────────────────────── */

/* ── Page layout ─────────────────────────────────────────────────────────── */
.chat-page {
    display: flex;
    flex-direction: column;
    flex: 1 0 18rem;
    min-height: 0;
}

/* ── Pinned bar ──────────────────────────────────────────────────────────── */
.chat-pinned-area {
    border: 1px solid var(--bs-warning-border-subtle);
    border-radius: .5rem;
    background: var(--bs-warning-bg-subtle);
    margin-bottom: .5rem;
    flex-shrink: 0;
    overflow: hidden;
}
.chat-pinned-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--bs-warning-text-emphasis);
    cursor: default;
}
.chat-pinned-list {
    padding: 0 .5rem .4rem;
}
.chat-pinned-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    padding: .2rem .25rem;
    border-radius: .25rem;
    line-height: 1.3;
    cursor: pointer;
}
.chat-pinned-item:hover { background: rgba(var(--bs-warning-rgb), .15); }
.chat-pinned-sender { font-weight: 600; flex-shrink: 0; }
.chat-pinned-body   { color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Message highlight — triggered by JS after scroll-to */
@keyframes chat-msg-flash {
    0%   { background-color: rgba(var(--bs-warning-rgb), .35); }
    100% { background-color: transparent; }
}
.chat-msg--highlight {
    animation: chat-msg-flash 1.4s ease-out forwards;
    border-radius: .35rem;
}

/* ── Messages area ───────────────────────────────────────────────────────── */
.chat-messages-wrap {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Unread-jump floating pill */
.chat-unread-jump {
    position: absolute;
    bottom: .75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    white-space: nowrap;
    padding: .3rem .9rem;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: var(--bs-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    opacity: 1;
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: auto;
}
.chat-unread-jump.d-none {
    opacity: 0;
    pointer-events: none;
}
.chat-messages {
    flex: 1 1 0;
    overflow-y: auto;
    padding: .5rem 0;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* ── Date separator ──────────────────────────────────────────────────────── */
.chat-date-sep {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .75rem 0 .35rem;
    color: var(--bs-secondary-color);
    font-size: .72rem;
    font-weight: 500;
}
.chat-date-sep::before,
.chat-date-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bs-border-color);
}

/* ── Single message ──────────────────────────────────────────────────────── */
.chat-msg {
    display: flex;
    gap: .6rem;
    padding: .15rem .5rem;
    border-radius: .4rem;
    transition: background .1s;
    position: relative;
}
.chat-msg:hover { background: var(--bs-tertiary-bg); }
.chat-msg:hover .chat-msg-actions { opacity: 1; pointer-events: auto; }
.chat-msg--grouped { padding-top: .05rem; }

/* Own messages: subtle right-side tint */
.chat-msg--own .chat-msg-body-wrap {
    background: rgba(var(--bs-primary-rgb), .06);
    border-radius: .4rem;
    padding: .25rem .5rem;
}

/* Avatar */
.chat-msg-avatar { width: 32px; }
.chat-msg-avatar img { display: block; }
.chat-msg-avatar-placeholder { width: 32px; flex-shrink: 0; }

/* Meta (name + time) */
.chat-msg-meta {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-bottom: .15rem;
}
.chat-msg-sender {
    font-weight: 600;
    font-size: .82rem;
    color: var(--bs-body-color);
    text-decoration: none;
}
.chat-msg-sender:hover { text-decoration: underline; }
.chat-msg-time {
    font-size: .7rem;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
    cursor: help;
}
.chat-msg-edited-tag {
    font-size: .7rem;
    font-style: italic;
    color: var(--bs-secondary-color);
    opacity: .75;
    flex-shrink: 0;
    cursor: help;
}

/* Body */
.chat-msg-body-wrap { min-width: 0; }
.chat-msg-text {
    font-size: .875rem;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Deleted message tombstone — keeps the message's place in the timeline
   (avatar/sender/time) instead of leaving no trace it was ever posted. */
.chat-msg-deleted-text {
    font-style: italic;
    color: var(--bs-secondary-color);
    opacity: .8;
}

/* Reply quote */
.chat-reply-ref {
    display: flex;
    gap: .4rem;
    align-items: baseline;
    border-left: 3px solid var(--bs-primary);
    padding-left: .5rem;
    margin-bottom: .2rem;
    font-size: .78rem;
    color: var(--bs-secondary-color);
    border-radius: 0 .2rem .2rem 0;
    background: var(--bs-secondary-bg);
    padding: .2rem .5rem;
    max-width: 100%;
    overflow: hidden;
}
.chat-reply-ref-sender { font-weight: 600; flex-shrink: 0; color: var(--bs-body-color); }
.chat-reply-ref-text   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pinned badge inside message */
.chat-pinned-badge {
    font-size: .7rem;
    color: var(--bs-warning-text-emphasis);
    margin-top: .2rem;
}

/* Action buttons (hidden until hover) */
.chat-msg-actions {
    position: absolute;
    top: .25rem;
    right: .5rem;
    display: flex;
    gap: .2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .3rem;
    padding: .15rem .3rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.chat-action-btn {
    background: none;
    border: none;
    color: var(--bs-secondary-color);
    cursor: pointer;
    padding: .1rem .25rem;
    border-radius: .2rem;
    line-height: 1;
    font-size: .8rem;
    transition: color .1s, background .1s;
}
.chat-action-btn:hover { color: var(--bs-body-color); background: var(--bs-secondary-bg); }

/* Inline message editing */
.chat-msg--editing .chat-msg-actions { display: none; }
.chat-edit-wrap { margin-top: .1rem; }
.chat-edit-textarea {
    font-size: .875rem;
    resize: vertical;
}

/* @mention highlight */
.chat-mention {
    color: var(--bs-primary);
    font-weight: 600;
    background: rgba(var(--bs-primary-rgb), .08);
    border-radius: .2rem;
    padding: 0 .2rem;
}
/* @all broadcast mention — amber to stand out from personal @mentions */
.chat-mention--all {
    color: var(--bs-warning-text-emphasis);
    background: rgba(var(--bs-warning-rgb), .15);
}
/* Clickable @mention that links to a staff profile */
a.chat-mention--link { text-decoration: none; }
a.chat-mention--link:hover { text-decoration: underline; }

/* #client mention — teal so it reads as a distinct mention type from @staff */
a.chat-client-mention {
    color: var(--bs-success);
    font-weight: 600;
    background: rgba(var(--bs-success-rgb), .08);
    border-radius: .2rem;
    padding: 0 .2rem;
    text-decoration: none;
}
a.chat-client-mention:hover { text-decoration: underline; }

/* ── Compose area ────────────────────────────────────────────────────────── */
.chat-compose {
    flex-shrink: 0;
    border-top: 1px solid var(--bs-border-color);
    padding-top: .5rem;
    position: relative;
}
.chat-reply-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--bs-primary-bg-subtle);
    border-left: 3px solid var(--bs-primary);
    border-radius: .25rem;
    padding: .3rem .6rem;
    margin-bottom: .35rem;
    font-size: .78rem;
    color: var(--bs-secondary-color);
}
.chat-reply-bar-inner { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; }
.chat-reply-bar-text  { color: var(--bs-body-color); }
.chat-form-row {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
}
.chat-form-input-wrap { flex: 1 1 0; min-width: 0; }
.chat-input {
    display: block;   /* removes Chrome's inline-block baseline gap */
    width: 100%;
    resize: none;
    border-radius: .5rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding: .5rem .75rem;
    font-size: .875rem;
    line-height: 1.5;
    min-height: 38px;
    max-height: 160px;
    overflow-y: auto;
    transition: border-color .15s, box-shadow .15s;
}
.chat-input:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}
.chat-form-btns { display: flex; gap: .3rem; align-items: flex-end; flex-shrink: 0; }
.chat-toolbar-btn {
    background: none;
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    padding: .35rem .5rem;
    font-size: 1rem;
    line-height: 1;
    transition: color .12s, background .12s;
    height: 38px;
}
.chat-toolbar-btn:hover { color: var(--bs-body-color); background: var(--bs-secondary-bg); }
.chat-send-btn { height: 38px; }
.chat-compose-hint {
    font-size: .7rem;
    margin-top: .25rem;
    padding-left: .1rem;
}
.chat-retention-notice {
    font-size: .8rem;
    color: var(--bs-tertiary-color);
}

/* ── Mention dropdown ────────────────────────────────────────────────────── */
.chat-mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    box-shadow: 0 -4px 16px rgba(0,0,0,.12);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}
.chat-mention-list { padding: .3rem 0; margin: 0; }
.chat-mention-item {
    padding: .4rem .75rem;
    cursor: pointer;
    font-size: .85rem;
    transition: background .1s;
}
.chat-mention-item:hover,
.chat-mention-item.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.chat-mention-item--all { color: var(--bs-warning-text-emphasis); font-weight: 600; }
.chat-mention-item--all:hover,
.chat-mention-item--all.active { background: rgba(var(--bs-warning-rgb), .15); color: var(--bs-warning-text-emphasis); }
.chat-mention-age { font-size: .82em; }

/* ── Emoji panel ─────────────────────────────────────────────────────────── */
.chat-emoji-panel {
    position: absolute;
    bottom: calc(100% + .5rem);
    right: 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    padding: .5rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .2rem;
    width: 240px;
    z-index: 101;
}
.chat-emoji-item {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    padding: .2rem;
    border-radius: .25rem;
    line-height: 1;
    text-align: center;
    transition: background .1s;
}
.chat-emoji-item:hover { background: var(--bs-secondary-bg); }

/* ── Media embeds ────────────────────────────────────────────────────────── */
.embedded-media { display: block; margin: .4rem 0; max-width: 100%; }

.embedded-image {
    max-width: 340px;
    max-height: 280px;
    object-fit: contain;
    border-radius: .4rem;
    border: 1px solid var(--bs-border-color);
}

.embedded-video {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 480px;
    border-radius: .4rem;
    overflow: hidden;
    background: #000;
}
.embedded-video iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.embedded-spotify {
    max-width: 480px;
    border-radius: .75rem;
    overflow: hidden;
}
.embedded-spotify iframe {
    width: 100%;
    height: 80px;
    border: none;
    display: block;
}

/* Chat link */
.chat-link {
    color: var(--bs-link-color);
    word-break: break-all;
}
.chat-link:hover { color: var(--bs-link-hover-color); }

/* ── Load more button ────────────────────────────────────────────────────── */
.chat-top-spinner {
    flex-shrink: 0;
    text-align: center;
    padding: .5rem 0;
    color: var(--bs-secondary);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .chat-msg-actions { position: static; opacity: 1; pointer-events: auto; background: none; border: none; box-shadow: none; padding: 0; }
    .embedded-image { max-width: 100%; }
    .embedded-video { max-width: 100%; }
}

/* ── §30 Chat polls ──────────────────────────────────────────────────────── */

/* Poll widget — rendered inside a chat bubble */
.chat-poll {
    max-width: 400px;
    width: 100%;
    padding: .75rem .875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bs-tertiary-bg);
}
.chat-poll-question {
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .6rem;
    line-height: 1.35;
}
.chat-poll-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* Each option is a button (clickable before voting) or a bar (after voting) */
.chat-poll-option {
    display: block;
    width: 100%;
    background: none;
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    padding: 0;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color .15s;
}
.chat-poll-option:hover:not(:disabled) {
    border-color: var(--bs-primary);
}
.chat-poll-option:disabled {
    cursor: default;
}
.chat-poll-option--voted {
    border-color: var(--bs-primary);
}

/* Progress bar fill — width driven by --pct CSS custom property set by JS */
.chat-poll-option-bar {
    position: absolute;
    inset: 0;
    background: var(--bs-primary-bg-subtle);
    transform-origin: left;
    transform: scaleX(calc(var(--pct, 0) / 100));
    transition: transform .4s ease;
    pointer-events: none;
}
.chat-poll-option--voted .chat-poll-option-bar {
    background: color-mix(in srgb, var(--bs-primary) 20%, transparent);
}

.chat-poll-option-label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .5rem;
    font-size: .82rem;
    gap: .4rem;
    z-index: 1;
}
.chat-poll-option-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-poll-option-pct {
    flex-shrink: 0;
    font-size: .75rem;
    color: var(--bs-secondary-color);
    min-width: 2.5rem;
    text-align: right;
}
.chat-poll-option--voted .chat-poll-option-pct {
    color: var(--bs-primary);
    font-weight: 600;
}
.chat-poll-option-check {
    flex-shrink: 0;
    font-size: .7rem;
    color: var(--bs-primary);
}

.chat-poll-meta {
    margin-top: .5rem;
    margin-bottom: 0;
    font-size: .75rem;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.chat-poll-change-vote {
    background: none;
    border: none;
    padding: 0;
    font-size: .75rem;
    color: var(--bs-link-color);
    cursor: pointer;
    text-decoration: underline;
}
.chat-poll-change-vote:hover { color: var(--bs-link-hover-color); }

/* Poll composer — floats above the compose bar */
.chat-poll-composer {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-body-bg);
    padding: .75rem;
    margin-bottom: .5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.chat-poll-composer-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: .6rem;
}
.chat-poll-composer-close {
    color: var(--bs-secondary-color);
    text-decoration: none;
}
.chat-poll-composer-close:hover { color: var(--bs-body-color); }

.chat-poll-option-rows {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.chat-poll-option-row {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.chat-poll-option-row .form-control {
    flex: 1;
    min-width: 0;
}
.chat-poll-option-remove {
    flex-shrink: 0;
    color: var(--bs-danger);
    text-decoration: none;
}

.chat-poll-add-option {
    color: var(--bs-primary);
    text-decoration: none;
    font-size: .82rem;
}
.chat-poll-add-option:hover { text-decoration: underline; }

.chat-poll-composer-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

/* ── Chat search results ─────────────────────────────────────────────────── */
.chat-search-results {
    max-height: 260px;
    overflow-y: auto;
    margin-top: .4rem;
}
.chat-search-empty {
    font-size: .82rem;
    color: var(--bs-secondary-color);
    padding: .35rem .1rem;
}
.chat-search-result {
    padding: .45rem .5rem;
    border-radius: .35rem;
    cursor: pointer;
    transition: background .1s;
}
.chat-search-result + .chat-search-result { border-top: 1px solid var(--bs-border-color); }
.chat-search-result:hover { background: var(--bs-secondary-bg); }
.chat-search-result-meta {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-bottom: .1rem;
}
.chat-search-result-sender {
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-body-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.chat-search-result-time {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
    white-space: nowrap;
}
.chat-search-result-body {
    font-size: .8rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.chat-search-result-body mark {
    background: rgba(var(--bs-warning-rgb), .35);
    color: var(--bs-body-color);
    border-radius: .2rem;
    padding: 0 .1rem;
}

/* ── §31 Staff Notes ─────────────────────────────────────────────────── */

/* Masonry grid */
.notes-grid {
    column-count: 1;
    column-gap: 1rem;
}
@media (min-width: 576px)  { .notes-grid { column-count: 2; } }
@media (min-width: 992px)  { .notes-grid { column-count: 3; } }
@media (min-width: 1400px) { .notes-grid { column-count: 4; } }

/* Section labels (Pinned / Other) */
.notes-section-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: .5rem;
}

/* Note card */
.note-card {
    break-inside: avoid;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .75rem;
    margin-bottom: 1rem;
    position: relative;
    transition: box-shadow .15s ease, transform .15s ease, opacity .25s ease;
    background-color: var(--bs-body-bg);
}
.note-card:hover { box-shadow: var(--ta-shadow-card-hover); }
.note-card.note-removing { opacity: 0; transform: scale(.96); }

/* Card title */
.note-title {
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .4rem;
    word-break: break-word;
}

/* Card body text */
.note-body {
    font-size: .82rem;
    color: var(--bs-secondary-color);
    word-break: break-word;
}

/* Collapsed state — applied by notes.js only when the text actually overflows. */
.note-body.is-collapsed {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 12;
    line-clamp: 12;
    overflow: hidden;
}

/* Show more / show less. Hidden until notes.js confirms the note really is
   taller than the clamp, so a note that fits never carries a dead control. */
.note-body-toggle {
    font-size: .78rem;
    text-decoration: none;
    padding: 0;
    margin-top: .25rem;
}
.note-body-toggle:hover { text-decoration: underline; }

/* Card head row: toolbar (left) + date (right) */
.note-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .25rem;
    margin-bottom: .35rem;
    min-height: 1.4rem;
}

/* Right-hand meta group: reminder badge + date stamp, on one line, aligned right */
.note-card-meta {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: .3rem;
    flex-shrink: 0;
}

/* Date stamp — always visible, top-right */
.note-date {
    font-size: .65rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    padding-top: .2rem;
    opacity: .7;
}

/* Memento reminder badge — shown when a note/checklist has due_at set */
.note-reminder-badge {
    font-size: .65rem;
    white-space: nowrap;
    color: var(--bs-warning-text-emphasis, #ffc107);
    opacity: .9;
}

/* Separator between the reminder badge and the date stamp, when both show */
.note-meta-sep {
    font-size: .65rem;
    color: var(--bs-secondary-color);
    opacity: .5;
}

/* Toolbar: always visible */
.note-toolbar {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex-shrink: 0;
}

.note-tool {
    background: none;
    border: none;
    padding: .2rem .3rem;
    border-radius: .3rem;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.note-tool:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.note-tool.is-pinned { color: var(--bs-primary); }

/* Color swatches */
.note-color-menu { min-width: 0; flex-wrap: wrap; gap: .25rem; width: 145px; }
.note-color-menu.show { display: flex !important; }
.note-color-swatch {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .1s;
}
.note-color-swatch:hover { transform: scale(1.2); }
.note-color-swatch.selected { border-color: var(--bs-primary); }
.note-swatch-default { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
.note-swatch-red    { background: #f28b82; }
.note-swatch-orange { background: #fbbc04; }
.note-swatch-yellow { background: #fff475; }
.note-swatch-green  { background: #ccff90; }
.note-swatch-teal   { background: #a8dadc; }
.note-swatch-blue   { background: #aecbfa; }
.note-swatch-purple { background: #d7aefb; }
.note-swatch-pink   { background: #fdcfe8; }

/* Note color backgrounds */
[data-bs-theme="light"] .note-red    { background: #f28b82; border-color: #e57c72; }
[data-bs-theme="light"] .note-orange { background: #fbbc04; border-color: #e5ac03; }
[data-bs-theme="light"] .note-yellow { background: #fff475; border-color: #ede465; }
[data-bs-theme="light"] .note-green  { background: #ccff90; border-color: #bbee80; }
[data-bs-theme="light"] .note-teal   { background: #a8dadc; border-color: #98c9cc; }
[data-bs-theme="light"] .note-blue   { background: #aecbfa; border-color: #9ebbe9; }
[data-bs-theme="light"] .note-purple { background: #d7aefb; border-color: #c79eea; }
[data-bs-theme="light"] .note-pink   { background: #fdcfe8; border-color: #ecbfd7; }

/* Dark mode variants (slightly muted) */
[data-bs-theme="dark"] .note-red    { background: #77172e; border-color: #882236; }
[data-bs-theme="dark"] .note-orange { background: #692b17; border-color: #7a3a26; }
[data-bs-theme="dark"] .note-yellow { background: #7c4a03; border-color: #8d5b14; }
[data-bs-theme="dark"] .note-green  { background: #264d3b; border-color: #375e4c; }
[data-bs-theme="dark"] .note-teal   { background: #0d3b44; border-color: #1e4c55; }
[data-bs-theme="dark"] .note-blue   { background: #1e3a5f; border-color: #2f4b70; }
[data-bs-theme="dark"] .note-purple { background: #42275e; border-color: #53386f; }
[data-bs-theme="dark"] .note-pink   { background: #6e1f4b; border-color: #7f305c; }

/* Dark-mode swatch preview */
[data-bs-theme="dark"] .note-swatch-red    { background: #77172e; }
[data-bs-theme="dark"] .note-swatch-orange { background: #692b17; }
[data-bs-theme="dark"] .note-swatch-yellow { background: #7c4a03; }
[data-bs-theme="dark"] .note-swatch-green  { background: #264d3b; }
[data-bs-theme="dark"] .note-swatch-teal   { background: #0d3b44; }
[data-bs-theme="dark"] .note-swatch-blue   { background: #1e3a5f; }
[data-bs-theme="dark"] .note-swatch-purple { background: #42275e; }
[data-bs-theme="dark"] .note-swatch-pink   { background: #6e1f4b; }

/* Checklist inside a card */
.note-checklist { margin-bottom: 0; }
.note-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    padding: .15rem 0;
}
.note-item.done .note-item-label {
    text-decoration: line-through;
    opacity: .5;
}
.note-item.done .note-item-label a {
    text-decoration: none;
}
.note-item-check {
    background: none;
    border: none;
    padding: 0;
    color: var(--bs-secondary-color);
    cursor: pointer;
    font-size: .9rem;
    flex-shrink: 0;
}
.note-item-check:hover { color: var(--bs-primary); }
.note-item.done .note-item-check { color: var(--bs-success); }
.note-item-label { word-break: break-word; flex: 1; }
.note-item-drag {
    cursor: grab;
    color: var(--bs-secondary-color);
    opacity: .35;
    font-size: .75rem;
    flex-shrink: 0;
    padding: 0 .1rem;
    transition: opacity .15s;
}
.note-item:hover .note-item-drag { opacity: .75; }
.note-item-drag:active { cursor: grabbing; }
.note-item.drag-over {
    border-top: 2px solid var(--bs-primary);
    margin-top: -2px;
}

/* Live search */
@media (min-width: 768px) {
    .notes-search-input {
        width: 310px !important;
    }
}
.notes-section.d-none { display: none !important; }

/* Mini progress bar under checklist header */
.note-progress-wrap {
    height: 4px;
    background: var(--bs-border-color);
    border-radius: 2px;
    margin-bottom: .5rem;
    overflow: hidden;
}
.note-progress-bar {
    height: 100%;
    background: var(--bs-success);
    border-radius: 2px;
    transition: width .3s ease;
}

/* Items in create/edit modals */
.create-item, .edit-item {
    font-size: .85rem;
    padding: .2rem 0;
}

/* ── §32 Drive — file storage ────────────────────────────────────── */

/* File cards — uniform height, centred icon */
.drive-file-card {
    cursor: pointer;
    transition: box-shadow .18s ease, transform .15s ease;
    user-select: none;
}
.drive-file-card:hover {
    box-shadow: var(--ta-shadow-card-hover) !important;
    transform: translateY(-2px);
}

.drive-private-badge {
    position: absolute;
    top: .15rem;
    left: .45rem;
    color: var(--bs-secondary-color);
    opacity: .7;
    cursor: help;
}

/* ── Drive favourite star ─────────────────────────────────────────────────── */

.drive-fav-btn {
    position: absolute;
    top: .1rem;
    right: .1rem;
    z-index: 2;
    padding: .25rem .3rem;
    line-height: 1;
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
    opacity: .55;
    cursor: pointer;
    transition: opacity .15s ease, color .15s ease, transform .15s ease;
}

.drive-fav-btn:hover,
.drive-fav-btn:focus-visible {
    opacity: 1;
    color: var(--bs-warning);
}

/* Starred: full opacity and amber in both colour schemes. */
.drive-fav-btn.is-favorite {
    opacity: 1;
    color: var(--bs-warning);
}

/* The star briefly scales up when it becomes active, so a click that only
   changes an icon's colour still reads as having done something. */
.drive-fav-btn.is-favorite > i {
    animation: drive-fav-pop .2s ease;
}

@keyframes drive-fav-pop {
    0%   { transform: scale(.7); }
    60%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* Respect a reduced-motion preference — the colour change alone carries the
   state, so dropping the animation loses nothing. */
@media (prefers-reduced-motion: reduce) {
    .drive-fav-btn.is-favorite > i {
        animation: none;
    }
}

/* In-flight: the click has been sent but not yet confirmed by the server. */
.drive-fav-btn.is-pending {
    opacity: .4;
    cursor: progress;
}

/* List rows lay their children out in a flex row, so the star is positioned
   in flow there rather than pinned to a corner. */
.drive-fav-btn--inline {
    position: static;
    flex-shrink: 0;
    padding: .25rem;
}

.drive-list-name {
    cursor: pointer;
}
.drive-list-name:hover {
    text-decoration: underline;
}

.drive-file-icon {
    font-size: 2.8rem;
    line-height: 1;
}

.drive-file-name {
    font-size: .82rem;
    font-weight: 600;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Modal preview / sidebar layout */
.drive-modal-body {
    min-height: 400px;
}

.drive-preview-area {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
}

.drive-preview-area img {
    max-width: 100%;
    max-height: 720px;
    object-fit: contain;
    border-radius: .25rem;
}

.drive-preview-area iframe {
    width: 100%;
    height: 720px;
    border: none;
    display: block;
}

.drive-text-preview {
    width: 100%;
    height: 720px;
    margin: 0;
    padding: .75rem 1rem;
    overflow: auto;
    font-size: .8125rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: none;
    border-radius: 0;
}

.drive-placeholder-icon {
    font-size: 5rem;
    opacity: .55;
}

.drive-sidebar {
    min-width: 220px;
    max-width: 280px;
    width: 260px;
    flex-shrink: 0;
    overflow-y: auto;
}

@media (max-width: 767.98px) {
    .drive-sidebar {
        width: 100%;
        max-width: 100%;
        border-left: none !important;
        border-top: 1px solid var(--ta-glass-border);
    }
    .drive-preview-area iframe {
        height: 460px;
    }
}

/* Search input: full-width on mobile, fixed on md+ */
@media (min-width: 768px) {
    .drive-search-input {
        width: 280px !important;
    }
}

/* Modal filename — click-to-copy affordance */
#driveModalName {
    cursor: pointer;
    transition: color .15s ease;
    position: relative;
}
#driveModalName:hover {
    color: var(--bs-primary);
}
#driveModalName.drive-name-copied {
    color: var(--bs-success) !important;
}
#driveModalName.drive-name-copied::after {
    content: '✓ Copied!';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: .7rem;
    font-weight: 600;
    color: #fff;
    background: var(--bs-success);
    padding: .15rem .45rem;
    border-radius: .3rem;
    white-space: nowrap;
    pointer-events: none;
}

/* ── §33 Available slots panel ────────────────────────────────────────────── */
.slots-panel {
    width: 100%;
    max-width: 240px;
}
.slots-panel .card-title { font-size: .85rem; }
.slots-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 360px;
    overflow-y: auto;
}
.slot-btn {
    text-align: left;
    font-variant-numeric: tabular-nums;
}

/* ── §34 Appointment setup hints (floating, bottom-right) ─────────────────── */
.appt-hints {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    max-width: 320px;
    pointer-events: none;
}
.appt-hint-card {
    pointer-events: auto;
    border-left: 3px solid var(--bs-warning);
    animation: appt-hint-in .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes appt-hint-in {
    0%   { opacity: 0; transform: translateY(12px) scale(.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* -- Cookie consent banner ------------------------------------------------- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    padding: .875rem 1.25rem;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
}

/* -- Client portal: birthdate verification --------------------------------- */
.portal-verify-wrap {
    position: relative;
    min-height: 22rem;
}
.portal-verify-backdrop {
    filter: blur(6px);
    opacity: .5;
    pointer-events: none;
    user-select: none;
}
.portal-verify-card {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 22rem;
    height: fit-content;
    z-index: 1;
}

/*  Collapsible admin card header (blog webhook card). */
.webhook-card-toggle { border-radius: inherit; }
.webhook-card-toggle .webhook-card-chevron { transition: transform .2s ease; }
.webhook-card-toggle:not(.collapsed) .webhook-card-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .webhook-card-toggle .webhook-card-chevron { transition: none; }
}

/*  Blog post share buttons */
.blog-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    font-size: 1rem;
    line-height: 1;
    color: #fff;
    background-color: var(--share-bg);
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}
.blog-share-btn:hover,
.blog-share-btn:focus-visible {
    color: #fff;
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.blog-share-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .35);
}
.blog-share-copy           { --share-bg: var(--bs-primary); }
.blog-share-copy.is-copied { --share-bg: var(--bs-success); }
.blog-share-facebook       { --share-bg: #1877f2; }
.blog-share-x              { --share-bg: #000; }
.blog-share-linkedin       { --share-bg: #0a66c2; }
/* X's brand black would vanish on the dark theme's background. */
[data-bs-theme="dark"] .blog-share-x,
[data-bs-theme="dark"] .blog-share-x:hover,
[data-bs-theme="dark"] .blog-share-x:focus-visible {
    --share-bg: #fff;
    color: #000;
}
@media (prefers-reduced-motion: reduce) {
    .blog-share-btn { transition: none; }
    .blog-share-btn:hover,
    .blog-share-btn:focus-visible { transform: none; }
}

/*  Blog post body — inline images and figures. */
.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
}
.blog-content figure {
    margin: 1.5rem 0;
}
.blog-content figure img {
    display: block;
    margin: 0 auto;
}
.blog-content figcaption {
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

/*  Add as a preferred source on Google */
.blog-preferred-source {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4375rem 1rem .4375rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 50rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .77rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.blog-preferred-source:hover,
.blog-preferred-source:focus-visible {
    color: var(--bs-body-color);
    border-color: rgba(var(--bs-primary-rgb), .45);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}
.blog-preferred-source:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .35);
}
.blog-preferred-source-logo {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
    .blog-preferred-source { transition: none; }
    .blog-preferred-source:hover,
    .blog-preferred-source:focus-visible { transform: none; }
}

/* ── Monthly timesheet grid ───────────────────────────────────────────────
   The name column stays put while the days scroll sideways; cells are
   narrow enough for 31 days on a laptop screen. */
.timesheet-grid { font-size: .8rem; }
.timesheet-grid th,
.timesheet-grid td { white-space: nowrap; }
.timesheet-grid .timesheet-name {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 11rem;
    max-width: 16rem;
    white-space: normal;
    box-shadow: inset -1px 0 0 var(--bs-border-color);
}
.timesheet-grid .timesheet-day,
.timesheet-grid .timesheet-cell {
    min-width: 1.9rem;
    padding-left: .15rem;
    padding-right: .15rem;
}
/* Totals headings wrap onto two lines rather than widening the table. */
.timesheet-grid th.timesheet-total {
    white-space: normal;
    min-width: 3.75rem;
    vertical-align: bottom;
}
.timesheet-grid td.timesheet-absences {
    white-space: normal;
    min-width: 5.5rem;
}
.timesheet-grid .timesheet-today { box-shadow: inset 0 -3px 0 var(--bs-primary); }
.timesheet-grid .timesheet-cell a { display: block; text-decoration: none; }
.timesheet-note { white-space: pre-line; }

/* ── §35 Staff & HR tiles (attendance, payroll) ───────────────────────────
   Two link-cards at the top of the staff list, the way into the HR pages now
   that they have no menu entry of their own. Card hover is not a Bootstrap
   default, so the tile has to say it is clickable. */
.hr-tile {
    transition: border-color .12s ease-in-out, background-color .12s ease-in-out;
}
.hr-tile:hover,
.hr-tile:focus-visible {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .04);
}
.hr-tile-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}

/* ── §36 Dashboard pair: clock card and leave card ────────────────────────
   The two personal cards at the top of the dashboard, side by side on a wide
   screen. Only the icon chip needs a rule; everything else is Bootstrap.

   Note for anyone tempted to outline these in the state colour: .card above
   pins border-color to the glass border with !important, so a border utility
   on the card does nothing. The clock card carried border-success for months
   and never once drew it. State is carried by the chip, the badge and the
   button instead — which is what the rest of the app does. */
.dash-card-icon {           /* matches .hr-tile-icon, the app's other icon chip */
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}