/* ==========================================================================
   Glass app (Oct 2026) — every page of the signed-in app, linked last.

   One soft wash of colour is pinned to the screen behind the page; the white
   surfaces above it (cards, lists, tables, settings sections, plan cards,
   POS tiles, the top bar, sidebar, bottom bar and pop-ups) become frosted
   glass: a little see-through, blurred, with a bright top rim. Text stays
   true black. Previews that must show their real colours (store-branding
   designs, SMS bubbles) and menus that float over content keep solid fills.

   The #main-app #page-content prefix outranks the page sheets' class rules
   without !important; only background, blur and the rim change, so borders
   that carry meaning (a selected plan, an error) keep their colour.
   ========================================================================== */

/* ---- The wash behind every page ----------------------------------------- */
/* isolation only: #page-content is the app's scroll box and keeps its own
   positioning (overriding it stopped pages from scrolling). */
#main-app #page-content { isolation: isolate; }
#main-app #page-content::before {
    /* Pinned to the screen, so it never shows an edge of its own. */
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(45% 40% at 22% 18%, rgba(16, 185, 129, .09), transparent),
        radial-gradient(40% 36% at 86% 26%, rgba(251, 191, 36, .07), transparent),
        radial-gradient(48% 40% at 55% 80%, rgba(59, 130, 246, .045), transparent),
        radial-gradient(40% 36% at 14% 92%, rgba(168, 85, 247, .04), transparent);
}

/* ---- Frosted white surfaces --------------------------------------------- */
/* Cards and panels only. Section headings (.sx-sec) and the "Show as table"
   toggle (.ad2-table) and the rows inside a settings card (.ad2-set-list)
   have no side padding of their own, so a frosted strip behind
   them put the text flush against its edge: they stay clear. */
#main-app #page-content :is(
    .card, .data-list, .empty-state,
    .sx-list, .sx-pm-card, .sx-rcv-tile, .sx-empty,
    .lt-tbl, .lt-foot, .bd-tbl, .sd-include, .sd2-sec,
    .st-sec, .st-plan, .st-mi-card, .st-lock, .st-webhook,
    .fin-card, .gh-card, .gh-fact, .wp-card, .wp-say, .wp-loading,
    .crm-panel, .crm-toggle-row, .crm-rep-card, .bd-card,
    .ntf-list, .prod-card-v2, .lp2-arch, .lp2-sf-savebar,
    .pos-card, .pos-cart, .pos-toolbar,
    .tdc-card, .dbb-card, .dbb-dock,
    .dsz-tile, .db2-quick, .db2-today, .dsz-streams,
    .ad2-set, .ad2-panel, .ad2-card, .ad2-msg-tile,
    .admin-package-card, .ad2-ct-tile, .ad2-tools, .ad2-pm-save
) {
    background-color: rgba(255, 255, 255, .68);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(15, 23, 42, .04), 0 14px 32px -22px rgba(15, 23, 42, .28);
}
/* Out-of-stock and archived tiles keep their dimmed look. */
#main-app #page-content :is(.prod-card-v2.is-out, .pos-card.pos-out-of-stock) { background-color: rgba(248, 250, 252, .62); }
/* Busy surfaces that sit over moving content stay a little more solid. */
#main-app #page-content :is(.lp2-sf-savebar, .pos-cart, .pos-toolbar, .dbb-dock) { background-color: rgba(255, 255, 255, .82); }
/* A frosted card inside a frosted card would blur twice: inner ones go clear. */
#main-app #page-content :is(.card, .sx-list, .st-sec, .fin-card, .gh-card, .crm-panel) :is(.card, .sx-list, .st-sec, .sx-pm-card, .st-lock, .crm-toggle-row) {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ---- Top bar, sidebar, bottom bar --------------------------------------- */
#main-app > header.topbar {
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom-color: rgba(255, 255, 255, .7);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .05), 0 10px 30px -24px rgba(15, 23, 42, .4);
}
#main-app .sidebar {
    /* mostly solid: just a hint of glass, so the menu reads cleanly */
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border-right: 1px solid rgba(255, 255, 255, .7);
}

#main-app .bottom-nav {
    background: rgba(255, 255, 255, .72);
    border-top: 1px solid rgba(255, 255, 255, .7);
}

/* ---- Pop-ups ------------------------------------------------------------ */
.modal-overlay .modal {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 30px 70px -30px rgba(15, 23, 42, .5);
}

/* ---- Coloured page banners (.sx-hero) get the dashboard's gloss ---------
   A top sheen and a light rim, drawn as inner shadows so the banner's own
   colour layers and decorations stay as they are. */
#main-app #page-content .sx-hero {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .32),
        inset 0 0 0 1px rgba(255, 255, 255, .14),
        inset 0 46px 60px -44px rgba(255, 255, 255, .22),
        0 18px 40px -26px rgba(15, 23, 42, .45);
}

/* Platform prices shown in the owner's currency carry the amount actually
   charged underneath (App.platformMoneyHtml). */
.pm-charge { display: block; margin-top: 2px; font-size: .72rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: #475569; }