/* =============================================
   Najah Tek CRM — Glass theme, v2 (Mohamed's pick, 2026-10-14)
   Reference: E:\Najah-CRM\tools-local\glass\v2\dashboard-v2.html (its style is
   the spec) — static mockups, not app code.

   A SWITCH, not a rewrite. includes/header.php loads this file, the two
   display fonts and the v2 shell markup (logo lockup, dock) only when .env has
   UI_GLASS=1 and puts data-ui="glass" on <html>. Missing or 0: none of it, and
   the page is byte-identical to before. Every rule below starts with
   html[data-ui="glass"] (tests/test_ui_glass_switch.php checks each selector).

   Look only: colours, surfaces, borders, radii, shadows, blur, fonts, the
   visual order of the top bar's buttons. No query, permission, id, name or
   script behaviour depends on anything here.

   Rules of the road:
   - backdrop-filter on the big containers only (sidebar, dock, cards, panels,
     menus, modals) — never per row or per list item.
   - No gradient as the background of a box that holds text: the sweep's
     contrast ruler cannot read through a gradient and would stop measuring
     that text. Highlights are inset shadows; glows are pseudo-elements.
   - The text colours are solid and measured (the mockup's alpha inks read
     under AA on glass over the glow).
   - The primary button is #2F7F27 / #276B20 in BOTH themes: white on it is
     5.0:1 (D-b item 5). The mockup's #2f9e44 is 3.4:1. In light it stays flat.
   - Menus, dialogs and drawers sit over other text, so they are nearly opaque.
   ============================================= */

/* ---------------------------------------------
   1) TOKENS
   --------------------------------------------- */
html[data-ui="glass"] {
    --font-ui: 'IBM Plex Sans Arabic', 'Cairo', 'Inter', system-ui, sans-serif;
    --font-display: 'Readex Pro', 'IBM Plex Sans Arabic', 'Cairo', sans-serif;

    --g-bg: #050d09;
    --g-glow-a: #1d7a3a; --g-glow-b: #0e5a52; --g-glow-c: #7a5c17;
    --g-glow-a-op: 0.75;  --g-glow-b-op: 0.70;  --g-glow-c-op: 0.28;
    --g-surface: rgba(255, 255, 255, 0.05);
    --g-surface-strong: rgba(255, 255, 255, 0.085);
    --g-surface-top: rgba(255, 255, 255, 0.12);
    --g-surface-field: rgba(255, 255, 255, 0.06);
    --g-stroke: rgba(255, 255, 255, 0.10);
    --g-stroke-hi: rgba(255, 255, 255, 0.26);
    --g-top-light: rgba(255, 255, 255, 0.16);
    --g-hl: inset 0 1px 0 var(--g-top-light);
    --g-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    --g-shadow-sm: 0 12px 30px rgba(0, 0, 0, 0.30);
    --g-opaque: rgba(12, 22, 16, 0.96);
    --g-scrim: rgba(2, 8, 5, 0.55);
    --g-blur: blur(26px) saturate(150%);
    --g-blur-strong: blur(32px) saturate(160%);
    --g-radius-xl: 28px;
    --g-radius: 22px;
    --g-radius-md: 16px;
    --g-radius-sm: 14px;
    --g-brand: #56cf63;
    --g-brand-soft: rgba(86, 207, 99, 0.14);
    --g-btn: #2F7F27;
    --g-btn-hover: #276B20;

    /* The app's own tokens, re-pointed. */
    --bg-dark: var(--g-bg);
    --bg-card-hover: var(--g-surface-strong);
    --bg-elevated: rgba(255, 255, 255, 0.07);
    --border: var(--g-stroke);
    --border-strong: var(--g-stroke-hi);
    --border-subtle: rgba(255, 255, 255, 0.07);
    --text-primary: #EDF6EF;
}
/* The glass's own secondary and muted text in the dark theme (D-b item 8, Mohamed's pick
   2026-10-16, option 3). Under html[data-ui="glass"] (0,1,1) they never applied: theme-najah's
   :root:not([data-theme="light"]) (0,2,0) won, and the muted #6C8173 read 4.33:1 on the
   tables' #101811 (AA is 4.5). Muted #8FA597 = 6.89, secondary #B4C6BA = 10.10. The light
   theme keeps its own (below). */
html[data-ui="glass"]:not([data-theme="light"]) {
    --text-secondary: #B4C6BA;
    --text-muted: #8FA597;
}
html[data-ui="glass"][data-theme="light"] {
    --g-bg: #EEF2EA;
    --g-glow-a: #BFE5B5; --g-glow-b: #BFE0DB; --g-glow-c: #F6DCB2;
    --g-glow-a-op: 0.90;  --g-glow-b-op: 0.70;  --g-glow-c-op: 0.60;
    --g-surface: rgba(255, 255, 255, 0.62);
    --g-surface-strong: rgba(255, 255, 255, 0.80);
    --g-surface-top: #FFFFFF;
    --g-surface-field: rgba(255, 255, 255, 0.72);
    --g-stroke: rgba(23, 58, 35, 0.08);
    --g-stroke-hi: rgba(23, 58, 35, 0.16);
    --g-top-light: rgba(255, 255, 255, 0.95);
    --g-shadow: 0 1px 2px rgba(40, 60, 30, 0.06), 0 18px 40px rgba(60, 80, 40, 0.12);
    --g-shadow-sm: 0 1px 2px rgba(40, 60, 30, 0.05), 0 10px 24px rgba(60, 80, 40, 0.10);
    --g-opaque: rgba(255, 255, 255, 0.97);
    --g-scrim: rgba(20, 40, 28, 0.28);
    --g-brand: #2F7F27;
    --g-brand-soft: rgba(47, 127, 39, 0.10);

    --bg-dark: var(--g-bg);
    --bg-card-hover: var(--g-surface-strong);
    --bg-elevated: rgba(255, 255, 255, 0.78);
    --border: var(--g-stroke);
    --border-strong: var(--g-stroke-hi);
    --border-subtle: rgba(23, 58, 35, 0.06);
    --text-primary: #10231A;
    --text-secondary: #475569;
    /* #64748B read 4.5:1 on white; on glass over the glow it slid under. */
    --text-muted: #56657A;
    /* The same for the small coloured pills (4.30–4.45 on glass, the first ON sweep). */
    --status-warning-text: #9A4708;
    --status-orange-text: #A8380A;
    --status-purple-text: #6D28D9;
}

/* ---------------------------------------------
   2) CANVAS — one solid colour (the contrast ruler reads it) + the glow
   --------------------------------------------- */
html[data-ui="glass"] body,
html[data-ui="glass"][data-theme="light"] body {
    background: var(--g-bg);
    background-image: none;
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
}
html[data-ui="glass"] .atmospheric-bg,
html[data-ui="glass"][data-theme="light"] .atmospheric-bg { opacity: 1; }
html[data-ui="glass"] .atmospheric-bg__blob,
html[data-ui="glass"][data-theme="light"] .atmospheric-bg__blob {
    border-radius: 50%;
    filter: blur(100px);
}
html[data-ui="glass"] .atmospheric-bg__blob--a,
html[data-ui="glass"][data-theme="light"] .atmospheric-bg__blob--a {
    background: var(--g-glow-a);
    opacity: var(--g-glow-a-op);
    width: 680px; height: 680px;
    top: -220px; right: -120px;
}
html[data-ui="glass"] .atmospheric-bg__blob--b,
html[data-ui="glass"][data-theme="light"] .atmospheric-bg__blob--b {
    background: var(--g-glow-b);
    opacity: var(--g-glow-b-op);
    width: 620px; height: 620px;
    bottom: -260px; left: 4%;
}
html[data-ui="glass"] .atmospheric-bg__blob--c,
html[data-ui="glass"][data-theme="light"] .atmospheric-bg__blob--c {
    background: var(--g-glow-c);
    opacity: var(--g-glow-c-op);
    width: 420px; height: 420px;
    top: 42%; left: 38%;
}
/* A fine grain over the glow, so the blur does not band. */
html[data-ui="glass"] .atmospheric-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* ---------------------------------------------
   3) TYPE — Readex Pro for headings and figures, IBM Plex Sans Arabic for text
   --------------------------------------------- */
html[data-ui="glass"] h1,
html[data-ui="glass"] h2,
html[data-ui="glass"] h3,
html[data-ui="glass"] .page-header-v2__title,
html[data-ui="glass"] .panel__title,
html[data-ui="glass"] .card-header h3,
html[data-ui="glass"] .tab-pill__count,
html[data-ui="glass"] .badge,
html[data-ui="glass"] .stat-card .stat-value,
html[data-ui="glass"] .stat-card-v2__value,
html[data-ui="glass"] .kpi-card__value,
html[data-ui="glass"] .hero-stat strong,
html[data-ui="glass"] .hero-greeting h1 { font-family: var(--font-display); }
html[data-ui="glass"] .page-header-v2__title { font-weight: 600; letter-spacing: -0.01em; }
/* Buttons keep the text font: Readex is wider, and at 375 «تطبيق الفلاتر» /
   «Apply Filters» ran 3–4px out of their box (the ON sweep). */
/* The greeting's green on the light glass: #46A63A was 2.96:1 at 35px. */
html[data-ui="glass"][data-theme="light"] .hero-greeting h1 span { color: var(--g-brand); }
/* Figures: big and light (the mockup's 36px / 300). */
html[data-ui="glass"] .stat-card .stat-value,
html[data-ui="glass"] .stat-card-v2__value,
html[data-ui="glass"] .kpi-card__value {
    font-weight: 300;
    letter-spacing: -0.01em;
    font-feature-settings: "tnum";
}

/* ---------------------------------------------
   4) THE GLASS SURFACE — the big containers
   --------------------------------------------- */
html[data-ui="glass"] .card,
html[data-ui="glass"] .panel,
html[data-ui="glass"] .chart-card,
html[data-ui="glass"] .stat-card,
html[data-ui="glass"] .stat-card-v2,
html[data-ui="glass"] .kpi-card,
html[data-ui="glass"] .hero-stat,
html[data-ui="glass"] .dashboard-hero,
html[data-ui="glass"] .filter-row,
html[data-ui="glass"] .filters-bar,
html[data-ui="glass"] .data-table-wrap,
html[data-ui="glass"] .table-container,
html[data-ui="glass"] .kanban__column,
html[data-ui="glass"] .pipeline-column,
html[data-ui="glass"][data-theme="light"] .card,
html[data-ui="glass"][data-theme="light"] .panel,
html[data-ui="glass"][data-theme="light"] .chart-card,
html[data-ui="glass"][data-theme="light"] .stat-card,
html[data-ui="glass"][data-theme="light"] .stat-card-v2,
html[data-ui="glass"][data-theme="light"] .kpi-card,
html[data-ui="glass"][data-theme="light"] .hero-stat,
html[data-ui="glass"][data-theme="light"] .dashboard-hero,
html[data-ui="glass"][data-theme="light"] .filter-row,
html[data-ui="glass"][data-theme="light"] .filters-bar,
html[data-ui="glass"][data-theme="light"] .data-table-wrap,
html[data-ui="glass"][data-theme="light"] .table-container,
html[data-ui="glass"][data-theme="light"] .kanban__column,
html[data-ui="glass"][data-theme="light"] .pipeline-column {
    background-color: var(--g-surface);
    border: 1px solid var(--g-stroke);
    border-radius: var(--g-radius);
    box-shadow: var(--g-hl), var(--g-shadow-sm);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
}
html[data-ui="glass"] .card,
html[data-ui="glass"] .panel,
html[data-ui="glass"] .chart-card,
html[data-ui="glass"] .dashboard-hero { border-radius: var(--g-radius-xl); }
html[data-ui="glass"] .card:hover,
html[data-ui="glass"] .panel:hover,
html[data-ui="glass"] .stat-card:hover,
html[data-ui="glass"] .stat-card-v2:hover,
html[data-ui="glass"] .kpi-card:hover,
html[data-ui="glass"] .hero-stat:hover,
html[data-ui="glass"][data-theme="light"] .card:hover,
html[data-ui="glass"][data-theme="light"] .panel:hover,
html[data-ui="glass"][data-theme="light"] .stat-card:hover,
html[data-ui="glass"][data-theme="light"] .stat-card-v2:hover,
html[data-ui="glass"][data-theme="light"] .kpi-card:hover,
html[data-ui="glass"][data-theme="light"] .hero-stat:hover {
    border-color: var(--g-stroke-hi);
    box-shadow: var(--g-hl), var(--g-shadow);
}
/* The old green bar on top of stat cards fights the glass edge. */
html[data-ui="glass"] .stat-card::before { opacity: 0; }
/* Heads: a hairline, not a slab. */
html[data-ui="glass"] .panel__header,
html[data-ui="glass"] .card-header { border-bottom-color: var(--border-subtle); }
/* Icon squares: a small pane of glass with the colour inside. */
html[data-ui="glass"] .icon-square,
html[data-ui="glass"] .stat-card .stat-icon {
    border: 1px solid var(--g-stroke);
    border-radius: 11px;
    box-shadow: var(--g-hl);
}

/* ---------------------------------------------
   5) SIDEBAR — the v3 frame (C5): only the menu. Its sections are an
   accordion (includes/glass_nav.php draws it, assets/js/glass-nav.js opens and
   closes it); the logo and the user moved to the dock. A floating pane the
   screen's height on a desktop, a near-opaque drawer on phones.
   --------------------------------------------- */
html[data-ui="glass"] .sidebar,
html[data-ui="glass"][data-theme="light"] .sidebar {
    background-color: var(--g-surface);
    border-inline-end: 1px solid var(--g-stroke);
    -webkit-backdrop-filter: var(--g-blur-strong);
    backdrop-filter: var(--g-blur-strong);
}
/* On a desktop the pane is as tall as its menu (Mohamed: no empty glass under the
   last section — an agent with three sections gets a short card), never taller than
   the screen, and centred on the screen's height (Mohamed: not stuck at the top
   over a void). Both insets + auto margins centre a fixed box of its own height;
   a long menu fills the height and its open list scrolls. Opening a section grows
   the card from the middle both ways: glass-nav.js eases the list's height (the
   card's own «fit-content» height cannot be eased in CSS). */
@media (min-width: 769px) {
    html[data-ui="glass"] .sidebar {
        top: 16px;
        bottom: 16px;
        height: fit-content;
        max-height: calc(100vh - 32px);
        margin-block: auto;
        display: flex;
        flex-direction: column;
        inset-inline-start: 16px;
        width: calc(var(--sidebar-width) - 24px);
        border: 1px solid var(--g-stroke);
        border-radius: var(--g-radius-xl);
        box-shadow: var(--g-hl), var(--g-shadow);
        overflow: hidden;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    html[data-ui="glass"] .sidebar { width: 196px; }
}
@media (max-width: 768px) {
    html[data-ui="glass"] .sidebar,
    html[data-ui="glass"][data-theme="light"] .sidebar { background-color: var(--g-opaque); }
}

/* The menu fills the pane. The section heads never scroll away: only the open
   section's own list scrolls, when it is taller than the room the heads leave
   (the rule: at 1509×658, every head and the open section seen without
   scrolling — the sweep's «navfit» measures it). */
html[data-ui="glass"] .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 12px 10px 4px;
}
html[data-ui="glass"] .nav-acc {
    display: flex;
    flex-direction: column;
    flex: none;
    min-height: 0;
    margin: 0;
    padding: 0;
}
html[data-ui="glass"] .nav-acc.is-open { flex: 0 1 auto; }
html[data-ui="glass"] .nav-acc__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
}
html[data-ui="glass"] .nav-acc__head:hover { background: var(--g-surface); color: var(--text-primary); }
html[data-ui="glass"] .nav-acc__head:focus-visible { outline: 2px solid var(--g-brand); outline-offset: -2px; }
html[data-ui="glass"] .nav-acc__icon { width: 22px; flex: none; text-align: center; font-size: 15px; color: var(--text-muted); }
html[data-ui="glass"] .nav-acc__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Closed, a section shows the sum of its links' badges — drawn as a link's own badge
   (.nav-badge, §15); open, the links show theirs. No count of links beside it. */
html[data-ui="glass"] .nav-acc__sum { flex: none; }
html[data-ui="glass"] .nav-acc.is-open .nav-acc__sum { display: none; }
/* The arrow points into the menu's reading direction closed, down open. */
html[data-ui="glass"] .nav-acc__chev { flex: none; font-size: 11px; color: var(--text-muted); transform: rotate(-90deg); transition: transform 0.2s; }
html[data-ui="glass"][dir="rtl"] .nav-acc__chev { transform: rotate(90deg); }
html[data-ui="glass"] .nav-acc.is-open .nav-acc__chev,
html[data-ui="glass"][dir="rtl"] .nav-acc.is-open .nav-acc__chev { transform: none; color: var(--g-brand); }
html[data-ui="glass"] .nav-acc.is-open > .nav-acc__head { color: var(--text-primary); }
html[data-ui="glass"] .nav-acc.is-open .nav-acc__icon { color: var(--g-brand); }
html[data-ui="glass"] .nav-acc__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 2px 0 6px;
    margin-inline-start: 20px;
    padding-inline-start: 10px;
    border-inline-start: 1px solid var(--g-stroke-hi);
}
html[data-ui="glass"] .nav-acc__body[hidden] { display: none; }

html[data-ui="glass"] .nav-item {
    min-height: 36px;
    flex: none;
    padding-block: 0;
    border-radius: 12px;
    font-size: 13px;
    overflow: visible;
}
html[data-ui="glass"] .nav-item .icon { color: var(--text-muted); }
html[data-ui="glass"] .nav-item:hover { background: var(--g-surface); }
/* The current page: a pane of glass, its icon green, a lit bar on the section's line. */
html[data-ui="glass"] .nav-item.active,
html[data-ui="glass"][data-theme="light"] .nav-item.active,
html[data-ui="glass"]:not([data-theme="light"]) .nav-item.active {
    background: var(--g-surface-strong);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--g-stroke-hi), var(--g-hl);
}
html[data-ui="glass"] .nav-item.active .icon { color: var(--g-brand); }
html[data-ui="glass"] .nav-item::before,
html[data-ui="glass"][dir="rtl"] .nav-item::before {
    left: auto;
    right: auto;
    inset-inline-start: -11px;
    top: 9px;
    bottom: 9px;
    height: auto;
    width: 3px;
    border-radius: 3px;
    background: var(--g-brand);
    box-shadow: 0 0 10px var(--g-brand);
    transform: scaleY(0);
}
html[data-ui="glass"] .nav-item.active::before { transform: scaleY(1); }

/* The sidebar's foot: the version; on phones also the language link (the dock
   has no room for it there). */
html[data-ui="glass"] .nav-foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 10px 10px;
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--text-muted);
}
html[data-ui="glass"] .nav-foot__lang {
    display: none;
    width: 36px; height: 36px;
    place-items: center;
    border-radius: 11px;
    background: var(--g-surface);
    border: 1px solid var(--g-stroke);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
@media (max-width: 768px) {
    html[data-ui="glass"] .nav-foot__lang { display: grid; }
}

/* ---------------------------------------------
   6) THE DOCK — the v3 frame (C5): it floats at the BOTTOM, the width of what
   it holds, centred in the content area (beside the sidebar). Its order: the
   mark · the page (title, section) | search · today's chips · theme ·
   language · bell | the user (name, role, sign-out — the same POST form).
   --------------------------------------------- */
html[data-ui="glass"] .header,
html[data-ui="glass"][data-theme="light"] .header {
    position: fixed;
    top: auto;
    bottom: 14px;
    inset-inline-start: var(--sidebar-width);
    inset-inline-end: 16px;
    z-index: 60;
    width: fit-content;
    max-width: calc(100vw - var(--sidebar-width) - 32px);
    height: auto;
    min-height: 52px;
    margin: 0 auto;
    padding: 6px;
    gap: 8px;
    justify-content: flex-start;
    background: rgba(14, 30, 20, 0.72);
    border: 1px solid var(--g-stroke);
    border-radius: 20px;
    box-shadow: var(--g-hl), var(--g-shadow);
    -webkit-backdrop-filter: var(--g-blur-strong);
    backdrop-filter: var(--g-blur-strong);
}
html[data-ui="glass"][data-theme="light"] .header { background: rgba(255, 255, 255, 0.80); }
@media (min-width: 769px) and (max-width: 1024px) {
    html[data-ui="glass"] .header,
    html[data-ui="glass"][data-theme="light"] .header { inset-inline-start: 212px; max-width: calc(100vw - 228px); }
}
/* The page starts at the top now, and its last row clears the dock. */
html[data-ui="glass"] .page-content { padding-top: 16px; padding-bottom: 96px; }

html[data-ui="glass"] .header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
html[data-ui="glass"] .header-right { display: flex; align-items: center; gap: 8px; }
/* A hairline between the page and the tools, and before the user. */
html[data-ui="glass"] .header-right::before,
html[data-ui="glass"] .dock-me::before {
    content: "";
    width: 1px;
    height: 24px;
    flex: none;
    background: var(--g-stroke-hi);
}
html[data-ui="glass"] .header-right::before { order: 0; margin-inline-end: 2px; }
html[data-ui="glass"] .header-right > .header-search { order: 1; }
html[data-ui="glass"] .header-right > .dock-agenda { order: 2; }
html[data-ui="glass"] .header-right > .theme-toggle { order: 3; }
html[data-ui="glass"] .header-right > .lang-toggle { order: 4; }
html[data-ui="glass"] .header-right > div:has(#notifBtn) { order: 5; }
html[data-ui="glass"] .header-right > .dock-me { order: 7; }
/* The bar's own sign-out is the user's now (.dock-me); the old copy is not drawn.
   (That form is display:contents inline, so its button is hidden.) */
html[data-ui="glass"] .header-right > form[action$="logout.php"] button { display: none; }

html[data-ui="glass"] .dock-brand {
    width: 40px; height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--g-surface-strong);
    border: 1px solid var(--g-stroke-hi);
    box-shadow: var(--g-hl);
}
html[data-ui="glass"] .dock-brand img { width: 26px; height: 26px; }
html[data-ui="glass"] .dock-where { display: flex; align-items: center; min-width: 0; margin-inline-end: 4px; }
html[data-ui="glass"] .dock-where__icon { display: none; }
html[data-ui="glass"] .dock-where__text { min-width: 0; }
html[data-ui="glass"] body:has(.page-header-v2) .header .header-left .dock-where h1 { display: block; }
html[data-ui="glass"] .dock-where__text h1 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
    /* overflow:hidden clips at the padding box, and a 1.15 line is shorter than the glyphs: the dots under
       «ي» and the other low Arabic dots were cut off. Room above and below, given back by the same
       negative margin, so the dock's height and the subtitle's place stay as they were. */
    padding-block: .3em;
    margin-block: -.3em;
}
html[data-ui="glass"] .dock-where__text small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* The title once (D-b item 7), in the dock: where the page has its own header,
   the dock keeps the title and the header's title block goes (its crumbs are
   the dock's section line). The header's buttons stay. */
html[data-ui="glass"] .page-header-v2:not(.page-header-v2--own-title) .page-header-v2__main { display: none; }
/* …so a page header is just its buttons: none → no empty row; and on a desktop
   they sit at the end of the next row (the tabs, or the filters) instead of a
   row of their own (the reviewer, deals at 1509×658). Floated, the next row —
   a flex box, its own formatting context — makes room beside them. */
html[data-ui="glass"] .page-header-v2:not(.page-header-v2--own-title):not(:has(.page-header-v2__actions)) { display: none; }
/* A crumb is a link: on a phone, a finger-sized one (19px tall with the new font). */
@media (max-width: 768px) {
    html[data-ui="glass"] .page-header-v2__crumbs a { display: inline-flex; align-items: center; min-height: 36px; }
}
@media (min-width: 769px) {
    /* (:has() cannot hold another :has() — a relative chain instead.) */
    html[data-ui="glass"] .page-header-v2:not(.page-header-v2--own-title):has(+ .tab-pills, + .filter-row, + div > .tab-pills, + div > .filter-row, + form > .filter-row) {
        float: inline-end;
        margin: 0;
        margin-inline-start: 16px;
    }
    html[data-ui="glass"] .page-header-v2:not(.page-header-v2--own-title):has(+ .tab-pills, + .filter-row, + div > .tab-pills, + div > .filter-row, + form > .filter-row) + * + * { clear: both; }
}

html[data-ui="glass"] .header-btn {
    width: 38px; height: 38px;
    border-radius: 12px;
    background: var(--g-surface);
    border-color: var(--g-stroke);
}
html[data-ui="glass"] .header-btn:hover {
    background: var(--g-surface-strong);
    border-color: var(--g-stroke-hi);
    color: var(--text-primary);
}
/* app.js pins the «/» hint at right:14px in BOTH directions, and the search icon
   sits on the left in both (theme-najah moves it in RTL): physical padding, so
   the placeholder never runs under the hint (it did, «/حث…»). */
html[data-ui="glass"] .header-search input,
html[data-ui="glass"][dir="rtl"] .header-search input { padding-left: 38px; padding-right: 50px; }
html[data-ui="glass"] .header-search input,
html[data-ui="glass"] .header-search input:focus {
    height: 38px;
    width: 220px;
    border-radius: 12px;
    background: var(--g-surface);
    border-color: var(--g-stroke);
    font-size: 12px;
}
html[data-ui="glass"] .header-search input:focus { border-color: var(--g-brand); }

/* Theme: a sun|moon segment drawn on the same #themeToggle — app.js still swaps
   its icon and flips the theme; the swapped icon is just not shown. */
html[data-ui="glass"] .theme-toggle {
    width: auto;
    padding: 3px;
    gap: 0;
    display: inline-flex;
}
html[data-ui="glass"] .theme-toggle > i { display: none; }
html[data-ui="glass"] .theme-toggle::before,
html[data-ui="glass"] .theme-toggle::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    width: 30px; height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: var(--text-muted);
}
html[data-ui="glass"] .theme-toggle::before { content: "\f185"; }
html[data-ui="glass"] .theme-toggle::after { content: "\f186"; }
html[data-ui="glass"][data-theme="light"] .theme-toggle::before,
html[data-ui="glass"]:not([data-theme="light"]) .theme-toggle::after {
    background: var(--g-surface-top);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
html[data-ui="glass"][data-theme="light"] .theme-toggle::before { color: #9A4708; }
html[data-ui="glass"] .theme-toggle:hover i { transform: none; }

/* Language: ع | EN, the page's own one lit. The whole segment is the link. */
html[data-ui="glass"] .lang-toggle {
    width: auto;
    padding: 3px;
    gap: 0;
    display: inline-flex;
}
html[data-ui="glass"] .lang-seg {
    width: 32px; height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}
html[data-ui="glass"] .lang-seg.is-on {
    background: var(--g-surface-top);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
html[data-ui="glass"] .header-btn .notif-dot { box-shadow: 0 0 0 2px var(--g-bg); }

/* The user: initials, name, role, and the sign-out (POST with the token). */
html[data-ui="glass"] .dock-me { display: flex; align-items: center; gap: 8px; flex: none; }
html[data-ui="glass"] .dock-me__card {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 4px;
    border-radius: 13px;
    background: var(--g-surface);
    border: 1px solid var(--g-stroke);
}
html[data-ui="glass"] .dock-me__av {
    width: 30px; height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--g-btn);
    color: #fff;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
}
html[data-ui="glass"] .dock-me__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
html[data-ui="glass"] .dock-me__who b { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="glass"] .dock-me__who small { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
html[data-ui="glass"] .dock-me__out { display: contents; }
html[data-ui="glass"] .dock-me__out .header-btn {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}
html[data-ui="glass"] .dock-me__out .header-btn:hover,
html[data-ui="glass"] .dock-me__out .header-btn:focus-visible { color: var(--status-danger-text); background: rgba(239, 68, 68, 0.12); }

/* Drop-downs from the dock open UPWARD (below it is the screen's edge), and sit
   over the page: nearly opaque. */
html[data-ui="glass"] .notifications-dropdown,
html[data-ui="glass"] .nj-search-results {
    background: var(--g-opaque);
    border: 1px solid var(--g-stroke-hi);
    border-radius: 18px;
    box-shadow: var(--g-shadow);
    -webkit-backdrop-filter: var(--g-blur-strong);
    backdrop-filter: var(--g-blur-strong);
}
html[data-ui="glass"] .notifications-dropdown {
    top: auto;
    bottom: calc(100% + 14px);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    transform-origin: bottom center;
}
html[data-ui="glass"] .nj-search-results {
    top: auto;
    bottom: calc(100% + 12px);
    width: 420px;
    max-height: calc(100vh - 120px);
}

/* Smaller screens: no chips (from 1280), then no search and no user's name. */
@media (max-width: 1280px) {
    html[data-ui="glass"] .dock-agenda { display: none; }
}
@media (min-width: 769px) and (max-width: 1100px) {
    html[data-ui="glass"] .dock-me__who,
    html[data-ui="glass"] .dock-where__text small { display: none; }
    html[data-ui="glass"] .header-search input,
    html[data-ui="glass"] .header-search input:focus { width: 160px; }
}

/* Phones: the dock across the bottom — the menu button, the title, theme, bell,
   sign-out. The language link is in the drawer's foot. */
@media (max-width: 768px) {
    html[data-ui="glass"] .header,
    html[data-ui="glass"][data-theme="light"] .header {
        inset-inline-start: 10px;
        inset-inline-end: 10px;
        bottom: 10px;
        width: auto;
        max-width: none;
        justify-content: space-between;
    }
    html[data-ui="glass"] .page-content { padding-bottom: 84px; }
    html[data-ui="glass"] .header-left { flex: 1; }
    html[data-ui="glass"] .dock-brand,
    html[data-ui="glass"] .dock-where__text small,
    html[data-ui="glass"] .header-right::before,
    html[data-ui="glass"] .dock-me::before,
    html[data-ui="glass"] .dock-me__av,
    html[data-ui="glass"] .dock-me__who,
    html[data-ui="glass"] .header-right > .lang-toggle { display: none; }
    html[data-ui="glass"] .dock-where__text h1 { max-width: none; }
    html[data-ui="glass"] .dock-me__card { padding: 0; height: auto; background: transparent; border: 0; }
    html[data-ui="glass"] .dock-me__out .header-btn { width: 38px; height: 38px; background: var(--g-surface); border-color: var(--g-stroke); }
    html[data-ui="glass"] .theme-toggle { width: 38px; padding: 0; justify-content: center; }
    html[data-ui="glass"] .theme-toggle::before,
    html[data-ui="glass"] .theme-toggle::after { display: none; }
    html[data-ui="glass"] .theme-toggle > i { display: inline-block; }
    html[data-ui="glass"] .notifications-dropdown,
    html[data-ui="glass"][dir="rtl"] .notifications-dropdown {
        position: fixed;
        top: auto;
        bottom: 76px;
        left: 10px;
        right: 10px;
        width: auto;
        max-height: calc(100vh - 100px);
    }
}

/* ---------------------------------------------
   7) BUTTONS
   --------------------------------------------- */
html[data-ui="glass"] .btn {
    border-radius: var(--g-radius-sm);
    font-weight: 500;
}
html[data-ui="glass"]:not([data-theme="light"]) .btn-primary {
    background: var(--g-btn);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 24px rgba(47, 158, 68, 0.32);
}
html[data-ui="glass"]:not([data-theme="light"]) .btn-primary:hover {
    background: var(--g-btn-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 28px rgba(47, 158, 68, 0.40);
}
html[data-ui="glass"] .btn-secondary,
html[data-ui="glass"] .btn-cancel,
html[data-ui="glass"] .btn.cancel {
    background: var(--g-surface-strong);
    border-color: var(--g-stroke-hi);
    color: var(--text-primary);
    box-shadow: var(--g-hl);
}
html[data-ui="glass"] .btn-icon {
    border-radius: 11px;
    background: var(--g-surface-field);
    border: 1px solid var(--g-stroke);
}
html[data-ui="glass"] .data-table__actions .btn-icon {
    background: var(--g-surface-field);
    border-color: var(--g-stroke);
}

/* ---------------------------------------------
   8) TAGS, BADGES, PILLS, TAB PILLS
   --------------------------------------------- */
html[data-ui="glass"] .badge,
html[data-ui="glass"] .pill {
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--g-stroke);
}
html[data-ui="glass"] .tab-pill {
    background: var(--g-surface);
    border-color: var(--g-stroke);
}
html[data-ui="glass"] .tab-pill:hover { background: var(--g-surface-strong); }
html[data-ui="glass"] .tab-pill.is-active,
html[data-ui="glass"] .tab-pill.active {
    background: var(--g-surface-top);
    border-color: var(--g-stroke-hi);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
html[data-ui="glass"] .tab-pill__count { background: var(--g-surface-strong); }
/* The active tab's count: white on #46A63A read 3.10:1 (clients, the C4 sweep). */
html[data-ui="glass"] .tab-pill.is-active .tab-pill__count,
html[data-ui="glass"] .tab-pill.active .tab-pill__count { background: var(--g-btn); color: #fff; }
html[data-ui="glass"] .filter-chip {
    border-radius: 999px;
    background: var(--g-surface);
    border-color: var(--g-stroke);
}

/* ---------------------------------------------
   9) FIELDS AND FILTERS
   background-COLOR only: a select's arrow is its background-image.
   --------------------------------------------- */
html[data-ui="glass"] .form-control,
html[data-ui="glass"] .filter-row__field .form-control {
    background-color: var(--g-surface-field);
    border-color: var(--g-stroke);
    border-radius: var(--g-radius-sm);
}
html[data-ui="glass"] .form-control:focus {
    border-color: var(--g-brand);
    background-color: var(--g-surface-strong);
}
/* Phones: the new font's line is shorter — a select came out 32px tall (touch ≥ 36). */
@media (max-width: 768px) {
    html[data-ui="glass"] select.form-control,
    html[data-ui="glass"] input.form-control { min-height: 40px; }
}
/* An open select's list is drawn by the system: a solid colour. */
html[data-ui="glass"] select.form-control option {
    background-color: var(--g-bg);
    color: var(--text-primary);
}

/* ---------------------------------------------
   10) TABLES — on a desktop the rows are separate rounded strips
   (deals_dark.png). Phones keep their card layout untouched.
   --------------------------------------------- */
html[data-ui="glass"] .data-table-wrap thead th,
html[data-ui="glass"] .table-container table thead th,
html[data-ui="glass"][data-theme="light"] .data-table-wrap thead th,
html[data-ui="glass"][data-theme="light"] .table-container table thead th {
    background: transparent;
    border-bottom: 0;
}
@media (min-width: 769px) {
    html[data-ui="glass"] .data-table-wrap,
    html[data-ui="glass"] .table-container { padding: 0 8px 6px; }
    html[data-ui="glass"] .data-table-wrap > table,
    html[data-ui="glass"] .table-container > table {
        border-collapse: separate;
        border-spacing: 0 8px;
    }
    html[data-ui="glass"] .data-table-wrap tbody td,
    html[data-ui="glass"] .table-container tbody td {
        background-color: var(--g-surface);
        border-top: 1px solid var(--g-stroke);
        border-bottom: 1px solid var(--g-stroke);
    }
    html[data-ui="glass"] .data-table-wrap tbody tr:last-child td,
    html[data-ui="glass"] .table-container tbody tr:last-child td { border-bottom: 1px solid var(--g-stroke); }
    /* The strip's two ends, PHYSICAL sides by the page's direction: a cell's own
       direction can differ (.tabular-nums is ltr), and logical sides followed it —
       an RTL row's last cell, a number, got its rounded corners inside the row
       (helper «C», client pipeline). */
    html[data-ui="glass"][dir="rtl"] .data-table-wrap tbody td:first-child,
    html[data-ui="glass"][dir="rtl"] .table-container tbody td:first-child,
    html[data-ui="glass"][dir="ltr"] .data-table-wrap tbody td:last-child,
    html[data-ui="glass"][dir="ltr"] .table-container tbody td:last-child {
        border-right: 1px solid var(--g-stroke);
        border-top-right-radius: var(--g-radius-md);
        border-bottom-right-radius: var(--g-radius-md);
    }
    html[data-ui="glass"][dir="rtl"] .data-table-wrap tbody td:last-child,
    html[data-ui="glass"][dir="rtl"] .table-container tbody td:last-child,
    html[data-ui="glass"][dir="ltr"] .data-table-wrap tbody td:first-child,
    html[data-ui="glass"][dir="ltr"] .table-container tbody td:first-child {
        border-left: 1px solid var(--g-stroke);
        border-top-left-radius: var(--g-radius-md);
        border-bottom-left-radius: var(--g-radius-md);
    }
    html[data-ui="glass"] .data-table-wrap tbody tr:hover,
    html[data-ui="glass"] .table-container tbody tr:hover { background: transparent; }
    html[data-ui="glass"] .data-table-wrap tbody tr:hover td,
    html[data-ui="glass"] .table-container tbody tr:hover td { background-color: var(--g-surface-strong); }
}
html[data-ui="glass"] .data-table__footer { border-top-color: var(--border-subtle); }

/* ---------------------------------------------
   11) THE ROW ⋯ MENU — over other rows' text, so nearly opaque
   --------------------------------------------- */
html[data-ui="glass"] .row-menu {
    background: var(--g-opaque);
    border: 1px solid var(--g-stroke-hi);
    border-radius: 18px;
    box-shadow: var(--g-shadow);
    -webkit-backdrop-filter: var(--g-blur-strong);
    backdrop-filter: var(--g-blur-strong);
    padding: 8px;
}
html[data-ui="glass"] .row-menu button { border-radius: 12px; }
html[data-ui="glass"] .row-menu button:hover,
html[data-ui="glass"] .row-menu button:focus-visible { background: var(--g-surface-strong); }
html[data-ui="glass"] .row-menu hr { border-top-color: var(--g-stroke); }

/* ---------------------------------------------
   12) MODALS, SWEETALERT, SIDE PANELS
   --------------------------------------------- */
html[data-ui="glass"] .modal-overlay,
html[data-ui="glass"] .detail-panel-overlay,
html[data-ui="glass"][data-theme="light"] .modal-overlay {
    background: var(--g-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
html[data-ui="glass"] .modal,
html[data-ui="glass"] .detail-panel {
    background: var(--g-opaque);
    border: 1px solid var(--g-stroke-hi);
    box-shadow: var(--g-hl), var(--g-shadow);
    -webkit-backdrop-filter: var(--g-blur-strong);
    backdrop-filter: var(--g-blur-strong);
}
html[data-ui="glass"] .modal { border-radius: 24px; }
html[data-ui="glass"] .modal-header,
html[data-ui="glass"] .modal-footer,
html[data-ui="glass"] .detail-panel__header,
html[data-ui="glass"] .detail-panel__tabs { border-color: var(--border-subtle); }
html[data-ui="glass"] .modal-close,
html[data-ui="glass"] .detail-panel__close {
    border-radius: 11px;
    background: var(--g-surface-field);
    border-color: var(--g-stroke);
}
@media (min-width: 769px) {
    html[data-ui="glass"] .detail-panel {
        top: 12px;
        bottom: 12px;
        height: auto;
        border-radius: 24px;
    }
}

/* SweetAlert2 brings a white popup with grey text; on the glass its words
   take the theme's colours. */
html[data-ui="glass"] .swal2-container.swal2-backdrop-show {
    background: var(--g-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
html[data-ui="glass"] .swal2-popup {
    background: var(--g-opaque);
    border: 1px solid var(--g-stroke-hi);
    border-radius: 24px;
    box-shadow: var(--g-hl), var(--g-shadow);
    color: var(--text-primary);
    font-family: var(--font-ui);
}
html[data-ui="glass"] .swal2-title { color: var(--text-primary); font-family: var(--font-display); }
html[data-ui="glass"] .swal2-html-container { color: var(--text-secondary); }
html[data-ui="glass"] .swal2-input,
html[data-ui="glass"] .swal2-textarea,
html[data-ui="glass"] .swal2-select {
    background-color: var(--g-surface-field);
    border: 1px solid var(--g-stroke-hi);
    border-radius: var(--g-radius-sm);
    color: var(--text-primary);
    box-shadow: none;
}
html[data-ui="glass"] .swal2-select option { background-color: var(--g-bg); color: var(--text-primary); }
html[data-ui="glass"] .swal2-validation-message {
    background: var(--g-surface-strong);
    color: var(--text-primary);
}
html[data-ui="glass"] .swal2-styled { border-radius: var(--g-radius-sm); font-family: var(--font-display); }
/* A dialog that sets no colour of its own got SweetAlert's purple. */
html[data-ui="glass"] .swal2-styled.swal2-confirm { background-color: var(--g-btn); }
html[data-ui="glass"] .swal2-timer-progress-bar { background: var(--g-brand); }

/* ---------------------------------------------
   13) EMPTY STATES, TOASTS, PAGINATION, KANBAN CARDS
   --------------------------------------------- */
html[data-ui="glass"] .empty-state__icon,
html[data-ui="glass"] .empty-state .icon {
    background: var(--g-surface-strong);
    border: 1px solid var(--g-stroke);
    box-shadow: var(--g-hl);
}
html[data-ui="glass"] .nj-toast {
    background: var(--g-opaque);
    border-color: var(--g-stroke-hi);
    border-radius: 18px;
    box-shadow: var(--g-shadow);
    -webkit-backdrop-filter: var(--g-blur-strong);
    backdrop-filter: var(--g-blur-strong);
}
@media (min-width: 769px) {
    /* (the dock is at the bottom since C5: the top is free) */
    html[data-ui="glass"] .nj-toast-wrap { top: 24px; }
}
html[data-ui="glass"] .pagination a,
html[data-ui="glass"] .pagination span {
    border-radius: 11px;
    background-color: var(--g-surface);
    border-color: var(--g-stroke);
}
html[data-ui="glass"] .kanban__card,
html[data-ui="glass"] .pipeline-card,
html[data-ui="glass"] .approval-card {
    background-color: var(--g-surface);
    border-color: var(--g-stroke);
    border-radius: var(--g-radius-md);
}
html[data-ui="glass"] .kanban__column-count { background: var(--g-surface-strong); }

/* ---------------------------------------------
   14) FALLBACKS AND PREFERENCES
   --------------------------------------------- */
/* No backdrop-filter (old browsers): a little more body to every pane. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-ui="glass"] { --g-surface: rgba(255, 255, 255, 0.08); --g-surface-strong: rgba(255, 255, 255, 0.12); }
    html[data-ui="glass"][data-theme="light"] { --g-surface: rgba(255, 255, 255, 0.84); --g-surface-strong: rgba(255, 255, 255, 0.92); }
}
/* "Reduce transparency": solid panes, no blur, no glow. */
@media (prefers-reduced-transparency: reduce) {
    html[data-ui="glass"] {
        --g-surface: #101B14; --g-surface-strong: #17241B; --g-surface-field: #132017; --g-opaque: #0C1610;
        --g-blur: none; --g-blur-strong: none;
    }
    html[data-ui="glass"][data-theme="light"] {
        --g-surface: #FFFFFF; --g-surface-strong: #F4F7F2; --g-surface-field: #FFFFFF; --g-opaque: #FFFFFF;
    }
    html[data-ui="glass"] .atmospheric-bg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-ui="glass"] .atmospheric-bg__blob { animation: none; }
    html[data-ui="glass"] .nav-item::before,
    html[data-ui="glass"] .card,
    html[data-ui="glass"] .panel,
    html[data-ui="glass"] .stat-card-v2,
    html[data-ui="glass"] .kpi-card,
    html[data-ui="glass"] .nav-acc__chev { transition: none; }
}

/* ---------------------------------------------
   15) THE DASHBOARD (C2) — the mockup's order, from index.php's own blocks plus
   the glass widgets (includes/glass_dash_top.php, glass_dash_row5.php):
   hero | owed island → journey → figures → charts + activity → top performers
   + quick actions → follow-ups + top deals. The order is CSS only: no block
   of index.php moved, so OFF stays as it was.
   --------------------------------------------- */
html[data-ui="glass"] .page-content:has(> #gd-hero) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}
html[data-ui="glass"] .page-content:has(> #gd-hero) > * { grid-column: 1 / -1; order: 5; margin: 0; }
html[data-ui="glass"] .page-content:has(> #gd-hero) > #gd-hero { order: 1; }
html[data-ui="glass"] .page-content:has(> #gd-hero) > #dash-owed { order: 2; }
html[data-ui="glass"] .page-content:has(> #gd-hero) > #gd-journey { order: 3; }
html[data-ui="glass"] .page-content:has(> #gd-hero) > .stats-row { order: 4; }
html[data-ui="glass"] .page-content:has(> #gd-hero) > .chart-grid { order: 6; }
html[data-ui="glass"] .page-content:has(> #gd-hero) > #gd-row5 { order: 7; }
html[data-ui="glass"] .page-content:has(> #gd-hero) > #gd-row5 ~ .chart-grid { order: 8; }
@media (min-width: 1025px) {
    html[data-ui="glass"] .page-content:has(> #gd-hero):has(> #dash-owed) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    html[data-ui="glass"] .page-content:has(> #gd-hero):has(> #dash-owed) > #gd-hero { grid-column: 1; }
    html[data-ui="glass"] .page-content:has(> #gd-hero):has(> #dash-owed) > #dash-owed { grid-column: 2; }
}

/* The hero: the date, the greeting with today's meetings, three cards. */
html[data-ui="glass"] .gd-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Centred: beside a taller island the greeting and the cards stay together
       (space-between left a hole between them in English at 1366). */
    justify-content: center;
    gap: 26px;
    padding: 26px 28px;
    min-height: 250px;
}
/* Two faint rings in the far corner — drawn INSIDE the box (a pseudo-element its
   own size), not hung outside it under overflow:hidden: the sweep read that
   overflow as clipped content. */
html[data-ui="glass"] .gd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.35;
    background:
        radial-gradient(circle at 0 0, transparent 229px, var(--g-stroke-hi) 230px, transparent 231px),
        radial-gradient(circle at 0 0, transparent 159px, var(--g-stroke-hi) 160px, transparent 161px);
}
html[data-ui="glass"][dir="ltr"] .gd-hero::before {
    background:
        radial-gradient(circle at 100% 0, transparent 229px, var(--g-stroke-hi) 230px, transparent 231px),
        radial-gradient(circle at 100% 0, transparent 159px, var(--g-stroke-hi) 160px, transparent 161px);
}
html[data-ui="glass"] .gd-hero .hero-greeting { position: relative; }
html[data-ui="glass"] .gd-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-muted);
}
html[data-ui="glass"] .gd-live {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--g-brand);
    box-shadow: 0 0 0 4px var(--g-brand-soft);
}
html[data-ui="glass"] .gd-hero .hero-greeting h1 {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.25;
    text-wrap: balance;
}
html[data-ui="glass"] .gd-today { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
html[data-ui="glass"] .gd-tcard {
    flex: 1 1 150px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--g-surface);
    border: 1px solid var(--g-stroke);
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
html[data-ui="glass"] .gd-tcard > div { min-width: 0; }   /* the line under the figure ends in «…», not in the next card */
html[data-ui="glass"] a.gd-tcard:hover { border-color: var(--g-stroke-hi); background: var(--g-surface-strong); }
html[data-ui="glass"] .gd-ti {
    width: 38px; height: 38px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--g-surface-strong);
}
html[data-ui="glass"] .gd-ti--brand { color: var(--g-brand); }
html[data-ui="glass"] .gd-ti--gold { color: var(--status-warning-text, #F59E0B); }
html[data-ui="glass"] .gd-ti--rose { color: var(--status-danger-text, #EF4444); }
html[data-ui="glass"] .gd-tcard b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.1; }
/* The line under the figure wraps (two lines at most in practice), never «…». */
html[data-ui="glass"] .gd-tcard small { display: block; font-size: 12px; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; }

/* The owed figure: a dark island in both themes. A solid colour (the contrast
   ruler reads it); the glow is a pseudo-element, never behind the text's box. */
html[data-ui="glass"] #dash-owed,
html[data-ui="glass"][data-theme="light"] #dash-owed {
    --text-primary: #EFFAF1;
    --text-secondary: #C3D5C8;
    --text-muted: #A3B8A9;
    --g-surface-field: rgba(255, 255, 255, 0.08);
    --g-stroke: rgba(255, 255, 255, 0.14);
    position: relative;
    background-color: #0F3A23;
    color: var(--text-primary);
    border: 0;
    border-radius: var(--g-radius-xl);
    box-shadow: 0 30px 60px rgba(8, 40, 20, 0.35);
}
/* The glow, inside the box (see the hero's rings). */
html[data-ui="glass"] #dash-owed::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 0 0, rgba(110, 220, 120, 0.40), transparent 240px);
}
html[data-ui="glass"][dir="ltr"] #dash-owed::before { background: radial-gradient(circle at 100% 0, rgba(110, 220, 120, 0.40), transparent 240px); }
html[data-ui="glass"] #dash-owed > * { position: relative; }
html[data-ui="glass"] #dash-owed .panel__header { border-bottom: 0; }
html[data-ui="glass"] #dash-owed .panel__title { color: var(--text-primary); }
html[data-ui="glass"] #dash-owed #dash-owed-due {
    font-family: var(--font-display);
    font-size: 52px !important;   /* index.php writes 2rem / 700 inline on it */
    font-weight: 300 !important;
    letter-spacing: -0.02em;
}
html[data-ui="glass"] #dash-owed .btn-secondary {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}
html[data-ui="glass"] #dash-owed select.form-control { color: var(--text-primary); }
html[data-ui="glass"] #dash-owed select.form-control option { background-color: #0F3A23; color: #EFFAF1; }

/* Section heads of the glass widgets. */
html[data-ui="glass"] .gd-sh { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
html[data-ui="glass"] .gd-k {
    width: 34px; height: 34px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--g-surface-strong);
    border: 1px solid var(--g-stroke);
    color: var(--g-brand);
    font-size: 13px;
}
html[data-ui="glass"] .gd-t { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
html[data-ui="glass"] .gd-t small { display: block; font-family: var(--font-ui); font-size: 12px; font-weight: 400; color: var(--text-muted); margin-top: 3px; }
html[data-ui="glass"] .gd-end { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
html[data-ui="glass"] .gd-tabs {
    display: flex;
    padding: 4px;
    border-radius: 12px;
    background: var(--g-surface);
    border: 1px solid var(--g-stroke);
}
html[data-ui="glass"] .gd-tabs a {
    padding: 6px 12px;
    border-radius: 9px;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
}
html[data-ui="glass"] .gd-tabs a.is-on {
    background: var(--g-surface-top);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* The customer journey. */
html[data-ui="glass"] .gd-journey { padding: 22px 24px 24px; }
html[data-ui="glass"] .gd-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}
html[data-ui="glass"] .gd-track::before {
    content: "";
    position: absolute;
    top: 27px;
    inset-inline: 6%;
    height: 2px;
    border-radius: 2px;
    opacity: 0.55;
    background: linear-gradient(to left, var(--g-brand), #7CC4FF 55%, #E6C36B);
}
html[data-ui="glass"][dir="ltr"] .gd-track::before { background: linear-gradient(to right, var(--g-brand), #7CC4FF 55%, #E6C36B); }
html[data-ui="glass"] .gd-stop { position: relative; text-align: center; padding: 0 4px; }
html[data-ui="glass"] .gd-dot {
    position: relative;
    z-index: 1;
    width: 56px; height: 56px;
    margin: 0 auto 12px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 17px;
    color: var(--g-brand);
    background: var(--g-surface-strong);
    border: 1px solid var(--g-stroke-hi);
    box-shadow: var(--g-hl);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
}
html[data-ui="glass"] .gd-stop--win .gd-dot {
    background: var(--g-btn);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(47, 158, 68, 0.35);
}
html[data-ui="glass"] .gd-stop b { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 400; line-height: 1; }
html[data-ui="glass"] .gd-lbl { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
html[data-ui="glass"] .gd-stop em {
    position: absolute;
    z-index: 2;
    top: 6px;
    inset-inline-start: -18px;
    padding: 1px 6px;
    border-radius: 6px;
    font-style: normal;
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--text-secondary);
    background: var(--g-bg);
    border: 1px solid var(--g-stroke);
}
/* The rate, centred on the line between its stop and the one before it. Physical sides
   by [dir]: the pill is .tabular-nums (direction: ltr), so inset-inline-start followed
   the pill's own direction — in Arabic each rate sat beside the wrong pair of stops. */
html[data-ui="glass"][dir="rtl"] .gd-stop em { left: auto; right: 0; transform: translateX(50%); }
html[data-ui="glass"][dir="ltr"] .gd-stop em { right: auto; left: 0; transform: translateX(-50%); }
@media (max-width: 1000px) {
    html[data-ui="glass"] .gd-track { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; }
    html[data-ui="glass"] .gd-track::before { display: none; }
    html[data-ui="glass"] .gd-stop em { position: static; display: inline-block; margin-bottom: 6px; }
    html[data-ui="glass"][dir] .gd-stop em { transform: none; }
}
@media (max-width: 768px) {
    html[data-ui="glass"] .gd-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-ui="glass"] .gd-tabs a { min-height: 36px; display: inline-flex; align-items: center; }
    html[data-ui="glass"] .gd-hero .hero-greeting h1 { font-size: 24px; }
    html[data-ui="glass"] .gd-hero { padding: 20px; }
}

/* Top performers + quick actions. */
html[data-ui="glass"] .gd-row5 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
html[data-ui="glass"] .gd-row5 > .panel { padding: 22px 24px; }
@media (max-width: 768px) { html[data-ui="glass"] .gd-row5 { grid-template-columns: minmax(0, 1fr); } }
html[data-ui="glass"] .gd-feed { list-style: none; margin: 0; padding: 0; }
html[data-ui="glass"] .gd-fi {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed var(--g-stroke);
}
html[data-ui="glass"] .gd-fi:last-child { border-bottom: 0; }
html[data-ui="glass"] .gd-av {
    width: 36px; height: 36px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--g-btn);
}
html[data-ui="glass"] .gd-fi__t { font-size: 13px; }
html[data-ui="glass"] .gd-fi__s { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
html[data-ui="glass"] .gd-empty { color: var(--text-muted); font-size: 13px; }
html[data-ui="glass"] .gd-qa { display: flex; flex-direction: column; gap: 10px; }
html[data-ui="glass"] .gd-qa__btn { justify-content: space-between; min-height: 44px; }
html[data-ui="glass"] .gd-bi {
    width: 30px; height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.18);
}
html[data-ui="glass"] .btn-secondary .gd-bi { background: var(--g-brand-soft); color: var(--g-brand); }

/* The user's own counts beside their sidebar items (open tasks, new leads,
   follow-ups due today, meetings today — header.php, ON only). */
html[data-ui="glass"] .nav-badge {
    margin-inline-start: auto;
    min-width: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 11px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--g-surface-strong);
}
/* The dock's agenda: meetings today · follow-ups due (the same counts). */
html[data-ui="glass"] .header-right > .dock-agenda { order: 2; display: flex; gap: 6px; }
html[data-ui="glass"] .dock-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 11px;
    border-radius: 12px;
    background: var(--g-surface);
    border: 1px solid var(--g-stroke);
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}
html[data-ui="glass"] .dock-chip b { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); }
html[data-ui="glass"] .dock-chip .fa-rotate { color: var(--status-warning-text, #F59E0B); }
html[data-ui="glass"] .dock-chip__pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--g-brand);
    box-shadow: 0 0 0 4px var(--g-brand-soft);
    animation: gdPulse 2s infinite;
}
@keyframes gdPulse { 50% { box-shadow: 0 0 0 7px transparent; } }
/* No room for the agenda on smaller screens (the mockup hides it under 1280). */
@media (max-width: 1280px) {
    html[data-ui="glass"] .header-right > .dock-agenda { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-ui="glass"] .dock-chip__pulse { animation: none; }
}

/* ---------------------------------------------
   16) THE BOARD (C3) — columns of glass, cards a lighter pane inside them,
   the drag and the drop place, the board | project-file switch.
   assets/css/boards.css loads after this file; these rules win on specificity
   (html[data-ui="glass"] …), not on order.
   --------------------------------------------- */
html[data-ui="glass"] .bd-board { gap: 18px; padding-block: 6px 22px; }
html[data-ui="glass"] .bd-list,
html[data-ui="glass"][data-theme="light"] .bd-list {
    flex-basis: 286px;
    padding: 6px;
    background-color: var(--g-surface);
    border: 1px solid var(--g-stroke);
    border-radius: 24px;
    box-shadow: var(--g-hl), var(--g-shadow-sm);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
}
html[data-ui="glass"] .bd-list__head {
    padding: 12px 12px 10px;
    border-bottom: 0;
    font-family: var(--font-display);
    font-size: 14px;
}
html[data-ui="glass"] .bd-list__count {
    font-family: var(--font-display);
    font-size: 11px;
    padding: 2px 9px;
    color: var(--text-secondary);
    background: var(--g-surface-strong);
}
html[data-ui="glass"] .bd-list__cards { padding: 4px 6px 8px; gap: 10px; }
/* Where a dragged card will land: a dashed green pane. */
html[data-ui="glass"] .bd-list__cards.is-dragover {
    background: var(--g-brand-soft);
    outline: 1.5px dashed var(--g-brand);
    outline-offset: -2px;
    border-radius: 18px;
}
html[data-ui="glass"] .bd-list__empty { color: var(--text-muted); }

/* A card: a lighter pane inside its column (no blur of its own — one blur per
   column is enough; a blur per card would cost every frame of a drag). */
html[data-ui="glass"] .bd-card,
html[data-ui="glass"][data-theme="light"] .bd-card {
    padding: 14px;
    border-radius: 18px;
    background-color: var(--g-surface);
    border: 1px solid var(--g-stroke);
    box-shadow: var(--g-hl);
}
html[data-ui="glass"][data-theme="light"] .bd-card { background-color: var(--g-surface-strong); }
html[data-ui="glass"] .bd-card:hover {
    border-color: var(--g-stroke-hi);
    background-color: var(--g-surface-strong);
    box-shadow: var(--g-hl), var(--g-shadow-sm);
}
html[data-ui="glass"][data-theme="light"] .bd-card:hover { background-color: var(--g-surface-top); }
/* The card being dragged stays behind as a faint outline of where it was. */
html[data-ui="glass"] .bd-card.is-dragging {
    opacity: 0.55;
    border-style: dashed;
    border-color: var(--g-brand);
    transform: rotate(-1.5deg);
}
html[data-ui="glass"] .bd-card__title { font-size: 13px; line-height: 1.6; }
html[data-ui="glass"] .bd-card__bar { height: 4px; background: var(--g-surface-strong); }
html[data-ui="glass"] .bd-card__bar > span { background: var(--g-brand); }
html[data-ui="glass"] .bd-card--overdue { border-inline-start: 3px solid var(--status-danger-text); }
html[data-ui="glass"] .bd-move-btn {
    border-radius: 10px;
    background: var(--g-surface);
    border-color: var(--g-stroke);
}
html[data-ui="glass"] .bd-move-btn:hover,
html[data-ui="glass"] .bd-move-btn:focus-visible { background: var(--g-surface-strong); }

/* Board | project file: a segment. */
html[data-ui="glass"] .pf-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border-radius: 14px;
    background: var(--g-surface);
    border: 1px solid var(--g-stroke);
    border-bottom: 1px solid var(--g-stroke);
}
html[data-ui="glass"] .pf-tab {
    border: 0;
    border-radius: 10px;
    margin: 0;
    color: var(--text-muted);
}
html[data-ui="glass"] .pf-tab.is-active {
    background: var(--g-surface-top);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* The add-card dialog's grouped list of people (team first, then the others). */
html[data-ui="glass"] .swal2-select optgroup { background-color: var(--g-bg); color: var(--text-muted); }
/* A placeholder reads as a hint, not as typed text (it was as bright as a value). */
html[data-ui="glass"] .swal2-input::placeholder,
html[data-ui="glass"] .swal2-textarea::placeholder { color: var(--text-muted); opacity: 1; }
/* «Cancel» / the second choice: glass, like .btn-secondary — not SweetAlert's grey
   and slate (a dialog that sets its own colours inline keeps them). */
html[data-ui="glass"] .swal2-styled.swal2-cancel,
html[data-ui="glass"] .swal2-styled.swal2-deny {
    background-color: var(--g-surface-strong);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--g-stroke-hi);
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui="glass"] .bd-card.is-dragging { transform: none; }
}

/* ---------------------------------------------
   17) SIGN-IN (C4) — login.php has its own page (no header.php) and is dark
   only (data-theme="dark" in its <html>). The glass canvas behind both
   columns, the form in one glass pane, the v2 lockup. The page's own <style>
   is inline; these rules win on specificity (html[data-ui="glass"] …).
   --------------------------------------------- */
/* One solid canvas (the contrast ruler reads it); the glow and the grain are
   pseudo-elements, as on the app's pages. */
html[data-ui="glass"] .auth-shell { background: var(--g-bg); }
html[data-ui="glass"] .auth-shell::before {
    inset: 0;
    background:
        radial-gradient(640px 560px at 82% 6%, var(--g-glow-a) 0%, transparent 70%),
        radial-gradient(600px 560px at 8% 96%, var(--g-glow-b) 0%, transparent 70%);
    opacity: 0.62;
    filter: blur(40px);
}
html[data-ui="glass"] .auth-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* The brand column. */
html[data-ui="glass"] .auth-brand__logo--lockup { gap: 14px; }
html[data-ui="glass"] .auth-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 18px;
    background: var(--g-surface-strong);
    border: 1px solid var(--g-stroke);
    box-shadow: var(--g-hl);
}
html[data-ui="glass"] .auth-brand__mark img { width: 34px; height: 34px; }
html[data-ui="glass"] .auth-brand__logo-text b { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: 0; }
html[data-ui="glass"] .auth-brand__logo-text span { color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.04em; margin-top: 4px; }
html[data-ui="glass"] .auth-brand__hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
html[data-ui="glass"] .auth-brand__hero-rule,
html[data-ui="glass"] .auth-form__heading-rule { background: var(--g-brand); }
html[data-ui="glass"] .auth-brand__hero-sub { color: var(--text-secondary); }
html[data-ui="glass"] .auth-brand__ring { border: 1px solid rgba(255, 255, 255, 0.07); }
/* On the page's outer edge in both directions: «right» put them at the middle of
   the English page, cut straight by the column's edge. */
html[data-ui="glass"] .auth-brand__ring--lg { right: auto; inset-inline-start: -180px; }
html[data-ui="glass"] .auth-brand__ring--md { right: auto; inset-inline-start: -100px; }
html[data-ui="glass"] .auth-brand__ring--sm { right: auto; inset-inline-start: -20px; }
html[data-ui="glass"] .auth-brand__ring--sm { border-color: rgba(86, 207, 99, 0.18); }
html[data-ui="glass"] .auth-brand__feature-icon {
    border-radius: 14px;
    background: var(--g-surface-strong);
    border: 1px solid var(--g-stroke);
    box-shadow: var(--g-hl);
    color: var(--g-brand);
}
html[data-ui="glass"] .auth-brand__feature-title { color: var(--text-primary); }
html[data-ui="glass"] .auth-brand__feature-sub,
html[data-ui="glass"] .auth-brand__footer { color: var(--text-muted); }
html[data-ui="glass"] .auth-brand__footer b { color: var(--g-brand); }

/* The form: one glass pane. */
html[data-ui="glass"] .auth-form {
    max-width: 460px;
    padding: 40px 36px 32px;
    background-color: var(--g-surface);
    border: 1px solid var(--g-stroke);
    border-radius: var(--g-radius-xl);
    box-shadow: var(--g-hl), var(--g-shadow);
    -webkit-backdrop-filter: var(--g-blur-strong);
    backdrop-filter: var(--g-blur-strong);
}
html[data-ui="glass"] .auth-form__heading h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.9rem;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
html[data-ui="glass"] .auth-form__heading p { color: var(--text-secondary); margin-bottom: 26px; }
html[data-ui="glass"] .auth-form .form-group label { color: var(--text-primary); }
html[data-ui="glass"] .auth-form .form-group label i { color: var(--g-brand); }
html[data-ui="glass"] .auth-form .input-wrap input {
    min-height: 48px;
    background: var(--g-surface-field);
    border: 1px solid var(--g-stroke);
    border-radius: var(--g-radius-sm);
    color: var(--text-primary);
    font-family: var(--font-ui);
}
html[data-ui="glass"] .auth-form .input-wrap input::placeholder { color: var(--text-muted); }
html[data-ui="glass"] .auth-form .input-wrap input:focus {
    border-color: var(--g-brand);
    box-shadow: 0 0 0 3px var(--g-brand-soft);
}
/* The eye: a finger-sized target, on the side the text does not start from. */
html[data-ui="glass"] .auth-form .input-wrap__toggle {
    width: 40px; height: 40px;
    right: 4px;
    border-radius: 10px;
    color: var(--text-muted);
}
html[data-ui="glass"] .auth-form .input-wrap__toggle:hover,
html[data-ui="glass"] .auth-form .input-wrap__toggle:focus-visible { color: var(--text-primary); background: var(--g-surface-strong); }
html[data-ui="glass"] .auth-form .input-wrap--has-trailing input { padding-right: 48px; }
html[data-ui="glass"] .auth-form__remember { color: var(--text-secondary); min-height: 36px; }
html[data-ui="glass"] .auth-form__remember input {
    background: var(--g-surface-field);
    border: 1px solid var(--g-stroke-hi);
}
html[data-ui="glass"] .auth-form__remember input:checked { background: var(--g-btn); border-color: var(--g-btn); }
html[data-ui="glass"] .auth-form__forgot {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--g-brand);
}
html[data-ui="glass"] .auth-form__forgot:hover { color: var(--text-primary); }
/* The primary button: flat #2F7F27 (white on it is 5.0:1), as everywhere. */
html[data-ui="glass"] .btn-login {
    min-height: 50px;
    background: var(--g-btn);
    border-radius: var(--g-radius-sm);
    font-family: var(--font-ui);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 26px rgba(47, 127, 39, 0.32);
}
html[data-ui="glass"] .btn-login:hover { background: var(--g-btn-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 30px rgba(47, 127, 39, 0.40); }
html[data-ui="glass"] .auth-form__protect { color: var(--text-muted); justify-content: center; }
html[data-ui="glass"] .auth-form__protect i { color: var(--g-brand); }
html[data-ui="glass"] .error-msg { border-radius: var(--g-radius-sm); background: rgba(239, 68, 68, 0.12); }

/* The language link: a glass pill. */
html[data-ui="glass"] .auth-form-panel__lang {
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--g-surface);
    border: 1px solid var(--g-stroke);
    box-shadow: var(--g-hl);
    color: var(--text-secondary);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
}
html[data-ui="glass"] .auth-form-panel__lang:hover { border-color: var(--g-stroke-hi); color: var(--text-primary); }
html[data-ui="glass"] .auth-form-panel__lang i { color: var(--g-brand); }
html[data-ui="glass"][dir="rtl"] .auth-form-panel__lang .fa-chevron-right { transform: scaleX(-1); }
/* The pane is taller than the old bare form: room above it for the language pill. */
@media (min-width: 981px) {
    html[data-ui="glass"] .auth-form-panel { padding-top: 96px; padding-bottom: 40px; }
}

@media (max-width: 980px) {
    html[data-ui="glass"] .auth-form { padding: 30px 24px 26px; }
}
@media (max-width: 480px) {
    html[data-ui="glass"] .auth-form { border-radius: var(--g-radius); padding: 26px 18px 22px; }
    html[data-ui="glass"] .auth-form__heading h2 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-ui="glass"] .auth-shell::before { animation: none; }
}

/* ---------------------------------------------
   18) THE REMAINING PAGES (C4)
   --------------------------------------------- */
/* Who owes: the subscriptions link above the figures — a finger-sized line on a
   phone (21px tall in the sweep). */
@media (max-width: 767px) {
    html[data-ui="glass"] .page-content a[href$="modules/operations/subscriptions.php"]:not(.nav-item) {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 36px;
    }
}

/* ---------------------------------------------
   19) PAGE PARTS (C6) — the shared pieces every page is fitted with, so the
   pages look alike (C6_BRIEF.md). A page opts in with a class under the
   switch (e.g. class="stats-row<?= !empty($uiGlass) ? ' gx-stats' : '' ?>" —
   OFF prints the same bytes). Measured at 1509×658 with the dock at the bottom.
     .gx-toolbar   search · filters · tabs · buttons in one row (two at most);
                   rarer filters behind a «Filters» button (.gx-more → .gx-panel)
     .gx-stats     the stat cards as ONE strip, 56–64px: icon · figure · name
     .gx-table     a compact table: rows ≤ 56px, a second line under a cell
                   (.gx-sub), actions grouped (.gx-actions), no sideways scroll
     .gx-form2     a form / profile in two columns (.gx-span2 = both)
     .gx-tabs      tabs in one pane (assets/js/glass-ui.js shows one panel)
   --------------------------------------------- */

/* --- the toolbar --------------------------------------------------------- */
html[data-ui="glass"] .gx-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 6px;
    border-radius: 18px;
    background-color: var(--g-surface);
    border: 1px solid var(--g-stroke);
    box-shadow: var(--g-hl);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
}
/* A field's label is read by a screen reader, not printed (the placeholder or the
   first option names it on the screen). */
html[data-ui="glass"] .gx-toolbar .filter-row__label,
html[data-ui="glass"] .gx-toolbar .gx-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
html[data-ui="glass"] .gx-toolbar .filter-row__field,
html[data-ui="glass"] .gx-toolbar .gx-field { flex: 0 1 auto; min-width: 140px; margin: 0; }
html[data-ui="glass"] .gx-toolbar .filter-row__field--search,
html[data-ui="glass"] .gx-toolbar .gx-grow { flex: 1 1 240px; min-width: 200px; }
html[data-ui="glass"] .gx-toolbar input,
html[data-ui="glass"] .gx-toolbar select,
html[data-ui="glass"] .gx-toolbar .btn { min-height: 38px; height: 38px; }
html[data-ui="glass"] .gx-toolbar .filter-row__actions,
html[data-ui="glass"] .gx-toolbar .gx-end { display: flex; gap: 6px; margin-inline-start: auto; }
html[data-ui="glass"] .gx-toolbar .tab-pills { margin: 0; flex-wrap: nowrap; }
/* «Filters» opens the rarer fields in a pane under the bar. */
html[data-ui="glass"] .gx-more[aria-expanded="true"] { border-color: var(--g-brand); color: var(--text-primary); }
html[data-ui="glass"] .gx-more__n {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--g-btn);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
html[data-ui="glass"] .gx-panel {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 2px 2px;
    border-top: 1px solid var(--g-stroke);
}
html[data-ui="glass"] .gx-panel[hidden] { display: none; }

/* --- the stat strip ------------------------------------------------------ */
html[data-ui="glass"] .gx-stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 0 12px;
    padding: 4px;
    border-radius: 18px;
    background-color: var(--g-surface);
    border: 1px solid var(--g-stroke);
    box-shadow: var(--g-hl);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
}
html[data-ui="glass"] .gx-stats > * { flex: 1 1 0; min-width: 0; margin: 0; }
html[data-ui="glass"] .gx-stats > * + * { border-inline-start: 1px solid var(--g-stroke); }
/* A stat card (includes/components/stat_card.php) laid out as one cell:
   icon | figure / name | delta. Its sparkline and «vs last 30 days» go. */
html[data-ui="glass"] .gx-stats .stat-card-v2,
html[data-ui="glass"][data-theme="light"] .gx-stats .stat-card-v2 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon value delta" "icon label delta" "icon note note";
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    min-height: 0;
    height: auto;
    padding: 6px 12px;
    background: transparent;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
}
html[data-ui="glass"] .gx-stats .stat-card-v2:hover { background: var(--g-surface); transform: none; }
html[data-ui="glass"] .gx-stats .stat-card-v2__head,
html[data-ui="glass"] .gx-stats .stat-card-v2__body,
html[data-ui="glass"] .gx-stats .stat-card-v2__value-wrap { display: contents; }
html[data-ui="glass"] .gx-stats .icon-square { grid-area: icon; width: 34px; height: 34px; border-radius: 11px; font-size: 14px; }
/* line-height 1 on the figure AND its inner span: Readex Pro's own line box made
   the strip 69px (the rule: 56–64; helper «C» on the client pipeline). */
html[data-ui="glass"] .gx-stats .stat-card-v2__value,
html[data-ui="glass"] .gx-stats .stat-card-v2__value > span { grid-area: value; font-size: 20px; line-height: 1; margin: 0; }
html[data-ui="glass"] .gx-stats .stat-card-v2__value > span { grid-area: auto; }
html[data-ui="glass"] .gx-stats .stat-card-v2__label {
    grid-area: label;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html[data-ui="glass"] .gx-stats .stat-card-v2__note { grid-area: note; font-size: 11px; color: var(--text-muted); margin: 2px 0 0; }
html[data-ui="glass"] .gx-stats .stat-card-v2__delta { grid-area: delta; margin: 0; font-size: 11px; }
html[data-ui="glass"] .gx-stats .stat-card-v2__delta .stat-card-v2__footer,
html[data-ui="glass"] .gx-stats .stat-card-v2__sparkline { display: none; }
@media (max-width: 768px) {
    /* !important: style.css forces stats rows to one column under 481px with !important
       (#8); the strip's compact cells fit two to a 375 row (helper «B», C6). */
    html[data-ui="glass"] .gx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 2px; }
    html[data-ui="glass"] .gx-stats > * + * { border-inline-start: 0; }
}

/* --- the compact table --------------------------------------------------- */
@media (min-width: 769px) {
    html[data-ui="glass"] .gx-table > table,
    html[data-ui="glass"] table.gx-table { border-spacing: 0 4px; }
    html[data-ui="glass"] .gx-table thead th { padding: 6px 12px; font-size: 11.5px; white-space: nowrap; }
    html[data-ui="glass"] .gx-table tbody td { padding: 7px 12px; height: 52px; line-height: 1.3; vertical-align: middle; }
    /* (physical sides, as §10 — a number cell's own ltr would flip logical ones) */
    html[data-ui="glass"][dir="rtl"] .gx-table tbody td:first-child,
    html[data-ui="glass"][dir="ltr"] .gx-table tbody td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
    html[data-ui="glass"][dir="rtl"] .gx-table tbody td:last-child,
    html[data-ui="glass"][dir="ltr"] .gx-table tbody td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
}
html[data-ui="glass"] .gx-table .gx-sub {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html[data-ui="glass"] .gx-table .gx-nowrap { white-space: nowrap; }
html[data-ui="glass"] .gx-table .gx-actions { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
html[data-ui="glass"] .gx-table .gx-actions .btn,
html[data-ui="glass"] .gx-table .gx-actions .btn-icon { min-width: 32px; min-height: 32px; width: 32px; height: 32px; padding: 0; justify-content: center; }
@media (max-width: 768px) {
    html[data-ui="glass"] .gx-table .gx-actions .btn,
    html[data-ui="glass"] .gx-table .gx-actions .btn-icon { min-width: 38px; min-height: 38px; width: 38px; height: 38px; }
}

/* --- the two-column form ------------------------------------------------- */
html[data-ui="glass"] .gx-form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
html[data-ui="glass"] .gx-form2 > .gx-span2 { grid-column: 1 / -1; }
html[data-ui="glass"] .gx-form2 > * { min-width: 0; margin: 0; }
@media (max-width: 1023px) {
    html[data-ui="glass"] .gx-form2 { grid-template-columns: minmax(0, 1fr); }
}

/* --- tabs in one pane ---------------------------------------------------- */
html[data-ui="glass"] .gx-tabs [role="tablist"] {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--g-surface);
    border: 1px solid var(--g-stroke);
}
html[data-ui="glass"] .gx-tabs [role="tab"] {
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
html[data-ui="glass"] .gx-tabs [role="tab"][aria-selected="true"] {
    background: var(--g-surface-top);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
html[data-ui="glass"] .gx-tabs [role="tab"]:focus-visible { outline: 2px solid var(--g-brand); outline-offset: 1px; }
html[data-ui="glass"] .gx-tabs [role="tabpanel"][hidden] { display: none; }
@media (max-width: 768px) {
    html[data-ui="glass"] .gx-tabs [role="tab"] { min-height: 36px; }   /* a finger's target on a phone */
}

/* ---------------------------------------------
   20) THE DASHBOARD ON ONE SCREEN (C6 — the reviewer's mockup, approved by
   Mohamed: tools-local/glass/v3/dashboard-fit.html). index.php's own blocks,
   regrouped (markup under the switch only — OFF byte-identical):
     row 1  the hero (7 of 12) · the owed island (5)
     row 2  the customer journey, compact
     row 3  «Analytics» (5: the chart · sources · recent activity as tabs)
            · the list (4: follow-ups · top deals · top performers · due
            subscriptions as tabs) · the figures as tiles + quick actions (3)
   On one screen from 1100×600 up (no page scroll at 1509×658); smaller, the
   blocks stack in the same order and the page scrolls as before.
   --------------------------------------------- */
html[data-ui="glass"] .page-content:has(> #gd-hero) > #gd-kpis { order: 4; }
html[data-ui="glass"] .page-content:has(> #gd-hero) > #gd-qa { order: 4; }
html[data-ui="glass"] .page-content:has(> #gd-hero) > #gd-an { order: 6; }
html[data-ui="glass"] .page-content:has(> #gd-hero) > #gd-list { order: 7; }

/* «Analytics» and the list: one pane each; their panels are tabs (glass-ui.js). */
html[data-ui="glass"] .gd-an,
html[data-ui="glass"] .gd-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;   /* the list's inline margin-top (index.php) */
    padding: 14px 18px;
    background-color: var(--g-surface);
    border: 1px solid var(--g-stroke);
    border-radius: var(--g-radius);
    box-shadow: var(--g-hl), var(--g-shadow-sm);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
}
html[data-ui="glass"] .gd-card__head { flex: none; flex-wrap: nowrap; margin-bottom: 10px; }
html[data-ui="glass"] .gd-card__head .gd-end { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
html[data-ui="glass"] .gd-card__head [role="tab"] { min-height: 30px; padding: 0 10px; font-size: 11.5px; }
@media (max-width: 768px) {
    html[data-ui="glass"] .gd-card__head [role="tab"] { min-height: 36px; }
    html[data-ui="glass"] .gd-card__head { flex-wrap: wrap; }
}
html[data-ui="glass"] .gd-an > .panel,
html[data-ui="glass"] .gd-list > .panel,
html[data-ui="glass"] .gd-list > [role="tabpanel"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* The tab says what the panel is: its own title goes; a «view all» link stays. */
html[data-ui="glass"] .gd-an .panel__title,
html[data-ui="glass"] .gd-list .panel__title,
html[data-ui="glass"] .gd-list #gd-l-top > .gd-sh,
html[data-ui="glass"] .gd-an #gd-an-chart > .panel__header,
html[data-ui="glass"] .gd-an #gd-an-src > .panel__header { display: none; }
html[data-ui="glass"] .gd-an .panel__header,
html[data-ui="glass"] .gd-list .panel__header {
    flex: none;
    justify-content: flex-end;
    min-height: 0;
    margin: 0 0 4px;
    padding: 0;
    border: 0;
}
html[data-ui="glass"] .gd-an .panel__body,
html[data-ui="glass"] .gd-list .panel__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
/* The chart fills its tab (index.php writes 280px inline). */
html[data-ui="glass"] .gd-an #gd-an-chart .panel__body { overflow: hidden; }
html[data-ui="glass"] .gd-an #gd-an-chart .panel__body > div { height: 100% !important; min-height: 0; }
/* Sources: the doughnut beside its legend. */
html[data-ui="glass"] .gd-an #gd-an-src .panel__body { display: flex; align-items: center; gap: 18px; }
html[data-ui="glass"] .gd-an #gd-an-src .panel__body > div:first-child { flex: 0 0 42%; height: 100% !important; max-height: 220px; min-height: 140px; }
html[data-ui="glass"] .gd-an #sourceLegend { flex: 1 1 auto; margin-top: 0 !important; }

/* The list's tables read as a feed: no head, two lines a row. */
html[data-ui="glass"] .gd-list .data-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;   /* the light theme paints the table box */
    box-shadow: none;                     /* …and §4 makes it a pane of its own */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html[data-ui="glass"] .gd-list table,
html[data-ui="glass"] .gd-list tbody { display: block; width: 100%; min-width: 0 !important; border-spacing: 0; background: transparent !important; }
html[data-ui="glass"] .gd-list thead { display: none; }
html[data-ui="glass"] .gd-list tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    padding: 8px 2px;
    border-bottom: 1px dashed var(--g-stroke);
}
html[data-ui="glass"] .gd-list tbody tr:last-child { border-bottom: 0; }
html[data-ui="glass"] .gd-list tbody tr:hover td { background: transparent !important; }
html[data-ui="glass"] .gd-list tbody td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html[data-ui="glass"] .gd-list tbody td[colspan] { grid-column: 1 / -1; white-space: normal; text-align: center; }
/* Follow-ups: lead | due · type | agent · status (the «Le-0001» number goes). */
html[data-ui="glass"] .gd-list #gd-l-fu tbody td:nth-child(1):not([colspan]) { display: none; }
html[data-ui="glass"] .gd-list #gd-l-fu tbody td:nth-child(2) { grid-column: 1 / 3; grid-row: 1; font-size: 13px; color: var(--text-primary); }
html[data-ui="glass"] .gd-list #gd-l-fu tbody td:nth-child(4) { grid-column: 3; grid-row: 1; text-align: end; }
html[data-ui="glass"] .gd-list #gd-l-fu tbody td:nth-child(3) { grid-column: 1; grid-row: 2; }
html[data-ui="glass"] .gd-list #gd-l-fu tbody td:nth-child(5) { grid-column: 2; grid-row: 2; }
html[data-ui="glass"] .gd-list #gd-l-fu tbody td:nth-child(5)::before { content: "· "; }
html[data-ui="glass"] .gd-list #gd-l-fu tbody td:nth-child(6) { grid-column: 3; grid-row: 2; text-align: end; }
/* Top deals: deal | value · stage | close date · progress. */
html[data-ui="glass"] .gd-list #gd-l-deals tbody td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; font-size: 13px; color: var(--text-primary); }
html[data-ui="glass"] .gd-list #gd-l-deals tbody td:nth-child(3) { grid-column: 3; grid-row: 1; text-align: end; color: var(--text-primary); }
html[data-ui="glass"] .gd-list #gd-l-deals tbody td:nth-child(2) { grid-column: 1; grid-row: 2; }
html[data-ui="glass"] .gd-list #gd-l-deals tbody td:nth-child(4) { grid-column: 2; grid-row: 2; }
html[data-ui="glass"] .gd-list #gd-l-deals tbody td:nth-child(4)::before { content: "· "; }
html[data-ui="glass"] .gd-list #gd-l-deals tbody td:nth-child(5) { grid-column: 3; grid-row: 2; }
html[data-ui="glass"] .gd-list #gd-l-deals tbody td:nth-child(5) .progress-bar { max-width: 60px !important; }
/* Top performers and due subscriptions: their lists scroll inside the tab. */
html[data-ui="glass"] .gd-list #gd-l-top { overflow-y: auto; }
html[data-ui="glass"] .gd-list #gd-l-top .gd-fi { padding: 8px 0; }
html[data-ui="glass"] .gd-list #gd-l-subs { overflow-y: auto; }
html[data-ui="glass"] .gd-list #gd-l-subs > .panel {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html[data-ui="glass"] .gd-list #gd-l-subs .panel__header { justify-content: space-between; }
html[data-ui="glass"] .gd-list #gd-l-subs .panel__header .panel__subtitle { font-size: 11.5px; }

/* The figures as tiles: icon | figure / name | delta (overdue: a red tag). */
html[data-ui="glass"] .gd-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px;
    margin: 0;
}
/* One line a tile: icon · figure · name · delta (or, on «pending tasks», the overdue
   tag in the delta's place) — four tiles share the side column's height. */
html[data-ui="glass"] .gd-kpis .stat-card-v2,
html[data-ui="glass"][data-theme="light"] .gd-kpis .stat-card-v2 {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "icon value label delta";
    align-items: center;
    column-gap: 8px;
    min-height: 0;
    height: auto;
    padding: 5px 10px;
    border-radius: 14px;
    transform: none;
}
html[data-ui="glass"] .gd-kpis .stat-card-v2:has(.stat-card-v2__note) .stat-card-v2__delta { display: none; }
html[data-ui="glass"] .gd-kpis .stat-card-v2:hover { transform: none; }
html[data-ui="glass"] .gd-kpis .stat-card-v2__head,
html[data-ui="glass"] .gd-kpis .stat-card-v2__body,
html[data-ui="glass"] .gd-kpis .stat-card-v2__value-wrap { display: contents; }
html[data-ui="glass"] .gd-kpis .icon-square { grid-area: icon; width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
html[data-ui="glass"] .gd-kpis .stat-card-v2__value,
html[data-ui="glass"] .gd-kpis .stat-card-v2__value > span { font-size: 18px; font-weight: 500; line-height: 1; margin: 0; }
html[data-ui="glass"] .gd-kpis .stat-card-v2__value { grid-area: value; }
html[data-ui="glass"] .gd-kpis .stat-card-v2__label { grid-area: label; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="glass"] .gd-kpis .stat-card-v2__delta { grid-area: delta; margin: 0; font-size: 10.5px; white-space: nowrap; }
html[data-ui="glass"] .gd-kpis .stat-card-v2__delta .stat-card-v2__footer,
html[data-ui="glass"] .gd-kpis .stat-card-v2__sparkline { display: none; }
html[data-ui="glass"] .gd-kpis .stat-card-v2__note {
    grid-area: delta;
    justify-self: end;
    margin: 0;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.14);
    color: var(--status-danger-text);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}
@media (max-width: 768px) {
    html[data-ui="glass"] .gd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    /* Two to a phone's row: two lines a tile (the figure and its delta, then the name). */
    html[data-ui="glass"] .gd-kpis .stat-card-v2,
    html[data-ui="glass"][data-theme="light"] .gd-kpis .stat-card-v2 {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "icon value delta" "icon label label";
        row-gap: 3px;
        padding: 8px 10px;
    }
}

/* Quick actions: icons (each named by its title and aria-label). */
html[data-ui="glass"] .gd-qa {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 16px;
}
html[data-ui="glass"] .gd-qa__q {
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--g-surface-strong);
    border: 1px solid var(--g-stroke);
    color: var(--g-brand);
    font-size: 13px;
    text-decoration: none;
}
html[data-ui="glass"] .gd-qa__q:hover,
html[data-ui="glass"] .gd-qa__q:focus-visible { border-color: var(--g-stroke-hi); background: var(--g-surface-top); }
html[data-ui="glass"] .gd-qa__q--primary,
html[data-ui="glass"] .gd-qa__q--primary:hover { background: var(--g-btn); border-color: transparent; color: #FFFFFF; }
html[data-ui="glass"] .gd-qa small { margin-inline-start: auto; font-size: 11px; color: var(--text-muted); }

/* --- one screen, from 1100 wide and 600 tall ---------------------------- */
@media (min-width: 1100px) and (min-height: 600px) {
    /* (:has(> #gd-an) as well: §15's two-column rule for the hero and the island has
       two :has() and would win otherwise.) */
    html[data-ui="glass"] .page-content:has(> #gd-hero):has(> #gd-an) {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        height: 100vh;
        gap: 12px;
    }
    html[data-ui="glass"] .page-content:has(> #gd-hero):has(> #gd-an) > #gd-hero { grid-column: 1 / span 7; grid-row: 1; }
    html[data-ui="glass"] .page-content:has(> #gd-hero):has(> #gd-an) > #dash-owed { grid-column: 8 / span 5; grid-row: 1; }
    html[data-ui="glass"] .page-content:has(> #gd-hero):has(> #gd-an):not(:has(> #dash-owed)) > #gd-hero { grid-column: 1 / -1; }
    html[data-ui="glass"] .page-content:has(> #gd-hero):has(> #gd-an) > #gd-journey { grid-column: 1 / -1; grid-row: 2; }
    html[data-ui="glass"] .page-content:has(> #gd-hero):has(> #gd-an) > #gd-an { grid-column: 1 / span 5; grid-row: 3 / span 2; }
    html[data-ui="glass"] .page-content:has(> #gd-hero):has(> #gd-an) > #gd-list { grid-column: 6 / span 4; grid-row: 3 / span 2; }
    html[data-ui="glass"] .page-content:has(> #gd-hero):has(> #gd-an) > #gd-kpis { grid-column: 10 / span 3; grid-row: 3; }
    html[data-ui="glass"] .page-content:has(> #gd-hero):has(> #gd-an) > #gd-qa { grid-column: 10 / span 3; grid-row: 4; }
    html[data-ui="glass"] .page-content:has(> #gd-hero):has(> #gd-an):not(:has(> #gd-qa)) > #gd-kpis { grid-row: 3 / span 2; }
    /* As many rows as tiles (3 without «revenue» — performance.view): no empty slot. */
    html[data-ui="glass"] .gd-kpis { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); min-height: 0; }

    /* The hero: the greeting on one line, three compact cards. */
    html[data-ui="glass"] .gd-hero { min-height: 0; gap: 10px; padding: 16px 22px; justify-content: flex-start; }
    html[data-ui="glass"] .gd-hero .hero-greeting h1 { font-size: 25px; line-height: 1.3; }
    html[data-ui="glass"] .gd-hero .gd-br { display: none; }
    html[data-ui="glass"] .gd-date { margin-bottom: 4px; font-size: 12px; }
    html[data-ui="glass"] .gd-today { gap: 8px; }
    /* Three columns, a card each — a role with one card (telesales: follow-ups) keeps a
       card, not a bar across the hero (the role matrix). */
    html[data-ui="glass"] .gd-today { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html[data-ui="glass"] .gd-tcard { padding: 8px 12px; border-radius: 14px; gap: 10px; }
    html[data-ui="glass"] .gd-ti { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; }
    html[data-ui="glass"] .gd-tcard b { font-size: 17px; }
    html[data-ui="glass"] .gd-tcard small { font-size: 11px; }

    /* The owed island: the period in the title line, the figure beside its button. */
    html[data-ui="glass"] #dash-owed .panel__header { flex-wrap: nowrap; padding: 14px 20px 0; }
    html[data-ui="glass"] #dash-owed .panel__subtitle { display: none; }
    html[data-ui="glass"] #dash-owed .panel__header .btn-sm,
    html[data-ui="glass"] #dash-owed .panel__header select.form-control { min-height: 28px; padding: 3px 9px !important; font-size: 11px; }
    /* The figure and its notes on one side, the button on the other — one row (it
       wrapped under the long coverage line and made the island 194px). */
    html[data-ui="glass"] #dash-owed .panel__body { padding: 6px 20px 14px; gap: 10px; align-items: center; flex-wrap: nowrap; }
    html[data-ui="glass"] #dash-owed .panel__body > div:first-child { flex: 1 1 0; min-width: 0; }
    html[data-ui="glass"] #dash-owed .panel__body > .btn { flex: none; }
    html[data-ui="glass"] #dash-owed #dash-owed-due { font-size: 42px !important; }
    html[data-ui="glass"] #dash-owed #dash-owed-coverage,
    html[data-ui="glass"] #dash-owed #dash-owed-undated,
    html[data-ui="glass"] #dash-owed #dash-owed-subs { margin-top: 2px !important; font-size: 11.5px !important; line-height: 1.45; }

    /* The journey: compact — the number and name beside each stop's icon; the line
       goes, the rates sit between the stops. */
    html[data-ui="glass"] .gd-journey { padding: 10px 20px 12px; }
    html[data-ui="glass"] .gd-journey .gd-sh { margin-bottom: 6px; }
    html[data-ui="glass"] .gd-journey .gd-k { width: 28px; height: 28px; font-size: 11px; }
    html[data-ui="glass"] .gd-journey .gd-t { font-size: 14px; }
    html[data-ui="glass"] .gd-journey .gd-t small { display: inline; margin-inline-start: 8px; font-size: 11px; }
    html[data-ui="glass"] .gd-journey .gd-tabs a { padding: 4px 10px; font-size: 11px; }
    html[data-ui="glass"] .gd-track::before { display: none; }
    /* The stops share the width, however many a role sees (2 for telesales, 3 for sales —
       not 2 of 7 columns with the rest empty; the role matrix). */
    html[data-ui="glass"] .gd-track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    html[data-ui="glass"] .gd-stop {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas: "dot num" "dot lbl";
        justify-content: center;
        align-items: center;
        column-gap: 10px;
        text-align: start;
    }
    html[data-ui="glass"] .gd-stop .gd-dot { grid-area: dot; width: 40px; height: 40px; margin: 0; border-radius: 13px; font-size: 14px; }
    html[data-ui="glass"] .gd-stop b { grid-area: num; font-size: 20px; }
    html[data-ui="glass"] .gd-stop .gd-lbl { grid-area: lbl; margin-top: 2px; font-size: 11px; white-space: nowrap; }
    html[data-ui="glass"] .gd-stop em { top: 50%; transform: translateY(-50%); inset-inline-start: -16px; }
    html[data-ui="glass"][dir="rtl"] .gd-stop em { transform: translate(50%, -50%); }
    html[data-ui="glass"][dir="ltr"] .gd-stop em { transform: translate(-50%, -50%); }
}