/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Frosted glass across the CRM (owner, 22.09.2026: «make such modern blurring design — all
   across the CRM», pointing at the login page's language pill and theme switch).

   KILL SWITCH. Every rule below is scoped under `html.pbx-glass`, which one line in index.html
   adds (`document.documentElement.classList.add('pbx-glass')`). Delete that line and the CRM is
   exactly as solid as it was; `document.documentElement.classList.remove('pbx-glass')` in a
   browser console does the same live, for one tab.

   WHERE. Glass only where it can be SEEN — on surfaces that float over other content:
     • the app header (the page scrolls under it) and the booths table's sticky header row;
     • every dropdown menu (the account menu, the alerts bell, the shared Select, row menus)
       and the header search results;
     • popovers (the «?» info cards), toasts, the phone's navigation drawer;
     • the backdrops behind modals and behind the booth slide-over panel.
   Deliberately solid — see the notes at each block: modal PANELS, cards and chips on flat page
   backgrounds, the desktop sidebar rail, the tiny dark tooltips, the date-range calendars.
   A blur over a flat background draws nothing new and still costs a GPU pass per frame.

   THE TRAP. `backdrop-filter`, like `transform` and `filter`, turns an element into the
   containing block of its `position: fixed` descendants (and into a "backdrop root" for any
   blurred child). The app header holds the account menu, the alerts bell and the search
   results, so its glass lives on a ::before layer instead of on the header itself — the header's
   own box, and every menu positioned against it, are untouched. Everything else that is glassed
   directly was checked for fixed-position children: none has any.

   CONTRAST. Text on glass has to stay WCAG AA over the worst thing that can scroll behind it
   (a black photo under a light-theme menu, a white one under a dark-theme menu). The fills
   below are the lowest opacity that keeps primary text ≥ 9:1 and secondary text ≥ 4.5:1 in that
   worst case — light 82 % white with the secondary ink darkened to gray-600 on glass (4.95:1),
   dark 84 % of --bg-card with the theme's own secondary ink (4.69:1). The login pills can be
   airier (72 %) because they carry two letters, not paragraphs.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

html.pbx-glass {
    --glass-bg: rgba(255, 255, 255, 0.82);
    --glass-border: rgba(17, 24, 39, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.7);
    --glass-shadow: 0 10px 32px -8px rgba(17, 24, 39, 0.18), 0 2px 8px rgba(17, 24, 39, 0.06);
    --glass-blur: 15.4px;   /* owner 23.09: +10 % (was 14px) */
    --glass-filter: blur(var(--glass-blur)) saturate(160%);
    /* The dim behind a modal is lighter than it used to be (45 %): the blur now does half of
       the separating, and a lighter veil lets the page read as "still there, paused". */
    --glass-scrim: rgba(17, 24, 39, 0.32);
    --glass-scrim-filter: blur(8.8px) saturate(120%);   /* +10 % (was 8px) */
    /* Ink on glass (see CONTRAST above). */
    --glass-ink-secondary: #4b5563;
    --glass-ink-muted: #6b7280;
}

html.pbx-glass[data-theme="dark"] {
    --glass-bg: rgba(31, 41, 55, 0.84);
    /* The dark header keeps its own, darker tone (--bg-header #111827), just frosted. */
    --glass-bar: rgba(17, 24, 39, 0.82);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
    --glass-scrim: rgba(3, 7, 18, 0.45);
    --glass-ink-secondary: #b6bec9;
    --glass-ink-muted: #98a1af;
}

/* Phones: half the blur radius is a quarter of the work, and a small screen shows less of what
   is behind anyway. */
@media (max-width: 767.98px) {
    html.pbx-glass {
        --glass-blur: 8.8px;   /* +10 % (was 8px) */
        --glass-scrim-filter: blur(4.4px);   /* +10 % (was 4px) */
    }
}

/* No backdrop-filter in this engine, or the visitor asked the OS for less transparency: the same
   surfaces, solid. Only the tokens change, so every rule below falls back in one place. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* Both selectors: the dark block above outranks a bare html.pbx-glass. */
    html.pbx-glass,
    html.pbx-glass[data-theme="dark"] {
        --glass-bg: var(--bg-card, #ffffff);
        --glass-bar: var(--bg-header, #ffffff);
        --glass-filter: none;
        --glass-scrim: rgba(17, 24, 39, 0.45);
        --glass-scrim-filter: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    html.pbx-glass,
    html.pbx-glass[data-theme="dark"] {
        --glass-bg: var(--bg-card, #ffffff);
        --glass-bar: var(--bg-header, #ffffff);
        --glass-filter: none;
        --glass-scrim: rgba(17, 24, 39, 0.5);
        --glass-scrim-filter: none;
    }
}

/* ── 1. The app header ────────────────────────────────────────────────────────────────────
   The header's own background is an inline style (and an !important one on the dark theme,
   app.css), hence the !important here. The glass itself is the ::before, NOT the header — see
   THE TRAP above. The header is already a stacking context (sticky + z-index), so a z-index:-1
   layer sits between its background and its content. */
html.pbx-glass header.border-bottom {
    background: transparent !important;
    border-bottom-color: var(--glass-border) !important;
}

html.pbx-glass header.border-bottom::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--glass-bar, var(--glass-bg));
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    box-shadow: inset 0 -1px 0 var(--glass-highlight);
}

/* The header's round icon buttons (theme sun/moon, alerts bell) share .btn-theme-toggle with a
   transparent fill, so they sit on the glass exactly as they sat on the solid bar — no rule here. */

/* Embedded pages (a booth panel's iframe) hide the header entirely; nothing to paint there. */
html.pbx-glass .page.embedded header.border-bottom::before {
    content: none;
}

/* ── 2. The booths table's sticky header row ──────────────────────────────────────────────
   The only table header in the CRM that actually sticks (Photobooths.razor clips the table
   instead of hiding its overflow); every other table's header scrolls with its rows, so glass
   there would be invisible. Each cell is small and there are ten, so the cost is a thin strip.
   !important: the dark theme pins every th to --bg-table-header with !important (app.css). */
html.pbx-glass .booths-page .table thead th {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    --text-secondary: var(--glass-ink-secondary);
}

/* ── 3. Dropdown menus ────────────────────────────────────────────────────────────────────
   Every .dropdown-menu: the account menu, the alerts bell, the shared Select, row/context menus.
   The class is repeated to outrank the per-menu backgrounds already in the tree (the account
   menu's `.user-info .dropdown-menu.um` and the dark theme's `[data-theme] .custom-select
   .dropdown-menu`) without reaching for !important. No menu has a fixed-position child, so the
   menu itself can carry the filter; Popper positions the menu from its ancestors, which the
   menu's own filter does not change. */
html.pbx-glass .dropdown-menu.dropdown-menu.dropdown-menu,
html.pbx-glass .header-search-dropdown.header-search-dropdown {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
    --text-secondary: var(--glass-ink-secondary);
    --text-muted: var(--glass-ink-muted);
}

/* ── 4. Popovers, toasts ──────────────────────────────────────────────────────────────────
   .a-tip-pop is the «?» info card (analyticsTooltip.js), appended to <body> and fixed — its own
   filter does not move it. Toasts sit in a fixed container; the toast itself is static. */
html.pbx-glass .a-tip-pop,
html.pbx-glass .toast {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
    --text-secondary: var(--glass-ink-secondary);
    --text-muted: var(--glass-ink-muted);
}

/* ── 5. The phone's navigation drawer ─────────────────────────────────────────────────────
   Already a transform container (it slides in), so the filter changes nothing about how its
   contents are positioned. Its backdrop only dims — one blurred layer, not two. The dark theme
   pins the drawer's colour with !important in app.css, hence the !important here. */
html.pbx-glass .offcanvas {
    background-color: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    --text-secondary: var(--glass-ink-secondary);
    --text-muted: var(--glass-ink-muted);
}

/* ── 6. Backdrops: modals and the booth slide-over ────────────────────────────────────────
   The page behind a dialog frosts over instead of only darkening. The PANEL on top stays solid,
   deliberately: it would be a blur over an already blurred backdrop, it holds the densest text
   in the CRM (forms), and it hosts date pickers and Select menus that must not end up inside a
   filtered containing block. The backdrop has no children at all. */
html.pbx-glass .pbx-backdrop {
    background-color: var(--glass-scrim);
    -webkit-backdrop-filter: var(--glass-scrim-filter);
    backdrop-filter: var(--glass-scrim-filter);
}

html.pbx-glass .booth-panel-overlay {
    background: var(--glass-scrim);
    -webkit-backdrop-filter: var(--glass-scrim-filter);
    backdrop-filter: var(--glass-scrim-filter);
}