/* ============================================================
   DanceYourLife Studio — Admin Panel Styles
   ============================================================ */

/* ============================================================
   FocusOnNavigate — kill the page-title focus outline (GLOBAL, every page).
   Routes.razor renders <FocusOnNavigate Selector="h1" /> exactly once, so the
   ONLY element auto-focused after any navigation is the page <h1>. That move is
   a screen-reader nicety, but the visible side effect is the browser drawing a
   focus ring around the title on page load, making the heading look "selected".

   An <h1> is never in the natural tab order (FocusOnNavigate adds tabindex=-1
   only transiently, then removes it), so the only time an <h1> is :focus is this
   programmatic move — dropping its outline is safe and never hides a real
   keyboard focus ring. admin.css is linked in the single root App.razor <head>,
   so this covers every layout (admin, public, platform, embed). The focus move
   itself is preserved, so accessibility is unaffected.
   ============================================================ */
h1:focus { outline: none; }

/* ============================================================
   DESIGN TOKENS — the admin design-system API (7 themes: 6 light + 1 dark).
   :root holds the DEFAULT theme (Sage). The shell, the shared component
   library (.mh- / .ap- classes) and the Bootstrap reskin only ever read
   these tokens — never a raw hex — so writing a theme's token values onto
   <html> (via data-theme + data-mode) reshapes the whole admin. The
   sidebar/accent aliases at the bottom are DERIVED from the --ae-* tokens,
   so a theme only needs to set the --ae-* set (+ --accent-rgb).

   ── HOW TO ADD A THEME ──────────────────────────────────────
   Add ONE block: [data-theme="name"] { … } setting the coordinated set:
     --ae-primary, --ae-accent-ink (text ON the accent), --accent-rgb (the
     R,G,B of --ae-primary, for rgba tints), and the neutrals
     --ae-bg/-bg-soft/-surface/-hover/-text/-text-subtle/-text-muted/-soft/
     -border/-line-soft/-track/-chip. A LIGHT theme may omit any neutral
     equal to Sage's (e.g. --ae-surface stays #fff). A DARK theme also gets
     data-mode="dark" from the picker and should override --ae-shadow.
   Soft accent washes are derived at use-site with color-mix (do NOT store
   them). Status pills + the destructive red are FIXED (semantic), never
   per-theme. Register the key in _themes (AdminLayout.razor). No component
   or Bootstrap CSS edits are ever required.
   ============================================================ */
:root {
    --sidebar-width: 250px;
    --topbar-height: 56px;

    /* ===== Sage (default) — coordinated token set ===== */
    --ae-primary:     #0e9488;
    --ae-accent-ink:  #ffffff;   /* text/icons that sit ON --ae-primary */
    --accent-rgb:     14, 148, 136;  /* R,G,B of --ae-primary (rgba tints) */
    --ae-bg:          #f6f5f2;   /* app background */
    --ae-surface:     #ffffff;   /* card / sidebar / input surface (spec: panel) */
    --ae-bg-soft:     #fcfbf9;   /* raised sub-surface: table head, expanded strip (spec: surface) */
    --ae-hover:       #f4f2ee;   /* neutral hover wash */
    --ae-text:        #23211e;   /* primary text (spec: ink) */
    --ae-text-subtle: #56524c;   /* secondary text / control label (spec: ctl) */
    --ae-text-muted:  #908c85;   /* tertiary text / icon resting (spec: muted) */
    --ae-soft:        #b4afa6;   /* quaternary text / placeholders (spec: soft) */
    --ae-border:      #eceae5;   /* standard border (spec: line) */
    --ae-line-soft:   #f1efeb;   /* hairline divider */
    --ae-track:       #ebe8e2;   /* inactive track: progress bg, scrollbar thumb */
    --ae-chip:        #f1efeb;   /* neutral pill/badge bg: role tags, counts */

    /* shape / type / fixed semantics (theme-independent) */
    --ae-r: 10px;  --ae-r-card: 15px;  --ae-r-pill: 99px;
    --ae-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ae-shadow: 0 1px 2px rgba(20, 18, 14, .04), 0 8px 24px -12px rgba(20, 18, 14, .10);
    --ae-success: #2e7d5b;  --ae-danger: #c2543f;  --ae-warning: #9a6b00;
    --ae-accent-soft: color-mix(in srgb, var(--ae-primary) 10%, transparent);
    --ae-info: var(--ae-primary);

    /* sidebar/accent aliases — DERIVED from --ae-*, so the shell follows the theme */
    --accent:          var(--ae-primary);
    --accent-light:    var(--ae-accent-soft);
    --accent-text:     var(--ae-primary);
    --accent-shadow:   color-mix(in srgb, var(--ae-primary) 22%, transparent);
    --sidebar-bg:      var(--ae-surface);
    --sidebar-text:    var(--ae-text-subtle);
    --sidebar-active:  var(--ae-primary);
    --sidebar-hover:   color-mix(in srgb, var(--ae-primary) 9%, transparent);
    --sidebar-logo-bg: color-mix(in srgb, var(--ae-primary) 10%, transparent);
    --sidebar-logo-border: color-mix(in srgb, var(--ae-primary) 22%, transparent);
    --sidebar-logo-icon: var(--ae-primary);
    --sidebar-dropdown-bg: var(--ae-surface);

    /* status pill tones (bg / fg / dot) — FIXED across all themes (semantic) */
    --ae-pill-ok-bg: #e4f2ea;     --ae-pill-ok-fg: #2e7d5b;     --ae-pill-ok-dot: #43a06b;
    --ae-pill-warn-bg: #fbf0d9;   --ae-pill-warn-fg: #9a6b00;   --ae-pill-warn-dot: #d29a2e;
    --ae-pill-danger-bg: #fbeae7; --ae-pill-danger-fg: #c2543f; --ae-pill-danger-dot: #d17a66;
    --ae-pill-muted-bg: #efede8;  --ae-pill-muted-fg: #7a766f;  --ae-pill-muted-dot: #b4afa6;
    --ae-pill-noshow-bg: #fce9d8; --ae-pill-noshow-fg: #b5560f; --ae-pill-noshow-dot: #e07b2e;
    --ae-pill-info-bg: #e4f0ef;   --ae-pill-info-fg: #0e7a70;   --ae-pill-info-dot: #0e9488;
}

/* ===== THEMES =====================================================
   Each block sets its coordinated --ae-* token set; the sidebar/accent
   aliases + soft washes derive automatically. Sage is the :root default.
   Picker order: sage · indigo · plum · clay · rose · forest · midnight. */

/* ---- Indigo — confident blue-violet on cool blue-grey (SaaS/pro) ---- */
[data-theme="indigo"] {
    --ae-primary: #5048e5;
    --accent-rgb: 80, 72, 229;
    --ae-bg: #f4f5fb;  --ae-bg-soft: #fafbfe;  --ae-hover: #f1f2fa;
    --ae-text: #1b1d2a;  --ae-text-subtle: #4c4f63;  --ae-text-muted: #797d93;  --ae-soft: #a6aabd;
    --ae-border: #e5e6f0;  --ae-line-soft: #eff0f7;  --ae-track: #e7e8f3;  --ae-chip: #ecedf7;
}

/* ---- Plum — soft purple on lilac neutrals (creative, boutique) ---- */
[data-theme="plum"] {
    --ae-primary: #8a5cb0;
    --accent-rgb: 138, 92, 176;
    --ae-bg: #f7f4f9;  --ae-bg-soft: #fcf9fd;  --ae-hover: #f4eff6;
    --ae-text: #261e2b;  --ae-text-subtle: #564d5c;  --ae-text-muted: #897e90;  --ae-soft: #b5aabb;
    --ae-border: #ebe4ee;  --ae-line-soft: #f2ecf4;  --ae-track: #ece3ef;  --ae-chip: #f1e9f4;
}

/* ---- Clay — warm terracotta on sand (cozy, earthy studio warmth) ---- */
[data-theme="clay"] {
    --ae-primary: #be6440;
    --accent-rgb: 190, 100, 64;
    --ae-bg: #faf5f0;  --ae-bg-soft: #fdfaf5;  --ae-hover: #f6efe7;
    --ae-text: #2a211c;  --ae-text-subtle: #5c4f46;  --ae-text-muted: #998a7e;  --ae-soft: #c0b1a4;
    --ae-border: #eee3d9;  --ae-line-soft: #f4ece3;  --ae-track: #f0e6db;  --ae-chip: #f3eadf;
}

/* ---- Rose — berry pink on blush (energetic, expressive) ---- */
[data-theme="rose"] {
    --ae-primary: #c04e7c;
    --accent-rgb: 192, 78, 124;
    --ae-bg: #faf4f6;  --ae-bg-soft: #fdf9fb;  --ae-hover: #f6eef1;
    --ae-text: #2a1f24;  --ae-text-subtle: #5c4a52;  --ae-text-muted: #978088;  --ae-soft: #c0a8b1;
    --ae-border: #efe2e7;  --ae-line-soft: #f5ecf0;  --ae-track: #f1e3e9;  --ae-chip: #f4e9ee;
}

/* ---- Forest — deep green on pale sage-grey (grounded, natural) ---- */
[data-theme="forest"] {
    --ae-primary: #2f8056;
    --accent-rgb: 47, 128, 86;
    --ae-bg: #f4f7f4;  --ae-bg-soft: #fafcf9;  --ae-hover: #eff4ed;
    --ae-text: #1e261f;  --ae-text-subtle: #4d5a4f;  --ae-text-muted: #828a80;  --ae-soft: #abb4a8;
    --ae-border: #e5ebe3;  --ae-line-soft: #eef3ec;  --ae-track: #e6ece3;  --ae-chip: #ecf1ea;
}

/* ---- Midnight (dark) — mint accent on cool charcoal. Panel lifts above
   bg; borders are LIGHTER than panels (inverse of light mode). ---- */
[data-theme="midnight"] {
    --ae-primary: #3ac9b0;
    --ae-accent-ink: #06231e;   /* near-black green — sits ON the mint accent */
    --accent-rgb: 58, 201, 176;
    --ae-bg: #15171c;  --ae-surface: #1e2128;  --ae-bg-soft: #232730;  --ae-hover: #262b34;
    --ae-text: #eceef2;  --ae-text-subtle: #c3c8d1;  --ae-text-muted: #969ba6;  --ae-soft: #6b7079;
    --ae-border: #2b2f38;  --ae-line-soft: #242831;  --ae-track: #313640;  --ae-chip: #2a2f39;
    --ae-shadow: none;
}

/* Light themes — sidebar chrome on the white panel. Gated to non-dark mode;
   dark mode (Midnight) uses the base shell rules + --sidebar-* tokens. */
html:not([data-mode="dark"]) .admin-sidebar {
    border-right: 1px solid var(--ae-border);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
}

html:not([data-mode="dark"]) .sidebar-header {
    border-bottom-color: var(--ae-border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent);
}

html:not([data-mode="dark"]) .sidebar-brand { color: var(--ae-text); }

html:not([data-mode="dark"]) .sidebar-subbrand { color: var(--ae-text-muted); }

html:not([data-mode="dark"]) .nav-section { color: var(--ae-soft); }

html:not([data-mode="dark"]) .nav-toolbar-btn { color: var(--ae-soft); }
html:not([data-mode="dark"]) .nav-toolbar-btn:hover { color: var(--ae-text-subtle); background: var(--ae-hover); }

html:not([data-mode="dark"]) .nav-item { color: var(--ae-text-subtle); }

html:not([data-mode="dark"]) .nav-item:hover {
    background: var(--sidebar-hover);
    color: var(--accent);
}

html:not([data-mode="dark"]) .nav-item.active {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent);
}
html:not([data-mode="dark"]) .nav-item.active i { color: var(--accent); }

html:not([data-mode="dark"]) .sidebar-footer { border-top-color: var(--ae-border); }

html:not([data-mode="dark"]) .profile-trigger {
    background: var(--ae-hover);
    color: var(--ae-text-subtle);
}

html:not([data-mode="dark"]) .profile-trigger:hover { background: var(--ae-chip); }

html:not([data-mode="dark"]) .profile-trigger-name { color: var(--ae-text); }

html:not([data-mode="dark"]) .profile-trigger-role {
    background: var(--ae-chip);
    color: var(--ae-text-muted);
}

html:not([data-mode="dark"]) .profile-dropdown {
    background: var(--ae-surface);
    border-color: var(--ae-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

html:not([data-mode="dark"]) .profile-dropdown-item { color: var(--ae-text-subtle); }

html:not([data-mode="dark"]) .profile-dropdown-item:hover {
    background: var(--ae-hover);
    color: var(--ae-text);
}

html:not([data-mode="dark"]) .profile-dropdown-item.active {
    background: var(--ae-accent-soft);
    color: var(--accent-text);
}

html:not([data-mode="dark"]) .profile-dropdown-divider { background: var(--ae-border); }

html:not([data-mode="dark"]) .profile-dropdown-logout:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

/* ---- Studio admin login (/auth/studio) — full viewport, no white gap ---- */
.login-page {
    --login-accent: #38bdf8;
    --login-accent-deep: #0ea5e9;
    --login-ink: #0b1220;

    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(165deg, #070b14 0%, #0f172a 42%, #152238 78%, #162544 100%);
}

.login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 55% at 15% -5%, rgba(56, 189, 248, 0.28), transparent 52%),
        radial-gradient(ellipse 70% 45% at 100% 15%, rgba(99, 102, 241, 0.22), transparent 48%),
        radial-gradient(ellipse 55% 40% at 85% 100%, rgba(20, 184, 166, 0.12), transparent 45%);
    pointer-events: none;
    z-index: 0;
}

.login-page::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' fill-opacity='0.03' d='M32 0h32v32H32V0zm0 32h32v32H32V32zM0 32h32v32H0V32zm0-32h32v32H0V0z'/%3E%3C/svg%3E");
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

.login-page > * {
    position: relative;
    z-index: 1;
}

.login-container {
    width: 100%;
    max-width: 420px;
    padding: 0;
}

.login-card {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 18px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 28px 64px -12px rgba(0, 0, 0, 0.45),
        0 12px 24px -8px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
}

.login-brand-mark {
    display: inline-block;
    margin: 0 auto 14px;
    text-decoration: none;
    line-height: 0;
}

.login-brand-mark .login-brand-img {
    height: 56px;
    width: auto;
    max-width: none;
    display: block;
}

.login-title {
    font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--login-ink) !important;
}

.login-sub {
    color: #64748b !important;
}

.login-page .btn-primary {
    background: linear-gradient(135deg, var(--login-accent-deep) 0%, #0284c7 100%);
    border: none;
    font-weight: 700;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    box-shadow: 0 10px 28px rgba(14, 165, 233, 0.35);
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.login-page .btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 14px 36px rgba(14, 165, 233, 0.42);
}

.login-page .form-control:focus {
    border-color: rgba(14, 165, 233, 0.65);
    box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.18);
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-icon {
    font-size: 2.5rem;
    color: var(--accent);
}

.login-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.5rem 0 0.25rem;
}

/* ---- Admin Layout ---- */
.admin-wrapper {
    display: flex;
    min-height: 100vh;
    font-family: var(--ae-font);
    color: var(--ae-text);
}

.admin-sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    transition: width 0.2s ease;
    overflow: hidden;
}

.admin-sidebar.collapsed {
    width: 64px;
}

.admin-sidebar.collapsed .sidebar-brand,
.admin-sidebar.collapsed .nav-item span,
.admin-sidebar.collapsed .nav-section,
.admin-sidebar.collapsed .user-info span {
    display: none;
}

.admin-sidebar.collapsed .sidebar-brand-wrap {
    display: none;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    color: var(--sidebar-text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
}

.sidebar-logo-mark {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--sidebar-logo-bg);
    border: 1px solid var(--sidebar-logo-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sidebar-logo-mark i {
    font-size: 1.25rem;
    color: var(--sidebar-logo-icon);
}

.sidebar-brand-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    line-height: 1.1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.sidebar-brand-logo {
    height: 36px;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

.sidebar-brand {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
    white-space: nowrap;
}

.sidebar-subbrand {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(199, 210, 254, 0.75);
    margin-top: 0.15rem;
}

.admin-sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 0.9rem 0;
}

.sidebar-nav {
    flex: 1;
    padding: 0 0 0.75rem;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(199, 210, 254, 0.25) transparent;
}

/* Sticky search band — keeps the menu filter (and its expand/collapse controls)
   pinned to the top of the sidebar while the nav list scrolls underneath. The solid
   sidebar background + bottom divider mask items sliding behind it. */
.nav-sticky-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--sidebar-bg);
    padding: 0.75rem 0 0.4rem;
    border-bottom: 1px solid var(--ae-border);
}

.admin-sidebar.collapsed .nav-sticky-head { display: none; }

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(199, 210, 254, 0.22);
    border-radius: 3px;
    transition: background-color 0.15s ease;
}

.sidebar-nav:hover::-webkit-scrollbar-thumb {
    background-color: rgba(199, 210, 254, 0.4);
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(199, 210, 254, 0.6);
}

/* Sidebar menu search — filters nav items live (see AdminLayout.BuildVisibleSections).
   Uses --ae-* tokens so it follows the active theme (incl. midnight/dark). */
.nav-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0.75rem 0.25rem;
    padding: 0.4rem 0.6rem;
    background: var(--ae-bg-soft);
    border: 1px solid var(--ae-border);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.nav-search:focus-within {
    border-color: var(--ae-primary);
    box-shadow: 0 0 0 3px var(--ae-accent-soft);
}

.nav-search-icon {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--ae-soft);
}

.nav-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ae-text);
    font-size: 0.85rem;
}

.nav-search-input::placeholder { color: var(--ae-soft); }

.nav-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ae-soft);
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s;
}

.nav-search-clear:hover { color: var(--ae-text); }

/* Icon-rail mode has no room for a text field — hide it like the toolbar. */
.admin-sidebar.collapsed .nav-search { display: none; }

.nav-search-empty {
    padding: 1rem;
    margin: 0 0.5rem;
    font-size: 0.82rem;
    color: var(--ae-text-muted);
    text-align: center;
}

.nav-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem 0;
}

.nav-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: 0;
    border-radius: 4px;
    color: rgba(199, 210, 254, 0.5);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.nav-toolbar-btn:hover {
    color: rgba(199, 210, 254, 0.95);
    background: rgba(255, 255, 255, 0.06);
}

.admin-sidebar.collapsed .nav-toolbar { display: none; }

.nav-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 1rem 0.375rem;
    background: none;
    border: 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(199, 210, 254, 0.5);
    text-align: left;
    cursor: pointer;
    transition: color 0.15s;
}

.nav-section:hover { color: rgba(199, 210, 254, 0.85); }

.nav-section-chevron {
    font-size: 0.75rem;
    transition: transform 0.18s ease;
}

.nav-section.is-collapsed .nav-section-chevron {
    transform: rotate(-90deg);
}

.nav-section-items.is-collapsed { display: none; }

/* When the whole sidebar is reduced to icons, ignore per-section collapse
   so users can still reach every nav item from the icon rail. */
.admin-sidebar.collapsed .nav-section-items.is-collapsed { display: block; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    border-radius: 6px;
    margin: 1px 0.5rem;
    transition: background 0.15s, color 0.15s;
}

.nav-item:hover {
    background: var(--sidebar-hover);
    color: #fff;
}

.nav-item.active {
    background: var(--sidebar-active);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent);
}

/* ── Shared modal form helpers ──
   Used by the Assign Package, Issue Gift Card and Add Attendee modals to give
   each section a small-caps header and to render the issuance-type / payment-method
   radios as a full-width segmented control. */
.form-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-top: 8px;
    margin-bottom: 10px;
}
.form-section-label-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #9ca3af;
}
.mode-toggle .btn {
    border-radius: 8px !important;
}
.mode-toggle .btn-check + .btn {
    white-space: normal;
    line-height: 1.3;
}
.mode-toggle .btn-check:disabled + .btn {
    opacity: 0.5;
    cursor: not-allowed;
}
.mode-toggle .btn-check + .btn:not(:first-of-type) {
    margin-left: 8px;
}

.nav-item i {
    font-size: 1.1rem;
    width: 1.25rem;
    text-align: center;
}

/* Sub-item drawn under its parent (Schedule / Enrollment under Services): indented with a
   guide line, always visible — no collapse. */
.nav-item-child {
    margin-left: 1.75rem;
    padding-left: 0.85rem;
    font-size: 0.84rem;
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--sidebar-text) 28%, transparent);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.nav-item-child i { font-size: 1rem; }
.nav-item-child.active { box-shadow: inset 3px 0 0 var(--accent); }
.admin-sidebar.collapsed .nav-item-child {
    margin-left: 0.5rem;
    padding-left: 1rem;
    box-shadow: none;
}

.sidebar-footer {
    padding: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-menu-wrapper { position: relative; }

.profile-trigger {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.5rem 0.6rem; border: none; border-radius: 8px;
    background: rgba(255,255,255,0.06); color: rgba(199,210,254,0.85);
    font-size: 0.8rem; cursor: pointer; transition: background 0.15s;
    text-align: left;
}
.profile-trigger:hover { background: rgba(255,255,255,0.1); }
.profile-trigger .bi-person-circle { font-size: 1.3rem; flex-shrink: 0; }
.profile-trigger-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.profile-trigger-role { font-size: 0.75rem; background: rgba(255,255,255,0.12); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.profile-trigger-arrow { font-size: 0.6rem; transition: transform 0.2s; opacity: 0.6; }
.profile-trigger-arrow.open { transform: rotate(180deg); }

.profile-dropdown {
    position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
    background: var(--sidebar-dropdown-bg); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.35); padding: 4px; z-index: 100;
    animation: profileSlideUp 0.15s ease;
}
@keyframes profileSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.profile-dropdown-item {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.45rem 0.65rem; border: none; border-radius: 6px;
    background: none; color: rgba(199,210,254,0.8); font-size: 0.8rem;
    cursor: pointer; text-decoration: none; transition: background 0.12s;
}
.profile-dropdown-item:hover { background: rgba(255,255,255,0.08); color: var(--accent-text); }
.profile-dropdown-item.active { background: rgba(99,102,241,0.2); color: #c7d2fe; }
.profile-dropdown-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; }
.profile-dropdown-logout:hover { background: rgba(239,68,68,0.15); color: #fca5a5; }

.profile-dropdown-langform { padding: 6px 8px 4px; }
.profile-dropdown-langlabel {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: rgba(199,210,254,0.6); margin-bottom: 6px;
}
.profile-dropdown-langflags { display: flex; gap: 6px; }
.profile-dropdown-langflag {
    appearance: none; background: transparent; border: 1px solid transparent;
    border-radius: 999px; cursor: pointer; padding: 3px;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease;
    opacity: 0.55;
}
.profile-dropdown-langflag:hover { opacity: 1; transform: scale(1.06); background: rgba(255,255,255,0.06); }
.profile-dropdown-langflag.is-active {
    opacity: 1;
    border-color: rgba(165,180,252,0.7);
    background: rgba(99,102,241,0.18);
}
.profile-dropdown-langflag-img {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

html:not([data-mode="dark"]) .profile-dropdown-langlabel { color: var(--ae-text-muted); }
html:not([data-mode="dark"]) .profile-dropdown-langflag:hover { background: var(--ae-hover); }
html:not([data-mode="dark"]) .profile-dropdown-langflag.is-active {
    border-color: var(--accent); background: rgba(var(--accent-rgb),0.1);
}

.admin-sidebar.collapsed .profile-trigger-name,
.admin-sidebar.collapsed .profile-trigger-role,
.admin-sidebar.collapsed .profile-trigger-arrow { display: none; }
.admin-sidebar.collapsed .profile-dropdown { left: 100%; bottom: 0; width: 200px; margin-left: 6px; }

/* ---- Main Content ---- */
.admin-main {
    flex: 1;
    min-width: 0; /* allow flex child to shrink so inner grids measure real content width */
    margin-left: var(--sidebar-width);
    transition: margin-left 0.2s ease;
    background: var(--ae-bg);
    min-height: 100vh;
}

.admin-sidebar.collapsed ~ .admin-main {
    margin-left: 64px;
}

.admin-topbar {
    height: var(--topbar-height);
    background: color-mix(in srgb, var(--ae-surface) 85%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--ae-border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 900;
}

.admin-content {
    padding: 1.5rem;
    min-width: 0;
}

/* ---- Dashboard Cards ---- */
.dashboard-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.dashboard-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* ---- Tables ---- */
.table th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ae-text-muted);   /* was a hardcoded slate #64748b — the one grey-blue on every warm page */
    border-bottom-width: 2px;
}

.table td {
    vertical-align: middle;
}

/* ---- Status Badges (theme-driven via --ae-pill-* tokens) ---- */
.badge-status {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--ae-r-pill);
    font-weight: 600;
}

.badge-visible  { background: var(--ae-pill-ok-bg);     color: var(--ae-pill-ok-fg); }
.badge-hidden   { background: var(--ae-pill-warn-bg);   color: var(--ae-pill-warn-fg); }
.badge-disabled { background: var(--ae-pill-danger-bg); color: var(--ae-pill-danger-fg); }
/* .badge-draft is defined once, below, on the warn pill tokens (a second, hardcoded slate copy used to sit here and lose the cascade). */

.badge-active                { background: var(--ae-pill-ok-bg);     color: var(--ae-pill-ok-fg); }
.badge-pending_first_payment { background: var(--ae-pill-info-bg);   color: var(--ae-pill-info-fg); }
.badge-past_due              { background: var(--ae-pill-danger-bg); color: var(--ae-pill-danger-fg); }
.badge-canceled              { background: var(--ae-pill-muted-bg);  color: var(--ae-pill-muted-fg); }
.badge-expired               { background: var(--ae-pill-warn-bg);   color: var(--ae-pill-warn-fg); }

.badge-paid     { background: var(--ae-pill-ok-bg);     color: var(--ae-pill-ok-fg); }
.badge-pending  { background: var(--ae-pill-info-bg);   color: var(--ae-pill-info-fg); }
.badge-failed   { background: var(--ae-pill-danger-bg); color: var(--ae-pill-danger-fg); }
.badge-refunded { background: var(--ae-pill-muted-bg);  color: var(--ae-pill-muted-fg); }

/* Enrollment programs (draft → publish lifecycle) + roster registration states */
.badge-draft      { background: var(--ae-pill-warn-bg);  color: var(--ae-pill-warn-fg); }
.badge-open       { background: var(--ae-pill-ok-bg);    color: var(--ae-pill-ok-fg); }
.badge-closed     { background: var(--ae-pill-info-bg);  color: var(--ae-pill-info-fg); }
.badge-waitlisted { background: var(--ae-pill-warn-bg);  color: var(--ae-pill-warn-fg); }
.badge-dropped    { background: var(--ae-pill-muted-bg); color: var(--ae-pill-muted-fg); }

/* ---- Deleted rows ---- */
tr.ae-row-deleted td {
    opacity: 0.5;
}
tr.ae-row-deleted {
    background-color: #fffbeb !important;
}

/* ---- Show-deleted toggle ---- */
.show-deleted-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #64748b;
    cursor: pointer;
    user-select: none;
}
.show-deleted-toggle input[type="checkbox"] {
    width: 2rem;
    height: 1.1rem;
    cursor: pointer;
}

/* ---- Studio Selector (topbar) ---- */
.studio-selector {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Studio picker (custom dropdown replacing the native <select>) ────────── */
.studio-picker { position: relative; }

.studio-picker-trigger {
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 220px; max-width: 320px;
    padding: 6px 10px 6px 6px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    font-size: 0.88rem; font-weight: 500; color: #1e293b;
    cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.studio-picker-trigger:hover { border-color: #cbd5e1; background: #fff; }
.studio-picker-trigger.open {
    border-color: var(--accent, var(--accent));
    background: #fff;
    box-shadow: 0 0 0 3px var(--accent-shadow, rgba(99,102,241,0.15));
}
.studio-picker-avatar {
    width: 28px; height: 28px; border-radius: 7px;
    background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.95rem; flex-shrink: 0;
}
.studio-picker-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: left;
}
.studio-picker-caret {
    font-size: 0.7rem; color: #94a3b8;
    transition: transform 0.18s ease;
}
.studio-picker-trigger.open .studio-picker-caret { transform: rotate(180deg); }

.studio-picker-menu {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 260px; max-width: 360px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 12px 28px -8px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.06);
    padding: 6px; z-index: 200;
    animation: studioPickerIn 0.14s ease;
}
@keyframes studioPickerIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.studio-picker-search {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; margin-bottom: 4px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    color: #94a3b8;
}
.studio-picker-search input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 0.85rem; color: #1e293b;
}

.studio-picker-list { max-height: 320px; overflow-y: auto; }
.studio-picker-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 10px; border: none; border-radius: 8px;
    background: none; color: #334155; font-size: 0.87rem; font-weight: 500;
    text-align: left; cursor: pointer; transition: background 0.12s;
}
.studio-picker-item:hover { background: #f1f5f9; color: #0f172a; }
.studio-picker-item.active { background: var(--accent-light); color: var(--accent-text); }
.studio-picker-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-picker-item-check { font-size: 1rem; color: var(--accent-text); }
.studio-picker-add { border-top: 1px solid var(--ae-border, #e2e8f0); text-decoration: none; color: var(--ae-text-muted, #64748b); }
.studio-picker-add i { font-size: 1rem; }
/* Group header: a tinted band with icon + count, and a rule above every group but the first,
   so the line between studios / clinics / construction reads at a glance. */
.studio-picker-group {
    --grp: var(--ae-primary, #4f46e5);
    display: flex; align-items: center; gap: 8px;
    margin: 10px 0 4px; padding: 7px 10px; border-radius: 8px;
    background: color-mix(in srgb, var(--grp) 10%, transparent);
    color: var(--grp); font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    position: relative;
}
.studio-picker-group:not(:first-child)::before {
    content: ""; position: absolute; left: 0; right: 0; top: -6px;
    border-top: 1px solid var(--ae-border, #e2e8f0);
}
.studio-picker-group:first-child { margin-top: 0; }
.studio-picker-group-health { --grp: var(--ae-info, #0284c7); }
.studio-picker-group-construction { --grp: var(--ae-warning, #d97706); }
.studio-picker-group-ico {
    width: 22px; height: 22px; border-radius: 6px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--grp); color: #fff; font-size: 0.75rem;
}
.studio-picker-group-name { flex: 1; min-width: 0; text-align: left; }
button.studio-picker-group { width: 100%; border: none; cursor: pointer; font-family: inherit; }
button.studio-picker-group:hover { background: color-mix(in srgb, var(--grp) 16%, transparent); }
.studio-picker-group-chev { font-size: 0.7rem; transition: transform 0.15s; }
.studio-picker-group.is-collapsed .studio-picker-group-chev { transform: rotate(-90deg); }
.studio-picker-group-count {
    min-width: 22px; padding: 0 7px; border-radius: 999px; text-align: center;
    background: color-mix(in srgb, var(--grp) 18%, transparent); font-size: 0.75rem;
}
.studio-picker-empty { padding: 12px 10px; font-size: 0.82rem; color: #94a3b8; text-align: center; }

/* Dark theme tweaks */
[data-theme="dark"] .studio-picker-trigger { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: #e2e8f0; }
[data-theme="dark"] .studio-picker-trigger:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); }
[data-theme="dark"] .studio-picker-menu { background: #1e1e2e; border-color: rgba(255,255,255,0.1); box-shadow: 0 12px 28px rgba(0,0,0,0.5); }
[data-theme="dark"] .studio-picker-search { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .studio-picker-search input { color: #e2e8f0; }
[data-theme="dark"] .studio-picker-item { color: rgba(226,232,240,0.85); }
[data-theme="dark"] .studio-picker-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
[data-theme="dark"] .studio-picker-item.active { background: rgba(99,102,241,0.2); color: #c7d2fe; }

/* ────────────────────────────────────────────────────────────────────────
   Onboarding Tasks Badge (topbar widget) — surfaces pending setup steps.
   ──────────────────────────────────────────────────────────────────────── */
.onboarding-tasks { position: relative; }

.onboarding-tasks-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--accent-light) 0%, #f5f3ff 100%);
    border: 1px solid #c7d2fe; border-radius: 10px;
    color: var(--accent-text); font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.onboarding-tasks-trigger:hover {
    border-color: var(--accent); background: var(--accent-light);
    box-shadow: 0 1px 4px rgba(var(--accent-rgb),0.18);
}
.onboarding-tasks-trigger.open {
    background: var(--accent); border-color: var(--accent-text); color: #fff;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}
.onboarding-tasks-trigger i { font-size: 0.95rem; }
.onboarding-tasks-label { line-height: 1; }
.onboarding-tasks-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: var(--accent); color: #fff; border-radius: 10px;
    font-size: 0.75rem; font-weight: 700;
}
.onboarding-tasks-trigger.open .onboarding-tasks-count { background: #fff; color: var(--accent-text); }

.onboarding-tasks-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 400px; max-width: 90vw;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    box-shadow: 0 16px 36px -10px rgba(15,23,42,0.24), 0 2px 8px rgba(15,23,42,0.06);
    z-index: 240;
    animation: studioPickerIn 0.14s ease;
    overflow: hidden;
}

.onboarding-tasks-header {
    padding: 14px 16px 12px;
    background: linear-gradient(135deg, var(--accent-light) 0%, #fef3f2 100%);
    border-bottom: 1px solid var(--accent-light);
}
.onboarding-tasks-title { font-size: 0.95rem; font-weight: 700; color: #0f172a; }
.onboarding-tasks-subtitle { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.onboarding-tasks-progress {
    height: 6px; background: rgba(255,255,255,0.7); border-radius: 999px;
    margin-top: 10px; overflow: hidden;
}
.onboarding-tasks-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #8b5cf6 100%);
    border-radius: 999px; transition: width 0.3s;
}

.onboarding-tasks-list { padding: 6px; max-height: 320px; overflow-y: auto; }
.onboarding-tasks-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 10px 12px; border-radius: 10px;
    min-height: 62px;
    box-sizing: border-box;
    color: #1e293b; text-decoration: none; text-align: left;
    background: transparent; border: 0; cursor: pointer;
    transition: background 0.12s, transform 0.1s;
}
.onboarding-tasks-item:hover { background: #f1f5f9; color: #0f172a; transform: translateX(2px); }
.onboarding-tasks-item-icon {
    flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--accent-light); color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
}
.onboarding-tasks-item-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.onboarding-tasks-item-title { font-size: 0.87rem; font-weight: 600; line-height: 1.2; }
.onboarding-tasks-item-desc { font-size: 0.75rem; color: #64748b; line-height: 1.3; }
.onboarding-tasks-item-arrow { color: #94a3b8; font-size: 0.85rem; flex-shrink: 0; }

.onboarding-tasks-done {
    padding: 8px 6px 10px; border-top: 1px solid var(--accent-light);
    background: #fafafb;
}
.onboarding-tasks-done-header {
    padding: 2px 12px 6px;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
    color: #94a3b8; text-transform: uppercase;
}
.onboarding-tasks-done-item {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px;
    font-size: 0.82rem; color: #64748b;
}
.onboarding-tasks-done-item i { color: #10b981; font-size: 0.95rem; }

/* Dark theme */
[data-theme="dark"] .onboarding-tasks-trigger { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.35); color: #c7d2fe; }
[data-theme="dark"] .onboarding-tasks-trigger:hover { background: rgba(99,102,241,0.25); border-color: rgba(99,102,241,0.55); }
[data-theme="dark"] .onboarding-tasks-trigger.open { background: var(--accent); color: #fff; }
[data-theme="dark"] .onboarding-tasks-menu { background: #1e1e2e; border-color: rgba(255,255,255,0.1); box-shadow: 0 16px 36px rgba(0,0,0,0.5); }
[data-theme="dark"] .onboarding-tasks-header { background: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(139,92,246,0.15) 100%); border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .onboarding-tasks-title { color: #fff; }
[data-theme="dark"] .onboarding-tasks-subtitle { color: rgba(226,232,240,0.7); }
[data-theme="dark"] .onboarding-tasks-item { color: rgba(226,232,240,0.92); }
[data-theme="dark"] .onboarding-tasks-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
[data-theme="dark"] .onboarding-tasks-item-icon { background: rgba(99,102,241,0.18); color: #c7d2fe; }
[data-theme="dark"] .onboarding-tasks-item-desc { color: rgba(226,232,240,0.55); }
[data-theme="dark"] .onboarding-tasks-done { background: rgba(255,255,255,0.02); border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .onboarding-tasks-done-item { color: rgba(226,232,240,0.6); }

.studio-select {
    width: auto;
    min-width: 180px;
    max-width: 280px;
    font-size: 0.85rem;
    border-color: #e2e8f0;
    border-radius: 6px;
    padding: 4px 28px 4px 8px;
    background-color: #f8fafc;
    cursor: pointer;
}
.studio-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-shadow);
}
.studio-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

/* ---- Studio Links (topbar: website + client area) ---- */
.studio-links {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.studio-link-btn {
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 6px;
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #475569;
    line-height: 1.2;
    white-space: nowrap;
}
.studio-link-btn:hover,
.studio-link-btn:focus {
    background: var(--accent-light);
    border-color: #c7d2fe;
    color: var(--accent-text);
}
/* ── Scroll boxes that used to be inline styles ───────────────────────────────
   These five classes replaced inline max-height/padding on their elements so the
   mobile layer could relax them. The mobile rules below OVERRIDE these — without a
   desktop definition here the caps would simply vanish above 768px, which is how a
   long agreement or webhook payload ends up pushing its own Save button off screen. */
.admin-content .agreement-body { max-height: 46vh; overflow-y: auto; }
.admin-content .la-req-list    { max-height: 240px; overflow-y: auto; }
.admin-content .la-drill-cell  { padding: 14px 18px 18px 40px; }
.admin-content .wh-pre         { max-height: 40vh; }
.admin-content .wh-pre-tall    { max-height: 60vh; }

@media (max-width: 768px) {
    .studio-link-label { display: none; }
    .studio-link-btn { padding: 4px 8px; }
    .studio-link-btn .bi { margin-right: 0 !important; }
}

/* ---- Gallery block admin editor ---- */
.gallery-draft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.gallery-draft-item {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}
.gallery-draft-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-draft-actions {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    justify-content: space-between;
    padding: 6px;
    background: linear-gradient(to top, rgba(15,23,42,0.7), transparent);
    opacity: 0;
    transition: opacity .15s ease;
}
.gallery-draft-item:hover .gallery-draft-actions {
    opacity: 1;
}
.gallery-draft-actions .btn {
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.2;
}

/* ---- HTML Editor (Quill 2.x wrapper) ---- */
.html-editor-wrapper {
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.html-editor-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08);
}
/* Quill applies its own borders — remove them so our wrapper owns the rounded look. */
.html-editor-wrapper .ql-toolbar.ql-snow,
.html-editor-wrapper .ql-container.ql-snow {
    border: none;
}
.html-editor-wrapper .ql-toolbar.ql-snow {
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    padding: 6px 8px;
}
.html-editor-wrapper .ql-container.ql-snow {
    font-family: inherit;
    font-size: 14px;
}
.html-editor-wrapper .ql-editor {
    min-height: inherit;
    padding: 12px 16px;
    line-height: 1.6;
}
.html-editor-wrapper .ql-editor.ql-blank::before {
    color: #94a3b8;
    font-style: normal;
}

/* ---- Image Upload Widget ---- */
.image-upload-widget {
    display: inline-block;
}

/* ── Drop-zone (empty state) ── */
.image-upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 140px;
    padding: 24px 16px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.image-upload-dropzone:hover,
.image-upload-dropzone.is-dragover {
    border-color: var(--accent);
    background: var(--accent-light);
    box-shadow: 0 0 0 4px rgba(99,102,241,.08);
}
.image-upload-dropzone.is-uploading {
    pointer-events: none;
    opacity: .7;
}
.image-upload-dropzone-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.image-upload-dropzone-text {
    font-size: 13px;
    color: #475569;
}
.image-upload-dropzone-text strong {
    color: var(--accent);
}
.image-upload-dropzone-hint {
    font-size: 11px;
    color: #94a3b8;
}

/* ── Preview card (has image) ── */
.image-upload-preview {
    position: relative;
    display: inline-block;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    transition: border-color .2s;
}
.image-upload-preview:hover {
    border-color: #cbd5e1;
}
.image-upload-preview img {
    display: block;
    width: 140px;
    height: 140px;
    object-fit: cover;
}
.image-upload-preview-actions {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .2s;
}
.image-upload-preview:hover .image-upload-preview-actions {
    opacity: 1;
}
.image-upload-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(4px);
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    transition: background .15s, color .15s;
}
.image-upload-action-btn:hover {
    background: #fff;
    color: #1e293b;
}
.image-upload-action-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* ── Entity-edit "Picture" column standard ──
   Shared by ServiceEdit / PackageEdit / EventEdit. Put the picture label + its
   <ImageUpload> inside a Bootstrap column and add `pic-col`. The picture then sits
   to the right of the description (label on its own line above) and stretches to
   match the description's height — Bootstrap columns are equal-height, so the
   widget flexes to fill and the image covers it. */
.pic-col { display: flex; flex-direction: column; }
.pic-col .form-label { display: block; }
.pic-col .image-upload-widget { display: flex; flex-direction: column; flex: 1; width: 100%; }
.pic-col .image-upload-preview { display: block; width: 100%; flex: 1; min-height: 200px; }
.pic-col .image-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.pic-col .image-upload-dropzone { flex: 1; }
@media (max-width: 767.98px) {
    .pic-col .image-upload-preview { min-height: 0; }
    .pic-col .image-upload-preview img { height: 220px; }
}

/* Compact variant for entities without a description (categories, users, locations):
   just puts the label on its own line above a modestly-sized square preview instead
   of the label sitting inline beside the uploader. */
.pic-col-compact .form-label { display: block; }
.pic-col-compact .image-upload-widget { display: block; width: 100%; max-width: 220px; }
.pic-col-compact .image-upload-preview { display: block; width: 100%; }
.pic-col-compact .image-upload-preview img { width: 100%; height: 200px; object-fit: cover; }

/* ── Image editor (wwwroot/js/image-editor.js) — crop / rotate / flip / trim / resize.
   Built by JS and appended to <body>, so it is never clipped by a parent modal. ── */
body.imged-open { overflow: hidden; }
.imged-root { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; }
.imged-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); }
.imged-dialog {
    position: relative; width: min(760px, 100%); max-height: calc(100vh - 32px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--ae-surface, #fff); border-radius: 16px;
    box-shadow: 0 24px 48px -12px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.06);
    animation: imged-in .2s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes imged-in { from { opacity: 0; transform: scale(.95) translateY(8px); } to { opacity: 1; transform: none; } }
.imged-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ae-border, #e2e8f0); }
.imged-title { font-weight: 700; font-size: 15px; color: var(--ae-text, #0f172a); }
.imged-x {
    width: 32px; height: 32px; border: 0; border-radius: 8px; cursor: pointer; background: transparent;
    color: var(--ae-text-muted, #64748b); display: inline-flex; align-items: center; justify-content: center;
}
.imged-x:hover { background: var(--ae-bg, #f1f5f9); color: var(--ae-text, #0f172a); }
.imged-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.imged-stage {
    position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
    min-height: 200px; padding: 12px; border-radius: 12px; border: 1px solid var(--ae-border, #e2e8f0);
    background-color: #f8fafc;
    background-image: linear-gradient(45deg, #e2e8f0 25%, transparent 25%), linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #e2e8f0 75%), linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.imged-wrap { position: relative; touch-action: none; user-select: none; }
.imged-canvas { display: block; }
.imged-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ae-primary, #4f46e5); }
.imged-box {
    position: absolute; cursor: move; border: 1.5px solid #fff;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .5), 0 0 0 1px rgba(15, 23, 42, .35);
}
.imged-grid {
    position: absolute; inset: 0; pointer-events: none; opacity: .55;
    background-image: linear-gradient(to right, transparent 33.1%, #fff 33.3%, transparent 33.6%, transparent 66.4%, #fff 66.6%, transparent 66.9%),
                      linear-gradient(to bottom, transparent 33.1%, #fff 33.3%, transparent 33.6%, transparent 66.4%, #fff 66.6%, transparent 66.9%);
}
.imged-h { position: absolute; width: 14px; height: 14px; background: #fff; border: 1.5px solid var(--ae-primary, #4f46e5); border-radius: 3px; }
.imged-h-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.imged-h-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.imged-h-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.imged-h-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.imged-h-n { left: calc(50% - 7px); top: -7px; cursor: ns-resize; }
.imged-h-s { left: calc(50% - 7px); bottom: -7px; cursor: ns-resize; }
.imged-h-e { right: -7px; top: calc(50% - 7px); cursor: ew-resize; }
.imged-h-w { left: -7px; top: calc(50% - 7px); cursor: ew-resize; }
@media (pointer: coarse) { .imged-h { width: 22px; height: 22px; } .imged-h-nw, .imged-h-sw, .imged-h-w { left: -11px; } .imged-h-ne, .imged-h-se, .imged-h-e { right: -11px; } .imged-h-nw, .imged-h-ne, .imged-h-n { top: -11px; } .imged-h-sw, .imged-h-se, .imged-h-s { bottom: -11px; } }
.imged-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; }
.imged-lbl { font-size: 12px; font-weight: 600; color: var(--ae-text-muted, #64748b); }
.imged-sizectl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.imged-chips, .imged-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.imged-chip, .imged-tool {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--ae-text, #0f172a);
    background: var(--ae-surface, #fff); border: 1.5px solid var(--ae-border, #e2e8f0); border-radius: 8px;
}
.imged-chip:hover, .imged-tool:hover { border-color: var(--ae-text-muted, #94a3b8); }
.imged-chip.is-on { border-color: var(--ae-primary, #4f46e5); color: var(--ae-primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.imged-size { width: auto; min-width: 160px; }
.imged-dims { font-size: 12px; color: var(--ae-text-muted, #64748b); font-variant-numeric: tabular-nums; }
.imged-err { display: none; font-size: 13px; color: var(--ae-danger, #dc2626); }
.imged-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ae-border, #e2e8f0); }
.imged-spacer { flex: 1; }
.imged-orig { padding-left: 0; text-decoration: none; }
@media (max-width: 575px) {
    .imged-row { grid-template-columns: 1fr; gap: 6px; }
    .imged-tool span { display: none; }
}

/* ── Intraoral camera (wwwroot/js/intraoral-camera.js) — live preview + stills for a patient set.
   Full screen and dark like a camera app: the picture is what matters. Built by JS, appended to
   the admin wrapper so the --ae-* tokens apply. ── */
body.ioc-open { overflow: hidden; }
.ioc-root {
    position: fixed; inset: 0; z-index: 10060; display: flex; flex-direction: column;
    background: #0b1120; color: #e2e8f0; font-family: var(--ae-font, inherit); color-scheme: dark;
}
.ioc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.ioc-titlewrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ioc-badge {
    width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--ae-primary, #4f46e5) 28%, transparent); color: #fff;
}
.ioc-titles { min-width: 0; }
.ioc-title { font-weight: 700; font-size: 15px; color: #fff; }
.ioc-sub { font-size: 12.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ioc-tools { display: flex; align-items: center; gap: 8px; }
.ioc-root .form-select.ioc-device { width: auto; max-width: 260px; background-color: #1e293b; color: #e2e8f0; border-color: #334155; }
.ioc-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 31px; padding: 0 10px; cursor: pointer; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; color: #e2e8f0; background: #1e293b; border: 1.5px solid #334155; border-radius: 8px;
}
.ioc-chip:hover { border-color: #64748b; }
.ioc-chip.is-on { border-color: var(--ae-primary, #4f46e5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ae-primary, #4f46e5) 35%, transparent); }
.ioc-x {
    width: 34px; height: 34px; border: 0; border-radius: 8px; cursor: pointer; background: transparent; color: #cbd5e1;
    display: inline-flex; align-items: center; justify-content: center;
}
.ioc-x:hover { background: #1e293b; color: #fff; }
.ioc-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #000; }
.ioc-video { width: 100%; height: 100%; object-fit: contain; }
.ioc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.ioc-flash.is-on { animation: ioc-flash .28s ease-out; }
@keyframes ioc-flash { from { opacity: .75; } to { opacity: 0; } }
.ioc-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #cbd5e1; }
.ioc-msg {
    position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px; text-align: center; background: #0b1120;
}
.ioc-msg-text { max-width: 420px; font-size: 15px; color: #e2e8f0; }
.ioc-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 16px; }
.ioc-tooth { display: flex; align-items: center; gap: 8px; margin: 0; }
.ioc-tooth-lbl { font-size: 12.5px; font-weight: 600; color: #94a3b8; }
.ioc-root .ioc-tooth .form-select { width: auto; min-width: 110px; background-color: #1e293b; color: #e2e8f0; border-color: #334155; }
.ioc-shutter {
    width: 68px; height: 68px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 4px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ioc-shutter-dot { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .1s ease; }
.ioc-shutter:active .ioc-shutter-dot { transform: scale(.88); }
.ioc-shutter:disabled { opacity: .35; cursor: default; }
.ioc-shutter:focus-visible { outline: 3px solid var(--ae-primary, #4f46e5); outline-offset: 3px; }
.ioc-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ioc-strip { display: none; gap: 10px; padding: 0 16px 14px; overflow-x: auto; }
.ioc-thumb { position: relative; flex: 0 0 auto; width: 132px; border-radius: 8px; overflow: hidden; background: #1e293b; border: 1.5px solid #334155; }
.ioc-thumb.is-new { border-color: var(--ae-primary, #4f46e5); }
.ioc-thumb img { display: block; width: 100%; height: 84px; object-fit: cover; }
.ioc-thumb-tooth {
    display: block; width: 100%; border: 0; border-top: 1px solid #334155; padding: 4px 6px;
    font-size: 12px; background: #1e293b; color: #e2e8f0;
}
.ioc-thumb-cap {
    display: block; width: 100%; border: 0; border-top: 1px solid #334155; padding: 4px 6px;
    font-size: 12px; background: #0f172a; color: #e2e8f0;
}
.ioc-thumb-cap::placeholder { color: #64748b; }
.ioc-thumb-rm {
    position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .75); color: #fff;
}
.ioc-thumb-rm:hover { background: var(--ae-danger, #dc2626); }
.ioc-err { display: none; padding: 0 16px 12px; font-size: 13px; color: #fca5a5; text-align: right; }
.ioc-confirm {
    position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); display: none; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 12px; background: #1e293b; border: 1px solid #334155; box-shadow: 0 12px 32px rgba(0,0,0,.45);
    white-space: nowrap;
}
.ioc-confirm-text { font-size: 14px; color: #fff; margin-right: 4px; }
@media (max-width: 575px) {
    .ioc-head { flex-wrap: wrap; }
    .ioc-tools { width: 100%; }
    .ioc-root .form-select.ioc-device { flex: 1; max-width: none; }
    .ioc-bar { grid-template-columns: 1fr auto; }
    .ioc-tooth { grid-column: 1 / -1; }
    .ioc-shutter { justify-self: start; }
    .ioc-confirm { white-space: normal; width: calc(100% - 32px); flex-wrap: wrap; }
}

/* ── Table row thumbnail ── */
.table-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.table-thumb-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1.5px solid #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- DataTable Grouping (drag-and-drop) ---- */

/* Drop zone — slides in when dragging, stays when grouped */
.dt-group-dropzone {
    margin-bottom: 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    animation: dt-dropzone-in 0.15s ease-out;
    overflow: hidden;
}
@keyframes dt-dropzone-in {
    from { opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
    to   { opacity: 1; max-height: 60px; margin-bottom: 0.5rem; }
}

/* Drag-active state (column being dragged, before hover) */
.dt-group-dropzone.is-dragging {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.03);
}
.dt-group-dropzone-inner {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 500;
}
.dt-group-dropzone-inner i { font-size: 0.9rem; }
.dt-group-dropzone.is-dragging .dt-group-dropzone-inner {
    color: var(--accent);
}

/* Drag-over state (hovering on the zone) */
.dt-group-dropzone.drag-over {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.07);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}
.dt-group-dropzone.drag-over .dt-group-dropzone-inner {
    color: var(--accent-text);
    font-weight: 600;
}

/* Has active group */
.dt-group-dropzone.has-group {
    border-style: solid;
    border-color: #e2e8f0;
    background: #fff;
    padding: 0.35rem 0.65rem;
    animation: none;
}

/* Chip area */
.dt-group-chip-area {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.dt-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-light) 100%);
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--accent-text);
    font-weight: 500;
    white-space: nowrap;
}
.dt-group-chip strong { font-weight: 700; }
.dt-group-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-text);
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    margin-left: 1px;
    transition: background 0.15s;
}
.dt-group-chip-remove:hover { background: rgba(var(--accent-rgb), 0.25); }

/* Expand/Collapse buttons */
.dt-group-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
}
.dt-group-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
}
.dt-group-btn i { font-size: 0.7rem; }

/* Draggable column headers */
th.dt-draggable-th {
    cursor: grab;
    user-select: none;
}
th.dt-draggable-th:active {
    cursor: grabbing;
    opacity: 0.5;
}
.dt-drag-hint {
    font-size: 0.75rem;
    opacity: 0.3;
    margin-left: 2px;
    vertical-align: middle;
}
th.dt-draggable-th:hover .dt-drag-hint { opacity: 0.65; }

/* Sortable column headers */
th.dt-sortable-th {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease;
}
th.dt-sortable-th:hover {
    background-color: rgba(var(--accent-rgb), 0.06);
}
th.dt-sortable-th.dt-sorted {
    color: var(--accent);
}
.dt-sort-indicator {
    font-size: 0.75rem;
    margin-left: 4px;
    color: var(--accent);
    font-weight: bold;
}

/* ── DataTable column customizer (column mode: hide/show, reorder, resize) ── */
.dt-colpicker-anchor { position: relative; }
.dt-colpicker-btn { white-space: nowrap; }
.dt-colpicker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1049;
}
.dt-colpicker-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    width: 280px;
    background: var(--ae-surface, #fff);
    border: 1px solid var(--ae-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}
.dt-colpicker-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--ae-border, #e2e8f0);
    font-size: 0.85rem;
    display: flex;
    align-items: baseline;
}
.dt-colpicker-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 6px 0;
}
.dt-colpicker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: grab;
    user-select: none;
}
.dt-colpicker-item:hover { background: rgba(var(--accent-rgb), 0.05); }
.dt-colpicker-item.dragging { opacity: 0.4; }
.dt-colpicker-item.drag-over { box-shadow: inset 0 2px 0 var(--accent); }
.dt-colpicker-item .form-check-input { cursor: pointer; flex-shrink: 0; }
.dt-colpicker-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dt-colpicker-foot {
    padding: 8px 14px;
    border-top: 1px solid var(--ae-border, #e2e8f0);
    font-size: 0.8rem;
}

/* Header drag-reorder + hover hide action (column mode with a PersistKey) */
th.dt-reorder-th:not(.dt-sortable-th) { cursor: grab; }
th.dt-reorder-th { user-select: none; }
th.dt-th-dragging { opacity: 0.4; }
th.dt-th-drag-over { box-shadow: inset 3px 0 0 var(--accent); }

/* ── DataTable: filter panel, filter chips, summary view, saved views ── */
.dt-btn-text { margin-left: 5px; }
.dt-btn-on { border-color: var(--ae-primary); color: var(--ae-primary); }
.dt-btn-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
    margin-left: 5px; padding: 0 5px; border-radius: 9px; background: var(--ae-primary); color: #fff;
    font-size: .7rem; font-weight: 700;
}
.dt-filter-panel { width: 320px; }
.dt-filter-list { max-height: 60vh; padding: 8px 14px; }
.dt-filter-field { padding: 8px 0; border-bottom: 1px solid var(--ae-border); }
.dt-filter-field:last-child { border-bottom: none; }
.dt-filter-loading { font-size: .8rem; color: var(--ae-text-muted); padding: 4px 0 8px; }
.dt-filter-choices { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.dt-filter-choice { display: flex; align-items: center; gap: 8px; font-size: .84rem; padding: 3px 2px; margin: 0; cursor: pointer; border-radius: 6px; }
.dt-filter-choice:hover { background: rgba(var(--accent-rgb), 0.05); }
.dt-filter-choice-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-filter-count { color: var(--ae-text-muted); font-size: .75rem; }
.dt-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.dt-views-panel { width: 300px; }
.dt-views-section { padding: 8px 14px 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ae-text-muted); }
.dt-views-empty { padding: 10px 14px; font-size: .84rem; color: var(--ae-text-muted); }
.dt-views-item { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 6px; }
.dt-views-item.is-active .dt-views-apply { color: var(--ae-primary); font-weight: 600; }
.dt-views-apply {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; justify-content: space-between;
    background: none; border: none; padding: 6px 8px; border-radius: 6px; text-align: left; font-size: .85rem; color: var(--ae-text);
}
.dt-views-apply span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-views-apply:hover { background: rgba(var(--accent-rgb), 0.06); }
.dt-views-del { background: none; border: none; color: var(--ae-text-muted); padding: 4px 6px; border-radius: 6px; }
.dt-views-del:hover { color: var(--ae-danger); background: #fef2f2; }
.dt-summary { border: 1px solid var(--ae-border); border-radius: var(--ae-r); padding: 14px; margin-bottom: .75rem; background: var(--ae-surface); }
.dt-summary-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 18px; align-items: start; }
@media (max-width: 992px) { .dt-summary-grid { grid-template-columns: minmax(0, 1fr); } }
.dt-summary-table { font-size: .85rem; margin-bottom: 0; }
.dt-summary-table td, .dt-summary-table th { white-space: nowrap; }
.dt-summary-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: baseline; }
.dt-chart-svg { width: 100%; height: auto; display: block; }
.dt-chart-label { font-size: 12px; fill: var(--ae-text-muted); }
.dt-chart-value { font-size: 12px; font-weight: 600; fill: var(--ae-text); }
.dt-pie-wrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.dt-pie-svg { max-width: 220px; }
.dt-pie-legend { list-style: none; margin: 0; padding: 0; font-size: .8rem; color: var(--ae-text); }
.dt-pie-legend li { margin-bottom: 3px; white-space: nowrap; }
@media (max-width: 768px) { .dt-btn-text { display: none; } }

/* Quick filters (filter panel top): the owner's words, one tap each */
.dt-quick-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-quick-btn {
    border: 1.5px solid var(--ae-border); background: var(--ae-surface); color: var(--ae-text);
    border-radius: 999px; padding: 3px 10px; font-size: .8rem; line-height: 1.4; cursor: pointer;
}
.dt-quick-btn:hover { border-color: var(--ae-primary); }
.dt-quick-btn.is-on { border-color: var(--ae-primary); background: var(--ae-primary); color: #fff; }

/* Docked filter panel (FilterPanelMode="Docked"): beside the table, sticky, collapsible */
.dt-dock-row { display: flex; gap: 16px; align-items: flex-start; }
.dt-dock-main { flex: 1 1 auto; min-width: 0; }
.dt-dock {
    flex: 0 0 280px; width: 280px; position: sticky; top: calc(var(--topbar-height, 56px) + 12px);
    max-height: calc(100vh - var(--topbar-height, 56px) - 24px); overflow-y: auto;
    border: 1px solid var(--ae-border); border-radius: var(--ae-r); background: var(--ae-surface);
}
.dt-dock-head {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: .88rem;
    border-bottom: 1px solid var(--ae-border); position: sticky; top: 0; background: var(--ae-surface); z-index: 2;
}
.dt-dock-body { padding: 2px 14px 10px; }
.dt-dock-collapse {
    border: none; background: none; color: var(--ae-text-muted); width: 28px; height: 28px; border-radius: 6px;
    align-items: center; justify-content: center;
}
.dt-dock-collapse:hover { background: var(--ae-bg); color: var(--ae-text); }
@media (min-width: 768px) { .dt-dock.is-collapsed { display: none; } }
@media (max-width: 767.98px) {
    .dt-dock-row { display: block; }
    .dt-dock { display: none; }
    .dt-dock.is-sheet-open {
        display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto;
        max-height: 80vh; z-index: 1060; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .3);
    }
    .dt-dock-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 1055; }
}
/* Absolutely positioned so the (invisible-until-hover) button never adds to the header's
   inline flow — in-flow it wrapped some headers to a second line and staggered the labels. */
.dt-th-hide {
    position: absolute;
    top: 1px;
    right: 8px;
    border: 0;
    background: transparent;
    padding: 0 2px;
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.12s ease, color 0.12s ease;
}
th.dt-col-th:hover .dt-th-hide { opacity: 0.55; }
th.dt-col-th .dt-th-hide:hover { opacity: 1; color: var(--accent); }

/* Column resize handles (column mode with a PersistKey) */
th.dt-col-th { position: relative; vertical-align: middle; }
.dt-resize-handle {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
}
.dt-resize-handle:hover,
body.dt-resizing .dt-resize-handle {
    background: linear-gradient(to right, transparent 3px, rgba(var(--accent-rgb), 0.35) 3px, rgba(var(--accent-rgb), 0.35) 5px, transparent 5px);
}
body.dt-resizing { cursor: col-resize; user-select: none; }
/* Once the user has sized columns, honour the stored widths exactly. */
table.dt-fixed { table-layout: fixed; width: 100%; }
table.dt-fixed td { overflow-wrap: break-word; }

/* Trend charts (Chart.js, maintainAspectRatio:false) take their height from this box — a bare
   <canvas height="80"> left the plot about 15px tall once the axis labels and legend were drawn. */
.ae-chart-box { position: relative; height: 260px; }
.ae-chart-box.is-empty { height: auto; }
@media (max-width: 600px) { .ae-chart-box { height: 200px; } }

/* Group header rows — a quiet band in the theme's colours (was a hardcoded purple gradient
   that ignored the studio theme and dark mode). */
.dt-group-header-row { cursor: pointer; }
.dt-group-header-row > td {
    padding: 0.5rem 1rem !important;
    background: var(--ae-bg) !important;
    color: var(--ae-text) !important;
    font-weight: 600;
    font-size: 0.8rem;
    border-top: 1px solid var(--ae-border) !important;
    border-bottom: 1px solid var(--ae-border) !important;
    box-shadow: none !important;
}
.dt-group-header-row:hover > td { background: color-mix(in srgb, var(--ae-primary) 7%, var(--ae-bg)) !important; }
.dt-group-toggle {
    display: inline-block;
    width: 16px;
    margin-right: 0.4rem;
    font-size: 0.75rem;
    text-align: center;
    color: var(--ae-text-muted);
}
.dt-group-name {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dt-group-count {
    margin-left: 0.4rem;
    color: var(--ae-text-muted);
    font-weight: 500;
    font-size: 0.75rem;
}

/* ---- Instructor Payment Report ---- */
.ipr-teacher-card { overflow: hidden; }
.ipr-teacher-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
}
.ipr-teacher-header:hover { background: #f1f5f9; }
.ipr-total-badge {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-light);
    padding: 0.15rem 0.6rem;
    border-radius: 6px;
}
.ipr-section-header {
    padding: 0.45rem 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    background: #fafbfc;
    border-bottom: 1px solid #f1f5f9;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.ipr-section-header i { font-size: 0.8rem; color: var(--accent); }
.ipr-table th {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.75rem !important;
}
.ipr-table td { padding: 0.45rem 0.75rem !important; font-size: 0.825rem; }
.ipr-row { transition: background 0.1s; }
.ipr-row:hover { background: #fafbff !important; }
.ipr-expand-btn {
    padding: 0; width: 22px; height: 22px;
    border-radius: 4px; font-size: 0.75rem;
    color: #64748b; border: 1px solid #e2e8f0;
    display: inline-flex; align-items: center; justify-content: center;
}
.ipr-expand-btn:hover { background: #f1f5f9; }
.ipr-bonus-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    margin-left: 0.25rem;
}
.ipr-detail-row td { padding: 0 !important; background: #f8fafc; }
.ipr-detail-list { padding: 0.4rem 0.75rem 0.4rem 2.5rem; }
.ipr-detail-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0;
    font-size: 0.78rem;
    color: #475569;
}
.ipr-detail-item.filtered { opacity: 0.5; text-decoration: line-through; }
.ipr-detail-item i { font-size: 0.75rem; color: #94a3b8; }
.ipr-summary {
    padding: 0.6rem 1rem;
    border-top: 2px solid #e2e8f0;
    background: #fafbfc;
}
.ipr-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    font-size: 0.82rem;
    color: #475569;
}
.ipr-summary-row.bonus { color: #059669; font-weight: 500; }
.ipr-summary-row.total {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1e1b4b;
    border-top: 1px solid #e2e8f0;
    margin-top: 0.25rem;
    padding-top: 0.4rem;
}
.ipr-print-btn {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    border-color: #cbd5e1;
    color: #64748b;
}
.ipr-print-btn:hover { color: #1e293b; border-color: #94a3b8; }
.ipr-grand-total {
    border: 2px solid var(--accent);
    border-radius: 10px;
}

/* ---- Notification Templates Filter Panel ---- */
.notif-filter-panel {
    width: 210px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: calc(var(--topbar-height) + 1.5rem);
}
.notif-filter-section {
    padding: 0.35rem;
}
.notif-filter-section + .notif-filter-section {
    border-top: 1px solid #f1f5f9;
}
.notif-filter-label {
    padding: 0.5rem 0.65rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}
.notif-filter-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.78rem;
    color: #334155;
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: left;
}
.notif-filter-item:hover { background: #f1f5f9; }
.notif-filter-item.active {
    background: var(--notif-active-bg, var(--accent-light));
    color: var(--notif-active-color, var(--accent-text));
    font-weight: 600;
}
.notif-filter-item i { font-size: 0.85rem; flex-shrink: 0; width: 1rem; text-align: center; }
.notif-filter-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-filter-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 0.08rem 0.35rem;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.notif-filter-item.active .notif-filter-count {
    background: rgba(0,0,0,0.06);
    color: inherit;
}

/* Channel card headers */
.notif-channel-card { overflow: hidden; }
.notif-channel-header {
    padding: 0.55rem 1rem;
    background: #fafbfc;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.notif-channel-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.78rem;
}

/* Template rows */
.notif-template-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.1s;
}
.notif-template-row:hover { background: #fafbff; }
.notif-template-row:last-child { border-bottom: none; }
.notif-template-main { flex: 1; min-width: 0; }
.notif-template-key {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}
.notif-template-key code {
    font-size: 0.8rem;
    color: var(--accent-text);
    font-weight: 600;
}
.notif-entity-badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.notif-entity-appointment { background: #dbeafe; color: #1e40af; }
.notif-entity-package { background: #fef3c7; color: #92400e; }
.notif-entity-customer { background: #dcfce7; color: #166534; }
.notif-template-meta {
    display: flex;
    gap: 0.6rem;
    font-size: 0.75rem;
    color: #94a3b8;
    flex-wrap: wrap;
}
.notif-template-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
}
.notif-template-meta i { font-size: 0.7rem; }
.notif-template-subject {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-template-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* ---- Category Side Panel ---- */
.cat-panel {
    width: 220px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: calc(var(--topbar-height) + 1.5rem);
}
.cat-panel-header {
    padding: 0.7rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.cat-panel-header i { font-size: 0.85rem; color: var(--accent); }
.cat-panel-list {
    max-height: 520px;
    overflow-y: auto;
    padding: 0.35rem;
}
.cat-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #334155;
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: left;
}
/* Make children of category drop targets transparent to pointer events so dragenter/leave
   only fire on the button itself — otherwise the cursor crossing a child span re-fires
   both events and the highlight flickers during a drag. */
.cat-item > * { pointer-events: none; }
.cat-item:hover {
    background: #f1f5f9;
}
.cat-item.active {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-light) 100%);
    color: var(--accent-text);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(var(--accent-rgb),0.08);
}
.cat-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cat-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-item-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.cat-item.active .cat-item-count {
    background: rgba(var(--accent-rgb),0.12);
    color: var(--accent-text);
}

/* ---- Jobs Dashboard ---- */
.job-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.1rem 1rem 0.9rem 1.25rem;
    transition: border-color 0.15s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* fixed height so every card is identical */
    height: 260px;
}
.job-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 4px; height: 100%;
    border-radius: 12px 0 0 12px;
}
.job-idle::before  { background: #22c55e; }
.job-running::before { background: #3b82f6; }
.job-error::before  { background: #ef4444; }
.job-disabled::before { background: #cbd5e1; }
.job-running { border-color: #93c5fd; }
.job-error   { border-color: #fca5a5; }
.job-disabled { opacity: 0.65; }

.job-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.job-status-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.job-idle    .job-status-dot { background: #22c55e; }
.job-running .job-status-dot { background: #3b82f6; animation: job-pulse 1.2s infinite; }
.job-error   .job-status-dot { background: #ef4444; }
.job-disabled .job-status-dot { background: #cbd5e1; }
@keyframes job-pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

.job-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    /* truncate long names */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.job-card-desc {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.65rem;
    line-height: 1.35;
}
.job-card-stats {
    display: flex;
    gap: 0;
    margin-bottom: 0.65rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
}
.job-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.75rem;
    flex: 1;
    border-right: 1px solid #f1f5f9;
}
.job-stat:last-child { border-right: none; }
.job-stat-label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.job-stat-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

/* timing rows fill remaining vertical space, pushing footer down */
.job-card-timing {
    flex: 1;
    margin-bottom: 0.35rem;
}
.job-timing-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #64748b;
    padding: 0.15rem 0;
}
.job-timing-row i { font-size: 0.75rem; width: 1rem; text-align: center; color: #94a3b8; }

.job-error-banner {
    font-size: 0.7rem;
    color: #dc2626;
    background: #fef2f2;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    display: flex;
    gap: 0.3rem;
    align-items: flex-start;
    border: 1px solid #fecaca;
}
.job-error-banner i { flex-shrink: 0; margin-top: 1px; }

.job-card-footer {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    gap: 0.5rem;
}
/* Both footer buttons fill equally */
.job-card-footer .btn {
    flex: 1;
    justify-content: center;
    font-size: 0.78rem;
    padding: 0.3rem 0.5rem;
}

/* ---- Job Execution History ---- */

.job-history-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #f8fafc;
    padding: 0.6rem 0.75rem;
    white-space: nowrap;
    border-bottom: 2px solid #e2e8f0;
}

.job-history-table td {
    padding: 0.55rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.job-history-table tr:last-child td {
    border-bottom: none;
}

.job-history-table tr:hover td {
    background: #fafbff;
}

.job-history-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
}

.table-danger-subtle td {
    background: rgba(220, 38, 38, 0.03);
}

/* ---- Settings Page ---- */

/* Overview cards */
.settings-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}
.settings-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.08);
    transform: translateY(-1px);
}
.settings-card.disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}
.settings-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #1e293b;
    flex-shrink: 0;
}
.settings-card-body { flex: 1; min-width: 0; }
.settings-card-title {
    font-size: 0.85rem;
    font-weight: 650;
    color: #0f172a;
    line-height: 1.2;
}
.settings-card-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.3;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.settings-card-fields {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.settings-card-arrow {
    font-size: 0.75rem;
    color: #cbd5e1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.settings-card:hover .settings-card-arrow { color: var(--accent); }

/* Category headings above each row of overview cards */
.settings-category-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin: 1.25rem 0 0.5rem;
    padding-left: 0.15rem;
}
.settings-category-label:first-of-type {
    margin-top: 0;
}

/* Settings form table */
.settings-form-table { width: 100%; border-collapse: collapse; }
.settings-form-table tr { border-bottom: 1px solid #f1f5f9; transition: opacity 0.2s; }
.settings-form-table tr:last-child { border-bottom: none; }
.settings-form-table th {
    width: 280px; padding: 14px 16px 14px 0; vertical-align: top;
    text-align: left; font-weight: 600; font-size: 0.85rem; color: #374151;
}
.settings-form-table td { padding: 12px 0; vertical-align: top; }
.settings-field-desc { font-size: 0.76rem; color: #64748b; margin-top: 4px; font-style: italic; }
.hidden-row { display: none !important; }

/* Stack label-above-field on mobile so the input column isn't squeezed by the 280px label.
   Affects all settings-form-table usages, including the User Journey notification modal. */
@media (max-width: 768px) {
    .settings-form-table,
    .settings-form-table tbody,
    .settings-form-table tr,
    .settings-form-table th,
    .settings-form-table td { display: block; width: 100%; }
    .settings-form-table tr { padding: 12px 0; }
    .settings-form-table th {
        width: 100%; padding: 0 0 6px;
        font-size: 0.82rem;
    }
    .settings-form-table td { padding: 0; }
    .settings-input { max-width: 100%; }
}

/* Toggle switch */
.ae-toggle-wrap { position: relative; display: inline-block; width: 44px; height: 24px; }
.ae-toggle-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }
.ae-toggle-slider {
    position: absolute; inset: 0; background: #cbd5e1; border-radius: 24px;
    cursor: pointer; transition: background 0.25s;
}
.ae-toggle-slider::before {
    content: ""; position: absolute; width: 18px; height: 18px;
    left: 3px; top: 3px; background: #fff; border-radius: 50%;
    transition: transform 0.25s;
}
.ae-toggle-wrap input:checked + .ae-toggle-slider { background: var(--accent); }
.ae-toggle-wrap input:checked + .ae-toggle-slider::before { transform: translateX(20px); }

/* Form inputs */
.settings-input {
    border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 7px 11px;
    font-size: 0.85rem; color: #0f172a; width: 100%; max-width: 360px;
    outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.settings-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.1); }
.settings-select {
    border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 7px 30px 7px 11px;
    font-size: 0.85rem; color: #0f172a; min-width: 180px; max-width: 360px;
    outline: none; appearance: none; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 12px, #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.settings-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.1); }
.settings-radio-group label {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 6px; font-size: 0.85rem; color: #374151; cursor: pointer;
}
.settings-radio-group input[type="radio"] { accent-color: var(--accent); width: 15px; height: 15px; }
.settings-number-input { width: 120px; }

/* Segmented control (card-style toggle group with per-option helper text) */
.settings-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 640px;
}
@media (max-width: 600px) {
    .settings-segmented { grid-template-columns: 1fr; }
}
.settings-segmented-option {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0; border-radius: 10px;
    background: #fff;
    font-size: 0.85rem; font-weight: 600; color: #374151;
    text-align: left; cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.settings-segmented-option:hover {
    border-color: #c7d2fe;
    background: #f8fafc;
}
.settings-segmented-option.is-selected {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
}
.settings-segmented-option-label { flex: 1; line-height: 1.3; }
.settings-segmented-option-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); color: #fff; flex-shrink: 0;
}
.settings-segmented-desc {
    margin-top: 12px; padding: 12px 14px; max-width: 640px;
    background: #f8fafc; border-left: 3px solid var(--accent); border-radius: 6px;
    font-size: 0.82rem; line-height: 1.55; color: #475569;
}

/* Save footer */
.settings-save-footer {
    margin-top: 20px; padding-top: 14px; border-top: 1px solid #e2e8f0;
    display: flex; align-items: center; gap: 12px;
}

/* Toast */
.settings-toast {
    position: fixed; bottom: 30px; right: 30px; z-index: 99999;
    display: flex; align-items: flex-start; gap: 10px;
    color: #fff; padding: 12px 16px; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.2); max-width: 360px; min-width: 200px;
    font-size: 13px; line-height: 1.4; opacity: 0; transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.settings-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.settings-toast.success { background: #059669; }
.settings-toast.error   { background: #dc2626; }
.settings-toast.info    { background: #0284c7; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    /* Phones must never scroll the PAGE sideways: any element that escapes the viewport
       (an unwrapped table, a wide chip row) would otherwise widen the document and leave
       a dead band beside the content. Wide content still scrolls INSIDE .table-responsive. */
    html, body { overflow-x: hidden; }
    .admin-main { max-width: 100vw; }

    .admin-sidebar {
        transform: translateX(-100%);
        width: 260px;
        z-index: 1100;
    }
    .admin-sidebar.mobile-open {
        transform: translateX(0);
    }
    .admin-sidebar.collapsed {
        transform: translateX(-100%);
    }
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 1050;
    }
    .sidebar-backdrop.show {
        display: block;
    }
    .admin-main {
        margin-left: 0 !important;
    }
    .admin-content {
        padding: 16px 10px;
    }
    .admin-topbar {
        padding: 8px 10px;
    }
    .studio-select {
        min-width: 100px;
        max-width: 160px;
        font-size: 0.78rem;
    }
    .studio-badge {
        font-size: 0.78rem;
    }

    /* Tables */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table th, .table td { font-size: 0.8rem; padding: 6px 8px; }

    /* Cards */
    .card-body { padding: 12px; }

    /* Modals */
    .modal-dialog { margin: 8px; }
    .modal-dialog.modal-lg { max-width: calc(100vw - 16px); }
    .modal-dialog.modal-sm { max-width: calc(100vw - 16px); }

    /* Page headers */
    h4.fw-bold { font-size: 1.15rem; }

    /* Button groups */
    .btn-group-sm .btn { font-size: 0.75rem; padding: 4px 8px; }

    /* Subscription detail cards */
    .row.g-3 > .col-md-6 { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 480px) {
    .admin-content { padding: 10px 6px; }

    /* Stack action bars */
    .d-flex.gap-2 { flex-wrap: wrap; }
    .d-flex.align-items-end { flex-wrap: wrap; }

    /* Day picker grid */
    .day-picker-grid { grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .day-picker-cell { font-size: 0.78rem; }

    /* Permission checkbox matrix */
    .perm-group { flex-direction: column; align-items: flex-start; gap: 4px; }
    .perm-group-name { width: auto; }
    .perm-group-actions { gap: 10px; }
}

/* ==========================================================
   Challenge Workflow Canvas
   ========================================================== */
#workflow-container {
    position: relative;
    /* A fixed viewport so the CANVAS scrolls (and grab-pans), not the page. */
    height: calc(100vh - 250px);
    min-height: 560px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 40px;
    overflow: auto;
    cursor: grab;
    width: 100%;
}
#workflow-container.wf-panning { cursor: grabbing; user-select: none; }
#workflow-nodes { position: relative !important; min-height: 600px; z-index: 2 !important; }
#workflow-connections { z-index: 1 !important; }

.wf-node {
    position: absolute !important;
    background: #fff;
    border: 3px solid #6f2a81;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    cursor: grab;
    transition: box-shadow .3s ease, border-color .3s ease;
    z-index: 10;
    user-select: none;
}
.wf-node:active { cursor: grabbing; }
.wf-node:hover { box-shadow: 0 6px 20px rgba(111,42,129,.4); border-color: #88308f; z-index: 20; }
.wf-node.wf-dragging { cursor: grabbing !important; z-index: 100 !important; box-shadow: 0 8px 24px rgba(111,42,129,.5); transform: scale(1.05); }
/* Card color = customer visibility: green public (all customers), gray staff-assigned only. */
.wf-node.wf-vis-public { border-color: #28a745; background: linear-gradient(135deg, #f0fff4, #e8f5e9); }
.wf-node.wf-vis-private { border-color: #9ca3af; background: linear-gradient(135deg, #fafafa, #f1f5f9); }
.wf-node.wf-hidden { display: none !important; }

.wf-legend-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: 5px; vertical-align: baseline;
}

.wf-node-title {
    font-weight: 700; font-size: 15px; color: #4e2a57;
    margin-bottom: 10px; line-height: 1.4;
    border-bottom: 2px solid #e9ecef; padding-bottom: 8px;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.wf-node-title-text { flex: 1; }
.wf-node-toggle {
    background: #f1ecf5; border: 1px solid #cfc3d8; border-radius: 6px;
    color: #4e2a57; font-size: 11px; padding: 3px 8px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    transition: background .2s ease, border-color .2s ease;
}
.wf-node-toggle .wf-toggle-icon { font-weight: 700; font-size: 12px; line-height: 1; }
.wf-node-toggle.expanded { background: #e4d4ec; border-color: #a884bc; }
.wf-node-toggle:focus { outline: none; box-shadow: 0 0 0 2px rgba(111,42,129,.25); }

.wf-node-info { font-size: 11px; color: #666; line-height: 1.6; }
.wf-badge {
    display: inline-flex; align-items: center; font-size: 10px; padding: 3px 8px;
    border-radius: 4px; margin-top: 4px; margin-right: 6px; font-weight: 600;
    max-width: 100%;
}

/* The actual badge preview (emoji or uploaded image) inside the workflow-node chip. */
.wf-badge-vis {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; overflow: hidden;
    margin-right: 5px; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, .15);
}
.wf-badge-vis img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wf-conn { stroke-width: 3; fill: none; opacity: .9; pointer-events: stroke; }
.wf-conn:hover { opacity: 1; stroke-width: 4; }

.wf-view-toggle.active { background: #6f2a81 !important; color: #fff !important; border-color: #6f2a81 !important; }

/* ---- Dashboard tabs (switch between saved dashboards) ---- */
.dash-tabs { margin: 0 0 1rem; }
.dash-tabs-head {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .55rem;
}
.dash-tabs-title { font-size: 1.05rem; font-weight: 700; color: var(--ae-text); }
.dash-tabs-hint { font-size: .8rem; color: var(--ae-text-muted); }
.dash-tabs-row { display: flex; align-items: center; gap: .5rem; }
.dash-tabs-list {
    display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; flex: 0 1 auto;
    background: var(--ae-chip);
    border-radius: var(--ae-r-pill); padding: 3px;
}
.dash-tab {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    border: none; background: transparent; color: var(--ae-text-muted);
    font-size: .85rem; font-weight: 600; padding: .4rem 1rem; border-radius: var(--ae-r-pill);
    cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.dash-tab:hover { color: var(--ae-text); }
.dash-tab.is-active {
    background: var(--ae-surface); color: var(--ae-text); font-weight: 700;
    box-shadow: 0 1px 2px rgba(20, 18, 14, .08);
}
.dash-tab-star { font-size: .6rem; color: var(--ae-warning); }
.dash-tab-add { color: var(--ae-primary); }
.dash-tab-add:hover { background: var(--ae-surface); }
.dash-tab-manage-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--ae-r);
    border: 1px solid var(--ae-border); background: var(--ae-surface);
    color: var(--ae-text-muted); cursor: pointer; transition: color .15s, border-color .15s;
}
.dash-tab-manage-btn:hover { color: var(--ae-text); border-color: var(--ae-text-muted); }
/* Customize (show/hide dashlets) sits on the tab row: same chrome as the ⋮ button, with a
   label. The panel it opens anchors to .dash-tabs-customize (position: relative via
   .customize-wrapper); on phones the panel is the bottom sheet defined in the mobile block. */
.dash-tabs-customize { flex: 0 0 auto; }

/* ---- Related reports shortcut on list pages (RelatedReports.razor) ---- */
.rr-wrap { position: relative; }
.rr-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rr-backdrop { position: fixed; inset: 0; z-index: 1049; }
.rr-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 1050; list-style: none; margin: 0;
    min-width: 260px; padding: 6px; background: var(--ae-surface); border: 1px solid var(--ae-border);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}
.rr-item { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 9px 10px; color: var(--ae-text); text-decoration: none; font-size: .88rem; }
.rr-item:hover { background: var(--ae-chip); color: var(--ae-text); }
.rr-item > i:first-child { width: 18px; text-align: center; color: var(--ae-primary); }
.rr-item > span { flex: 1 1 auto; }
.rr-ext { font-size: .7rem; color: var(--ae-text-muted); }
@media (max-width: 575.98px) {
    .rr-btn .rr-label { display: none; }
    .rr-btn { width: 38px; justify-content: center; padding: 0; height: 38px; }
}
@media (max-width: 768px) {
    /* same bottom sheet the row menus use on phones */
    .rr-backdrop { background: rgba(15, 23, 42, .25); }
    .rr-menu { position: fixed; left: 10px; right: 10px; top: auto; bottom: 10px; min-width: 0; border-radius: 14px; z-index: 2000; }
    .rr-item { padding: 13px 14px; font-size: .95rem; }
}

/* ---- DataTable phone cards (MobileCard template) ----
   Desktop never sees .dt-mcards; on phones the designed cards replace the table. */
.dt-mcards { display: none; }
@media (max-width: 768px) {
    .admin-content .dt-has-mcards { display: none !important; }
    .dt-mcards { display: flex; flex-direction: column; gap: 10px; min-height: 120px; margin-bottom: .75rem; }
    .dt-toolbar-mcards .dt-colpicker-anchor:not(.dt-keep-mobile) { display: none; }
    .dt-keep-mobile .dt-colpicker-panel { position: fixed; top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; max-height: 80vh; }

    /* Designed list card, shared by every page that supplies a MobileCard: avatar or initials,
       a title line, an optional muted sub line, an actions slot on the right (row menu or a
       couple of icon buttons), chips ONLY for facts that change what the owner does next, and
       one muted meta line. Pages add nothing but content. */
    .mc {
        border: 1px solid var(--ae-border); border-radius: var(--ae-r-card); background: var(--ae-surface);
        box-shadow: var(--ae-shadow); padding: 12px 12px 10px; -webkit-tap-highlight-color: transparent;
    }
    .mc.is-deleted { opacity: .6; }
    .mc.is-alert { border-color: color-mix(in srgb, var(--ae-danger) 45%, var(--ae-border)); }
    .mc-top { display: flex; align-items: center; gap: 10px; }
    .mc-avatar { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--ae-border); }
    .mc-initials {
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--ae-accent-soft, #eef2ff); color: var(--ae-primary); font-weight: 700; font-size: .85rem;
    }
    .mc-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
    .mc-name { font-weight: 700; font-size: 1rem; color: var(--ae-text); text-decoration: none; overflow-wrap: anywhere; }
    a.mc-name:hover { color: var(--ae-primary); }
    .mc-sub { font-size: .8rem; color: var(--ae-text-muted); text-decoration: none; overflow-wrap: anywhere; }
    .mc-actions { display: flex; gap: 6px; flex: 0 0 auto; }
    .mc-menu, .mc-icon-btn {
        width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px;
        border: 1px solid var(--ae-border); background: var(--ae-surface); color: var(--ae-text-muted);
        display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
    }
    .mc-icon-btn.is-primary { color: var(--ae-primary); }
    .mc-icon-btn.is-danger { color: var(--ae-danger); }
    .mc-icon-btn.is-success { color: var(--ae-success); }
    .mc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
    .mc-chip {
        display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
        border-radius: 12px; font-size: 0.75rem; font-weight: 600; background: var(--ae-chip); color: var(--ae-text);
    }
    .mc-chip i { font-size: .8rem; }
    .mc-chip.is-ok { background: var(--ae-pill-ok-bg, #ecfdf5); color: var(--ae-success); }
    .mc-chip.is-warn { background: var(--ae-pill-warn-bg, #fffbeb); color: var(--ae-warning); }
    .mc-chip.is-bad { background: var(--ae-pill-danger-bg, #fef2f2); color: var(--ae-danger); }
    .mc-chip.is-info { background: #eff6ff; color: var(--ae-info); }
    .mc-chip.is-muted { color: var(--ae-text-muted); }
    .mc-chips .badge { font-size: 0.75rem; height: 24px; display: inline-flex; align-items: center; border-radius: 12px; padding: 0 9px; }
    .mc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: .78rem; color: var(--ae-text-muted); }
    .mc-meta i { margin-right: 4px; }
    .mc-meta b { color: var(--ae-text); font-weight: 700; }
    .mc-meta s { opacity: .7; }

    /* Date/group band between cards (orders grouped by date, subscriptions by triage). */
    .mc-group {
        display: flex; align-items: center; gap: 8px; padding: 10px 2px 2px;
        font-size: 0.75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ae-text-muted);
    }
    .mc-group-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ae-chip); color: var(--ae-text); font-size: .7rem; display: inline-flex; align-items: center; justify-content: center; }
    .mc-group-sum { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--ae-text); text-transform: none; letter-spacing: 0; }

    /* Fold-away filters: a page keeps its Search visible and hides the rest of its filter
       controls (.mfilter-col) behind one Filters button that shows an active-count chip. */
    .mfilters { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .mfilter-btn {
        display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
        border-radius: var(--ae-r-pill); border: 1.5px solid var(--ae-border); background: var(--ae-surface);
        color: var(--ae-text); font-size: .85rem; font-weight: 600; flex: 1 1 auto; min-width: 0;
    }
    .mfilter-btn.is-open, .mfilter-btn.is-open .mfilter-chev { color: var(--ae-primary); border-color: var(--ae-primary); }
    .mfilter-btn.is-open .mfilter-chev { transform: rotate(180deg); }
    .mfilter-chev { margin-left: auto; font-size: .75rem; color: var(--ae-text-muted); transition: transform .15s; }
    .mfilter-count {
        min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
        background: var(--ae-primary); color: var(--ae-accent-ink, #fff); font-size: 0.75rem; font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .mfilters-host:not(.is-open) .mfilter-col { display: none !important; }

    /* ── Report pages ──
       Filter card: the quick-range picker comes FIRST (it applies immediately), the date /
       location / Update row folds behind ReportFilters' button. KPI tiles go two-up and
       compact, like the dashboard quick stats, instead of five full-width cards. */
    .rpt-filters:not(.is-open) .rpt-filters-body { display: none; }
    .admin-content .card-body:has(> .rpt-filters) { display: flex; flex-direction: column; }
    .admin-content .card-body:has(> .rpt-filters) > .date-presets { order: -1; margin: 0 0 10px; padding: 0; border: 0; }
    .admin-content .card-body:has(> .rpt-filters) > .rpt-filters { order: 0; }
    .admin-content .rpt-filters-body .form-label { margin-bottom: .25rem; font-size: .8rem; color: var(--ae-text-muted); }
    .admin-content .rpt-filters-body .btn { margin-top: 6px; }

    /* A KPI tile is a card whose body is a label (h6) over a figure (h2) — that pair is the key,
       so recommendation/insight cards that share the card classes keep their full width. */
    .admin-content .row:has(> [class*="col-md-"] > .card.border-0.shadow-sm > .card-body > h2) { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
    .admin-content .row > [class*="col-md-"]:has(> .card.border-0.shadow-sm > .card-body > h2) { flex: 0 0 50%; max-width: 50%; }
    .admin-content [class*="col-md-"] > .card.border-0.shadow-sm:has(> .card-body > h2) { height: 100%; }
    .admin-content [class*="col-md-"] > .card.border-0.shadow-sm > .card-body:has(> h2) { padding: .8rem .9rem; }
    .admin-content [class*="col-md-"] > .card.border-0.shadow-sm > .card-body:has(> h2) > h6 {
        font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem;
    }
    .admin-content [class*="col-md-"] > .card.border-0.shadow-sm > .card-body > h2 { font-size: 1.45rem; margin-bottom: 0; }
    .admin-content [class*="col-md-"] > .card.border-0.shadow-sm > .card-body:has(> h2) small { font-size: 0.75rem; }
    /* Report charts: the canvases carry a desktop height attribute (80 for a wide trend strip)
       and Chart.js keeps whatever height the container gives it — on a phone that was an
       80px squash. Give every report canvas a real height; the container follows it. */
    .admin-content .card-body > canvas { height: 220px !important; max-height: 220px; width: 100% !important; }
}
.dash-tab-tool-btn {
    display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .8rem;
    border-radius: var(--ae-r); border: 1px solid var(--ae-border); background: var(--ae-surface);
    color: var(--ae-text-muted); font-size: .82rem; font-weight: 600; white-space: nowrap;
    cursor: pointer; transition: color .15s, border-color .15s;
}
.dash-tab-tool-btn:hover { color: var(--ae-text); border-color: var(--ae-text-muted); }
@media (max-width: 575.98px) {
    .dash-tabs-hint { display: none; }
    .dash-tabs-list { flex-wrap: nowrap; overflow-x: auto; }
    /* icon-only beside the scrolling tabs; the tooltip still names it */
    .dash-tab-tool-btn { width: 34px; padding: 0; justify-content: center; }
    .dash-tab-tool-btn span { display: none; }
}

/* ---- Share dashboard modal (who can see this board) ---- */
.dash-share-overlay {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.dash-share-modal {
    width: 100%; max-width: 480px; background: var(--ae-surface);
    border-radius: 16px; box-shadow: 0 24px 48px -12px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.06);
    display: flex; flex-direction: column; max-height: 85vh;
    animation: dashShareIn .2s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes dashShareIn { from { opacity: 0; transform: scale(.95) translateY(8px); } to { opacity: 1; transform: none; } }
.dash-share-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: 20px 24px; border-bottom: 1px solid var(--ae-border); }
.dash-share-title { display: flex; align-items: center; gap: .75rem; }
.dash-share-badge { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: color-mix(in srgb, var(--ae-primary) 12%, transparent); color: var(--ae-primary); }
.dash-share-h { font-weight: 700; color: var(--ae-text); }
.dash-share-sub { font-size: .82rem; color: var(--ae-text-muted); }
.dash-share-close { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: var(--ae-text-muted); cursor: pointer; }
.dash-share-close:hover { background: var(--ae-chip); color: var(--ae-text); }
.dash-share-body { padding: 20px 24px; overflow-y: auto; }
.dash-share-desc { font-size: .85rem; color: var(--ae-text-muted); margin: 0 0 .75rem; }
.dash-share-row { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .25rem; cursor: pointer; font-size: .9rem; color: var(--ae-text); }
.dash-share-row input { margin-top: .15rem; }
.dash-share-open { border-bottom: 1px solid var(--ae-border); margin-bottom: .5rem; padding-bottom: .75rem; }
.dash-share-hint { font-size: .78rem; color: var(--ae-text-muted); }
.dash-share-list { display: flex; flex-direction: column; }
.dash-share-empty { font-size: .85rem; color: var(--ae-text-muted); padding: .5rem .25rem; }
/* Home "at a glance" picker: one row per permission profile, three tile slots */
.dash-glance-modal { max-width: 640px; }
.dash-glance-list { display: flex; flex-direction: column; }
.dash-glance-row { display: flex; flex-direction: column; gap: .4rem; padding: .7rem 0; border-top: 1px solid var(--ae-border); }
.dash-glance-row:first-child { border-top: none; padding-top: 0; }
.dash-glance-prof { display: flex; align-items: center; gap: .5rem; }
.dash-glance-name { font-weight: 600; font-size: .9rem; color: var(--ae-text); }
.dash-glance-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.dash-glance-none { font-size: .85rem; color: var(--ae-text-muted); }
@media (max-width: 560px) { .dash-glance-slots { grid-template-columns: 1fr; } }
.dash-share-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: 16px 24px; border-top: 1px solid var(--ae-border); }

/* ---- GridStack Dashboard ---- */
/* Hide until JS finishes init — avoids squashed/overlapping pre-GridStack paint */
#ae-dashboard-grid:not(.grid-stack--inited) {
    visibility: hidden;
    min-height: 360px;
}
#ae-dashboard-grid.grid-stack--inited {
    visibility: visible;
}
.grid-stack { min-height: 200px; min-width: 0; width: 100%; }
.grid-stack-item-content { overflow: auto; border-radius: var(--ae-r-card); }
/* Phone "flow" mode (dashboard-grid.js adds .grid-stack--flow below 768px instead of
   running GridStack): a plain vertical stack, each card exactly as tall as its content.
   Overrides gridstack.min.css's absolute positioning + percentage widths. */
.grid-stack.grid-stack--flow {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    height: auto !important;
}
.grid-stack.grid-stack--flow > .grid-stack-item {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    transition: none !important;
}
.grid-stack.grid-stack--flow > .grid-stack-item > .grid-stack-item-content {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}
.grid-stack.grid-stack--flow > .grid-stack-item > .ui-resizable-handle { display: none !important; }
.grid-stack-item-content > .card {
    height: 100%;
    border-radius: var(--ae-r-card);
    border: 1px solid var(--ae-border);
    box-shadow: var(--ae-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    overflow: hidden;
    position: relative;
}
.grid-stack-item:hover .grid-stack-item-content > .card {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(20,18,14,0.05), 0 16px 36px -12px rgba(20,18,14,0.16);
}

/* Accent top border — colour set per dashlet via data-accent. Kept soft: a thin
   bar that fades to transparent so the colour reads as a tint, not a hard rule. */
.grid-stack-item-content > .card::before {
    content: "";
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--dashlet-accent, var(--accent, var(--accent)));
    background: linear-gradient(90deg,
        var(--dashlet-accent, var(--accent, var(--accent))) 0%,
        color-mix(in srgb, var(--dashlet-accent, var(--accent, var(--accent))) 55%, transparent) 100%);
    opacity: 0.85;
    border-radius: var(--ae-r-card) var(--ae-r-card) 0 0;
}

.grid-stack-item-content > .card > .card-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem 1.1rem 1rem;
    position: relative; /* anchor for the inline "×" close button */
}

/* ---- Dashlet resize affordance ----
   GridStack ships grey arrow sprites for its resize handles — they float in the
   card corners and read as clutter. Replace with the conventional, unobtrusive
   diagonal grip dots in the bottom-right corner (like a textarea's resize grip):
   quiet, hover-revealed, no accent colour. */
.grid-stack > .grid-stack-item > .ui-resizable-handle {
    background-image: none !important;
}
.grid-stack > .grid-stack-item > .ui-resizable-se {
    width: 16px;
    height: 16px;
    right: 3px;
    bottom: 3px;
    transform: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: nwse-resize;
    z-index: 3;
}
/* Two short diagonal strokes = a grip corner. Faint grey; never coloured. */
.grid-stack > .grid-stack-item > .ui-resizable-se::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 9px;
    height: 9px;
    background:
        linear-gradient(135deg, transparent 46%, #cbd5e1 46%, #cbd5e1 58%, transparent 58%),
        linear-gradient(135deg, transparent 74%, #cbd5e1 74%, #cbd5e1 86%, transparent 86%);
}
.grid-stack-item:hover > .ui-resizable-se { opacity: 0.7; }
.grid-stack > .grid-stack-item > .ui-resizable-se:hover { opacity: 1; }
[data-theme="dark"] .grid-stack > .grid-stack-item > .ui-resizable-se::after {
    background:
        linear-gradient(135deg, transparent 46%, rgba(226,232,240,0.4) 46%, rgba(226,232,240,0.4) 58%, transparent 58%),
        linear-gradient(135deg, transparent 74%, rgba(226,232,240,0.4) 74%, rgba(226,232,240,0.4) 86%, transparent 86%);
}

/* Inline close ("×") — hides a dashlet from the dashboard without opening the
   Customize panel. Invisible until the user hovers the card to keep chrome quiet. */
.dashlet-close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
    z-index: 2;
}
.grid-stack-item:hover .dashlet-close-btn,
.dashlet-close-btn:focus-visible {
    opacity: 1;
}
.dashlet-close-btn:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
    transform: scale(1.06);
}
.dashlet-close-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.25);
}
[data-theme="dark"] .dashlet-close-btn { color: rgba(226,232,240,0.55); }
[data-theme="dark"] .dashlet-close-btn:hover {
    background: rgba(239,68,68,0.18);
    color: #fca5a5;
    border-color: rgba(239,68,68,0.35);
}
.grid-stack-item-content > .card > .card-body .dashlet-scroll { flex: 1; overflow-y: auto; min-height: 0; }

/* Dashlet header */
.dashlet-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    margin-bottom: 0.875rem;
    min-height: 28px;
}
.dashlet-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    background: var(--accent-light);
    color: var(--ae-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
}
.dashlet-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ae-text);
    letter-spacing: 0.01em;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}
.dashlet-controls { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }

/* Granularity segmented control (Day / Week / Month) — compact pill group that sits
   beside the date filter in a "per period" dashlet header. */
.dgt {
    display: inline-flex;
    align-items: stretch;
    background: var(--ae-chip);
    border: 1px solid var(--ae-border);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.dgt-btn {
    border: none;
    background: transparent;
    color: var(--ae-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.dgt-btn:hover { color: var(--dashlet-accent, var(--accent)); }
.dgt-btn.active {
    background: var(--ae-surface);
    color: var(--dashlet-accent, var(--accent));
    box-shadow: 0 1px 2px rgba(20,18,14,0.10);
}
.dgt-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dashlet-accent, var(--accent)) 30%, transparent);
}
[data-theme="dark"] .dgt { background: rgba(148,163,184,0.14); border-color: rgba(148,163,184,0.22); }
[data-theme="dark"] .dgt-btn { color: rgba(226,232,240,0.7); }
[data-theme="dark"] .dgt-btn.active { background: rgba(15,23,42,0.55); }

/* Drag handle */
.gs-drag-handle { cursor: grab; user-select: none; }
.gs-drag-handle:active { cursor: grabbing; }
.gs-drag-handle .bi-grip-vertical { opacity: 0.25; transition: opacity 0.15s; font-size: 0.9rem; }
.grid-stack-item:hover .gs-drag-handle .bi-grip-vertical { opacity: 0.55; }

/* Dashlet table styling */
.dashlet-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; }
.dashlet-table thead tr {
    border-bottom: 2px solid var(--ae-line-soft);
}
.dashlet-table thead th {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ae-soft);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--ae-surface);
    z-index: 1;
}
.dashlet-table tbody tr {
    border-bottom: 1px solid var(--ae-line-soft);
    transition: background 0.1s;
}
.dashlet-table tbody tr:hover { background: var(--ae-hover); }
.dashlet-table tbody tr:last-child { border-bottom: none; }
.dashlet-table td { padding: 0.35rem 0.5rem; color: var(--ae-text-subtle); }
/* Clickable dashlet rows — open the drill-down page showing who's behind the number */
.dashlet-drill-row { cursor: pointer; }
.dashlet-drill-row:hover {
    background: color-mix(in srgb, var(--dashlet-accent, var(--accent)) 7%, var(--ae-surface)) !important;
}
.dashlet-drill-row:hover td:first-child {
    color: var(--dashlet-accent, var(--accent));
    font-weight: 600;
}
/* Summary stat cards (e.g. Subscription Status) that open a pre-filtered list. */
.dashlet-stat-card { cursor: pointer; font: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.dashlet-stat-card:hover { transform: translateY(-1px); box-shadow: var(--ae-shadow); }
.dashlet-stat-card:focus-visible { outline: 2px solid var(--dashlet-accent, var(--accent)); outline-offset: 2px; }
/* Report numbers that open the people behind them (CLAUDE.md "Reports — every number can be clicked"):
   a KPI card, a bare number, or a table cell. */
.report-drill-card { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.report-drill-card:hover { transform: translateY(-1px); box-shadow: var(--ae-shadow); }
.report-drill-card:hover h2, .report-drill-number:hover { color: var(--accent); }
.report-drill-number { cursor: pointer; }
.report-drill-cell { cursor: pointer; }
.report-drill-cell:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.dashlet-table tfoot tr { border-top: 2px solid var(--ae-border); }
.dashlet-table tfoot td {
    padding: 0.35rem 0.5rem;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--ae-text);
}
.dashlet-value {
    font-weight: 700;
    font-size: 0.85rem;
}
.dashlet-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ---- Dashlet empty states ----
   Centered icon + title + hint instead of a lone muted sentence lost in the card.
   The icon tile picks up the dashlet's accent colour via --dashlet-accent. */
.dashlet-empty {
    height: 100%;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.35rem;
    padding: 1.25rem 1rem;
}
.dashlet-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 0.35rem;
    color: var(--dashlet-accent, var(--accent));
    background: color-mix(in srgb, var(--dashlet-accent, var(--accent)) 9%, var(--ae-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dashlet-accent, var(--accent)) 16%, transparent);
}
.dashlet-empty-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ae-text-subtle);
}
.dashlet-empty-hint {
    font-size: 0.75rem;
    color: var(--ae-soft);
    max-width: 240px;
    line-height: 1.45;
}
/* Compact variant for empty states inside half-width columns (Reviews & Scores). */
.dashlet-empty-sm { min-height: 90px; padding: 0.75rem 0.5rem; }
.dashlet-empty-sm .dashlet-empty-icon {
    width: 38px; height: 38px; border-radius: 12px; font-size: 1rem; margin-bottom: 0.15rem;
}
.dashlet-empty-sm .dashlet-empty-title { font-size: 0.78rem; }
/* Chart dashlets keep their canvas mounted (Chart.js needs it) — the empty state
   is a soft overlay that lets the faint axis grid show through underneath. */
.dashlet-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.35rem;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.96) 45%, rgba(255,255,255,0.65) 100%);
    border-radius: 12px;
    pointer-events: none;
}

/* ---- Quick-stat cards (top row) — soft, modern surfaces ----
   These cards come straight from Bootstrap (.card.border-0.shadow-sm) in
   Dashboard.razor. Soften them to match the dashlet treatment: larger radius,
   a gentle diffuse shadow, and a subtle lift on hover. Scoped to the quick-stats
   row so other admin tables/cards are untouched. */
.row.g-3 > [class*="col-"] > a > .card,
.row.g-3 > [class*="col-"] > .card {
    border-radius: var(--ae-r-card) !important;
    border: 1px solid var(--ae-border) !important;
    box-shadow: var(--ae-shadow) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.row.g-3 > [class*="col-"] > a:hover > .card,
.row.g-3 > [class*="col-"] > .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(20,18,14,0.05), 0 16px 34px -14px rgba(20,18,14,0.16) !important;
}
/* A transformed card becomes the containing block of its position:fixed children, so a
   modal rendered inside a lifted card (the Excel import wizard on Packages, Services,
   Expenses) was confined to the card and cut off. Never lift a card that holds a modal. */
.row.g-3 > [class*="col-"] > .card:has(.modal) { transform: none !important; }
/* Quick-stat uniform anatomy: neutral icon chip + uppercase label on one line,
   big number with a semantic delta pill beside it. Semantic color lives ONLY in
   the pill — the chip and label stay neutral so the row reads calm. */
.dqs-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dqs-chip {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: var(--ae-chip); color: var(--ae-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
}
.dqs-label {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ae-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dqs-value-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dqs-value {
    font-size: 1.65rem; font-weight: 800; line-height: 1;
    letter-spacing: -0.02em; color: var(--ae-text);
}
.dqs-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--ae-r-pill);
    font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.dqs-pill-ok     { background: var(--ae-pill-ok-bg);     color: var(--ae-pill-ok-fg); }
.dqs-pill-warn   { background: var(--ae-pill-warn-bg);   color: var(--ae-pill-warn-fg); }
.dqs-pill-danger { background: var(--ae-pill-danger-bg); color: var(--ae-pill-danger-fg); }
.dqs-pill-info   { background: var(--ae-pill-info-bg);   color: var(--ae-pill-info-fg); }
.dqs-pill-muted  { background: var(--ae-pill-muted-bg);  color: var(--ae-pill-muted-fg); }
/* Secondary breakdown under the headline (e.g. subscriptions due / canceling):
   one muted line with colored dots, so it never competes with the value pill. */
.dqs-sub {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
    margin-top: 8px; font-size: 0.75rem; font-weight: 600; color: var(--ae-text-muted);
}
.dqs-sub-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dqs-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dqs-dot-warn   { background: var(--ae-pill-warn-fg); }
.dqs-dot-danger { background: var(--ae-pill-danger-fg); }

/* ---- Dashboard mobile layout ----
   Below 768px dashboard-grid.js skips GridStack and stacks the dashlets in flow
   mode (.grid-stack--flow above), so every card is as tall as its content. The
   styles below tidy the chrome around that: header buttons, quick-stat tiles,
   dashlet headers that must wrap, fixed chart heights, and the Customize panel
   as a bottom sheet. Drag/resize stay desktop-only; show/hide still works. */
@media (max-width: 768px) {
    .dashboard-header-actions { width: 100%; }
    .dashboard-header-actions > .btn,
    .dashboard-header-actions > .customize-wrapper,
    .dashboard-header-actions > .dropdown { flex: 1 1 calc(50% - 0.5rem); min-width: 0; }
    .dashboard-header-actions .btn { width: 100%; }

    /* Quick stats: tighter card padding on mobile. */
    .row.g-3 > [class*="col-"] > a > .card .card-body,
    .row.g-3 > [class*="col-"] > .card .card-body { padding: 0.85rem 1rem; }

    .grid-stack-item-content > .card > .card-body { padding: 0.9rem 1rem; }
    /* Tables grow with their rows; only a very long list gets an inner scroller. */
    .grid-stack-item-content > .card > .card-body .dashlet-scroll {
        flex: 0 0 auto;
        max-height: 420px;
        overflow-y: auto;
    }

    /* Charts need an explicit height in flow mode — a flex:1 box inside an
       auto-height card would otherwise be 0px tall. */
    .grid-stack-item-content > .card > .card-body > div[style*="flex:1"],
    .grid-stack-item-content > .card > .card-body > div[style*="flex: 1"] {
        height: 220px !important;
        min-height: 220px !important;
        flex: 0 0 220px !important;
    }
    .dashlet-empty { min-height: 120px; }

    /* Dashlet header: the title keeps a readable width and the control cluster
       (view toggle, granularity, date filter) drops to its own line when it
       doesn't fit — no more titles broken mid-word beside the filters. */
    .dashlet-header { row-gap: 0.5rem; }
    .dashlet-title { flex: 1 1 150px; }
    .dashlet-controls { flex-wrap: wrap; row-gap: 0.4rem; max-width: 100%; }
    .dashlet-controls .form-select { flex: 1 1 auto; min-width: 0; }

    /* Drag/close affordances are noise without drag on mobile. */
    .gs-drag-handle { cursor: default; }
    .gs-drag-handle .bi-grip-vertical { display: none; }
    .dashlet-close-btn { display: none !important; }

    .dashlet-table { font-size: 0.78rem; }
    .dashlet-table th,
    .dashlet-table td { padding: 0.4rem 0.45rem; }

    /* Customize (show/hide dashlets) — bottom sheet instead of a 272px dropdown
       anchored to a button that may sit anywhere in the wrapped header. */
    .customize-wrapper .customize-panel {
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-height: 78vh;
        display: flex;
        flex-direction: column;
    }
    .customize-wrapper .customize-panel-body { flex: 1 1 auto; max-height: none; min-height: 0; }
    .customize-overlay { background: rgba(15,23,42,0.35); }
}

/* ---- Phone "owner's glance" treatment (≤767px) ----
   Desktop keeps the calm neutral quick-stat row. On a phone the row IS the dashboard, so it
   gets a hero tile for today's classes (studio accent gradient) and a colour-toned icon chip
   per metric so the tiles read at a glance. Tones use color-mix on a fixed hue so they hold
   up on every studio theme and in dark mode. */
@media (max-width: 767.98px) {
    .dash-greeting-email { display: none; }
    /* Header actions read as soft pills rather than four boxy outline buttons. */
    /* .admin-wrapper prefix: outranks the themed .admin-wrapper .btn / .btn-outline-* rules. */
    .admin-wrapper .dashboard-header-actions .btn {
        border-radius: 999px; font-weight: 600;
        background: var(--ae-surface); border-color: var(--ae-border); color: var(--ae-text-subtle);
        box-shadow: var(--ae-shadow);
    }
    .admin-wrapper .dashboard-header-actions .btn:active { transform: scale(.98); }

    /* Hero: today's classes */
    .row.g-3 > [class*="col-"] > a > .card.dqs-hero {
        position: relative; overflow: hidden;
        color: var(--ae-accent-ink);
        border-color: transparent !important;
        background: linear-gradient(135deg, var(--ae-primary) 0%, color-mix(in srgb, var(--ae-primary) 70%, #14110f) 100%);
        box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--ae-primary) 55%, transparent) !important;
    }
    .dqs-hero::before, .dqs-hero::after {
        content: ""; position: absolute; border-radius: 50%; pointer-events: none;
        background: color-mix(in srgb, var(--ae-accent-ink) 10%, transparent);
    }
    .dqs-hero::before { width: 150px; height: 150px; right: -40px; top: -60px; }
    .dqs-hero::after  { width: 90px;  height: 90px;  right: 54px;  bottom: -46px; }
    .dqs-hero .card-body { position: relative; z-index: 1; }
    .dqs-hero .dqs-label { color: inherit; opacity: .82; }
    .dqs-hero .dqs-value { color: inherit; font-size: 2.3rem; }
    .dqs-hero .dqs-chip  { background: color-mix(in srgb, var(--ae-accent-ink) 18%, transparent); color: inherit; }
    .dqs-hero .dqs-pill  { background: color-mix(in srgb, var(--ae-accent-ink) 20%, transparent); color: inherit; }

    /* Toned icon chips */
    .dqs-value { font-variant-numeric: tabular-nums; }
    .dqs-tone-customers .dqs-chip { background: color-mix(in srgb, #3b6fd6 14%, transparent); color: #3b6fd6; }
    .dqs-tone-pending   .dqs-chip { background: color-mix(in srgb, #d29a2e 16%, transparent); color: #b07a12; }
    .dqs-tone-subs      .dqs-chip { background: color-mix(in srgb, #2e9e6b 14%, transparent); color: #2e9e6b; }
    .dqs-tone-messages  .dqs-chip { background: color-mix(in srgb, #8a5cb0 14%, transparent); color: #8a5cb0; }
    .dqs-tone-waitlist  .dqs-chip { background: color-mix(in srgb, #1f9aa8 14%, transparent); color: #1f9aa8; }
    .dqs-tone-unpaid    .dqs-chip { background: color-mix(in srgb, #c2543f 14%, transparent); color: #c2543f; }
    .row.g-3 > [class*="col-"] > a:active > .card { transform: scale(.985); }
}

/* Phones: quick stats sit two-up as compact tiles (col-6 in Dashboard.razor). */
@media (max-width: 575.98px) {
    .dash-quick-stats { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
    .row.g-3 > [class*="col-"] > a > .card .card-body,
    .row.g-3 > [class*="col-"] > .card .card-body { padding: 0.7rem 0.8rem; }
    .dqs-head { gap: 6px; margin-bottom: 6px; }
    .dqs-chip { width: 24px; height: 24px; border-radius: 7px; font-size: 0.75rem; }
    .dqs-label {
        font-size: 0.6rem; letter-spacing: 0.04em; line-height: 1.15;
        white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .dqs-value-row { gap: 6px; }
    .dqs-value { font-size: 1.4rem; }
    .dqs-pill { font-size: 0.6rem; padding: 1px 6px; }
    .dqs-sub { font-size: 0.75rem; gap: 2px 8px; margin-top: 5px; }
    .dqs-hero .dqs-value { font-size: 2.2rem; }
    .dqs-hero .dqs-pill  { font-size: 0.75rem; padding: 2px 9px; }
    .dqs-hero .dqs-chip  { width: 28px; height: 28px; font-size: .85rem; }
    .dqs-hero .dqs-label { font-size: 0.75rem; }
    .row.g-3 > [class*="col-"] > a > .card.dqs-hero .card-body { padding: 0.95rem 1rem; }
}

@media (max-width: 480px) {
    .dashlet-title { font-size: 0.78rem; }
    .dashlet-icon { width: 26px; height: 26px; font-size: 0.78rem; }
}

/* ============================================================
   Setup Wizard
   ============================================================ */
.setup-wizard-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    animation: swOverlayIn 0.2s ease;
}
@keyframes swOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.setup-wizard {
    background: #fff; border-radius: 20px; width: 100%; max-width: 560px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 32px 64px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.06);
    animation: swSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex; flex-direction: column;
}
@keyframes swSlideIn { from { opacity: 0; transform: scale(0.95) translateY(12px); } to { opacity: 1; transform: none; } }

/* Header */
.setup-wizard-header {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 24px 24px 16px; position: relative;
}
.setup-wizard-header-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent-light), var(--accent-light));
    color: var(--accent); display: flex; align-items: center; justify-content: center;
}
.setup-wizard-title { font-size: 1.2rem; font-weight: 700; color: #0f172a; margin: 0; line-height: 1.3; }
.setup-wizard-subtitle { font-size: 0.82rem; color: #64748b; margin: 2px 0 0; }
.setup-wizard-close {
    position: absolute; top: 16px; right: 16px;
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: transparent; color: #94a3b8; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.setup-wizard-close:hover { background: #f1f5f9; color: #475569; }

/* Progress */
.setup-wizard-progress {
    padding: 0 24px 16px; display: flex; align-items: center; gap: 12px;
}
.setup-wizard-progress-bar {
    flex: 1; height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden;
}
.setup-wizard-progress-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent));
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.setup-wizard-progress-text { font-size: 0.75rem; color: #64748b; white-space: nowrap; font-weight: 500; }

/* Steps list */
.setup-wizard-steps { padding: 0 16px; flex: 1; overflow-y: auto; }
.setup-wizard-step {
    display: flex; gap: 12px; padding: 4px 0;
    position: relative;
}
.setup-wizard-step::before {
    content: ''; position: absolute; left: 23px; top: 38px; bottom: -4px;
    width: 2px; background: #e2e8f0;
}
.setup-wizard-step:last-child::before { display: none; }
.setup-wizard-step.is-complete::before { background: var(--accent); }

/* Step indicator circle */
.setup-wizard-step-indicator {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid #e2e8f0; background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 600; color: #94a3b8;
    transition: all 0.2s; margin-top: 4px; position: relative; z-index: 1;
}
.setup-wizard-step.is-active .setup-wizard-step-indicator {
    border-color: var(--accent); color: var(--accent); background: var(--accent-light);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.08);
}
.setup-wizard-step.is-complete .setup-wizard-step-indicator {
    border-color: #059669; background: #059669; color: #fff;
}

/* Step body */
.setup-wizard-step-body { flex: 1; min-width: 0; padding-bottom: 8px; }
.setup-wizard-step-header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    cursor: pointer; padding: 6px 10px; border-radius: 10px;
    transition: background 0.15s;
}
.setup-wizard-step-header:hover { background: #f8fafc; }
.setup-wizard-step-title { font-size: 0.9rem; font-weight: 600; color: #1e293b; }
.setup-wizard-step-title i { margin-right: 6px; color: #64748b; font-size: 0.85rem; }
.setup-wizard-step.is-complete .setup-wizard-step-title { color: #059669; }
.setup-wizard-step-desc { font-size: 0.78rem; color: #94a3b8; margin-top: 1px; }

/* Badge */
.setup-wizard-badge {
    font-size: 0.75rem; font-weight: 600; padding: 3px 10px;
    border-radius: 20px; white-space: nowrap; letter-spacing: 0.02em;
}
.setup-wizard-badge.is-done { background: #ecfdf5; color: #059669; }
.setup-wizard-badge.is-todo { background: #f1f5f9; color: #64748b; }
.setup-wizard-badge.is-optional { background: #eff6ff; color: #2563eb; }

/* AI "Suggest with AI" review modal */
.ai-suggest-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.ai-suggest-row {
    display: flex; align-items: flex-start; gap: 10px; margin: 0;
    padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer;
    transition: border-color .12s, background .12s;
}
.ai-suggest-row:hover { border-color: #cbd5e1; background: #f8fafc; }
.ai-suggest-row input { margin-top: 2px; }
.ai-suggest-row.is-disabled { opacity: 0.7; cursor: not-allowed; background: #f8fafc; }
.ai-suggest-row-text { display: flex; flex-direction: column; gap: 1px; }
.ai-suggest-row-text strong { font-size: 0.86rem; color: #0f172a; }
.ai-suggest-row-text span { font-size: 0.76rem; color: #64748b; }
.ai-suggest-row-warn { color: #b45309 !important; }

/* Concierge CTA inside the setup wizard */
.setup-wizard-concierge-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 0 4px; padding: 12px 16px; border-radius: 10px;
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1); border: 1px solid #99f6e4;
}
.setup-wizard-concierge-cta-text { display: flex; align-items: center; gap: 10px; }
.setup-wizard-concierge-cta-text > i { font-size: 1.2rem; color: #0e9488; }
.setup-wizard-concierge-cta-text strong { display: block; font-size: 0.86rem; color: #0f3d38; }
.setup-wizard-concierge-cta-text span { display: block; font-size: 0.76rem; color: #115e56; }

/* Concierge interview options */
.concierge-opt {
    display: flex; align-items: flex-start; gap: 10px; width: 100%; margin: 0 0 8px;
    padding: 12px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px; cursor: pointer;
    transition: border-color .12s, background .12s;
}
.concierge-opt:hover { border-color: #cbd5e1; }
.concierge-opt.is-on { border-color: #0e9488; background: #f0fdfa; }
.concierge-opt input { margin-top: 2px; }
.concierge-section-title { font-size: 0.8rem; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }

/* Inline per-field "Generate with AI" button */
.ai-gen { display: inline-flex; align-items: center; gap: 8px; }
.ai-gen-btn { font-size: 0.8rem; color: #0e9488; text-decoration: none; }
.ai-gen-btn:hover:not(:disabled) { color: #0b7268; text-decoration: underline; }
.ai-gen-btn:disabled { opacity: 0.6; }
.ai-gen-error { font-size: 0.75rem; color: #b45309; }

/* Step content (inline form) */
.setup-wizard-step-content {
    padding: 12px 10px 4px;
    animation: swStepIn 0.2s ease;
}
@keyframes swStepIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.setup-wizard-form { display: flex; flex-direction: column; gap: 10px; }
.setup-wizard-field label {
    font-size: 0.78rem; font-weight: 600; color: #374151; margin-bottom: 4px; display: block;
}
.setup-wizard-field .form-control,
.setup-wizard-field .form-select {
    font-size: 0.85rem; padding: 8px 12px; border-radius: 8px;
    border: 1.5px solid #e2e8f0;
}
.setup-wizard-field .form-control:focus,
.setup-wizard-field .form-select:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}
.setup-wizard-field-row { display: flex; gap: 10px; }
.setup-wizard-field-row > .setup-wizard-field { flex: 1; }
.setup-wizard-actions {
    display: flex; align-items: center; gap: 8px; padding-top: 4px;
}
.setup-wizard-hint {
    font-size: 0.78rem; color: var(--accent); background: var(--accent-light);
    padding: 6px 10px; border-radius: 6px;
}
.setup-wizard-warning {
    font-size: 0.8rem; color: #1d4ed8; background: #eff6ff;
    padding: 8px 12px; border-radius: 8px; margin-bottom: 8px;
}

/* Messages */
.setup-wizard-error {
    font-size: 0.8rem; color: #dc2626; background: #fef2f2;
    padding: 8px 12px; border-radius: 8px; margin-top: 8px;
}
.setup-wizard-success {
    font-size: 0.8rem; color: #059669; background: #ecfdf5;
    padding: 8px 12px; border-radius: 8px; margin-top: 8px;
}
.setup-wizard-complete-msg {
    font-size: 0.82rem; color: #374151; padding: 4px 0;
}

/* Footer */
.setup-wizard-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid #f1f5f9;
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
}
.setup-wizard-footer-hint { font-size: 0.75rem; color: #94a3b8; }
.setup-wizard-complete-banner {
    display: flex; align-items: center; gap: 10px; flex: 1 1 100%;
    padding: 12px 16px; border-radius: 10px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #065f46;
}
.setup-wizard-complete-banner strong { display: block; font-size: 0.88rem; }
.setup-wizard-complete-banner span { display: block; font-size: 0.78rem; opacity: 0.85; }
.setup-wizard-complete-actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    flex: 1 1 100%; justify-content: flex-end;
}
.setup-wizard-sendgate-warning {
    flex: 1 1 100%; display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: 10px;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
    font-size: 0.8rem; line-height: 1.4;
}
.setup-wizard-sendgate-warning i { font-size: 1rem; line-height: 1.2; }

/* Go-live readiness check */
.setup-wizard-readiness {
    padding: 16px 24px; border-top: 1px solid #f1f5f9;
}
.setup-wizard-readiness-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.setup-wizard-readiness-title {
    font-size: 0.9rem; font-weight: 600; color: #0f172a;
    display: flex; align-items: center; gap: 8px;
}
.setup-wizard-readiness-title i { color: #0e9488; }
.setup-wizard-readiness-error {
    margin-top: 10px; font-size: 0.8rem; color: #dc2626;
}
.setup-wizard-readiness-summary {
    margin-top: 12px; display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 10px; font-size: 0.83rem; line-height: 1.45;
}
.setup-wizard-readiness-summary i { font-size: 1rem; line-height: 1.2; margin-top: 1px; }
.setup-wizard-readiness-summary.is-go { background: #ecfdf5; color: #065f46; }
.setup-wizard-readiness-summary.is-go i { color: #059669; }
.setup-wizard-readiness-summary.is-block { background: #fef2f2; color: #991b1b; }
.setup-wizard-readiness-summary.is-block i { color: #dc2626; }
.setup-wizard-readiness-list {
    margin-top: 10px; display: flex; flex-direction: column; gap: 8px;
}
.setup-wizard-readiness-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-radius: 8px; border: 1px solid #e2e8f0;
    border-left-width: 3px;
}
.setup-wizard-readiness-item.is-warn { border-left-color: #d97706; background: #fffbeb; }
.setup-wizard-readiness-item.is-block { border-left-color: #dc2626; background: #fef2f2; }
.setup-wizard-readiness-item-text strong { display: block; font-size: 0.82rem; color: #0f172a; }
.setup-wizard-readiness-item-text span { display: block; font-size: 0.76rem; color: #64748b; margin-top: 2px; }

/* Step just-completed pulse animation */
.setup-wizard-step.is-just-completed .setup-wizard-step-indicator {
    animation: swCheckPulse 0.6s ease;
}
@keyframes swCheckPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); }
    40% { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(5, 150, 105, 0); }
    100% { transform: scale(1); box-shadow: none; }
}

/* Dashboard setup banner (shown when wizard is dismissed but incomplete) */
.setup-banner {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-light) 100%);
    border: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 14px;
    padding: 18px 22px; display: flex; align-items: center; gap: 16px;
    margin-bottom: 1.25rem; cursor: default;
    transition: box-shadow 0.2s;
}
.setup-banner:hover { box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.1); }
.setup-banner-icon {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.setup-banner-text { flex: 1; }
.setup-banner-text strong { color: var(--ae-text); font-size: 0.92rem; display: block; }
.setup-banner-text span { color: var(--ae-text-muted); font-size: 0.8rem; }
/* Phones: the row has no room for icon + text + two buttons side by side, so the text was being
   squeezed into a one-word-per-line column. Wrap instead: icon, text and the dismiss X share the
   first row; Continue Setup takes a full-width row underneath. */
@media (max-width: 767.98px) {
    .setup-banner { flex-wrap: wrap; padding: 14px 16px; gap: 12px; align-items: flex-start; }
    .setup-banner-icon { width: 36px; height: 36px; }
    .setup-banner-text { flex: 1 1 0; min-width: 0; }
    .setup-banner > .btn-outline-secondary { order: 3; margin-left: auto; }
    .setup-banner > .btn-primary { order: 4; flex: 1 1 100%; justify-content: center; display: inline-flex; align-items: center; padding: 10px 14px; }
}

/* ────────────────────────────────────────────────────────────────────────
   Setup Wizard — Dual-mode additions
   (mode picker, branding step, multi-item tables, suggestions, finish)
   All colors via --ae-* tokens.
   ──────────────────────────────────────────────────────────────────────── */

/* Mode picker */
.setup-wizard-mode-picker {
    display: flex; align-items: stretch; gap: 16px;
    padding: 20px 24px 28px;
    flex-wrap: wrap;
}
.setup-wizard-mode-card {
    position: relative;
    flex: 1 1 0;
    min-width: 200px;
    min-height: 172px;
    text-align: left;
    padding: 22px 22px 20px;
    border: 1.5px solid var(--ae-border);
    border-radius: 16px;
    background: var(--ae-surface);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex; flex-direction: column; gap: 6px;
}
.setup-wizard-mode-card:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--ae-primary);
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.12);
}
.setup-wizard-mode-card:disabled { opacity: 0.5; cursor: wait; }
.setup-wizard-mode-card.is-recommended { border-color: var(--ae-primary); }
.setup-wizard-mode-card-pill {
    position: absolute; top: -10px; right: 16px;
    background: var(--ae-primary); color: #fff;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
}
.setup-wizard-mode-card-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.10); color: var(--ae-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 4px;
}
.setup-wizard-mode-card-title { font-size: 1rem; font-weight: 700; color: var(--ae-text); }
.setup-wizard-mode-card-meta  { font-size: 0.75rem; color: var(--ae-text-muted); font-weight: 500; }
.setup-wizard-mode-card-desc  { font-size: 0.82rem; color: var(--ae-text-muted); line-height: 1.4; margin-top: 4px; flex: 1 1 auto; }

/* Header — mode badge + switch link */
.setup-wizard-mode-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ae-bg);
    color: var(--ae-text-muted);
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
}
.setup-wizard-switch-link {
    background: none; border: none;
    color: var(--ae-primary);
    font-size: 0.78rem; font-weight: 500;
    padding: 0; margin-left: 8px;
    cursor: pointer;
    text-decoration: underline;
}
.setup-wizard-switch-link:hover { color: var(--ae-text); }

/* Branding step */
.setup-wizard-branding .image-upload-widget { max-width: 220px; }
.setup-wizard-color-row { display: flex; gap: 8px; align-items: center; }
.setup-wizard-color-swatch {
    width: 40px; height: 38px;
    border: 1.5px solid var(--ae-border);
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
    background: var(--ae-surface);
}
.setup-wizard-color-row .form-control { flex: 1; max-width: 140px; }
.setup-wizard-confirm-toggle {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px;
    margin-top: 4px;
    border-radius: 10px;
    background: var(--ae-bg);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--ae-text);
}
.setup-wizard-confirm-toggle input[type="checkbox"] { margin-top: 2px; }

/* Multi-item table */
.setup-wizard-multi { display: flex; flex-direction: column; gap: 14px; }
.setup-wizard-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    border: 1px solid var(--ae-border);
    border-radius: 10px;
    overflow: hidden;
}
.setup-wizard-mini-table th {
    background: var(--ae-bg);
    color: var(--ae-text-muted);
    font-weight: 600;
    font-size: 0.75rem; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 8px 12px;
    text-align: left;
}
.setup-wizard-mini-table td {
    padding: 8px 12px;
    border-top: 1px solid var(--ae-border);
    color: var(--ae-text);
}
.setup-wizard-mini-table tr:nth-child(even) td { background: var(--ae-bg); }
.setup-wizard-mini-empty {
    text-align: center !important;
    color: var(--ae-text-muted);
    font-style: italic;
    padding: 16px !important;
}
.setup-wizard-multi-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding-top: 6px;
    border-top: 1px dashed var(--ae-border);
    flex-wrap: wrap;
}
.setup-wizard-multi-side { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Suggestions panel */
.setup-wizard-suggestions {
    border: 1px dashed var(--ae-border);
    border-radius: 10px;
    background: var(--ae-bg);
}
.setup-wizard-suggestions-toggle {
    width: 100%;
    background: none; border: none;
    text-align: left;
    padding: 10px 14px;
    font-size: 0.85rem; font-weight: 600;
    color: var(--ae-text);
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
}
.setup-wizard-suggestions-toggle:hover { color: var(--ae-primary); }
.setup-wizard-suggestions-body {
    padding: 4px 14px 14px;
    display: flex; flex-direction: column; gap: 6px;
}
.setup-wizard-suggestions-hint {
    font-size: 0.76rem;
    color: var(--ae-text-muted);
    margin: 0 0 6px;
}
.setup-wizard-suggestion-row {
    display: flex; gap: 10px; align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--ae-surface);
    cursor: pointer;
    font-size: 0.82rem;
}
.setup-wizard-suggestion-row.is-disabled { opacity: 0.55; cursor: not-allowed; }
.setup-wizard-suggestion-row .form-control { flex: 1; max-width: 240px; }
.setup-wizard-suggestion-meta {
    margin-left: auto;
    font-size: 0.75rem; color: var(--ae-text-muted);
    font-variant-numeric: tabular-nums;
}
.setup-wizard-suggestions-warn {
    font-size: 0.76rem;
    color: var(--ae-warning, #d97706);
    margin: 6px 0 0;
}

/* Finish step */
.setup-wizard-finish { display: flex; flex-direction: column; gap: 14px; }
.setup-wizard-finish-hero {
    text-align: center;
    padding: 8px 0 4px;
}
.setup-wizard-finish-hero i {
    color: var(--ae-warning, #d97706);
    font-size: 2rem;
    display: block;
    margin-bottom: 4px;
}
.setup-wizard-finish-hero h4 {
    font-size: 1.05rem; font-weight: 700;
    margin: 0; color: var(--ae-text);
}
.setup-wizard-finish-hero p {
    font-size: 0.85rem;
    color: var(--ae-text-muted);
    margin: 4px 0 0;
}
.setup-wizard-finish-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.setup-wizard-finish-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    aspect-ratio: 1;
    padding: 12px;
    border: 1.5px solid var(--ae-border);
    border-radius: 12px;
    background: var(--ae-surface);
    color: var(--ae-text);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
    font-size: 0.82rem; font-weight: 500;
    text-align: center;
}
.setup-wizard-finish-card:hover {
    border-color: var(--ae-primary);
    transform: translateY(-1px);
    color: var(--ae-text);
}
.setup-wizard-finish-card i { font-size: 1.4rem; color: var(--ae-primary); }

@media (max-width: 576px) {
    .setup-wizard { max-width: 100%; border-radius: 16px; }
    .setup-wizard-field-row { flex-direction: column; }
    .setup-wizard-mode-picker { flex-direction: column; }
    .setup-wizard-finish-grid { grid-template-columns: 1fr; }
    .setup-wizard-multi-footer { flex-direction: column; align-items: stretch; }
}

/* ────────────────────────────────────────────────────────────────────────
   Setup Wizard — Overview row layout (no inline forms)
   ──────────────────────────────────────────────────────────────────────── */
.setup-wizard-step-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    min-height: 76px;
    box-sizing: border-box;
}
.setup-wizard-step-text { flex: 1; min-width: 0; }
.setup-wizard-step-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.setup-wizard-step-link {
    background: none; border: none;
    color: var(--ae-primary);
    font-size: 0.78rem; font-weight: 500;
    padding: 4px 8px;
    cursor: pointer;
    text-decoration: none;
}
.setup-wizard-step-link:hover { text-decoration: underline; }

/* "View all steps" link in OnboardingTasksBadge dropdown */
.onboarding-tasks-overview {
    width: 100%;
    background: var(--ae-bg);
    border: none;
    border-top: 1px solid var(--ae-border);
    padding: 10px 14px;
    text-align: center;
    color: var(--ae-primary);
    font-size: 0.83rem; font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.onboarding-tasks-overview:hover { background: rgba(var(--accent-rgb), 0.06); }

/* ────────────────────────────────────────────────────────────────────────
   Coach-mark — floating tooltip pinned to a key element on each page.
   Uses direct colors (--ae-* tokens are not defined globally in this stylesheet).
   ──────────────────────────────────────────────────────────────────────── */
.coachmark-bubble {
    position: fixed;
    z-index: 99999;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.04);
    padding: 14px 16px;
    font-size: 0.85rem;
    color: #0f172a;
    animation: coachmarkIn 0.2s ease-out;
}
@keyframes coachmarkIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.coachmark-arrow {
    position: absolute;
    width: 14px; height: 14px;
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    transform: rotate(45deg);
}
.coachmark-bubble[data-arrow="bottom"] .coachmark-arrow { top: -7px; }
.coachmark-bubble[data-arrow="top"] .coachmark-arrow {
    bottom: -7px;
    transform: rotate(225deg);
}
.coachmark-header {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 0.92rem;
    margin-bottom: 6px;
    color: #0f172a;
}
.coachmark-header i { color: var(--accent); font-size: 1rem; }
.coachmark-header span { flex: 1; }
.coachmark-close {
    background: none; border: none;
    width: 22px; height: 22px;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.coachmark-close:hover { background: #f1f5f9; color: #0f172a; }
.coachmark-body {
    color: #475569;
    line-height: 1.45;
    margin-bottom: 12px;
}
.coachmark-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.coachmark-skip { color: #64748b !important; padding: 4px 8px; }

/* Pulsing outline on the anchor element so the user knows what to act on */
.coachmark-anchor-pulse {
    position: relative;
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
    animation: coachmarkAnchorPulse 1.6s ease-out infinite;
    border-radius: 8px;
}
@keyframes coachmarkAnchorPulse {
    0%   { box-shadow: 0 0 0 0   rgba(var(--accent-rgb), 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0);  }
    100% { box-shadow: 0 0 0 0   rgba(var(--accent-rgb), 0);  }
}

/* ---- Theme Picker ---- */
.theme-picker-wrapper {
    position: relative;
}

.theme-picker-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    padding: 0;
}
.theme-picker-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}

.theme-picker-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    padding: 14px;
    z-index: 500;
    min-width: 210px;
    animation: themePickerIn 0.15s ease;
}
@keyframes themePickerIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.theme-picker-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 10px;
}

.theme-swatch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 10px;
    transition: background 0.12s;
}
.theme-swatch:hover { background: #f1f5f9; }
.theme-swatch.active { background: #f1f5f9; }

.theme-swatch-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    position: relative;
    transition: border-color 0.12s, transform 0.12s;
    flex-shrink: 0;
}
.theme-swatch.active .theme-swatch-circle {
    border-color: #1e293b;
    transform: scale(1.1);
}
.theme-swatch-circle::after {
    content: "";
    display: none;
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
}
.theme-swatch.active .theme-swatch-circle::after {
    display: block;
}

.theme-swatch-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-align: center;
    line-height: 1.2;
}
.theme-swatch.active .theme-swatch-name {
    color: #1e293b;
    font-weight: 700;
}

.theme-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 499;
}

/* ---- Topbar right cluster ---- */
.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD — Customize (show/hide dashlets) panel
══════════════════════════════════════════════════════════════ */
.customize-wrapper {
    position: relative;
}
.customize-overlay {
    position: fixed;
    inset: 0;
    z-index: 1059;
}
.customize-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 272px;
    background: var(--card-bg, #fff);
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0,0,0,.18);
    border: 1px solid var(--border-color, #e2e8f0);
    z-index: 1060;
    overflow: hidden;
    animation: customizeFadeIn .15s ease;
}
@keyframes customizeFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.customize-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    font-size: .875rem;
    color: var(--text-main, #1e293b);
}
.customize-panel-body {
    max-height: 380px;
    overflow-y: auto;
    padding: 6px 0;
}
.customize-panel-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
.dashlet-toggle-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background .12s;
    font-size: .85rem;
    user-select: none;
}
.dashlet-toggle-item:hover {
    background: var(--hover-bg, #f8fafc);
}
.dashlet-toggle-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}
.dashlet-toggle-label {
    flex: 1;
    color: var(--text-main, #1e293b);
    transition: opacity .12s;
}
.dashlet-toggle-item.is-hidden .dashlet-toggle-label {
    opacity: .45;
    text-decoration: line-through;
}
.dashlet-toggle-eye {
    font-size: 1rem;
    flex-shrink: 0;
    transition: color .12s;
}
.dashlet-toggle-eye.visible { color: var(--ae-success); }
.dashlet-toggle-eye.hidden  { color: var(--ae-soft); }

/* ---- Excel Import Wizard ---- */
.excel-wizard-modal .modal-dialog { max-width: 1080px; }
.excel-wizard-steps {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* "Start from a focus" — template presets at the top of the dashboard customize panel */
.dashlet-tpl-section {
    padding: 6px 0 8px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    margin-bottom: 6px;
}
.dashlet-tpl-title {
    padding: 4px 16px 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-main, #1e293b);
}
.dashlet-tpl-hint {
    padding: 0 16px 6px;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}
.dashlet-tpl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 16px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.dashlet-tpl-item:hover:not(:disabled) {
    background: var(--hover-bg, #f8fafc);
}
.dashlet-tpl-item:disabled {
    opacity: .5;
    cursor: default;
}
.dashlet-tpl-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.dashlet-tpl-name {
    font-size: .86rem;
    font-weight: 600;
    color: var(--text-main, #1e293b);
}
.dashlet-tpl-desc {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--text-muted, #64748b);
}
.excel-wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: .9rem;
}
.excel-wizard-step .step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .85rem;
}
.excel-wizard-step.is-active { color: var(--accent); font-weight: 600; }
.excel-wizard-step.is-active .step-number { background: var(--accent); color: #fff; }
.excel-wizard-step.is-done { color: #059669; }
.excel-wizard-step.is-done .step-number { background: #059669; color: #fff; }
.excel-wizard-divider {
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.excel-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 36px 24px;
    text-align: center;
    background: #f8fafc;
    transition: border-color .15s, background .15s;
}
.excel-dropzone.is-dragging { border-color: var(--accent); background: var(--accent-light); }
.excel-file-input { max-width: 320px; margin: 0 auto; display: block; }
.excel-match-table th { background: #f8fafc; }
.excel-preview-table-wrap { max-height: 420px; overflow: auto; }
.excel-preview-table th { position: sticky; top: 0; background: #f8fafc; z-index: 1; }
.table-danger-subtle td { background: #fef2f2; }

/* ─── Shared "card list" editor pattern ───────────────────────────
   Used by: ServicePricingTiersEditor, ServiceExtrasEditor,
   ProviderAvailabilityEditor, RoomsEditor.
   Each editor has its own <style> block with extras (e.g. tier
   reorder buttons), but the row layout is consistent. */
.ae-card-list { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; }
.ae-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
/* The header action (e.g. "+ Add tier") must keep its full width on one line — flex items
   shrink by default, which squeezed the button column and wrapped the label onto two rows. */
.ae-card-header > .btn { flex-shrink: 0; white-space: nowrap; }

.ae-rows { display: flex; flex-direction: column; gap: 8px; }
.ae-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; transition: box-shadow .15s, border-color .15s; }
.ae-row:hover { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(15, 23, 42, .04); }
.ae-row-main { flex: 1; min-width: 0; }
.ae-row-title { font-weight: 600; color: #0f172a; }
.ae-row-description { line-height: 1.4; }
.ae-row-description :where(p, h1, h2, h3, ul, ol) { margin: 0 0 4px 0; }
.ae-row-meta { text-align: right; min-width: 110px; }
.ae-row-price { font-weight: 600; color: #6f2a81; }
.ae-row-actions { display: flex; gap: 6px; }

.ae-empty { text-align: center; color: #64748b; background: #fff; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 18px; font-size: 0.875rem; }

.ae-form { margin-top: 16px; padding: 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; }

/* ══════════════════════════════════════════════════════════════
   CONTEXTUAL HELP — Button + slide-in drawer + article styles
   ══════════════════════════════════════════════════════════════ */
.help-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.help-trigger:hover {
    background: var(--accent-light);
    color: var(--accent);
    border-color: #c7d2fe;
}
.help-trigger.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.help-trigger-label { line-height: 1; }

.help-trigger-floating {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.04);
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.help-trigger-floating:hover {
    background: var(--accent-text);
    color: #fff;
    border-color: var(--accent-text);
    transform: scale(1.05);
}

.help-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.help-drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.help-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: calc(100vw - 40px);
    background: #fff;
    box-shadow: -16px 0 40px -12px rgba(15, 23, 42, 0.2);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
}
.help-drawer.is-open { transform: translateX(0); }

.help-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
    flex-shrink: 0;
}
.help-drawer-pivots {
    display: flex;
    gap: 4px;
    background: var(--accent-light);
    padding: 3px;
    border-radius: 8px;
}
.help-drawer-pivot {
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.help-drawer-pivot.is-active {
    background: #fff;
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.help-drawer-pivot i { font-size: 0.85rem; margin-right: 4px; }
/* "Ask AI" pivot — tint the icon so the AI assistant stands out from the neutral pivots. */
.help-drawer-pivot-ai:not(.is-active) i { color: var(--accent); }

.help-drawer-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.help-drawer-close:hover { background: #f1f5f9; }

.help-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.help-drawer-browse { padding-top: 16px; }

.help-drawer-search {
    position: relative;
    margin-bottom: 16px;
}
.help-drawer-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.95rem;
}
.help-drawer-search input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #fff;
}
.help-drawer-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.help-drawer-empty {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
}
.help-drawer-empty-icon {
    margin: 0 auto 16px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.help-drawer-empty h3 { font-size: 1rem; margin-bottom: 8px; color: #0f172a; }
.help-drawer-empty p { font-size: 0.875rem; margin-bottom: 16px; }

/* "Ask AI about this page" CTA on the "This page" view. */
.help-ask-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: var(--accent-light);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 18px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.05s ease;
}
.help-ask-cta:hover { border-color: var(--accent); }
.help-ask-cta:active { transform: translateY(1px); }
.help-ask-cta-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.help-ask-cta-text { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.help-ask-cta-text strong { font-size: 0.9rem; color: #0f172a; }
.help-ask-cta-text small { font-size: 0.76rem; color: #64748b; }
.help-ask-cta-arrow { flex-shrink: 0; color: var(--accent); font-size: 0.9rem; }

/* ── Help drawer: AI "Ask" tab ──────────────────────────────────────── */
.help-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.help-chat-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.help-chat-intro {
    text-align: center;
    color: #64748b;
    padding: 16px 8px 4px;
}
.help-chat-intro-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.4rem;
}
.help-chat-intro h3 { font-size: 1rem; margin-bottom: 6px; color: #0f172a; }
.help-chat-intro p { font-size: 0.85rem; margin-bottom: 18px; }
.help-chat-suggestions { display: flex; flex-direction: column; gap: 8px; }
.help-chat-suggestion {
    text-align: left;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.help-chat-suggestion:hover { border-color: var(--accent); background: var(--accent-light); }
.help-chat-suggestion:disabled { opacity: 0.6; cursor: default; }

.help-chat-msg { display: flex; }
.help-chat-msg.is-user { justify-content: flex-end; }
.help-chat-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.help-chat-msg.is-user .help-chat-bubble {
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
    white-space: pre-wrap;
}
.help-chat-msg.is-assistant .help-chat-bubble {
    background: #f1f5f9;
    color: #0f172a;
    border-bottom-left-radius: 4px;
}
.help-chat-bubble p { margin: 0 0 8px; }
.help-chat-bubble p:last-child { margin-bottom: 0; }
.help-chat-bubble ul, .help-chat-bubble ol { margin: 0 0 8px; padding-left: 20px; }
.help-chat-bubble li { margin-bottom: 4px; }
.help-chat-bubble code {
    background: rgba(15, 23, 42, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.82em;
}
.help-chat-bubble a { color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

.help-chat-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.help-chat-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.76rem;
    color: var(--accent);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.help-chat-source:hover { background: var(--accent-light); border-color: var(--accent); }

.help-chat-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.help-chat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    animation: help-chat-blink 1.2s infinite both;
}
.help-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.help-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes help-chat-blink {
    0%, 80%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
}

.help-chat-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.83rem;
}

.help-chat-composer {
    flex-shrink: 0;
    border-top: 1px solid #f1f5f9;
    padding: 12px;
    background: #fff;
}
.help-chat-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.help-chat-composer textarea {
    flex: 1;
    resize: none;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-family: inherit;
    line-height: 1.4;
    min-height: 42px;
    max-height: 120px;
}
.help-chat-composer textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
.help-chat-send {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: none;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.help-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
.help-chat-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 6px;
    text-align: center;
}

.help-browse-group { margin-bottom: 20px; }
.help-browse-group-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 8px;
    padding-left: 4px;
}
.help-browse-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.help-browse-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.help-browse-item:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.help-browse-item-title {
    display: block;
    font-weight: 600;
    color: #0f172a;
    font-size: 0.875rem;
}
.help-browse-item-summary {
    display: block;
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 2px;
}

/* Article rendering */
.help-article-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin-bottom: 8px;
}
.help-article-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
    line-height: 1.3;
}
.help-article-summary {
    font-size: 0.95rem;
    color: #475569;
    margin-bottom: 20px;
    line-height: 1.5;
}
.help-article-body {
    color: #1e293b;
    font-size: 0.92rem;
    line-height: 1.65;
}
.help-article-body h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 24px 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}
.help-article-body h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin: 18px 0 6px 0;
}
.help-article-body p { margin: 0 0 12px 0; }
.help-article-body ul, .help-article-body ol { padding-left: 22px; margin: 0 0 12px 0; }
.help-article-body li { margin-bottom: 4px; }
.help-article-body code {
    background: #f1f5f9;
    color: #0f172a;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.85em;
}
.help-article-body img {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin: 12px 0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    background: #f8fafc;
    min-height: 80px;
    color: #94a3b8;
    font-size: 0.75rem;
    /* Browsers render the alt text + broken-image icon until the screenshot is
       captured. Centre and pad so the placeholder doesn't look like a layout bug. */
    display: block;
    text-align: center;
    padding: 8px;
}
.help-article-body figure { margin: 16px 0; }
.help-article-body figcaption {
    font-size: 0.78rem;
    color: #64748b;
    text-align: center;
    margin-top: 4px;
}
.help-article-body blockquote {
    border-left: 3px solid var(--accent);
    background: var(--accent-light);
    padding: 10px 14px;
    margin: 12px 0;
    border-radius: 0 6px 6px 0;
    color: #312e81;
}
.help-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.85rem;
}
.help-article-body th, .help-article-body td {
    border: 1px solid #e2e8f0;
    padding: 6px 10px;
    text-align: left;
}
.help-article-body th { background: #f8fafc; font-weight: 600; }
.help-article-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

@media (max-width: 600px) {
    .help-drawer { width: 100%; max-width: 100%; }
    .help-trigger-label { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   KNOWLEDGE BASE — /admin/help and /help index pages
   ══════════════════════════════════════════════════════════════ */
.help-index-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 80px; }
.help-index-hero {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
    color: #fff;
    border-radius: 16px;
    padding: 36px 32px;
    margin-bottom: 32px;
    box-shadow: 0 12px 32px -8px rgba(var(--accent-rgb), 0.35);
}
.help-index-hero h1 { font-size: 1.85rem; font-weight: 700; margin: 0 0 6px 0; }
.help-index-hero p { font-size: 1rem; opacity: 0.92; margin: 0 0 18px 0; }
.help-index-hero-search {
    position: relative;
    max-width: 520px;
}
.help-index-hero-search input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border-radius: 10px;
    border: none;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
}
.help-index-hero-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}
.help-index-category {
    margin-bottom: 28px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 22px;
}
.help-index-category-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
}
.help-index-category-title i {
    width: 32px;
    height: 32px;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.help-index-category-desc {
    color: #64748b;
    font-size: 0.85rem;
    margin: 0 0 14px 42px;
}
.help-index-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.help-index-list a {
    display: block;
    padding: 10px 12px;
    color: #1e293b;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.help-index-list a:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.help-index-list-title { display: block; font-weight: 600; font-size: 0.875rem; }
.help-index-list-summary { display: block; font-size: 0.78rem; color: #64748b; margin-top: 2px; }

.help-article-page {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 32px 36px;
}
.help-article-page .help-article-title { font-size: 1.75rem; }

/* Article modal — opened from the knowledge-base index. Much wider than the drawer so
   screenshots and tables in an article are actually readable. */
.help-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.help-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .22), 0 0 0 1px rgba(15, 23, 42, .06);
    width: 100%;
    max-width: 920px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: help-modal-in .2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes help-modal-in {
    from { opacity: 0; transform: scale(.97) translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.help-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
}
.help-modal-heading { flex: 1; min-width: 0; }
.help-modal-title { margin: 0; font-size: 1.4rem; font-weight: 700; color: #0f172a; }
.help-modal-close {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 8px;
    background: transparent; color: #64748b; cursor: pointer;
    transition: background .12s ease;
}
.help-modal-close:hover { background: #f1f5f9; }
.help-modal-body { overflow-y: auto; padding: 24px 32px; }
.help-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid #f1f5f9;
}
@media (max-width: 640px) {
    .help-modal-overlay { padding: 0; }
    .help-modal { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
    .help-modal-body { padding: 20px 18px; }
}

/* ============================================================
   SHARED COMPONENT LIBRARY ("Calm Canvas")
   Reusable on ANY admin page (scoped under .admin-wrapper), fully
   token-driven so every component follows the active theme. Lifted
   here from the appointments page so it is part of the common
   template. The .ap-* rules are appointments-specific layout only.
   ============================================================ */
.admin-wrapper .mh-appts{ background:var(--ae-bg); border-radius:16px; padding:24px 26px; }

.admin-wrapper .ap-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.admin-wrapper .ap-h1{ font-size:26px; font-weight:700; letter-spacing:-.025em; margin:0; line-height:1.1; color:var(--ae-text); }
.admin-wrapper .ap-subh{ color:var(--ae-text-muted); font-size:14px; margin-top:5px; }

.admin-wrapper .mh-btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--ae-r);
    font-weight:600; font-size:13.5px; cursor:pointer; border:1px solid var(--ae-border); background:var(--ae-surface);
    color:var(--ae-text-subtle); white-space:nowrap; font-family:inherit; transition:background .12s,border-color .12s; text-decoration:none; }
.admin-wrapper .mh-btn:hover{ background:var(--ae-hover); }
.admin-wrapper .mh-btn.primary{ background:var(--ae-primary); border-color:var(--ae-primary); color:var(--ae-accent-ink); }
.admin-wrapper .mh-btn.primary:hover{ filter:brightness(.95); }
.admin-wrapper .mh-btn.soft{ background:var(--ae-accent-soft); border-color:transparent; color:var(--ae-primary); }
.admin-wrapper .mh-btn.soft:hover{ background:color-mix(in srgb, var(--ae-primary) 16%, transparent); }

.admin-wrapper .mh-iconbtn{ width:32px; height:32px; border-radius:var(--ae-r); display:inline-grid; place-items:center; cursor:pointer;
    border:1px solid var(--ae-border); background:var(--ae-surface); color:var(--ae-text-muted); transition:background .12s,color .12s; position:relative; text-decoration:none; }
.admin-wrapper .mh-iconbtn:hover{ background:var(--ae-hover); color:var(--ae-text); }
.admin-wrapper .mh-iconbtn:disabled{ opacity:.45; cursor:default; }
.admin-wrapper .mh-iconbtn.accent:hover{ background:var(--ae-accent-soft); color:var(--ae-primary); border-color:color-mix(in srgb, var(--ae-primary) 30%, transparent); }
.admin-wrapper .mh-iconbtn.danger:hover{ background:var(--ae-pill-danger-bg); color:var(--ae-pill-danger-fg); border-color:color-mix(in srgb, var(--ae-danger) 30%, transparent); }
.admin-wrapper .mh-iconbtn.success:hover{ background:var(--ae-pill-ok-bg); color:var(--ae-pill-ok-fg); border-color:color-mix(in srgb, var(--ae-success) 30%, transparent); }
.admin-wrapper .mh-iconbtn.warn{ background:var(--ae-pill-warn-bg); border-color:color-mix(in srgb, var(--ae-warning) 35%, transparent); color:var(--ae-pill-warn-fg); }
.admin-wrapper .mh-iconbtn .ic-badge{ position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
    border-radius:99px; background:var(--ae-danger); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; }
.admin-wrapper .mh-actions{ display:flex; gap:6px; justify-content:flex-end; align-items:center; }

.admin-wrapper .mh-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.admin-wrapper .mh-stepper{ display:flex; align-items:center; gap:4px; background:var(--ae-surface); border:1px solid var(--ae-border); border-radius:var(--ae-r); padding:5px; }
.admin-wrapper .mh-step-btn{ width:32px; height:32px; border-radius:calc(var(--ae-r) - 2px); display:grid; place-items:center; color:var(--ae-text-muted); cursor:pointer; border:none; background:none; }
.admin-wrapper .mh-step-btn:hover{ background:var(--ae-hover); color:var(--ae-text); }
.admin-wrapper .mh-range{ font-weight:600; font-size:14px; padding:0 10px; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* "This week" is a jump-to action, not a toggle — neutral button styling so it never
   reads as a selected filter next to the .mh-chip pills. */
.admin-wrapper .mh-seg{ color:var(--ae-primary); font-weight:600; font-size:13.5px; padding:9px 14px; border-radius:var(--ae-r); background:var(--ae-surface); cursor:pointer; border:1px solid var(--ae-border); font-family:inherit; white-space:nowrap; }
.admin-wrapper .mh-seg:hover{ background:var(--ae-accent-soft); border-color:var(--ae-primary); }
.admin-wrapper .mh-chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--ae-r); cursor:pointer; font-weight:600; font-size:13.5px; border:1px solid var(--ae-border); background:var(--ae-surface); color:var(--ae-text-subtle); white-space:nowrap; font-family:inherit; }
.admin-wrapper .mh-chip:hover{ background:var(--ae-hover); }
.admin-wrapper .mh-chip .bi-check-lg{ font-size:14px; }
.admin-wrapper .mh-chip.on{ background:var(--ae-primary); border-color:var(--ae-primary); color:var(--ae-accent-ink); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); }
.admin-wrapper .mh-chip.on-warn{ background:var(--ae-pill-warn-dot); border-color:var(--ae-pill-warn-dot); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); }
/* Location/format filter dropdown — matches the .mh-chip pills; `.on` fills it like a selected chip. */
.admin-wrapper .mh-select{ padding:9px 30px 9px 14px; border-radius:var(--ae-r); cursor:pointer; font-weight:600; font-size:13.5px; border:1px solid var(--ae-border); background-color:var(--ae-surface); color:var(--ae-text-subtle); font-family:inherit; white-space:nowrap; -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
.admin-wrapper .mh-select:hover{ background-color:var(--ae-hover); }
.admin-wrapper .mh-select.on{ background-color:var(--ae-primary); border-color:var(--ae-primary); color:var(--ae-accent-ink); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
.admin-wrapper .mh-select.on option{ color:var(--ae-text); }
.admin-wrapper .mh-chiplink{ border:none; background:none; color:var(--ae-soft); font-weight:600; font-size:13px; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:5px; padding:6px; }
.admin-wrapper .mh-chiplink:hover{ color:var(--ae-text); }
.admin-wrapper .mh-toolbar-count{ margin-left:auto; color:var(--ae-text-muted); font-size:13.5px; font-weight:500; white-space:nowrap; }
.admin-wrapper .mh-toolbar-count b{ color:var(--ae-text); font-weight:700; }
/* "View Pending Appointments" call-to-action: amber-tinted (not a solid "selected" fill) so it
   draws the eye when approvals are waiting, with a count badge. The active state reuses .on-warn. */
.admin-wrapper .mh-chip.attn-warn{ border-color:#d97706; color:#b45309; background:#fff7ed; }
.admin-wrapper .mh-chip.attn-warn:hover{ background:#ffedd5; }
.admin-wrapper .mh-pending-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#d97706; color:#fff; font-size:12px; font-weight:700; line-height:1; }
.admin-wrapper .mh-chip.on-warn .mh-pending-badge{ background:rgba(255,255,255,.3); color:#fff; }

/* ---- Toolbar, tier 1 right end: approvals + the week's totals ----
   .mh-toolbar-count used to carry the margin-left:auto itself; the group carries it now so the
   pending chip travels with the count instead of sitting among the filter controls. */
.admin-wrapper .mh-toolbar-end{ margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.admin-wrapper .mh-toolbar-end .mh-toolbar-count{ margin-left:0; }
.admin-wrapper .mh-count-sep{ color:var(--ae-soft); margin:0 2px; }

/* ---- Toolbar, tier 2: the labelled filter bar ----
   House standard (CLAUDE.md → "Filter Toolbars"): every control gets a small label above it,
   because meaning must never live only in a placeholder. Tier 1 answers "which dates, which
   view"; this row answers "what is in the list". Controls are 38px tall so labels, select,
   segmented picker and checkboxes all sit on one baseline. */
.admin-wrapper .mh-filterbar{ display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap;
    background:var(--ae-surface); border:1px solid var(--ae-border); border-radius:var(--ae-r);
    padding:11px 14px; margin-bottom:20px; }
.admin-wrapper .mh-fgroup{ display:flex; flex-direction:column; flex:0 0 auto; }
.admin-wrapper .mh-flab{ font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ae-soft); font-weight:700; margin-bottom:6px; white-space:nowrap; }
.admin-wrapper .mh-fchecks{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.admin-wrapper .mh-filterbar .mh-select{ height:38px; padding-top:0; padding-bottom:0; }
.admin-wrapper .mh-freset{ align-self:center; height:38px; margin-left:auto; }

/* Checkbox chip. Reads POSITIVELY — ticked means "these are in the list" — because a "Hide
   empty classes" button can never say whether it is currently hiding. white-space:nowrap is
   load-bearing: the label is long, the chip is a fixed 38px, and a wrapped second line spills
   straight out of it. */
.admin-wrapper .mh-check{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 12px;
    border:1px solid var(--ae-border); border-radius:var(--ae-r); background:var(--ae-surface);
    color:var(--ae-text-subtle); font-family:inherit; font-size:13.5px; font-weight:600;
    white-space:nowrap; cursor:pointer; flex:0 0 auto; transition:background .12s, border-color .12s, color .12s; }
.admin-wrapper .mh-check:hover{ background:var(--ae-hover); }
.admin-wrapper .mh-check .bx{ width:15px; height:15px; border-radius:5px; border:1.5px solid var(--ae-track);
    display:grid; place-items:center; flex:0 0 auto; color:var(--ae-accent-ink); font-size:10px; line-height:1; }
.admin-wrapper .mh-check.on{ border-color:color-mix(in srgb, var(--ae-primary) 32%, transparent);
    background:color-mix(in srgb, var(--ae-primary) 8%, transparent); color:var(--ae-primary); }
.admin-wrapper .mh-check.on .bx{ background:var(--ae-primary); border-color:var(--ae-primary); }

/* Segmented picker — one control, one choice. Replaces rows of identical outline buttons where
   nothing said which one you were on. The selected fill matches .mh-chip.on, so "selected" means
   the same thing everywhere in this toolbar. */
.admin-wrapper .mh-segset{ display:inline-flex; align-items:center; background:var(--ae-surface);
    border:1px solid var(--ae-border); border-radius:var(--ae-r); padding:3px; gap:2px; flex:0 0 auto; }
.admin-wrapper .mh-segset button{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
    border:none; background:none; border-radius:calc(var(--ae-r) - 3px); font-family:inherit;
    font-size:13.5px; font-weight:600; color:var(--ae-text-subtle); white-space:nowrap; cursor:pointer;
    transition:background .12s, color .12s; }
.admin-wrapper .mh-segset button:hover{ background:var(--ae-hover); color:var(--ae-text); }
.admin-wrapper .mh-segset button.on,
.admin-wrapper .mh-segset button.on:hover{ background:var(--ae-primary); color:var(--ae-accent-ink); }

@media (max-width: 640px){
    /* One group per line, full-width controls — the labels are what keep it readable stacked. */
    .admin-wrapper .mh-filterbar{ gap:12px; }
    .admin-wrapper .mh-fgroup{ flex:1 1 100%; }
    .admin-wrapper .mh-filterbar .mh-select{ width:100%; }
    .admin-wrapper .mh-segset{ width:100%; }
    .admin-wrapper .mh-segset button{ flex:1 1 0; justify-content:center; }
    .admin-wrapper .mh-freset{ margin-left:0; }
}

.admin-wrapper .ap-day{ margin-bottom:16px; }
.admin-wrapper .ap-dayhead{ display:flex; align-items:baseline; gap:10px; padding:0 4px 10px; }
.admin-wrapper .ap-dayhead b{ font-size:15px; font-weight:700; color:var(--ae-text); }
.admin-wrapper .ap-dayhead span{ color:var(--ae-soft); font-size:13px; font-variant-numeric:tabular-nums; }
.admin-wrapper .ap-dayhead i{ flex:1; height:1px; background:var(--ae-border); margin-left:6px; }
.admin-wrapper .ap-defaults{ display:flex; gap:16px; flex-wrap:wrap; margin:0 4px 12px; font-size:13px; color:var(--ae-text-muted); }
.admin-wrapper .ap-defaults i{ margin-right:5px; }

.admin-wrapper .mh-card{ background:var(--ae-surface); border:1px solid var(--ae-border); border-radius:var(--ae-r-card); overflow:hidden; box-shadow:var(--ae-shadow); }
.admin-wrapper .ap-grid{ display:grid; grid-template-columns:30px 64px minmax(0,1fr) 184px 152px 116px 124px; gap:14px; align-items:center; } /* Appointments-specific layout */
.admin-wrapper .mh-trow{ padding:11px 18px; border-top:1px solid var(--ae-line-soft); }
.admin-wrapper .mh-trow:first-child{ border-top:none; }
.admin-wrapper .mh-trow:hover{ background:var(--ae-hover); }
.admin-wrapper .ap-toggle{ border:none; background:none; cursor:pointer; color:var(--ae-soft); display:grid; place-items:center; width:24px; height:24px; border-radius:6px; padding:0; }
.admin-wrapper .ap-toggle:hover{ background:var(--ae-line-soft); color:var(--ae-text); }
.admin-wrapper .ap-time{ font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; color:var(--ae-text); }
.admin-wrapper .ap-svc{ font-weight:600; font-size:15px; letter-spacing:-.01em; color:var(--ae-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-wrapper .ap-cellsub{ color:var(--ae-text-muted); font-size:12.5px; margin-top:2px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.admin-wrapper .mh-namecell{ display:flex; align-items:center; gap:10px; min-width:0; }
.admin-wrapper .mh-namecell .nm{ font-size:14px; color:var(--ae-text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-wrapper .row-event{ background:var(--ae-bg-soft); }
.admin-wrapper .row-canceled{ opacity:.55; }
.admin-wrapper .ap-evbadge{ display:inline-block; padding:2px 7px; border-radius:5px; font-size:0.75rem; letter-spacing:.4px; font-weight:700; color:#fff; vertical-align:middle; margin-left:8px; }
.admin-wrapper .ap-hidbadge{ display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:5px; font-size:.6rem; letter-spacing:.3px; font-weight:700; background:#475569; color:#fff; vertical-align:middle; margin-left:8px; }

/* Offering-type badge (Group class / Private session / Program) — soft tinted pill so the
   admin can tell each row's booking mode apart at a glance without competing with the
   status pill on the right. */
.admin-wrapper .ap-typebadge{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--ae-r-pill); font-size:0.75rem; letter-spacing:.2px; font-weight:700; text-transform:uppercase; vertical-align:middle; margin-left:8px; }
.admin-wrapper .ap-typebadge .bi{ font-size:0.75rem; }
/* Under-enrolled auto-cancel indicator on availability/calendar class cards.
   Amber = confirm mode (a human gets asked); red-tinted = auto mode (will cancel). */
.admin-wrapper .av-autocancel{ display:flex; align-items:center; gap:4px; margin-top:4px; padding:2px 6px; border-radius:6px; font-size:0.75rem; font-weight:600; background:#fffbeb; color:#b45309; border:1px dashed #f59e0b; line-height:1.3; }
.admin-wrapper .av-autocancel-hard{ background:#fef2f2; color:#b91c1c; border-color:#ef4444; }
.admin-wrapper .av-autocancel .bi{ font-size:0.75rem; }
/* Desktop hides the explanation (the badge's title= tooltip carries it); phones show it,
   because there is no hover on touch and the badge alone can't explain itself. */
.admin-wrapper .av-autocancel-why{ display:none; }
/* "Run it anyway" — the one-tap exemption sitting under the at-risk badge. Quiet outline, not
   a second alarm: the badge is the warning, this is the way out of it.
   NOTE (repo trap): base rules live HERE, outside every @media block. Defining a class only
   inside `@media (max-width:768px)` silently strips it on desktop — mobile gets overrides
   further down, never the only definition. */
.admin-wrapper .av-keep-btn{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; padding:3px 9px; border-radius:var(--ae-r-pill, 999px); border:1px solid var(--ae-border, #e2e8f0); background:var(--ae-surface, #fff); color:var(--ae-text-muted, #64748b); font-size:0.75rem; font-weight:700; line-height:1.3; cursor:pointer; transition:background .12s, color .12s, border-color .12s; }
.admin-wrapper .av-keep-btn:hover{ background:var(--ae-bg, #f1f5f9); color:var(--ae-text, #0f172a); border-color:var(--ae-text-muted, #64748b); }
.admin-wrapper .av-keep-btn .bi{ font-size:0.75rem; }
/* Settled counterpart: under its minimum, but a human already decided it runs. Calm green with
   a solid border — deliberately NOT the amber/red at-risk treatment, because nothing is pending
   any more. Without this the exempted class would render identically to a healthy one and the
   employee would never see their decision land. */
.admin-wrapper .av-keeping{ display:flex; align-items:center; gap:4px; margin-top:4px; padding:2px 6px; border-radius:6px; font-size:0.75rem; font-weight:600; background:#f0fdf4; color:var(--ae-success, #059669); border:1px solid #a7f3d0; line-height:1.3; }
.admin-wrapper .av-keeping .bi{ font-size:0.75rem; }
.admin-wrapper .av-keep-undo{ display:inline-flex; align-items:center; gap:4px; margin-top:3px; padding:0; border:0; background:none; color:var(--ae-text-muted, #64748b); font-size:0.75rem; font-weight:600; text-decoration:underline; cursor:pointer; }
.admin-wrapper .av-keep-undo:hover{ color:var(--ae-text, #0f172a); }
.admin-wrapper .av-keep-undo .bi{ font-size:0.75rem; }
/* Minimum-capacity chip on a schedule card, next to booked/capacity. Neutral by default —
   the minimum is context, not an alarm — and amber only while the class is short of it, which
   is the one state that asks the employee to do something (promote it, or decide it runs). */
.admin-wrapper .av-min{ display:inline-flex; align-items:center; padding:0 5px; border-radius:var(--ae-r-pill, 999px); background:var(--ae-bg, #f1f5f9); color:var(--ae-text-muted, #64748b); font-size:0.75rem; font-weight:700; line-height:1.5; white-space:nowrap; }
.admin-wrapper .av-min-under{ background:#fffbeb; color:#b45309; }
/* Where the minimum falls on the capacity bar. Absolutely positioned inside .progress, which
   Bootstrap gives overflow:hidden — so the mark is clipped to the bar and needs no rounding. */
.admin-wrapper .av-min-mark{ position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:rgba(15,23,42,.45); }
/* Segmented picker for the low-attendance behaviour (appointment modal + service editor).
   One-tap choice instead of a dropdown: Default | Off | Auto | Ask. */
.admin-wrapper .ac-seg{ display:inline-flex; background:var(--ae-bg, #f1f5f9); border:1px solid var(--ae-border, #e2e8f0); border-radius:10px; padding:3px; gap:2px; flex-wrap:wrap; }
.admin-wrapper .ac-seg-btn{ border:0; background:transparent; color:var(--ae-text-muted, #64748b); font-size:.82rem; font-weight:600; padding:6px 12px; border-radius:8px; cursor:pointer; transition:background .12s, color .12s; white-space:nowrap; }
.admin-wrapper .ac-seg-btn:hover{ color:var(--ae-text, #0f172a); }
.admin-wrapper .ac-seg-btn.on{ background:var(--ae-surface, #fff); color:var(--ae-text, #0f172a); box-shadow:0 1px 3px rgba(15,23,42,.14); }
.admin-wrapper .ac-seg-btn.ac-seg-auto.on{ color:#b91c1c; }
.admin-wrapper .ac-seg-btn.ac-seg-ask.on{ color:#b45309; }
.admin-wrapper .ac-seg-hours{ width:auto; max-width:200px; }
.admin-wrapper .ac-seg-hours .form-control{ max-width:80px; }
.admin-wrapper .ap-typebadge.tb-group{ background:#E7EFEE; color:#3C7D74; }
.admin-wrapper .ap-typebadge.tb-private{ background:#F1EAE6; color:#A2674E; }
.admin-wrapper .ap-typebadge.tb-program{ background:#EBEAF2; color:#5A549A; }
/* Class format — where students attend (in studio / online / both). */
.admin-wrapper .ap-typebadge.tb-instudio{ background:#E8F0FE; color:#1D4ED8; }
.admin-wrapper .ap-typebadge.tb-online{ background:#EDE9FE; color:#6D28D9; }
.admin-wrapper .ap-typebadge.tb-hybrid{ background:#FEF3C7; color:#B45309; }
/* "This class repeats" marker. Deliberately NEUTRAL rather than a seventh coloured pill: the
   type and format badges beside it are the card's two semantic colours, and a third competing
   hue turns a dense card into noise. Repeating is an attribute of the class, not a category,
   so it stays subordinate by HUE — not by washing out. --ae-text-muted was the obvious pick and
   was wrong: on the chip background it measures 3.07:1 at this 10px uppercase size, against
   4.1–5.9:1 for every sibling badge, so the one thing meant to catch the eye was the faintest
   thing on the card. --ae-text-subtle measures 7.12:1 and stays theme-aware. */
.admin-wrapper .ap-typebadge.tb-repeat{ background:var(--ae-bg, #f1f5f9); color:var(--ae-text-subtle, #475569); }

.admin-wrapper .mh-ava{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; flex-shrink:0; }

.admin-wrapper .mh-status{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--ae-r-pill); font-size:12.5px; font-weight:600; white-space:nowrap; text-transform:capitalize; }
.admin-wrapper .mh-dot{ width:6px; height:6px; border-radius:50%; }
.admin-wrapper .t-approved{ background:var(--ae-pill-ok-bg); color:var(--ae-pill-ok-fg); } .admin-wrapper .t-approved .mh-dot{ background:var(--ae-pill-ok-dot); }
.admin-wrapper .t-pending{ background:var(--ae-pill-warn-bg); color:var(--ae-pill-warn-fg); } .admin-wrapper .t-pending .mh-dot{ background:var(--ae-pill-warn-dot); }
.admin-wrapper .t-canceled{ background:var(--ae-pill-danger-bg); color:var(--ae-pill-danger-fg); } .admin-wrapper .t-canceled .mh-dot{ background:var(--ae-pill-danger-dot); }
.admin-wrapper .t-hidden{ background:var(--ae-pill-muted-bg); color:var(--ae-pill-muted-fg); } .admin-wrapper .t-hidden .mh-dot{ background:var(--ae-pill-muted-dot); }
.admin-wrapper .t-noshow{ background:var(--ae-pill-noshow-bg); color:var(--ae-pill-noshow-fg); } .admin-wrapper .t-noshow .mh-dot{ background:var(--ae-pill-noshow-dot); }

.admin-wrapper .mh-capnum{ font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; margin-bottom:5px; white-space:nowrap; color:var(--ae-text); }
.admin-wrapper .mh-capnum small{ color:var(--ae-soft); font-weight:500; }
.admin-wrapper .mh-bar{ height:5px; border-radius:99px; background:var(--ae-track); overflow:hidden; }
.admin-wrapper .mh-bar i{ display:block; height:100%; border-radius:99px; }
/* Over-capacity headcount (booked > max) — flag it red so an over-booked class is obvious. */
.admin-wrapper .mh-capnum.over{ color:var(--ae-danger); }
/* "N waiting" waitlist chip under the capacity bar. */
.admin-wrapper .mh-waitchip{ display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:600; line-height:1.6; white-space:nowrap; color:var(--ae-warning); background:color-mix(in srgb, var(--ae-warning) 12%, transparent); }
.admin-wrapper .mh-waitchip i{ font-size:11px; }

/* ── Expanded class: the row and its roster read as ONE block ──────────────
   The strip used to be --ae-bg-soft on a white card — a 1.5% difference — opening
   on a hairline and closing on the same hairline that separates every other row,
   so nothing said where the open class ended. Two cues fix it, both from existing
   tokens: .ap-open and .ap-part carry a shared border + radius (they are adjacent
   siblings that touch, so they draw as one object — no wrapper element, which
   keeps .mh-trow:first-child working), and the roster sits on --ae-bg, the PAGE
   background, i.e. a recess cut into the card. That recess is what makes the white
   .ap-prow cards read as its contents instead of as more list.

   The 8px side margin is cancelled by 9px of inner padding (8 + 1 border + 9 = 18,
   the standard .mh-trow padding), so the open class's time / instructor / capacity /
   status / actions still line up with the collapsed rows above and below it. */
.admin-wrapper .mh-trow.ap-open{
    margin:8px 8px 0; padding:12px 9px;
    background:color-mix(in srgb, var(--ae-primary) 6%, var(--ae-surface));
    border:1px solid color-mix(in srgb, var(--ae-soft) 50%, transparent);
    border-bottom:none;
    border-radius:12px 12px 0 0;
}
.admin-wrapper .mh-trow.ap-open:hover{ background:color-mix(in srgb, var(--ae-primary) 9%, var(--ae-surface)); }
/* Open state on the disclosure control itself — the one row in the list that is open. */
.admin-wrapper .ap-open .ap-toggle,
.admin-wrapper .ap-open .ap-toggle:hover{ background:var(--ae-primary); color:var(--ae-accent-ink); }
/* --ae-track disappears against the tinted header; darken the empty part of the bar. */
.admin-wrapper .ap-open .mh-bar{ background:color-mix(in srgb, var(--ae-soft) 38%, transparent); }
/* The row following the strip needs no rule of its own — the block's bottom margin
   already separates them, and a hairline 12px under a closed edge reads as a stray. */
.admin-wrapper .ap-part + .mh-trow{ border-top:none; }

.admin-wrapper .ap-part{
    margin:0 8px 12px;
    background:var(--ae-bg);
    border:1px solid color-mix(in srgb, var(--ae-soft) 50%, transparent);
    border-top:1px solid var(--ae-line-soft);
    border-radius:0 0 12px 12px;
    padding:10px 16px 14px;
}
@media (max-width: 640px){
    /* Phone rows are padded 13px 15px, so the block's inset has to add up to 15 instead of 18. */
    .admin-wrapper .mh-trow.ap-open{ margin:6px 6px 0; padding:13px 8px; }
    .admin-wrapper .ap-part{ margin:0 6px 10px; padding:8px 12px 12px; }
}

.admin-wrapper .ap-parthead{ display:flex; align-items:center; gap:9px; padding:14px 0 12px; }
.admin-wrapper .ap-parthead b{ font-size:13.5px; font-weight:700; color:var(--ae-text); }
/* Name(+persons)/Status/CheckedIn/Payment/Package/Guests/Actions. The check-in column was added
   after the fact, so the other tracks were trimmed to pay for it rather than widening the row —
   .ap-waitgrid below re-declares its own 5 tracks and is unaffected. */
.admin-wrapper .ap-pgrid{ display:grid; grid-template-columns:minmax(170px,1.4fr) 104px 106px 120px 122px minmax(80px,.6fr) 152px; gap:12px; align-items:center; }
.admin-wrapper .ap-pgrid > *{ min-width:0; } /* let cells shrink instead of forcing the row wider */
.admin-wrapper .ap-phead{ white-space:nowrap; }
.admin-wrapper .ap-ppers{ background:var(--ae-bg,#f1f5f9); border-radius:6px; padding:1px 6px; font-size:11px; }
.admin-wrapper .ap-prow .mh-actions{ justify-content:flex-end; flex-wrap:nowrap; }
@media (max-width:1200px){
  /* Below this the 6-column row starts colliding; stack into a card so nothing wraps mid-cell. */
  .admin-wrapper .ap-pgrid{ grid-template-columns:1fr 1fr; gap:8px 12px; }
  .admin-wrapper .ap-phead{ display:none; }
  .admin-wrapper .ap-prow .mh-actions{ grid-column:1 / -1; justify-content:flex-start; }
}
/* Waiting-list rows: # | Name | Persons | Joined | Actions. Overrides .ap-pgrid columns (must
   follow it so the later rule wins) while inheriting its display:grid / gap / alignment. */
.admin-wrapper .ap-waitgrid{ grid-template-columns:48px minmax(160px,1.7fr) 80px minmax(150px,1.1fr) 140px; }
.admin-wrapper .ap-phead{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ae-soft); font-weight:700; padding:0 14px 6px; }
.admin-wrapper .ap-prow{ padding:11px 14px; background:var(--ae-surface); border:1px solid var(--ae-border); border-radius:calc(var(--ae-r-card) - 4px); margin-bottom:8px; }
.admin-wrapper .ap-prow.is-canceled{ opacity:.55; }
.admin-wrapper .ap-pname{ font-weight:600; font-size:14px; color:var(--ae-text); display:flex; align-items:center; gap:6px; }
.admin-wrapper .ap-pname a{ color:var(--ae-primary); display:inline-flex; }
.admin-wrapper .ap-pmail{ color:var(--ae-soft); font-size:12.5px; margin-top:1px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.admin-wrapper .ap-pmeta{ font-size:13px; color:var(--ae-text-subtle); font-variant-numeric:tabular-nums; }
.admin-wrapper .ap-pmeta small{ color:var(--ae-soft); }
.admin-wrapper .ap-pkg{ font-size:12.5px; color:var(--ae-primary); display:inline-flex; align-items:center; gap:5px; }
.admin-wrapper .ap-guest{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:99px; background:var(--ae-chip); color:var(--ae-text-subtle); font-size:12px; margin:2px 4px 2px 0; }
.admin-wrapper .ap-guest .gx{ border:none; background:none; cursor:pointer; color:var(--ae-soft); font-size:11px; line-height:1; padding:0; display:inline-flex; }
.admin-wrapper .ap-guest .gx:hover{ color:var(--ae-danger); }
/* Rename shares the chip-button shape but not the danger hover — it edits a label, it doesn't
   cancel a seat, and the two sit next to each other so the colours must not read alike. */
.admin-wrapper .ap-guest .ge{ border:none; background:none; cursor:pointer; color:var(--ae-soft); font-size:11px; line-height:1; padding:0; display:inline-flex; }
.admin-wrapper .ap-guest .ge:hover{ color:var(--ae-primary); }
/* "Add guest" reads as an outlined counterpart to the filled guest chips, so an empty
   GUESTS cell still offers the action instead of being a dead blank. */
.admin-wrapper .ap-guest-add{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:99px; background:none; border:1px dashed var(--ae-border); color:var(--ae-text-muted); font-size:12px; margin:2px 4px 2px 0; cursor:pointer; }
.admin-wrapper .ap-guest-add:hover{ border-color:var(--ae-primary); color:var(--ae-primary); }

.admin-wrapper .ap-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:70px 20px; color:var(--ae-text-muted); }
.admin-wrapper .ap-empty .ic{ width:56px; height:56px; border-radius:16px; background:var(--ae-surface); border:1px solid var(--ae-border); display:grid; place-items:center; color:var(--ae-primary); margin-bottom:16px; }

/* ── Row action menu (⋮) ───────────────────────────────────────────────────
   Class rows carried up to five unlabelled icons and roster rows up to seven
   (the payment pair only appears when a fee is owed, so the busiest row was
   also the widest). Per the max-3 rule in CLAUDE.md each row now keeps the
   action used on almost every visit plus anything carrying an alert — an
   unread badge hidden behind ⋮ stops being an alert — and the rest moves in
   here, where it gets a name instead of a guessable glyph.

   .ap-ctx is position:absolute inside .ap-menuwrap rather than fixed+body like
   the WP AeActionMenu: nothing in this list clips overflow, and a Blazor-native
   menu needs no JS positioning. The backdrop below it closes on any outside
   click without a document-level listener. */
.admin-wrapper .ap-menuwrap{ position:relative; display:inline-flex; }
.admin-wrapper .ap-ctx{
    position:absolute; right:0; top:calc(100% + 6px); z-index:1200; min-width:214px;
    background:var(--ae-surface); border:1px solid var(--ae-border); border-radius:var(--ae-r);
    box-shadow:0 12px 32px -8px rgba(20,18,14,.22), 0 2px 6px rgba(20,18,14,.06);
    padding:5px; animation:apCtxIn .12s ease;
}
@keyframes apCtxIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
.admin-wrapper .ap-ctxitem{
    display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border:none;
    border-radius:7px; background:none; color:var(--ae-text-subtle); font-size:13px;
    font-weight:500; text-align:left; font-family:inherit; cursor:pointer; white-space:nowrap;
}
.admin-wrapper .ap-ctxitem i{ width:16px; text-align:center; color:var(--ae-text-muted); flex:none; }
.admin-wrapper .ap-ctxitem:hover{ background:var(--ae-hover); color:var(--ae-text); }
.admin-wrapper .ap-ctxitem:disabled{ opacity:.45; cursor:default; }
.admin-wrapper .ap-ctxitem:disabled:hover{ background:none; color:var(--ae-text-subtle); }
.admin-wrapper .ap-ctxitem.danger{ color:var(--ae-danger); }
.admin-wrapper .ap-ctxitem.danger i{ color:var(--ae-danger); }
.admin-wrapper .ap-ctxitem.danger:hover{ background:var(--ae-pill-danger-bg); color:var(--ae-pill-danger-fg); }
.admin-wrapper .ap-ctxitem.success{ color:var(--ae-success); }
.admin-wrapper .ap-ctxitem.success i{ color:var(--ae-success); }
.admin-wrapper .ap-ctxitem.success:hover{ background:var(--ae-pill-ok-bg); color:var(--ae-pill-ok-fg); }
.admin-wrapper .ap-ctxdiv{ height:1px; background:var(--ae-line-soft); margin:5px 4px; }
/* Group heading — says WHY a conditional group is in the menu ("Payment · owed"). */
.admin-wrapper .ap-ctxlabel{ padding:7px 10px 4px; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ae-soft); }
.admin-wrapper .ap-ctx-backdrop{ position:fixed; inset:0; z-index:1100; }
/* New-appointment modal: icon badge in the header (modal standard). */
.admin-wrapper .ap-newappt-badge{ width:34px; height:34px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:var(--ae-accent-soft, #eef2ff); color:var(--ae-primary); font-size:16px; }

/* Appointments row — mobile stacked card. The desktop 7-column grid has fixed-width
   columns that overflow a phone viewport, collapsing the service column to 0 and clipping
   capacity/status/actions off-screen. Below 640px we reflow each row into a card:
     [⋮] time ................ status
         service name (+ type badge, wraps)
         provider
         N / max booked (+ bar)
         actions
   so the class name and headcount are always visible. */
@media (max-width: 640px) {
    .admin-wrapper .mh-appts{ padding:16px 14px; }
    .admin-wrapper .ap-grid{
        grid-template-columns:24px minmax(0,1fr) auto;
        column-gap:10px; row-gap:6px; padding:13px 15px; align-items:start;
    }
    .admin-wrapper .ap-grid > .ap-c-toggle{ grid-row:1; grid-column:1; align-self:center; }
    .admin-wrapper .ap-grid .ap-time{ grid-row:1; grid-column:2; align-self:center; }
    .admin-wrapper .ap-grid .ap-c-status{ grid-row:1; grid-column:3; justify-self:end; align-self:center; }
    .admin-wrapper .ap-grid .ap-c-main{ grid-row:2; grid-column:2 / -1; }
    .admin-wrapper .ap-grid .mh-namecell{ grid-row:3; grid-column:2 / -1; }
    .admin-wrapper .ap-grid .ap-c-cap{ grid-row:4; grid-column:2 / -1; }
    .admin-wrapper .ap-grid .mh-actions{ grid-row:5; grid-column:2 / -1; justify-content:flex-start; margin-top:2px; }
    /* Let the full class name show instead of ellipsis-truncating to a 0-width column. */
    .admin-wrapper .ap-grid .ap-svc{ white-space:normal; overflow:visible; text-overflow:clip; }
    .admin-wrapper .ap-grid .mh-bar{ max-width:180px; }
}

/* ============================================================
   BOOTSTRAP RESKIN — token-driven, scoped under .admin-wrapper so the
   login/public pages (outside .admin-wrapper) stay untouched. The extra
   .admin-wrapper class beats Bootstrap on specificity + source order, so
   no !important is needed (except .text-muted, which Bootstrap !importants).
   ============================================================ */
.admin-wrapper .btn{ border-radius:var(--ae-r); font-weight:600; }
.admin-wrapper .btn-primary{ background:var(--ae-primary); border-color:var(--ae-primary); color:var(--ae-accent-ink); }
.admin-wrapper .btn-primary:hover,
.admin-wrapper .btn-primary:focus,
.admin-wrapper .btn-primary:active{ background:var(--ae-primary); border-color:var(--ae-primary); color:var(--ae-accent-ink); filter:brightness(.95); }
.admin-wrapper .btn-outline-primary{ color:var(--ae-primary); border-color:var(--ae-primary); }
.admin-wrapper .btn-outline-primary:hover{ background:var(--ae-primary); border-color:var(--ae-primary); color:#fff; }
.admin-wrapper .btn-secondary{ background:var(--ae-bg-soft); border-color:var(--ae-border); color:var(--ae-text-subtle); }
.admin-wrapper .btn-secondary:hover{ background:var(--ae-hover); border-color:var(--ae-border); color:var(--ae-text); }
.admin-wrapper .btn-outline-secondary{ color:var(--ae-text-subtle); border-color:var(--ae-border); }
.admin-wrapper .btn-outline-secondary:hover{ background:var(--ae-hover); border-color:var(--ae-border); color:var(--ae-text); }
.admin-wrapper .btn-success{ background:var(--ae-success); border-color:var(--ae-success); color:#fff; }
.admin-wrapper .btn-danger{ background:var(--ae-danger); border-color:var(--ae-danger); color:#fff; }
.admin-wrapper .btn-outline-success{ color:var(--ae-success); border-color:color-mix(in srgb, var(--ae-success) 55%, transparent); }
.admin-wrapper .btn-outline-success:hover{ background:var(--ae-success); border-color:var(--ae-success); color:#fff; }
.admin-wrapper .btn-outline-danger{ color:var(--ae-danger); border-color:color-mix(in srgb, var(--ae-danger) 55%, transparent); }
.admin-wrapper .btn-outline-danger:hover{ background:var(--ae-danger); border-color:var(--ae-danger); color:#fff; }
.admin-wrapper .btn-light{ background:var(--ae-bg-soft); border-color:var(--ae-border); color:var(--ae-text-subtle); }
.admin-wrapper .btn-light:hover{ background:var(--ae-hover); color:var(--ae-text); }
.admin-wrapper .btn-link{ color:var(--ae-primary); }

.admin-wrapper .card{ border-radius:var(--ae-r-card); border:1px solid var(--ae-border); background:var(--ae-surface); box-shadow:var(--ae-shadow); }
.admin-wrapper .card .card{ box-shadow:none; }

.admin-wrapper .table{ --bs-table-bg:transparent; --bs-table-color:var(--ae-text); color:var(--ae-text); }
.admin-wrapper .table-hover>tbody>tr:hover>*{ background:var(--ae-hover); }

.admin-wrapper .badge{ border-radius:var(--ae-r-pill); font-weight:600; }

.admin-wrapper .form-control,
.admin-wrapper .form-select{ border-radius:var(--ae-r); border-color:var(--ae-border); color:var(--ae-text); background:var(--ae-surface); }
.admin-wrapper .form-control:focus,
.admin-wrapper .form-select:focus{ border-color:var(--ae-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--ae-primary) 18%, transparent); }
.admin-wrapper .form-control::placeholder{ color:var(--ae-soft); }
.admin-wrapper .form-check-input:checked{ background-color:var(--ae-primary); border-color:var(--ae-primary); }
.admin-wrapper .form-check-input:focus{ border-color:var(--ae-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--ae-primary) 18%, transparent); }

/* ============================================================
   Date-range presets dropdown (Components/Shared/DateRangePresets.razor)
   Lives here, NOT in a *.razor.css scoped file — App.razor links no
   *.styles.css bundle, so scoped CSS never applies in this app.
   Trigger is matched to the sibling <input class="form-control"> date
   inputs (same ~38px box, 6px/12px pad, 1rem text, --ae-r radius,
   --ae-border 1px border, same accent focus ring). All colours via
   --ae-* tokens so every theme (incl. dark) follows automatically.
   ============================================================ */
.admin-wrapper .date-presets{ margin-top:12px; padding-top:12px; border-top:1px solid var(--ae-border); }
.admin-wrapper .date-presets-dd{ position:relative; display:inline-block; }

.admin-wrapper .date-presets-trigger{
    display:inline-flex; align-items:center; gap:8px;
    min-width:200px; min-height:calc(1.5em + 0.75rem + 2px);
    padding:0.375rem 0.75rem;
    font-family:var(--ae-font); font-size:1rem; font-weight:500; line-height:1.5;
    color:var(--ae-text); background:var(--ae-surface);
    border:1px solid var(--ae-border); border-radius:var(--ae-r);
    cursor:pointer; box-sizing:border-box;
    transition:border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.admin-wrapper .date-presets-trigger:hover:not(:disabled){
    border-color:color-mix(in srgb, var(--ae-primary) 45%, var(--ae-border));
    background:var(--ae-hover);
}
.admin-wrapper .date-presets-trigger.is-open,
.admin-wrapper .date-presets-trigger:focus-visible{
    outline:none; border-color:var(--ae-primary);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--ae-primary) 18%, transparent);
}
.admin-wrapper .date-presets-trigger.is-open{ background:var(--ae-surface); }
.admin-wrapper .date-presets-trigger:disabled{ opacity:0.55; cursor:not-allowed; }
.admin-wrapper .date-presets-trigger .bi-calendar-range{ font-size:0.95rem; color:var(--ae-text-muted); }
.admin-wrapper .date-presets-trigger-label{ flex:1 1 auto; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-wrapper .date-presets-caret{ font-size:0.75rem; color:var(--ae-text-muted); transition:transform 0.15s ease; }
.admin-wrapper .date-presets-trigger.is-open .date-presets-caret{ transform:rotate(180deg); }

.admin-wrapper .date-presets-backdrop{ position:fixed; inset:0; z-index:1040; background:transparent; }
.admin-wrapper .date-presets-menu{
    position:absolute; top:calc(100% + 6px); left:0; z-index:1050;
    min-width:220px; max-height:min(60vh, 380px); overflow-y:auto;
    background:var(--ae-surface); border:1px solid var(--ae-border);
    border-radius:var(--ae-r-card); box-shadow:var(--ae-shadow);
    padding:6px; animation:datePresetsIn 0.12s ease;
}
@keyframes datePresetsIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
.admin-wrapper .date-presets-item{
    display:flex; align-items:center; gap:8px; width:100%;
    border:none; background:none; color:var(--ae-text);
    font-family:var(--ae-font); font-size:0.9rem; font-weight:500; line-height:1.3;
    text-align:left; padding:8px 10px; border-radius:8px; cursor:pointer;
    transition:background 0.1s ease, color 0.1s ease;
}
.admin-wrapper .date-presets-item:hover{ background:var(--ae-accent-soft); color:var(--ae-primary); }
.admin-wrapper .date-presets-item-check{ width:16px; display:inline-flex; justify-content:center; color:var(--ae-primary); visibility:hidden; }
.admin-wrapper .date-presets-item.is-active{ color:var(--ae-primary); font-weight:600; }
.admin-wrapper .date-presets-item.is-active .date-presets-item-check{ visibility:visible; }

/* "Custom dates…": start / end inside the menu, with Apply */
.admin-wrapper .date-presets-divider{ height:1px; background:var(--ae-border); margin:4px 2px; }
.admin-wrapper .date-presets-custom{ display:flex; flex-direction:column; gap:8px; padding:6px 4px; min-width:200px; }
.admin-wrapper .date-presets-custom-field{ display:flex; flex-direction:column; gap:3px; margin:0; font-size:0.8rem; color:var(--ae-text-muted); }
.admin-wrapper .date-presets-custom-foot{ display:flex; justify-content:flex-end; gap:6px; }

/* The range as a field in a filter row (orders, quotes, usage): no divider, full column width */
.admin-wrapper .row .date-presets{ margin:0; padding:0; border:0; }
.admin-wrapper .row .date-presets-dd{ display:block; }
.admin-wrapper .row .date-presets-trigger{ width:100%; min-width:0; }

/* Report filter cards: the range comes first, above the other filters */
.admin-wrapper .card-body:has(> .rpt-filters){ display:flex; flex-direction:column; }
.admin-wrapper .card-body:has(> .rpt-filters) > .date-presets{
    order:-1; margin:0 0 12px; padding:0 0 12px; border-top:0; border-bottom:1px solid var(--ae-border);
}

/* In a table's filter panel: compact, full width; docked panels open the menu in the flow */
.admin-wrapper .dt-filter-field .date-presets{ margin:0; padding:0; border:0; }
.admin-wrapper .dt-filter-field .date-presets-dd{ display:block; }
.admin-wrapper .dt-filter-field .date-presets-trigger{ width:100%; min-width:0; font-size:0.85rem; min-height:31px; padding:0.25rem 0.6rem; }
.admin-wrapper .date-presets.is-inline .date-presets-menu{ position:static; margin-top:6px; box-shadow:none; max-height:none; animation:none; }

/* Bootstrap .nav-tabs in the admin look exactly like the shared .ae-tabbar (see "Page tab bar"):
   same dark 0.95rem labels, light primary background + 3px underline on the open tab. */
.admin-wrapper .nav-tabs{ gap:4px; border-bottom:1px solid color-mix(in srgb, var(--ae-text) 15%, var(--ae-border)); }
.admin-wrapper .nav-tabs .nav-link{
    display:inline-flex; align-items:center; gap:7px; padding:10px 14px; margin-bottom:-1px;
    border:0; border-bottom:3px solid transparent; border-radius:6px 6px 0 0; background:none;
    font-size:.95rem; font-weight:500; color:var(--ae-text);
    transition:background-color .12s ease, color .12s ease, border-color .12s ease;
}
.admin-wrapper .nav-tabs .nav-link .bi{ margin:0 !important; }
.admin-wrapper .nav-tabs .nav-link:hover{ background:var(--ae-hover); color:var(--ae-text); }
.admin-wrapper .nav-tabs .nav-link:focus-visible{ outline:2px solid var(--ae-primary); outline-offset:-2px; box-shadow:none; }
.admin-wrapper .nav-tabs .nav-link.active{
    color:var(--ae-primary); font-weight:600; border-bottom-color:var(--ae-primary);
    background:color-mix(in srgb, var(--ae-primary) 12%, transparent);
}

.admin-wrapper .modal-content{ border-radius:var(--ae-r-card); border:1px solid var(--ae-border); background:var(--ae-surface); color:var(--ae-text); }
.admin-wrapper .modal-header,
.admin-wrapper .modal-footer{ border-color:var(--ae-line-soft); }
/* ---- data-mode="dark" rules (apply to any dark theme) ---- */
[data-mode="dark"] .btn-close{ filter:invert(1) grayscale(100%) brightness(1.6); }
/* The MotionHub logo art is dark — float it on a white chip so it stays legible. */
[data-mode="dark"] .sidebar-brand-logo{ background:#fff; border-radius:9px; padding:5px 8px; box-sizing:border-box; }
/* Scrollbar thumb border matches the panel, not the (darker) bg. */
[data-mode="dark"] ::-webkit-scrollbar-thumb{ border-color:var(--ae-surface); }

.admin-wrapper .alert{ border-radius:var(--ae-r); }

.admin-wrapper .pagination{ --bs-pagination-color:var(--ae-text-subtle); --bs-pagination-bg:var(--ae-surface); --bs-pagination-border-color:var(--ae-border); --bs-pagination-hover-bg:var(--ae-hover); --bs-pagination-hover-color:var(--ae-text); --bs-pagination-active-bg:var(--ae-primary); --bs-pagination-active-border-color:var(--ae-primary); --bs-pagination-active-color:var(--ae-accent-ink); }

.admin-wrapper .list-group-item{ border-color:var(--ae-border); background:var(--ae-surface); color:var(--ae-text); }
.admin-wrapper .list-group-item-action:hover{ background:var(--ae-hover); }
.admin-wrapper .list-group-item.active{ background:var(--ae-primary); border-color:var(--ae-primary); color:var(--ae-accent-ink); }

.admin-wrapper .dropdown-menu{ border-radius:var(--ae-r-card); border-color:var(--ae-border); background:var(--ae-surface); box-shadow:var(--ae-shadow); }
.admin-wrapper .dropdown-item{ color:var(--ae-text); }
.admin-wrapper .dropdown-item:hover{ background:var(--ae-hover); color:var(--ae-text); }

.admin-wrapper .text-muted{ color:var(--ae-text-muted) !important; }

/* ---- Theme picker (profile dropdown) ---- */
.profile-dropdown-themewrap { padding: 8px 12px 4px; }
.profile-theme-swatches { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 8px; }
/* Text size (profile menu): scales the root font size, so rem-based sizes everywhere follow. */
html[data-textsize="lg"] { font-size: 17.6px; }
html[data-textsize="xl"] { font-size: 19.2px; }
.profile-textsize { display: flex; gap: 6px; margin-top: 8px; }
.profile-textsize-btn {
    width: 36px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--ae-border); border-radius: var(--ae-r); background: var(--ae-surface);
    color: var(--ae-text); font-weight: 600; line-height: 1; cursor: pointer;
}
.profile-textsize-btn:hover { background: var(--ae-hover, var(--ae-bg)); }
.profile-textsize-btn.is-active { border-color: var(--ae-primary); color: var(--ae-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ae-primary) 18%, transparent); }
.profile-theme-swatch {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--sw);
    border: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
    cursor: pointer; padding: 0;
    transition: transform .12s ease, box-shadow .12s ease;
}
.profile-theme-swatch:hover { transform: scale(1.12); }
.profile-theme-swatch.is-active {
    box-shadow: 0 0 0 2px var(--sidebar-dropdown-bg), 0 0 0 4px var(--accent);
}

/* ============================================================
   AI Insights (Components/Pages/Admin/AiInsights/AiInsights.razor)
   Ported from the dead AiInsights.razor.css scoped file — App.razor links
   no *.styles.css bundle, so scoped CSS never reached the browser and the
   page rendered unstyled. Re-homed here and re-tokenised: the page's old
   hardcoded violet "AI identity" is dropped in favour of the studio's live
   --ae-primary accent, so the page follows the active theme (incl. dark).
   ============================================================ */
/* Header */
.admin-wrapper .ai-page-icon{ width:44px; height:44px; border-radius:var(--ae-r); background:var(--ae-accent-soft); color:var(--ae-primary); display:flex; align-items:center; justify-content:center; font-size:22px; flex:0 0 auto; }
.admin-wrapper .ai-toolbar{ display:flex; align-items:center; gap:8px; }
.admin-wrapper .ai-weekly-sep{ width:1px; height:22px; background:var(--ae-border); margin:0 4px; }
/* Weekly auto-report summary strip (period/recipients edited in a modal). */
.admin-wrapper .ai-weekly-summary{ padding:8px 12px; background:var(--ae-accent-soft); border:1px solid color-mix(in srgb, var(--ae-primary) 18%, var(--ae-border)); border-radius:var(--ae-r); color:var(--ae-text); }
.admin-wrapper .ai-weekly-summary > .bi-calendar-check{ color:var(--ae-primary); font-size:0.95rem; }
.admin-wrapper .ai-weekly-edit{ color:var(--ae-primary); text-decoration:none; font-size:0.8rem; font-weight:600; }
.admin-wrapper .ai-weekly-edit:hover{ text-decoration:underline; color:var(--ae-primary); }
/* Quota banner — blocked (disabled / over cap) or near-limit warning. */
.admin-wrapper .ai-quota-banner{ padding:10px 14px; border-radius:var(--ae-r); border:1px solid; font-size:0.9rem; }
.admin-wrapper .ai-quota-banner > .bi{ font-size:1.05rem; margin-top:1px; }
.admin-wrapper .ai-quota-banner.is-blocked{ background:rgba(194,84,63,0.08); border-color:rgba(194,84,63,0.30); color:var(--ae-danger); }
.admin-wrapper .ai-quota-banner.is-warning{ background:rgba(154,107,0,0.08); border-color:rgba(154,107,0,0.30); color:var(--ae-warning); }

/* Tabs (segmented control) */
.admin-wrapper .ai-tabs{ display:inline-flex; gap:4px; padding:4px; margin-bottom:1rem; background:var(--ae-bg); border:1px solid var(--ae-border); border-radius:var(--ae-r-card); }
.admin-wrapper .ai-tab{ display:inline-flex; align-items:center; gap:7px; padding:7px 16px; border:0; background:transparent; border-radius:var(--ae-r); font-family:var(--ae-font); font-size:0.875rem; font-weight:600; color:var(--ae-text-muted); cursor:pointer; appearance:none; -webkit-appearance:none; transition:background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.admin-wrapper .ai-tab i{ font-size:1rem; line-height:1; }
.admin-wrapper .ai-tab:hover:not(.is-active){ color:var(--ae-text); background:var(--ae-accent-soft); }
.admin-wrapper .ai-tab.is-active{ background:var(--ae-surface); color:var(--ae-primary); box-shadow:0 1px 3px rgba(20,18,14,0.10), 0 0 0 1px color-mix(in srgb, var(--ae-primary) 16%, transparent); }
.admin-wrapper .ai-tab:focus{ outline:0; }
.admin-wrapper .ai-tab:focus-visible{ outline:2px solid var(--ae-primary); outline-offset:2px; }
.admin-wrapper .ai-tab-badge{ font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:2px 6px; border-radius:var(--ae-r-pill); background:var(--ae-accent-soft); color:var(--ae-primary); line-height:1.2; }
.admin-wrapper .ai-tab.is-active .ai-tab-badge{ background:var(--ae-primary); color:var(--ae-accent-ink); }

/* KPI scorecards */
.admin-wrapper .ai-kpi-card{ border-radius:var(--ae-r); transition:transform 0.12s ease, box-shadow 0.12s ease; }
.admin-wrapper .ai-kpi-card:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(var(--accent-rgb),0.12); }
.admin-wrapper .ai-kpi-icon{ width:32px; height:32px; border-radius:8px; background:var(--ae-accent-soft); color:var(--ae-primary); display:inline-flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 32px; }
.admin-wrapper .ai-kpi-value{ font-size:1.55rem; font-weight:700; line-height:1.1; color:var(--ae-text); }
.admin-wrapper .ai-kpi-delta{ margin-top:4px; min-height:1.25rem; font-size:0.8rem; line-height:1.25; }
.admin-wrapper .ai-kpi-delta.is-positive{ color:var(--ae-success); }
.admin-wrapper .ai-kpi-delta.is-negative{ color:var(--ae-danger); }

/* Executive summary */
.admin-wrapper .ai-summary-text{ font-size:0.975rem; font-weight:600; color:var(--ae-text); line-height:1.45; }
.admin-wrapper .ai-summary-meta{ font-size:0.75rem; color:var(--ae-text-muted); white-space:nowrap; }
.admin-wrapper .ai-summary-footer{ margin-top:12px; padding-top:10px; border-top:1px solid var(--ae-border); font-size:0.75rem; color:var(--ae-text-muted); display:flex; flex-wrap:wrap; gap:16px; }

/* Recommendation cards */
.admin-wrapper .ai-rec-card{ position:relative; border-radius:var(--ae-r-card); overflow:hidden; transition:transform 0.12s ease, box-shadow 0.12s ease; }
.admin-wrapper .ai-rec-card:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(20,18,14,0.08); }
.admin-wrapper .ai-rec-card::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:4px; background:var(--ae-border); }
.admin-wrapper .ai-rec-card.is-high::before{ background:var(--ae-danger); }
.admin-wrapper .ai-rec-card.is-med::before{ background:var(--ae-warning); }
.admin-wrapper .ai-rec-card.is-low::before{ background:var(--ae-info); }
.admin-wrapper .ai-rec-card .card-body{ padding-left:18px; }
.admin-wrapper .ai-priority-high, .admin-wrapper .ai-priority-med, .admin-wrapper .ai-priority-low{ display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:0.75rem; padding:3px 8px; border-radius:var(--ae-r-pill); border:1px solid; }
.admin-wrapper .ai-priority-high{ background:rgba(194,84,63,0.10); color:var(--ae-danger); border-color:rgba(194,84,63,0.28); }
.admin-wrapper .ai-priority-med{ background:rgba(154,107,0,0.10); color:var(--ae-warning); border-color:rgba(154,107,0,0.28); }
.admin-wrapper .ai-priority-low{ background:var(--ae-accent-soft); color:var(--ae-info); border-color:color-mix(in srgb, var(--ae-info) 28%, transparent); }
.admin-wrapper .ai-rec-category-chip{ display:inline-flex; align-items:center; font-size:0.75rem; padding:3px 8px; border-radius:var(--ae-r-pill); background:var(--ae-bg); color:var(--ae-text-muted); border:1px solid var(--ae-border); }
.admin-wrapper .ai-rec-action, .admin-wrapper .ai-rec-impact{ display:flex; align-items:flex-start; gap:6px; font-size:0.825rem; line-height:1.4; }
.admin-wrapper .ai-rec-action{ color:var(--ae-text); }
.admin-wrapper .ai-rec-impact{ color:var(--ae-success); }
.admin-wrapper .ai-rec-action i, .admin-wrapper .ai-rec-impact i{ flex:0 0 auto; margin-top:2px; }

/* History rail */
.admin-wrapper .ai-history-group-label{ font-size:0.7rem; font-weight:600; color:var(--ae-text-muted); text-transform:uppercase; letter-spacing:0.05em; margin:10px 4px 4px; }
.admin-wrapper .ai-history-group-label:first-child{ margin-top:0; }
.admin-wrapper .ai-history-item{ display:flex !important; align-items:center; gap:8px; width:100%; padding:7px 10px; border:0; background:transparent; border-radius:6px; cursor:pointer; text-align:left; transition:background 0.12s ease; }
.admin-wrapper .ai-history-item + .ai-history-item{ margin-top:1px; }
.admin-wrapper .ai-history-item:hover{ background:var(--ae-bg); }
.admin-wrapper .ai-history-item.is-active{ background:var(--ae-accent-soft); box-shadow:inset 3px 0 0 var(--ae-primary); }
.admin-wrapper .ai-history-item.is-active .ai-history-date{ color:var(--ae-primary); }
.admin-wrapper .ai-history-item.is-active .ai-history-meta{ color:color-mix(in srgb, var(--ae-primary) 75%, transparent); }
.admin-wrapper .ai-history-item:focus{ outline:0; }
.admin-wrapper .ai-history-item:focus-visible{ outline:2px solid var(--ae-primary); outline-offset:-2px; }
.admin-wrapper .ai-history-date{ font-size:0.8rem; font-weight:600; color:var(--ae-text); line-height:1.2; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-wrapper .ai-history-meta{ font-size:0.75rem; color:var(--ae-text-muted); line-height:1.2; flex:0 0 auto; white-space:nowrap; }
.admin-wrapper .ai-status-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 7px; background:var(--ae-text-muted); }
.admin-wrapper .ai-status-dot.is-success{ background:var(--ae-success); }
.admin-wrapper .ai-status-dot.is-failed{ background:var(--ae-danger); }

/* Empty state */
.admin-wrapper .ai-empty-card{ border-radius:var(--ae-r-card); background:linear-gradient(135deg, var(--ae-accent-soft), var(--ae-surface)); }
.admin-wrapper .ai-empty-icon{ color:var(--ae-primary); font-size:48px; opacity:0.85; }

/* Chat tab */
.admin-wrapper .ai-chat-thread{ background:var(--ae-surface); border-radius:var(--ae-r-card) var(--ae-r-card) 0 0; }
.admin-wrapper .ai-chat-turn{ display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; }
.admin-wrapper .ai-chat-turn.is-user{ flex-direction:row-reverse; }
.admin-wrapper .ai-chat-avatar{ flex:0 0 32px; width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:15px; margin-top:2px; }
.admin-wrapper .ai-chat-avatar.is-ai{ background:var(--ae-accent-soft); color:var(--ae-primary); }
.admin-wrapper .ai-chat-avatar.is-user{ background:var(--ae-bg); color:var(--ae-text-muted); }
.admin-wrapper .ai-chat-stack{ display:flex; flex-direction:column; min-width:0; max-width:calc(100% - 56px); }
.admin-wrapper .ai-chat-turn.is-user .ai-chat-stack{ align-items:flex-end; }
.admin-wrapper .ai-chat-label{ font-size:0.75rem; font-weight:600; letter-spacing:0.02em; margin-bottom:4px; line-height:1; }
.admin-wrapper .ai-chat-label.is-ai{ color:var(--ae-primary); }
.admin-wrapper .ai-chat-label.is-user{ color:var(--ae-text-muted); }
.admin-wrapper .ai-chat-bubble-user{ padding:10px 14px; background:var(--ae-primary); color:var(--ae-accent-ink); border-radius:14px 14px 4px 14px; line-height:1.45; word-wrap:break-word; box-shadow:0 1px 2px rgba(var(--accent-rgb),0.25); }
.admin-wrapper .ai-chat-bubble-assistant{ padding:10px 14px; background:var(--ae-surface); color:var(--ae-text); border:1px solid var(--ae-border); border-radius:14px 14px 14px 4px; line-height:1.45; word-wrap:break-word; box-shadow:0 1px 2px rgba(20,18,14,0.04); }

/* Markdown inside bubbles (global sheet — no ::deep) */
.admin-wrapper .ai-chat-markdown :first-child{ margin-top:0; }
.admin-wrapper .ai-chat-markdown :last-child{ margin-bottom:0; }
.admin-wrapper .ai-chat-markdown p{ margin:0 0 0.5rem; }
.admin-wrapper .ai-chat-markdown ul, .admin-wrapper .ai-chat-markdown ol{ margin:0 0 0.5rem 1.25rem; padding-left:0.25rem; }
.admin-wrapper .ai-chat-markdown li{ margin-bottom:0.15rem; }
.admin-wrapper .ai-chat-markdown li > p{ margin:0; }
.admin-wrapper .ai-chat-markdown h1, .admin-wrapper .ai-chat-markdown h2, .admin-wrapper .ai-chat-markdown h3, .admin-wrapper .ai-chat-markdown h4{ margin:0.5rem 0 0.35rem; font-weight:600; line-height:1.25; }
.admin-wrapper .ai-chat-markdown h1{ font-size:1.05rem; }
.admin-wrapper .ai-chat-markdown h2{ font-size:1rem; }
.admin-wrapper .ai-chat-markdown h3, .admin-wrapper .ai-chat-markdown h4{ font-size:0.95rem; }
.admin-wrapper .ai-chat-markdown code{ background:var(--ae-accent-soft); color:var(--ae-primary); padding:1px 5px; border-radius:4px; font-size:0.85em; }
.admin-wrapper .ai-chat-markdown pre{ background:#0f172a; color:#f8fafc; padding:10px 12px; border-radius:8px; overflow-x:auto; margin:0 0 0.5rem; }
.admin-wrapper .ai-chat-markdown pre code{ background:transparent; color:inherit; padding:0; }
.admin-wrapper .ai-chat-markdown a{ color:var(--ae-primary); text-decoration:underline; }
.admin-wrapper .ai-chat-markdown blockquote{ margin:0 0 0.5rem; padding:4px 10px; border-left:3px solid color-mix(in srgb, var(--ae-primary) 40%, transparent); color:var(--ae-text-muted); background:var(--ae-bg); border-radius:4px; }
.admin-wrapper .ai-chat-markdown table{ border-collapse:collapse; margin:0 0 0.5rem; width:100%; }
.admin-wrapper .ai-chat-markdown th, .admin-wrapper .ai-chat-markdown td{ border:1px solid var(--ae-border); padding:4px 8px; font-size:0.9em; }
.admin-wrapper .ai-chat-markdown strong{ font-weight:700; }
.admin-wrapper .ai-chat-markdown em{ font-style:italic; }
.admin-wrapper .ai-chat-bubble-user .ai-chat-markdown a{ color:inherit; text-decoration:underline; }
.admin-wrapper .ai-chat-bubble-user .ai-chat-markdown code{ background:color-mix(in srgb, var(--ae-accent-ink) 18%, transparent); color:var(--ae-accent-ink); }
.admin-wrapper .ai-chat-bubble-user .ai-chat-markdown blockquote{ background:color-mix(in srgb, var(--ae-accent-ink) 12%, transparent); color:var(--ae-accent-ink); border-left-color:color-mix(in srgb, var(--ae-accent-ink) 50%, transparent); }
.admin-wrapper .ai-chat-bubble-user .ai-chat-markdown strong{ color:var(--ae-accent-ink); }

/* Suggested-question chips */
.admin-wrapper .ai-suggest-chip{ display:inline-flex; align-items:center; gap:7px; padding:7px 15px; border-radius:var(--ae-r-pill); background:var(--ae-surface); border:1px solid var(--ae-border); color:var(--ae-text); font-family:var(--ae-font); font-size:0.825rem; line-height:1.3; cursor:pointer; appearance:none; -webkit-appearance:none; transition:background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease; }
.admin-wrapper .ai-suggest-chip i{ font-size:0.82rem; line-height:1; color:color-mix(in srgb, var(--ae-primary) 70%, transparent); transition:color 0.12s ease; }
.admin-wrapper .ai-suggest-chip:hover:not(:disabled){ background:var(--ae-accent-soft); border-color:color-mix(in srgb, var(--ae-primary) 40%, var(--ae-border)); color:var(--ae-primary); transform:translateY(-1px); box-shadow:0 4px 12px rgba(var(--accent-rgb),0.14); }
.admin-wrapper .ai-suggest-chip:hover:not(:disabled) i{ color:var(--ae-primary); }
.admin-wrapper .ai-suggest-chip:focus{ outline:0; }
.admin-wrapper .ai-suggest-chip:focus-visible{ outline:2px solid var(--ae-primary); outline-offset:2px; }
.admin-wrapper .ai-suggest-chip:disabled{ opacity:0.6; cursor:not-allowed; }
.admin-wrapper .ai-context-chip{ border-radius:var(--ae-r); }

/* Session rail */
.admin-wrapper .ai-session-list{ max-height:540px; overflow-y:auto; padding:4px 0; scrollbar-width:thin; scrollbar-color:var(--ae-border) transparent; }
.admin-wrapper .ai-session-list::-webkit-scrollbar{ width:6px; }
.admin-wrapper .ai-session-list::-webkit-scrollbar-thumb{ background:var(--ae-border); border-radius:var(--ae-r-pill); }
.admin-wrapper .ai-session-item{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:4px; padding:0; margin:0 0 2px 0 !important; background:transparent !important; border:0 !important; border-radius:8px !important; box-shadow:none !important; transition:background-color 0.12s ease; cursor:default; }
.admin-wrapper .ai-session-item:hover{ background:var(--ae-bg) !important; }
.admin-wrapper .ai-session-item.is-active{ background:var(--ae-accent-soft) !important; }
.admin-wrapper .ai-session-open{ flex:1 1 auto !important; min-width:0 !important; display:block !important; box-sizing:border-box; width:100%; padding:8px 10px !important; margin:0 !important; background:transparent !important; border:0 !important; border-radius:8px !important; text-align:left !important; font:inherit; color:inherit !important; cursor:pointer; overflow:hidden; appearance:none; -webkit-appearance:none; box-shadow:none !important; }
.admin-wrapper .ai-session-open:hover{ background:transparent !important; }
.admin-wrapper .ai-session-open:focus{ outline:0; }
.admin-wrapper .ai-session-open:focus-visible{ outline:2px solid var(--ae-primary); outline-offset:-2px; }
.admin-wrapper .ai-session-title{ display:block; font-size:0.875rem; font-weight:500; line-height:1.3; color:var(--ae-text); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.admin-wrapper .ai-session-item.is-active .ai-session-title{ color:var(--ae-primary); font-weight:600; }
.admin-wrapper .ai-session-item:hover:not(.is-active) .ai-session-title{ color:var(--ae-text); }
.admin-wrapper .ai-session-meta{ display:block; margin-top:3px; font-size:0.7rem; line-height:1.2; color:var(--ae-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.admin-wrapper .ai-session-meta-sep{ color:var(--ae-border); margin:0 4px; }
.admin-wrapper .ai-session-trash{ flex:0 0 28px !important; width:28px !important; height:28px !important; padding:0 !important; margin:0 6px 0 0 !important; background:transparent !important; border:0 !important; border-radius:6px !important; color:var(--ae-text-muted); display:inline-flex !important; align-items:center !important; justify-content:center !important; cursor:pointer; opacity:0; transition:opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease; appearance:none; -webkit-appearance:none; box-shadow:none !important; }
.admin-wrapper .ai-session-item:hover .ai-session-trash, .admin-wrapper .ai-session-item.is-active .ai-session-trash, .admin-wrapper .ai-session-trash:focus-visible{ opacity:1; }
.admin-wrapper .ai-session-trash:hover{ background:rgba(194,84,63,0.12) !important; color:var(--ae-danger); }
.admin-wrapper .ai-session-trash:focus-visible{ outline:2px solid var(--ae-danger); outline-offset:-2px; }
.admin-wrapper .ai-session-trash:disabled{ cursor:not-allowed; opacity:0.3 !important; }
.admin-wrapper .ai-session-trash i{ font-size:0.9rem; line-height:1; }

/* ============================================================
   Permissions matrix (UserEdit / EmployeeEdit / permission-profile editors)
   ONE themed definition shared by every editor — previously duplicated as a
   hardcoded-violet inline <style> per page. Pill toggles in a clean section
   card; all colours via --ae-* so it follows the active theme.
   ============================================================ */
.admin-wrapper .perm-card{ border:1px solid var(--ae-border); border-radius:var(--ae-r-card); background:var(--ae-surface); margin-bottom:10px; overflow:hidden; }
.admin-wrapper .perm-card-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--ae-bg); color:var(--ae-primary); font-weight:700; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.04em; padding:9px 14px; border-bottom:1px solid var(--ae-border); }
/* Section title = the collapse control: chevron + name, styled like the header text it replaces. */
.admin-wrapper .perm-card-title{ display:inline-flex; align-items:center; gap:8px; border:0; background:transparent; padding:0; color:inherit; font:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; }
.admin-wrapper .perm-card-title:hover{ color:var(--ae-text); }
.admin-wrapper .perm-card-title i{ font-size:0.85rem; }
.admin-wrapper .perm-card.is-collapsed .perm-card-header{ border-bottom:0; }
.admin-wrapper .perm-card-toggle{ display:inline-flex; align-items:center; gap:6px; margin:0; font-size:0.75rem; font-weight:500; letter-spacing:normal; text-transform:none; color:var(--ae-text-muted); cursor:pointer; white-space:nowrap; }
.admin-wrapper .perm-card-toggle input{ accent-color:var(--ae-primary); cursor:pointer; }
.admin-wrapper .perm-row{ display:grid; grid-template-columns:240px 1fr; gap:14px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--ae-border); }
/* Group row: name · "on / total" (collapse lives on the SECTION header above) */
.admin-wrapper .perm-row-name{ display:flex; align-items:center; gap:6px; min-width:0; }
.admin-wrapper .perm-group-label{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-wrapper .perm-group-count{ flex:0 0 auto; font-size:0.75rem; font-weight:500; color:var(--ae-text-muted); white-space:nowrap; }
@media (max-width:768px){ .admin-wrapper .perm-row{ grid-template-columns:1fr; gap:8px; } }
.admin-wrapper .perm-row:last-child{ border-bottom:0; }
.admin-wrapper .perm-row-name{ font-weight:600; font-size:0.88rem; color:var(--ae-text); }
.admin-wrapper .perm-row-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.admin-wrapper .perm-item{ display:inline-flex; align-items:center; gap:4px; }
.admin-wrapper .perm-help{ font-size:0.82rem; color:var(--ae-text-muted); cursor:help; transition:color 0.1s ease; }
.admin-wrapper .perm-help:hover{ color:var(--ae-primary); }
.admin-wrapper .perm-toggle{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--ae-r-pill); font-size:0.78rem; font-weight:500; border:1px solid transparent; cursor:pointer; user-select:none; transition:background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease; }
.admin-wrapper .perm-toggle input{ display:none; }
.admin-wrapper .perm-toggle i{ font-size:0.82rem; }
.admin-wrapper .perm-toggle.is-on{ background:var(--ae-accent-soft); color:var(--ae-primary); border-color:color-mix(in srgb, var(--ae-primary) 35%, transparent); }
.admin-wrapper .perm-toggle.is-off{ background:var(--ae-bg); color:var(--ae-text-muted); border-color:var(--ae-border); }
.admin-wrapper .perm-toggle:hover{ filter:brightness(0.97); }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE TEMPLATE LAYER  (phones only — every rule below lives inside the
   ≤768px media query, so the laptop admin is untouched by construction)

   Three recurring shapes across the ~100 admin pages break on a phone:
     1. data tables with 6-10 columns,
     2. filter toolbars built as one nowrap flex row,
     3. page headers with title + action buttons side by side.
   This layer fixes all three generically. Tables are reflowed into labelled
   cards using data-label attributes stamped at runtime by js/admin-mobile.js
   (it copies each column's own <th> text), so no page markup changes.

   Opt-outs for pages that need the real grid: put .mh-no-cards on any
   ancestor, or data-mh-skip="1" on the table.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Touch screens keep :hover on the last thing tapped, so the desktop row-hover grey
       (`.table-hover > tbody > tr:hover > *`) paints every cell of a tapped card as a grey block
       and stays there — the "selected text" look the owner reported twice. There is no hover on a
       phone; turn the row-hover surfaces off entirely below the phone breakpoint. */
    .admin-wrapper .table-hover > tbody > tr:hover > *,
    .admin-content table tbody tr:hover,
    .admin-content table tbody tr:hover > *,
    .dashlet-table tbody tr:hover,
    .job-history-table tr:hover td {
        background: transparent !important;
        --bs-table-bg-state: transparent;
        --bs-table-accent-bg: transparent;
    }

    /* Every admin table row on a phone — cardified or not — is an action surface: no text
       selection, no callout, no tap flash. (The cardified rule below used to be the only one,
       which left plain tables and late-rendered rows selectable.) */
    .admin-content table tbody tr,
    .admin-content table tbody tr > * {
        -webkit-user-select: none; user-select: none;
        -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
    }
    .admin-content table tbody tr input,
    .admin-content table tbody tr textarea { -webkit-user-select: text; user-select: text; }

    /* ── 1. Tables → labelled cards ─────────────────────────────────────── */
    /* Reading rule: a phone card is scanned TOP-DOWN, so each field stacks its
       label above its value, left-aligned. (The first pass put label-left /
       value-right, which forces the eye to ping-pong across the full width for
       every row — wrong for this width.) Two fields per line where they fit;
       the row's first column becomes the card title and long values span. */
    .admin-content table.mh-mtable,
    .admin-content table.mh-mtable tbody { display: block; width: 100%; }
    .admin-content table.mh-mtable thead { display: none; }

    .admin-content table.mh-mtable tbody tr {
        position: relative;
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
        width: 100%; padding: 14px 14px 12px;
        border: 1px solid var(--ae-border); border-radius: var(--ae-r-card);
        background: var(--ae-surface); box-shadow: var(--ae-shadow);
        margin-bottom: 10px;
        /* Cards are action surfaces: never flash a text selection when a finger
           lands on the row menu. */
        -webkit-user-select: none; user-select: none;
        -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .admin-content table.mh-mtable tbody tr:last-child { margin-bottom: 0; }
    .admin-content table.mh-mtable tbody tr > * { -webkit-user-select: none; user-select: none; }

    .admin-content table.mh-mtable tbody td {
        display: block; width: auto; border: none; padding: 0;
        text-align: left; font-size: .87rem; overflow-wrap: anywhere;
        min-width: 0;
    }
    .admin-content table.mh-mtable tbody td.text-nowrap { white-space: normal; }
    .admin-content table.mh-mtable tbody td::before {
        content: attr(data-label);
        display: block; margin-bottom: 1px;
        font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
        letter-spacing: .04em; color: var(--ae-text-muted); line-height: 1.5;
    }

    /* Card title — the row's identity column, full width and prominent. Padded
       clear of the pinned action button. */
    .admin-content table.mh-mtable tbody td.mh-title {
        grid-column: 1 / -1; font-size: 1rem; font-weight: 700;
        padding-right: 46px; margin-bottom: 2px;
    }
    .admin-content table.mh-mtable tbody td.mh-title::before { display: none; }
    .admin-content table.mh-mtable tbody td.mh-title .table-thumb,
    .admin-content table.mh-mtable tbody td.mh-title .table-thumb-placeholder { display: none; }

    /* Long values (emails, addresses, notes) get the whole line. */
    .admin-content table.mh-mtable tbody td.mh-wide { grid-column: 1 / -1; }

    /* Row actions pinned to the card's top-right corner. */
    .admin-content table.mh-mtable tbody td.mh-actions {
        position: absolute; top: 10px; right: 10px;
        width: auto; padding: 0; text-align: right;
    }
    .admin-content table.mh-mtable tbody td.mh-actions::before { display: none; }

    .admin-content table.mh-mtable tbody td:empty { display: none; }
    .admin-content .table-responsive:has(> table.mh-mtable) { overflow-x: visible; }

    /* Inline table sizing (style="min-width:720px; table-layout:fixed" on the report grids,
       the platform versions table) outranks the block/width:100% above, so a cardified table
       kept its desktop minimum and the whole page scrolled sideways — with the cards inside it
       720px wide. Cards never need a minimum width. (A grid that must STAY a grid opts out with
       data-mh-skip="1" and scrolls inside its own wrapper — see ScheduleHeatmapReport.) */
    .admin-content table.mh-mtable { min-width: 0 !important; max-width: none !important; table-layout: auto !important; }

    /* Non-cardified tables (2-column, grouped headers, opt-outs) keep real
       columns and scroll inside their own wrapper rather than squeezing. */
    .admin-content .table-responsive > table:not(.mh-mtable) { min-width: 520px; }

    /* ── 1b. Row menus → bottom sheet ───────────────────────────────────── */
    /* Every row menu in the admin anchors to its trigger with position:absolute,
       which on a phone lands half off-screen when the trigger sits near an edge.
       There are 18 different per-page menu classes (sub-ctx-menu, cust-ctx-menu,
       ord-ctx-menu, …), so match on the NAMING CONVENTION rather than listing them
       — any future *-ctx-menu / *-action-menu is covered automatically. At this
       width they all become a bottom sheet: always fully visible, thumb-reachable,
       and big enough to tap. */
    .admin-content [class*="ctx-menu"],
    .admin-content [class*="action-menu"],
    .admin-content .ae-action-menu,
    .admin-content .exm-panel,
    .admin-content [class*="quickmenu"],
    /* Menus added after the audit under names the convention above doesn't catch:
       Files rows/folders (sf-menu), partner commissions (ptd-menu), availability row
       menu (avm-menu, opens UPWARD on desktop), task-board column menu (tb-menu). */
    .admin-content .sf-menu,
    .admin-content .ptd-menu,
    .admin-content .avm-menu,
    .admin-content .tb-menu {
        position: fixed !important;
        left: 10px !important; right: 10px !important;
        top: auto !important; bottom: 10px !important;
        width: auto !important; min-width: 0 !important; max-width: none !important;
        max-height: 70vh; overflow-y: auto;
        border-radius: 14px;
        box-shadow: 0 -10px 40px rgba(15, 23, 42, .28);
        padding: 6px;
        z-index: 2000;
    }
    .admin-content [class*="ctx-item"],
    .admin-content [class*="action-menu-item"],
    .admin-content [class*="quickmenu-item"],
    .admin-content .exm-panel > *,
    .admin-content [class*="ctx-menu"] > button,
    .admin-content [class*="ctx-menu"] > a,
    .admin-content .sf-menu-item,
    .admin-content .ptd-menu-item,
    .admin-content .avm-menu-item,
    .admin-content .tb-menu-item {
        padding: 13px 14px !important; font-size: .95rem !important;
        border-radius: 10px; white-space: normal !important; text-align: left;
    }
    .admin-content [class*="ctx-divider"],
    .admin-content [class*="menu-divider"] { margin: 4px 0 !important; }

    /* ── 2. Filter toolbars & control rows ──────────────────────────────── */
    .admin-content .card-body .d-flex { flex-wrap: wrap; }
    .admin-content .card-body .d-flex.justify-content-between { gap: 10px; }
    /* label+control pairs: let the control take the rest of the row */
    .admin-content .card-body .d-flex.align-items-center > .form-select,
    .admin-content .card-body .d-flex.align-items-center > .form-control {
        width: auto !important; flex: 1 1 140px; min-width: 0;
    }
    /* Bootstrap filter grids (row g-2 + col-auto) stack to one control per line */
    .admin-content .row.g-2 > .col-auto,
    .admin-content .row.g-3 > .col-auto { flex: 1 1 100%; max-width: 100%; }
    .admin-content .row.g-2 > .col-auto .form-select,
    .admin-content .row.g-2 > .col-auto .form-control,
    .admin-content .row.g-3 > .col-auto .form-select,
    .admin-content .row.g-3 > .col-auto .form-control { width: 100% !important; }
    .admin-content .col-auto.ms-auto { margin-left: 0 !important; }

    /* ── 3. Page headers ────────────────────────────────────────────────── */
    .admin-content > .d-flex.justify-content-between,
    .admin-content .ap-head { flex-wrap: wrap; gap: 10px; }
    .admin-content .ap-h1 { font-size: 20px; }
    .admin-content .mh-actions { flex-wrap: wrap; justify-content: flex-start; }

    /* ── 4. Touch targets & spacing ─────────────────────────────────────── */
    .admin-content .btn { min-height: 38px; }
    .admin-content .btn-sm { min-height: 34px; }
    .admin-content .form-select, .admin-content .form-control { min-height: 38px; font-size: 16px; }
    .admin-content .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
    .admin-content .nav-tabs .nav-link { white-space: nowrap; }

    /* ── 5. Audit fixes (full sweep of all 135 admin pages) ─────────────────
       Each rule below closes a class of breakage found by reading every page,
       not by reacting to one screenshot. Page counts are how many pages the
       rule repairs. */

    /* colspan rows — empty states, group/date bands, expander & detail rows.
       admin-mobile.js deliberately skips labelling them (cell count ≠ header
       count), but they were still being laid out on the card's 2-col grid,
       where colspan means nothing: the content sat in a ~155px left column
       with the right half blank. Affects ~35 pages incl. the DEFAULT
       date-grouped Orders view and the shared DataTable's no-records row. */
    .admin-content table.mh-mtable tbody tr:has(> td[colspan]) {
        display: block; padding: 0; border: 0; border-radius: 0;
        background: transparent; box-shadow: none;
    }
    .admin-content table.mh-mtable tbody td[colspan] {
        grid-column: 1 / -1; display: block; width: 100%; padding: 12px 0;
    }
    .admin-content table.mh-mtable tbody td[colspan]::before { display: none; }

    /* Inline truncation (style="white-space:nowrap;max-width:280px") beats a
       class-based rule, so cells kept ellipsising to ~4 words inside a 155px
       track — and a phone has no hover tooltip to recover the text. ~17 pages. */
    .admin-content table.mh-mtable tbody td {
        white-space: normal !important;
        max-width: none !important;
        min-width: 0 !important;
        overflow: visible; text-overflow: clip;
    }

    /* Long unbreakable tokens outside tables (webhook URLs, request ids, magic
       links) widened their container and were then clipped by the page-level
       overflow guard, with no way to scroll to them. ~10 pages. */
    .admin-content .card-body,
    .admin-content .card-footer,
    .admin-content .modal-body { overflow-wrap: anywhere; min-width: 0; }
    .admin-content .modal-body dd,
    .admin-content .modal-body code,
    .admin-content .card-body code,
    .admin-content .card-footer code { overflow-wrap: anywhere; min-width: 0; }
    .admin-content .card-body img,
    .admin-content .modal-body img { max-width: 100%; height: auto; }
    .admin-content pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
    .admin-content .modal-body pre { max-height: 40vh; }

    /* The toolbar-wrap rule only covered .card-body, so flex rows in card
       HEADERS and FOOTERS never wrapped — and cards with overflow:hidden
       clipped them instead of scrolling (e.g. the instructor payout total). */
    .admin-content .card-header,
    .admin-content .card-header > .d-flex,
    .admin-content .card-footer,
    .admin-content .card-footer > .d-flex { flex-wrap: wrap; gap: 8px; }

    /* Page toolbars built as a bare .d-flex (not .justify-content-between) and
       custom action clusters that declare flex:0 0 auto (can't shrink). */
    .admin-content > .d-flex { flex-wrap: wrap; gap: 10px; }
    .admin-content .cd-actions,
    .admin-content .sd-actions,
    .admin-content .ai-toolbar { flex-wrap: wrap; flex: 1 1 auto; }

    /* Inputs/selects/input-groups sitting directly in a flex toolbar. */
    .admin-content .card-body .d-flex > .form-control,
    .admin-content .card-body .d-flex > .form-select,
    .admin-content .card-body .d-flex > .input-group {
        width: auto !important; flex: 1 1 140px; min-width: 0;
    }

    /* Multi-button action cells: keep the buttons on one line in the card
       corner and reserve room so they never overlap the title. */
    .admin-content table.mh-mtable tbody td.mh-actions {
        display: flex; gap: 4px; align-items: center;
        justify-content: flex-end; flex-wrap: nowrap; max-width: 116px;
    }
    .admin-content table.mh-mtable tbody tr:has(td.mh-actions > :nth-child(2)) td.mh-title {
        padding-right: 124px;
    }

    /* Unlabelled, non-title, non-action cells carry no meaning on a card.
       [colspan] is explicitly exempt: those cells ARE the content of group
       bands / empty states / expander rows, and this selector outranks the
       colspan rule above, so without the exemption the date bands and the
       "no records" message disappear entirely. */
    .admin-content table.mh-mtable tbody td:not(.mh-title):not(.mh-actions):not([data-label]):not([colspan]) { display: none; }

    /* Segmented view switchers stack instead of overflowing. */
    .admin-content .mode-toggle { flex-direction: column; }
    .admin-content .mode-toggle .btn-check + .btn:not(:first-of-type) {
        margin-left: 0; margin-top: 8px; border-radius: var(--ae-r) !important;
    }

    /* Category rails (Services / Packages): a 220px fixed side rail with its
       own 520px scroll box strands the list on a phone. */
    .admin-content .cat-panel { width: 100% !important; position: static; }
    .admin-content .cat-panel-list {
        max-height: none; overflow-y: visible;
        display: flex; flex-wrap: wrap; gap: 6px;
    }

    /* ── 6. Cards inside modals ─────────────────────────────────────────────
       Two things made the summary/preview steps read as a jumble on a phone:
       (a) desktop alignment classes survived cardification — a `.text-end`
           or `.text-center` cell put its value on the far side of the card
           while its label sat left, so a badge floated alone mid-card;
       (b) the panel had its OWN max-height scroll box nested inside the
           modal's scroll, so the second occurrence was always clipped. */

    /* One reading edge for every field. Actions stay right — they're a control,
       not a value — and colspan bands keep whatever the page intended. */
    .admin-content table.mh-mtable tbody td[data-label] { text-align: left !important; }
    .admin-content table.mh-mtable tbody td.mh-actions { text-align: right !important; }
    /* A column with a blank header would otherwise render an empty label gap. */
    .admin-content table.mh-mtable tbody td[data-label=""]::before { display: none; }

    /* Let a modal's own scroll do the scrolling: no nested scroll traps. */
    .admin-content .modal-body .table-responsive,
    .admin-content .modal-content .table-responsive {
        max-height: none !important; overflow-y: visible !important;
    }
    .admin-content .modal-content .table-responsive > table.mh-mtable thead.sticky-top { display: none; }

    /* Modal chrome: full-bleed dialog and a footer whose buttons stay reachable. */
    .admin-content .modal-dialog,
    .admin-content .modal-dialog.modal-lg,
    .admin-content .modal-dialog.modal-xl { margin: 8px; max-width: calc(100vw - 16px); }
    .admin-content .modal-body { max-height: 74vh; overflow-y: auto; }
    .admin-content .modal-footer { flex-wrap: wrap; gap: 8px; }
    .admin-content .modal-footer > .btn { flex: 1 1 auto; }

    /* ── 7. Page-specific mobile treatments (from the full-page audit) ──────
       Each of these is a layout the generic card/toolbar rules cannot repair. */

    /* AI Insights: the tab strip is inline-flex with no wrap, so the 4th tab
       ("Ask AI") was clipped and unreachable. Same treatment .cd-tabs has. */
    .admin-content .ai-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
    .admin-content .ai-tab { flex: 0 0 auto; white-space: nowrap; }
    /* …and its Ask-AI pane stacked a 540px rail above a 520px thread, burying
       the composer ~1100px down behind two scroll traps. */
    .admin-content .ai-session-list { max-height: 240px; }
    .admin-content .ai-chat-thread { max-height: none; }

    /* Webhook logs: a 40vh and a 60vh scroller stacked in one modal ate the
       whole screen and pushed the footer out of reach. */
    .admin-content .wh-pre { max-height: 200px; }
    .admin-content .wh-pre-tall { max-height: 240px; }

    /* Live activity: inline padding on the drill-down cell ate 58px of width;
       the nested 240px request list becomes a plain list (already capped to 20). */
    .admin-content .la-drill-cell { padding: 12px 12px 14px !important; }
    .admin-content .la-req-list { max-height: none; overflow: visible; }

    /* Contracts: studio-authored HTML flows with the page instead of sitting in
       its own scroller right where the accept + signature controls are. */
    .admin-content .agreement-body { max-height: none !important; overflow: visible; }
    .admin-content .agreement-body img { max-width: 100%; height: auto; }
    .admin-content .agreement-body table { display: block; overflow-x: auto; }

    /* AI-drafted email previews: keep the 600px email markup in its own scroller
       rather than letting it widen the card. */
    .admin-content .ret-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Sent-log / notification email previews are fixed ~600px table layouts:
       pan them instead of squeezing them into 374px. */
    .admin-content .email-preview { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-content .email-preview > iframe { width: 600px !important; max-width: none; height: 60vh; }

    /* Messages inbox: one pane at a time. The thread pane owns the screen once a
       conversation is picked; both panes drop their fixed heights so the page
       has a single scroll axis. */
    .admin-content .msg-pane-list,
    .admin-content .msg-pane-thread { min-height: 0 !important; }
    .admin-content .msg-pane-list .msg-scroll,
    .admin-content .msg-pane-thread .msg-scroll { max-height: none !important; overflow: visible !important; }
    .admin-content .msg-has-selection .msg-pane-list { display: none; }
    .admin-content .msg-back-btn { display: inline-flex !important; }

    /* Challenges: the workflow board is absolutely-positioned nodes on a
       100vh canvas panned with mouse events — inoperable on touch. The list
       view carries the same information, so the board and its toggle are
       hidden and a note points at the desktop. */
    .admin-content .wf-only { display: none !important; }
    .admin-content .wf-mobile-note { display: block !important; }

    /* Availability cards: reveal the low-attendance explanation (no tooltips on touch). */
    .admin-content .av-autocancel-why{
        display:block; margin-top:3px; font-size:0.75rem; line-height:1.35;
        color:var(--ae-text-muted);
    }

    /* Overrides ONLY — the base rules for these live outside this media query. A finger needs
       a real target, so the run-anyway / undo actions grow past the 6px-tall card typography. */
    .admin-content .av-keep-btn{ padding:7px 13px; font-size:.7rem; }
    .admin-content .av-keep-undo{ padding:7px 2px; font-size:.7rem; }
    .admin-content .av-keeping{ font-size:0.75rem; padding:4px 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Business Finder — board + table
   Everything here resolves from the --ae-* tokens, so the module follows the
   studio's chosen admin theme (teal / indigo / plum) rather than pinning hex.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Segmented board/table switch (matches the .ai-tab treatment) ─────── */
.admin-wrapper .bf-seg{ display:inline-flex; gap:2px; padding:3px; background:var(--ae-chip); border-radius:var(--ae-r); }
.admin-wrapper .bf-seg button{ font-family:var(--ae-font); font-size:0.8125rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border:0; border-radius:8px; background:transparent; color:var(--ae-text-muted); cursor:pointer; appearance:none; -webkit-appearance:none; transition:background .15s ease, color .15s ease, box-shadow .15s ease; }
.admin-wrapper .bf-seg button:hover{ color:var(--ae-text); }
.admin-wrapper .bf-seg button.is-on{ background:var(--ae-surface); color:var(--ae-text); box-shadow:0 1px 2px rgba(20,18,14,.07); }
.admin-wrapper .bf-seg-sm button{ font-size:0.75rem; padding:4px 10px; }

/* ── Enrichment nudge ─────────────────────────────────────────────────────
   Offers the step a freshly swept list needs, at the moment it needs it.
   Tinted rather than neutral: it is an invitation to act, and it disappears
   for good once there is nothing left to fetch. */
.admin-wrapper .bf-nudge{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--ae-pill-info-bg, var(--ae-chip)); border:1px solid var(--ae-pill-info-dot); border-radius:12px; }
.admin-wrapper .bf-nudge > .bi{ font-size:1.25rem; color:var(--ae-pill-info-dot); flex-shrink:0; }

/* ── Outreach stats strip ─────────────────────────────────────────────────
   A row of plain figures, not cards: this sits above the board and must not
   compete with it for attention. Scrolls on narrow screens rather than wrapping
   into a block that pushes the lanes below the fold. */
.admin-wrapper .bf-stats{ display:flex; align-items:stretch; gap:22px; padding:12px 16px; background:var(--ae-chip); border:1px solid var(--ae-track); border-radius:12px; overflow-x:auto; }
.admin-wrapper .bf-stat{ flex:0 0 auto; min-width:0; }
.admin-wrapper .bf-stat-n{ font-size:1.125rem; font-weight:600; color:var(--ae-text); line-height:1.2; white-space:nowrap; }
.admin-wrapper .bf-stat-of{ font-size:.8125rem; font-weight:500; color:var(--ae-text-subtle); }
.admin-wrapper .bf-stat-l{ font-size:.75rem; color:var(--ae-text-subtle); white-space:nowrap; }
.admin-wrapper .bf-stat-sep{ flex:0 0 auto; width:1px; background:var(--ae-track); }
/* They answered. The one chip here that earns a colour - it changes what you do next. */
.admin-wrapper .bf-chip-replied{ background:var(--ae-chip); border:1px solid var(--ae-pill-ok-dot); color:var(--ae-pill-ok-dot); }

/* ── Outreach log ─────────────────────────────────────────────────────────
   The "how did we reach this one" block in the record modal. Recessed like the
   lanes so it reads as a distinct action area inside the form above it. */
.admin-wrapper .bf-log{ padding:12px 14px; background:var(--ae-chip); border:1px solid var(--ae-track); border-radius:12px; }
/* Last-touch chip on a board card. Neutral, not coloured: it is a fact about
   the record, not a state to be alarmed by. */
.admin-wrapper .bf-chip-touch{ background:var(--ae-surface); border:1px solid var(--ae-track); color:var(--ae-text-subtle); }

/* ── Board filters ────────────────────────────────────────────────────────
   A recessed row under the toolbar, matching the lane surface, so the filters
   read as a control strip attached to the board rather than another card. */
.admin-wrapper .bf-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; padding:10px 14px; margin-bottom:14px; background:var(--ae-chip); border:1px solid var(--ae-track); border-radius:12px; }
.admin-wrapper .bf-filter-group{ display:inline-flex; align-items:center; gap:9px; min-width:0; }
.admin-wrapper .bf-filter-label{ font-size:0.8125rem; font-weight:600; color:var(--ae-text-muted); white-space:nowrap; }
.admin-wrapper .bf-filter-showing{ font-size:0.8125rem; color:var(--ae-text-subtle); white-space:nowrap; }
/* Marks a filter left on. Sits on the toolbar toggle, which is the only part of the
   filter UI still visible once the row is collapsed. */
.admin-wrapper .bf-filter-dot{ display:inline-block; width:6px; height:6px; margin-left:6px; border-radius:var(--ae-r-pill); background:var(--ae-primary); vertical-align:middle; }


/* ── Board lanes ──────────────────────────────────────────────────────────
   The lane is a RECESSED surface so the white cards read as sitting inside a
   container. Without it the stacks float on the page background and the
   columns only become visible while a card is being dragged. */
.admin-wrapper .bf-lane{ display:flex; flex-direction:column; min-width:0; background:var(--ae-chip); border:1px solid var(--ae-track); border-radius:14px; overflow:hidden; }
.admin-wrapper .bf-lane-edge{ height:3px; flex-shrink:0; }   /* stage colour: lanes are told apart by hue, not only position */
.admin-wrapper .bf-lane-head{ display:flex; align-items:center; gap:9px; padding:12px 14px 10px; }
.admin-wrapper .bf-lane-dot{ width:9px; height:9px; border-radius:var(--ae-r-pill); flex-shrink:0; }
.admin-wrapper .bf-lane-name{ font-size:0.9375rem; font-weight:600; color:var(--ae-text); }
.admin-wrapper .bf-lane-count{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 7px; border-radius:var(--ae-r-pill); background:var(--ae-surface); border:1px solid var(--ae-track); color:var(--ae-text-subtle); font-size:0.75rem; font-weight:600; }

/* Per-column outreach: the one letter this column writes with, and a one-click send to the
   businesses in it. The name flexes and truncates so a long letter name does not push the edit
   and send controls out of the lane. */
.admin-wrapper .bf-lane-outreach{ display:flex; align-items:center; gap:6px; padding:0 14px 10px; }
.admin-wrapper .bf-lane-tmpl-name{ flex:1 1 auto; min-width:0; display:inline-flex; align-items:center; gap:6px; font-size:0.8125rem; color:var(--ae-text-subtle); }
.admin-wrapper .bf-lane-tmpl-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-wrapper .bf-lane-tmpl-edit{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; height:30px; width:28px; border-radius:var(--ae-r); color:var(--ae-text-muted); text-decoration:none; }
.admin-wrapper .bf-lane-tmpl-edit:hover{ color:var(--ae-primary); background:var(--ae-chip); }
.admin-wrapper .bf-lane-send{ flex-shrink:0; margin-left:auto; display:inline-flex; align-items:center; justify-content:center; height:30px; width:32px; padding:0; }
.admin-wrapper .bf-lane-send:disabled{ opacity:.45; }
/* No letter yet: an invitation to write one, not a dead control. */
.admin-wrapper .bf-lane-tmpl-empty{ flex:1 1 auto; min-width:0; display:inline-flex; align-items:center; font-size:0.8125rem; color:var(--ae-text-muted); text-decoration:none; }
.admin-wrapper .bf-lane-tmpl-empty:hover{ color:var(--ae-primary); }

.admin-wrapper .bf-lane-body{ padding:0 10px 10px; min-height:420px; border-radius:12px; transition:background .15s ease, box-shadow .15s ease; }
/* Stronger than it would need to be on the page background — it has to read
   against the lane's own tint. */
.admin-wrapper .bf-lane-body.is-over{ background:color-mix(in srgb, var(--ae-primary) 13%, transparent); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--ae-primary) 42%, transparent); }
.admin-wrapper .bf-lane-stack{ display:flex; flex-direction:column; gap:10px; max-height:min(62vh, 620px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--ae-track) transparent; }
.admin-wrapper .bf-lane-stack::-webkit-scrollbar{ width:8px; }
.admin-wrapper .bf-lane-stack::-webkit-scrollbar-thumb{ background:var(--ae-track); border-radius:var(--ae-r-pill); }
.admin-wrapper .bf-lane-empty{ border:1.5px dashed var(--ae-soft); border-radius:12px; padding:26px 16px; text-align:center; color:var(--ae-text-muted); font-size:0.8125rem; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.admin-wrapper .bf-card{ background:var(--ae-surface); border:1px solid var(--ae-track); border-radius:var(--ae-r-card); box-shadow:0 1px 2px rgba(20,18,14,.05); padding:13px 14px; cursor:grab; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.admin-wrapper .bf-card:hover{ border-color:var(--ae-soft); box-shadow:0 2px 4px rgba(20,18,14,.05), 0 14px 30px -14px rgba(20,18,14,.16); transform:translateY(-1px); }
.admin-wrapper .bf-card:active{ cursor:grabbing; }
.admin-wrapper .bf-card.is-dragging{ opacity:.38; transform:rotate(-1.2deg) scale(.99); box-shadow:none; }
.admin-wrapper .bf-card-name{ font-size:0.9375rem; font-weight:600; line-height:1.3; color:var(--ae-text); text-wrap:pretty; }
/* Address truncates: it is orientation, not the point of the card. The full
   value is in the details modal. */
.admin-wrapper .bf-card-addr{ margin-top:3px; font-size:0.8125rem; color:var(--ae-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Contact chips ────────────────────────────────────────────────────── */
.admin-wrapper .bf-chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--ae-r-pill); font-size:0.75rem; line-height:1.4; }
.admin-wrapper .bf-chip-plain{ background:var(--ae-bg-soft); border:1px solid var(--ae-line-soft); color:var(--ae-text-subtle); }
.admin-wrapper .bf-chip-web{ background:var(--ae-pill-info-bg); border:1px solid color-mix(in srgb, var(--ae-pill-info-dot) 22%, transparent); color:var(--ae-pill-info-fg); font-weight:500; }
/* "No website" is a lead-quality signal, not missing data — so it gets a
   colour rather than a blank. */
.admin-wrapper .bf-chip-noweb{ background:var(--ae-pill-warn-bg); border:1px solid color-mix(in srgb, var(--ae-pill-warn-dot) 26%, transparent); color:var(--ae-pill-warn-fg); font-weight:500; }

/* ── Quiet row actions ────────────────────────────────────────────────────
   Revealed on hover: a destructive action should not be the loudest thing on
   every card in the list. Kept visible on focus so it stays keyboard-reachable. */
.admin-wrapper .bf-actions{ opacity:0; transition:opacity .15s ease; }
.admin-wrapper .bf-card:hover .bf-actions,
.admin-wrapper .bf-card:focus-within .bf-actions,
.admin-wrapper .bf-row:hover .bf-actions,
.admin-wrapper .bf-row:focus-within .bf-actions{ opacity:1; }
.admin-wrapper .bf-iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--ae-text-muted); cursor:pointer; appearance:none; transition:background .12s ease, color .12s ease; }
.admin-wrapper .bf-iconbtn:hover{ background:var(--ae-hover); color:var(--ae-text); }
.admin-wrapper .bf-iconbtn.is-danger:hover{ background:var(--ae-pill-danger-bg); color:var(--ae-danger); }

/* ── Stage pill (table + modal) ───────────────────────────────────────── */
.admin-wrapper .bf-stage{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--ae-r-pill); font-size:0.75rem; font-weight:600; white-space:nowrap; }
.admin-wrapper .bf-stage-dot{ width:7px; height:7px; border-radius:var(--ae-r-pill); flex-shrink:0; }

/* ── Table view ───────────────────────────────────────────────────────── */
.admin-wrapper .bf-table{ width:100%; border-collapse:collapse; font-size:0.875rem; }
.admin-wrapper .bf-table th{ font-size:0.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ae-text-muted); text-align:left; padding:11px 14px; background:var(--ae-bg-soft); border-bottom:1px solid var(--ae-border); white-space:nowrap; user-select:none; }
.admin-wrapper .bf-table th.is-sortable{ cursor:pointer; }
.admin-wrapper .bf-table th.is-sortable:hover{ color:var(--ae-text-subtle); }
.admin-wrapper .bf-table td{ padding:11px 14px; border-bottom:1px solid var(--ae-line-soft); vertical-align:middle; }
.admin-wrapper .bf-row{ cursor:pointer; transition:background .12s ease; }
.admin-wrapper .bf-row:hover{ background:var(--ae-hover); }
.admin-wrapper .bf-row.is-picked{ background:color-mix(in srgb, var(--ae-primary) 6%, transparent); }

/* ── Bulk selection bar ────────────────────────────────────────────────── */
.admin-wrapper .bf-bulk{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; margin-bottom:12px; background:var(--ae-pill-info-bg); border:1px solid color-mix(in srgb, var(--ae-pill-info-dot) 22%, transparent); border-radius:12px; }
.admin-wrapper .bf-bulk-count{ font-size:0.875rem; font-weight:600; color:var(--ae-pill-info-fg); }

@media (max-width: 991.98px){
    /* One lane at a time below lg: three columns at phone width is three
       unreadable slivers, and dragging between them is not realistic anyway. */
    .admin-wrapper .bf-board{ grid-template-columns:1fr !important; }
    .admin-wrapper .bf-lane-body{ min-height:0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Task boards — the studio's own to-do boards (tb-)
   Reuses the Business Finder lane/card/table rules (bf-) and adds only what a
   task needs that a business does not: priority, a due chip, an assignee
   avatar, a column menu and a progress bar on the index card.
   ══════════════════════════════════════════════════════════════════════════ */
.admin-wrapper .tb-board-card{ position:relative; overflow:hidden; }
.admin-wrapper .tb-board-card.is-archived{ opacity:.7; }
.admin-wrapper .tb-board-edge{ height:3px; }
.admin-wrapper .tb-clamp2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.admin-wrapper .tb-progress{ height:6px; border-radius:var(--ae-r-pill); background:var(--ae-track); overflow:hidden; }
.admin-wrapper .tb-progress-bar{ height:100%; border-radius:var(--ae-r-pill); transition:width .25s ease; }

/* Avatars: 24px rounded squares, the admin's thumbnail shape. Initials when no picture. */
.admin-wrapper .tb-avatars{ display:flex; gap:4px; }
.admin-wrapper .tb-avatar{ width:24px; height:24px; border-radius:7px; object-fit:cover; border:1px solid var(--ae-track); background:var(--ae-chip); }
.admin-wrapper .tb-avatar-initials{ display:inline-flex; align-items:center; justify-content:center; font-size:.625rem; font-weight:700; color:var(--ae-text-subtle); letter-spacing:.02em; }

/* Chips: priority and due. Only high/urgent and overdue/today earn a colour. */
.admin-wrapper .tb-chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--ae-r-pill); font-size:0.75rem; line-height:1.4; font-weight:500; }
.admin-wrapper .tb-chip-low{ background:var(--ae-bg-soft); border:1px solid var(--ae-line-soft); color:var(--ae-text-subtle); }
.admin-wrapper .tb-chip-normal{ background:var(--ae-bg-soft); border:1px solid var(--ae-line-soft); color:var(--ae-text-subtle); }
.admin-wrapper .tb-chip-high{ background:var(--ae-pill-warn-bg); border:1px solid color-mix(in srgb, var(--ae-pill-warn-dot) 26%, transparent); color:var(--ae-pill-warn-fg); }
.admin-wrapper .tb-chip-urgent{ background:var(--ae-pill-danger-bg); border:1px solid color-mix(in srgb, var(--ae-danger) 26%, transparent); color:var(--ae-danger); }
.admin-wrapper .tb-chip-overdue{ background:var(--ae-pill-danger-bg); border:1px solid color-mix(in srgb, var(--ae-danger) 26%, transparent); color:var(--ae-danger); font-weight:600; }
.admin-wrapper .tb-chip-today{ background:var(--ae-pill-warn-bg); border:1px solid color-mix(in srgb, var(--ae-pill-warn-dot) 26%, transparent); color:var(--ae-pill-warn-fg); font-weight:600; }
/* Typed cards (RFI, punch item…): the kind's badge with its reference ("RFI-012"), coloured by the kind. */
.admin-wrapper .tb-type{ --tc:var(--ae-primary); display:inline-flex; align-items:center; gap:5px; padding:2px 8px; margin-bottom:4px; border-radius:var(--ae-r-pill); font-size:0.7rem; font-weight:700; letter-spacing:.03em; color:var(--tc); background:color-mix(in srgb, var(--tc) 12%, transparent); }
.admin-wrapper .tb-fields{ padding:.75rem; border:1px solid var(--ae-border); border-radius:12px; background:var(--ae-bg-soft); }

/* Cards: a priority stripe on the left edge; done cards recede. */
.admin-wrapper .tb-card{ border-left-width:3px; }
.admin-wrapper .tb-card.tb-prio-high{ border-left-color:var(--ae-pill-warn-dot); }
.admin-wrapper .tb-card.tb-prio-urgent{ border-left-color:var(--ae-danger); }
.admin-wrapper .tb-card.is-done .bf-card-name{ text-decoration:line-through; color:var(--ae-text-muted); }
.admin-wrapper .tb-card .bf-card-addr{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* Lane tools: add-a-card and the column menu, pushed to the right of the header. */
.admin-wrapper .tb-lane-tools{ margin-left:auto; display:inline-flex; align-items:center; gap:2px; }
.admin-wrapper .tb-menu-wrap{ position:relative; }
.admin-wrapper .tb-menu{ position:absolute; right:0; top:calc(100% + 4px); z-index:20; min-width:180px; padding:6px; background:var(--ae-surface); border:1px solid var(--ae-border); border-radius:12px; box-shadow:0 12px 32px -12px rgba(20,18,14,.28), 0 2px 6px rgba(20,18,14,.06); }
.admin-wrapper .tb-menu-item{ display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border:0; border-radius:8px; background:transparent; color:var(--ae-text); font-size:0.8125rem; text-align:left; cursor:pointer; appearance:none; }
.admin-wrapper .tb-menu-item:hover{ background:var(--ae-hover); }
.admin-wrapper .tb-menu-item:disabled{ opacity:.4; cursor:default; }
.admin-wrapper .tb-menu-item.is-danger{ color:var(--ae-danger); }
.admin-wrapper .tb-menu-item.is-danger:hover{ background:var(--ae-pill-danger-bg); }
.admin-wrapper .tb-menu-divider{ height:1px; margin:4px 2px; background:var(--ae-line-soft); }

/* Colour swatches in the column / board editors. */
.admin-wrapper .tb-swatch{ width:26px; height:26px; border-radius:8px; border:2px solid transparent; cursor:pointer; padding:0; box-shadow:inset 0 0 0 1px rgba(20,18,14,.12); }
.admin-wrapper .tb-swatch.is-on{ border-color:var(--ae-text); }

/* Link pickers in the task modal. */
.admin-wrapper .tb-linked{ display:flex; align-items:center; gap:8px; min-height:31px; padding:4px 10px; background:var(--ae-chip); border:1px solid var(--ae-track); border-radius:8px; font-size:0.8125rem; }
.admin-wrapper .tb-linked .btn-close-sm{ font-size:.6rem; }
.admin-wrapper .tb-picker{ margin-top:4px; max-height:180px; overflow-y:auto; background:var(--ae-surface); border:1px solid var(--ae-border); border-radius:10px; box-shadow:0 8px 24px -12px rgba(20,18,14,.25); }
.admin-wrapper .tb-picker-item{ display:flex; justify-content:space-between; gap:8px; width:100%; padding:7px 10px; border:0; background:transparent; font-size:0.8125rem; text-align:left; cursor:pointer; appearance:none; }
.admin-wrapper .tb-picker-item:hover{ background:var(--ae-hover); }

/* Dashlet: one row per board with a slim progress bar. */
.admin-wrapper .tb-dash-bar{ width:90px; height:5px; border-radius:var(--ae-r-pill); background:var(--ae-track); overflow:hidden; display:inline-block; vertical-align:middle; }
.admin-wrapper .tb-dash-bar > span{ display:block; height:100%; }

/* An empty lane invites a task into THAT column rather than only reading as a drop target.
   Same dashed plate as .bf-lane-empty, but a real button so it is keyboard-reachable. */
.admin-wrapper .tb-lane-add{ width:100%; background:transparent; cursor:pointer; appearance:none; -webkit-appearance:none; font:inherit; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.admin-wrapper .tb-lane-add:hover{ border-color:var(--ae-primary); color:var(--ae-primary); background:color-mix(in srgb, var(--ae-primary) 5%, transparent); }

/* A linked file's thumbnail inside the task modal chip and the picker rows. */
.admin-wrapper .tb-card-photo{ display:block; width:100%; height:132px; margin:0 0 10px; object-fit:cover; border-radius:var(--ae-r); background:var(--ae-chip); pointer-events:none; }
.admin-wrapper .tb-photos{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.admin-wrapper .tb-photos a{ flex:0 0 auto; display:block; }
.admin-wrapper .tb-photos img{ display:block; height:220px; max-width:100%; border-radius:var(--ae-r); object-fit:cover; border:1px solid var(--ae-track); background:var(--ae-chip); }
.admin-wrapper .tb-file-thumb{ width:22px; height:22px; border-radius:5px; object-fit:cover; border:1px solid var(--ae-track); flex-shrink:0; }

/* Checklist rows inside the task modal. A ticked step recedes rather than disappears —
   the point of a routine is seeing what is already done. */
.admin-wrapper .tb-step{ display:flex; align-items:center; gap:9px; padding:5px 0; font-size:0.875rem; }
.admin-wrapper .tb-step + .tb-step{ border-top:1px solid var(--ae-line-soft); }
.admin-wrapper .tb-step-done{ text-decoration:line-through; color:var(--ae-text-muted); }
/* Every step ticked: the chip earns a colour, because that is the state worth spotting. */
.admin-wrapper .tb-chip-steps-done{ background:var(--ae-pill-ok-bg); border:1px solid color-mix(in srgb, var(--ae-pill-ok-dot) 26%, transparent); color:var(--ae-pill-ok-fg); font-weight:600; }

/* New-dashboard dialog: the chosen focus template */
.dashlet-tpl-item { position: relative; }
.dashlet-tpl-item.is-selected { border-color: var(--ae-primary); background: color-mix(in srgb, var(--ae-primary) 7%, transparent); }
.dashlet-tpl-check { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ae-primary); font-size: 16px; }

/* ── SearchSelect (Components/Shared/SearchSelect.razor) ─────────────────────────────────────
   A searchable, grouped replacement for data-driven <select>s. The trigger reuses .form-select
   so it lines up with every other control; the panel is absolute (not fixed) so it anchors
   inside transformed cards and modal bodies. */
.ss { position: relative; min-width: 0; }
.ss-trigger { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; overflow: hidden; background-color: var(--ae-surface); color: var(--ae-text); }
.ss-trigger:disabled { background-color: var(--ae-bg); color: var(--ae-text-muted); }
.ss-trigger.is-open { border-color: var(--ae-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ae-primary) 14%, transparent); }
.ss-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-placeholder { color: var(--ae-text-muted); }
.ss-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ss-backdrop { position: fixed; inset: 0; z-index: 1069; background: transparent; }
.ss-panel { position: absolute; left: 0; top: calc(100% + 4px); z-index: 1070; min-width: 100%; width: max-content; max-width: min(420px, 92vw);
    background: var(--ae-surface); border: 1px solid var(--ae-border); border-radius: var(--ae-r); box-shadow: 0 16px 34px -12px rgba(20,18,14,.22), 0 2px 6px rgba(20,18,14,.06);
    display: flex; flex-direction: column; overflow: hidden; }
.ss-panel.is-up { top: auto; bottom: calc(100% + 4px); }
.ss-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--ae-border); color: var(--ae-text-muted); }
.ss-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ae-text); font-size: .9rem; }
.ss-list { max-height: 280px; overflow-y: auto; padding: 4px 0; }
.ss-group { padding: 8px 12px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ae-text-muted); }
.ss-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border: 0; background: transparent; text-align: left; color: var(--ae-text); font-size: .9rem; cursor: pointer; }
.ss-opt:hover, .ss-opt.is-active { background: color-mix(in srgb, var(--ae-primary) 9%, transparent); }
.ss-opt.is-selected { font-weight: 600; }
.ss-opt.is-disabled { opacity: .5; cursor: default; }
.ss-opt-all { color: var(--ae-text-muted); }
.ss-opt-create { color: var(--ae-primary); font-weight: 600; border-top: 1px solid var(--ae-border); }
.ss-opt-create .bi { flex: 0 0 auto; }
.ss-opt-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-opt-hint { flex: 0 0 auto; font-size: .78rem; color: var(--ae-text-muted); }
.ss-check { color: var(--ae-primary); flex: 0 0 auto; }
.ss-empty { padding: 12px; font-size: .85rem; color: var(--ae-text-muted); text-align: center; }
.ss-sm .ss-opt { padding: 6px 12px; font-size: .85rem; }

/* ── PaymentMethodPicker (Components/Shared/PaymentMethodPicker.razor) ── */
.pmp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pmp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid var(--ae-border); border-radius: 999px;
    background: var(--ae-surface); color: var(--ae-text); font-size: .85rem; line-height: 1.2; cursor: pointer; }
.pmp-chip:hover { border-color: color-mix(in srgb, var(--ae-primary) 45%, var(--ae-border)); }
.pmp-chip.is-on { border-color: var(--ae-primary); background: color-mix(in srgb, var(--ae-primary) 10%, var(--ae-surface)); color: var(--ae-primary); font-weight: 600; }
.pmp-chip:disabled { opacity: .55; cursor: default; }
.pmp-inst { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pmp-inst .form-select { width: auto; min-width: 130px; }
.pmp-compact .pmp-chip { padding: 4px 10px; font-size: .8rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   "Create from a template" — shared picker (TemplateModal / TemplateGallery).
   One look on every page that offers templates (services, packages, events,
   tags, coupons, challenges, campaigns, legal terms).
   ═══════════════════════════════════════════════════════════════════════════ */
.tg-backdrop { position: fixed; inset: 0; z-index: 1060; background: rgba(15,23,42,.55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: 24px; }
.tg-modal { width: min(1120px, 100%); height: min(88vh, 940px); display: flex; flex-direction: column; overflow: hidden;
    background: var(--ae-surface); border-radius: 18px;
    box-shadow: 0 24px 48px -12px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.06);
    animation: tg-pop .2s cubic-bezier(0.34,1.56,0.64,1); }
.tg-modal.tg-compact { width: min(760px, 100%); height: auto; max-height: 88vh; }
@keyframes tg-pop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
.tg-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--ae-border); }
.tg-head-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ae-accent-soft); color: var(--ae-primary); font-size: 20px; }
.tg-head-text { flex: 1; min-width: 0; }
.tg-title { font-size: 1.1rem; font-weight: 700; color: var(--ae-text); line-height: 1.25; }
.tg-subtitle { font-size: .85rem; color: var(--ae-text-muted); }
.tg-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tg-step { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--ae-text-muted); }
.tg-step-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--ae-border); font-size: 0.75rem; background: var(--ae-surface); }
.tg-step.is-active { color: var(--ae-primary); }
.tg-step.is-active .tg-step-dot { border-color: var(--ae-primary); background: var(--ae-primary); color: var(--ae-accent-ink); }
.tg-step.is-done .tg-step-dot { border-color: var(--ae-success); background: var(--ae-success); color: #fff; }
.tg-step-sep { width: 14px; height: 1.5px; background: var(--ae-border); }
.tg-close { width: 34px; height: 34px; border-radius: 9px; border: none; background: transparent; color: var(--ae-text-muted);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tg-close:hover { background: var(--ae-bg); color: var(--ae-text); }
@media (max-width: 760px) { .tg-steps .tg-step-label, .tg-step-sep { display: none; } .tg-backdrop { padding: 0; } .tg-modal { height: 100%; border-radius: 0; } }

.tg-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 22px; border-bottom: 1px solid var(--ae-border); }
.tg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--ae-border);
    background: var(--ae-surface); color: var(--ae-text-subtle); font-size: .82rem; font-weight: 600; cursor: pointer; line-height: 1.2; }
.tg-chip:hover { border-color: color-mix(in srgb, var(--ae-primary) 45%, var(--ae-border)); }
.tg-chip.is-on { border-color: var(--ae-primary); background: var(--ae-accent-soft); color: var(--ae-primary); }
.tg-chip .tg-chip-count { font-size: 0.75rem; opacity: .75; }
.tg-search { position: relative; margin-left: auto; min-width: 220px; }
.tg-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ae-text-muted); font-size: .85rem; }
.tg-search input { padding-left: 32px; border-radius: 999px; }
@media (max-width: 760px) { .tg-search { margin-left: 0; width: 100%; } }

.tg-body { flex: 1; overflow-y: auto; padding: 18px 22px 26px; background: var(--ae-bg); }
.tg-group-title { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--ae-text-muted); }
.tg-group-title:first-child { margin-top: 2px; }
.tg-group-title .tg-group-dot { width: 8px; height: 8px; border-radius: 50%; }
.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }

.tg-card { position: relative; display: flex; flex-direction: column; gap: 8px; text-align: left; width: 100%;
    padding: 16px; border-radius: 14px; border: 1.5px solid var(--ae-border); background: var(--ae-surface); color: var(--ae-text);
    cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.tg-card:hover { border-color: color-mix(in srgb, var(--ae-primary) 50%, var(--ae-border)); transform: translateY(-1px);
    box-shadow: 0 6px 18px -10px rgba(15,23,42,.25); }
.tg-card.is-on { border-color: var(--ae-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ae-primary) 16%, transparent); }
.tg-card.is-have { cursor: default; opacity: .62; transform: none; box-shadow: none; }
.tg-card.is-have:hover { border-color: var(--ae-border); }
.tg-card-top { display: flex; align-items: flex-start; gap: 12px; }
.tg-card-icon { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.tg-card-title { font-size: .95rem; font-weight: 700; line-height: 1.3; padding-right: 26px; }
.tg-card-desc { font-size: .8rem; line-height: 1.45; color: var(--ae-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tg-card-check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ae-border);
    background: var(--ae-surface); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; color: transparent; }
.tg-card.is-on .tg-card-check { background: var(--ae-primary); border-color: var(--ae-primary); color: var(--ae-accent-ink); }
.tg-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tg-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
    background: var(--ae-bg); border: 1px solid var(--ae-border); color: var(--ae-text-subtle); white-space: nowrap; }
.tg-pill.is-accent { background: var(--ae-accent-soft); border-color: transparent; color: var(--ae-primary); }
.tg-pill.is-warm { background: color-mix(in srgb, var(--ae-warning) 14%, transparent); border-color: transparent; color: var(--ae-warning); }
.tg-pill.is-ok { background: color-mix(in srgb, var(--ae-success) 14%, transparent); border-color: transparent; color: var(--ae-success); }
.tg-empty { text-align: center; padding: 48px 12px; color: var(--ae-text-muted); }
.tg-empty i { font-size: 2rem; display: block; margin-bottom: 8px; }

.tg-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--ae-border); background: var(--ae-surface); }
.tg-foot-info { flex: 1; min-width: 0; font-size: .88rem; color: var(--ae-text-subtle); }
.tg-foot-info strong { color: var(--ae-text); }

/* Adjust step: one card per picked item */
.tg-bulk { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px 16px; margin-bottom: 14px;
    border-radius: 14px; background: var(--ae-surface); border: 1px solid var(--ae-border); }
.tg-bulk .tg-bulk-title { font-weight: 700; font-size: .88rem; margin-right: auto; align-self: center; }
.tg-item { border-radius: 14px; background: var(--ae-surface); border: 1px solid var(--ae-border); padding: 16px; margin-bottom: 12px; }
.tg-item-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tg-item-name { flex: 1; min-width: 0; font-weight: 700; font-size: 1rem; border: 1.5px solid transparent; border-radius: 8px; padding: 4px 8px;
    background: transparent; color: var(--ae-text); }
.tg-item-name:hover { border-color: var(--ae-border); }
.tg-item-name:focus { outline: none; border-color: var(--ae-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ae-primary) 12%, transparent); }
.tg-item-remove { border: none; background: transparent; color: var(--ae-text-muted); width: 30px; height: 30px; border-radius: 8px; }
.tg-item-remove:hover { background: var(--ae-bg); color: var(--ae-danger); }
.tg-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; }
.tg-field label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--ae-text-muted); margin-bottom: 4px; }
.tg-field .form-control, .tg-field .form-select { font-size: .88rem; }
.tg-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--ae-bg); border: 1px solid var(--ae-border); gap: 2px; }
.tg-seg button { border: none; background: transparent; border-radius: 8px; padding: 5px 10px; font-size: .8rem; font-weight: 600; color: var(--ae-text-subtle); white-space: nowrap; }
.tg-seg button.is-on { background: var(--ae-surface); color: var(--ae-primary); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.tg-times { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.tg-times-label { font-size: 0.75rem; font-weight: 600; color: var(--ae-text-muted); margin-right: 4px; }
.tg-slot { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600;
    background: var(--ae-accent-soft); color: var(--ae-primary); }
.tg-slot button { border: none; background: transparent; color: inherit; opacity: .7; padding: 0 4px; line-height: 1; }
.tg-slot button:hover { opacity: 1; }
.tg-slot-add { display: inline-flex; align-items: center; gap: 4px; }
.tg-slot-add .form-select, .tg-slot-add .form-control { font-size: .8rem; padding: 3px 8px; height: 30px; width: auto; }
.tg-day { min-width: 42px; padding: 4px 8px; border-radius: 8px; border: 1.5px solid var(--ae-border); background: var(--ae-surface);
    font-size: .78rem; font-weight: 600; color: var(--ae-text-muted); }
.tg-day.is-on { border-color: var(--ae-primary); background: var(--ae-accent-soft); color: var(--ae-primary); }
.tg-more { margin-top: 10px; }
.tg-more summary { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--ae-text-subtle); list-style: none; }
.tg-more summary::-webkit-details-marker { display: none; }
.tg-more textarea { margin-top: 8px; font-size: .85rem; }

/* Pay step: package rows */
.tg-pkg { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; background: var(--ae-surface);
    border: 1.5px solid var(--ae-border); margin-bottom: 8px; transition: border-color .12s ease; }
.tg-pkg.is-on { border-color: var(--ae-primary); }
.tg-pkg.is-have { opacity: .6; }
.tg-pkg-main { flex: 1; min-width: 0; }
.tg-pkg-name { font-weight: 700; font-size: .92rem; }
.tg-pkg-detail { font-size: .78rem; color: var(--ae-text-muted); }
.tg-pkg-price { width: 130px; }
.tg-pkg-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: var(--ae-accent-soft); color: var(--ae-primary); }
.tg-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 12px;
    background: var(--ae-surface); border: 1px solid var(--ae-border); margin-bottom: 8px; }

/* Done step */
.tg-result { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--ae-surface);
    border: 1px solid var(--ae-border); margin-bottom: 8px; }
.tg-result-icon { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
.tg-result.is-ok .tg-result-icon { background: color-mix(in srgb, var(--ae-success) 15%, transparent); color: var(--ae-success); }
.tg-result.is-skip .tg-result-icon { background: var(--ae-bg); color: var(--ae-text-muted); }
.tg-result.is-bad .tg-result-icon { background: color-mix(in srgb, var(--ae-danger) 14%, transparent); color: var(--ae-danger); }
.tg-result-notes { font-size: .78rem; color: var(--ae-text-muted); margin-top: 2px; }
.tg-result-notes .is-warn { color: var(--ae-warning); }
.tg-hero { text-align: center; padding: 26px 12px 18px; }
.tg-hero-icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
    font-size: 30px; background: color-mix(in srgb, var(--ae-success) 14%, transparent); color: var(--ae-success); }
.tg-working { text-align: center; padding: 70px 12px; color: var(--ae-text-subtle); }

/* The entry button on list pages */
.tg-open-btn { display: inline-flex; align-items: center; gap: 6px; }
/* ── First-run empty state (FirstRunEmpty.razor) ─────────────────────────────────────────────
   Sample card on the left, title + points + create button on the right. .fre-art-* are the
   building blocks each page's sample card is made of. */
.fre { display: flex; align-items: center; justify-content: center; gap: 56px; flex-wrap: wrap;
    background: var(--ae-surface); border-radius: 16px; box-shadow: var(--ae-shadow); padding: 48px 32px; margin-top: 8px; }
.fre-art { position: relative; width: 320px; max-width: 100%; }
.fre-art-card { position: relative; z-index: 1; background: var(--ae-surface); border: 1px solid var(--ae-border);
    border-radius: 14px; padding: 18px; box-shadow: 0 18px 40px -16px rgba(15,23,42,.25); }
.fre-art-back { position: absolute; z-index: 0; inset: 14px -14px -14px 14px; background: var(--ae-bg); box-shadow: none; }
.fre-art-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fre-art-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--ae-primary) 12%, transparent); color: var(--ae-primary); flex-shrink: 0; overflow: hidden; }
.fre-art-icon.is-round { border-radius: 50%; }
.fre-art-bar { height: 9px; border-radius: 5px; background: var(--ae-text); opacity: .75; margin-bottom: 6px; }
.fre-art-bar-light { opacity: .2; margin-bottom: 0; }
.fre-art-title { font-weight: 600; color: var(--ae-text); font-size: .95rem; line-height: 1.25; }
.fre-art-sub { font-size: .75rem; color: var(--ae-text-muted); }
.fre-art-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; text-align: center; }
.fre-art-stats.is-2 { grid-template-columns: repeat(2, 1fr); }
.fre-art-stats > div { background: var(--ae-bg); border-radius: 10px; padding: 8px 4px; }
.fre-art-n { font-weight: 700; font-size: 1.1rem; color: var(--ae-text); }
.fre-art-l { font-size: 0.75rem; color: var(--ae-text-muted); }
.fre-art-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fre-art-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ae-bg);
    border-radius: 10px; padding: 8px 10px; font-size: .8rem; color: var(--ae-text); }
.fre-art-row .fre-art-sub { white-space: nowrap; }
.fre-art-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fre-art-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; padding: 3px 9px; border-radius: 999px;
    background: var(--ae-bg); color: var(--ae-text-muted); }
.fre-copy { max-width: 400px; }
.fre-points { list-style: none; padding: 0; margin: 0 0 24px; }
.fre-points li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; color: var(--ae-text); }
.fre-points i { color: var(--ae-primary); margin-top: 2px; }
@media (max-width: 575.98px) { .fre { padding: 32px 16px; gap: 32px; } }

/* ---- Breadcrumb above pages reached through a hub or a Settings tab (AdminLayout) ---- */
.admin-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--ae-text-muted);
    margin-bottom: 0.5rem;
}
.admin-crumb a { color: var(--ae-text-muted); text-decoration: none; }
.admin-crumb a:hover { color: var(--ae-primary); text-decoration: underline; }
.admin-crumb .bi { font-size: 0.75rem; }
.admin-crumb span { color: var(--ae-text); }
.admin-crumb .admin-crumb-back { margin-right: 6px; padding: 2px 10px; font-size: 0.78rem; }
.admin-crumb .admin-crumb-back .bi { font-size: 0.75rem; }

/* ---- Menu search results (NavSearchResults): page, where it lives, match highlighted ---- */
.navsr { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.navsr-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--ae-text); text-decoration: none; }
.navsr-row:hover, .navsr-row.is-active { background: var(--ae-accent-soft); color: var(--ae-text); }
.navsr-icon { font-size: 0.95rem; color: var(--ae-primary); margin-top: 2px; flex-shrink: 0; }
.navsr-text { display: flex; flex-direction: column; min-width: 0; }
.navsr-title { font-size: 0.85rem; font-weight: 600; line-height: 1.25; }
.navsr-title mark { background: var(--ae-pill-warn-bg); color: inherit; padding: 0 1px; border-radius: 3px; }
.navsr-where { font-size: 0.75rem; color: var(--ae-text-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Collapsed sidebar: instant labels, hub flyouts, search popover (js/nav-flyout.js) ---- */
.nav-collapsed-search { display: none; width: calc(100% - 1rem); border: 0; background: transparent; text-align: left; cursor: pointer; }
.admin-sidebar.collapsed .nav-collapsed-search { display: flex; }
.nav-divider { height: 1px; background: var(--sidebar-hover); margin: 8px 0.9rem; }

.nav-tip {
    position: fixed; z-index: 1080; pointer-events: none;
    padding: 5px 10px; border-radius: 6px;
    background: var(--ae-text); color: var(--ae-surface);
    font-size: 0.78rem; font-weight: 600; white-space: nowrap;
    box-shadow: var(--ae-shadow);
    opacity: 0; transform: translateX(-4px); transition: opacity .08s, transform .08s;
}
.nav-tip.is-open { opacity: 1; transform: none; }

.nav-flyout {
    display: none; position: fixed; z-index: 1075;
    min-width: 230px; max-width: 300px; max-height: calc(100vh - 16px); overflow-y: auto;
    padding: 6px; border-radius: 10px;
    background: var(--ae-surface); border: 1px solid var(--ae-border); box-shadow: var(--ae-shadow);
}
.nav-flyout.is-open { display: block; }
.nav-flyout-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 10px; border-radius: 7px;
    font-weight: 700; font-size: 0.88rem; color: var(--ae-text); text-decoration: none;
}
.nav-flyout-head:hover { background: var(--ae-hover); color: var(--ae-primary); }
.nav-flyout-group {
    padding: 8px 10px 3px; font-size: 0.75rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ae-text-muted);
}
.nav-flyout-link {
    display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 7px;
    font-size: 0.84rem; color: var(--ae-text); text-decoration: none;
}
.nav-flyout-link i { color: var(--ae-text-muted); font-size: 0.95rem; }
.nav-flyout-link:hover, .nav-flyout-link:focus-visible { background: var(--ae-hover); color: var(--ae-text); outline: none; }
.nav-flyout-link.active { background: var(--ae-accent-soft); color: var(--ae-primary); font-weight: 600; }
.nav-flyout-link.active i { color: var(--ae-primary); }

.nav-search-pop-backdrop { position: fixed; inset: 0; z-index: 1076; }
.nav-search-pop {
    position: fixed; z-index: 1077; top: 12px; left: 76px; width: 360px; max-width: calc(100vw - 92px);
    max-height: calc(100vh - 24px); overflow-y: auto;
    padding: 8px; border-radius: 12px;
    background: var(--ae-surface); border: 1px solid var(--ae-border); box-shadow: var(--ae-shadow);
}
.nav-search-pop .nav-search { margin: 0 0 4px; }
/* The popover's search box lives inside the collapsed sidebar, where .nav-search is hidden. */
.admin-sidebar.collapsed .nav-search-pop .nav-search { display: flex; }
.admin-sidebar.collapsed .nav-search-pop .navsr-title,
.admin-sidebar.collapsed .nav-search-pop .navsr-where { display: block; }

/* ── Page tab bar (shared) ──
   The usual underline tabs, made readable: every label (and icon) the same dark 0.95rem text,
   a visible base line; the open tab gets a light primary background, primary text and a 3px
   primary underline. Customers could not
   read the old faint 0.9rem grey tabs. Every page-level tab set uses this (customer detail,
   customer edit, …). Second level = .ae-subtabs soft pills under the bar. */
.ae-tabbar {
    /* One row, no visible scrollbar: a bar that does not fit scrolls sideways — a round arrow on the
       side(s) with more tabs, swipe, trackpad or mouse wheel (js/tabbar-scroll.js sets
       data-tb-left/right). The base line is an inset shadow, not a border the tabs hang 1px into —
       that overflowed the bar and showed a scrollbar beside the tabs. */
    --tb-gap: 4px; --tb-pad-x: 0px;   /* a page that pads the bar sideways sets --tb-pad-x to match */
    display: flex; gap: var(--tb-gap); overflow-x: auto; overflow-y: hidden; margin-bottom: 16px;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ae-text) 15%, var(--ae-border));
    scrollbar-width: none;
}
.ae-tabbar::-webkit-scrollbar { display: none; }
/* The arrows are the bar's own ::before/::after, pinned to its edges (sticky) over the tabs; the
   negative margin keeps the tabs where they were. A click on one scrolls the bar (tabbar-scroll.js). */
.ae-tabbar[data-tb-left]::before,
.ae-tabbar[data-tb-right]::after {
    position: sticky; z-index: 2; flex: 0 0 30px; width: 30px; height: 30px; align-self: center;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--ae-surface); border: 1px solid var(--ae-border); box-shadow: 0 2px 8px rgba(15, 23, 42, .16);
    font-family: "bootstrap-icons"; font-size: 13px; line-height: 1; color: var(--ae-text); cursor: pointer;
}
.ae-tabbar[data-tb-left]::before { content: "\F284"; left: calc(4px - var(--tb-pad-x)); margin-right: calc(-30px - var(--tb-gap)); }
.ae-tabbar[data-tb-right]::after { content: "\F285"; right: calc(4px - var(--tb-pad-x)); margin-left: calc(-30px - var(--tb-gap)); }
.ae-tabbar-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
    border: none; background: none; padding: 10px 14px;
    border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0;
    font-size: .95rem; font-weight: 500; color: var(--ae-text); cursor: pointer; white-space: nowrap;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.ae-tabbar-tab .bi { font-size: 1rem; margin: 0 !important; color: inherit; }
.ae-tabbar-tab:hover { background: var(--ae-hover, color-mix(in srgb, var(--ae-text) 5%, transparent)); }
.ae-tabbar-tab:focus-visible { outline: 2px solid var(--ae-primary); outline-offset: -2px; }
.ae-tabbar-tab.active { color: var(--ae-primary); border-bottom-color: var(--ae-primary); font-weight: 600;
                        background: color-mix(in srgb, var(--ae-primary) 12%, transparent); }
.ae-tabbar-badge {
    padding: 1px 7px; border-radius: 999px; font-size: .78rem; font-weight: 600;
    background: color-mix(in srgb, var(--ae-warning) 15%, transparent); color: var(--ae-warning);
}
.ae-tabbar-tab .ae-tabbar-done { color: var(--ae-success); font-size: .85rem; }
.ae-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 16px; }
.ae-subtab {
    border: 1px solid color-mix(in srgb, var(--ae-text) 18%, var(--ae-border));
    background: var(--ae-surface); color: var(--ae-text); border-radius: 999px;
    padding: 5px 14px; font-size: .9rem; font-weight: 500; cursor: pointer;
}
.ae-subtab:hover { border-color: var(--ae-primary); }
.ae-subtab:focus-visible { outline: 2px solid var(--ae-primary); outline-offset: 2px; }
.ae-subtab.active {
    background: color-mix(in srgb, var(--ae-primary) 12%, var(--ae-surface));
    border-color: var(--ae-primary); color: var(--ae-primary); font-weight: 600;
}