/* ============================================================= ez-platform brand theme Scope: [data-theme-brand="ez-platform"] on Light mode vars applied at attribute specificity (0,1,0). Dark overrides at (0,2,0) - always win over Bootstrap's [data-bs-theme="dark"]. ============================================================= */ /* ── Structure - brand-independent, set once ────────────────── */ /* Layout, spacing, radius, and typography tokens that never change regardless of which brand theme is active. */ :root { --side-w: 17.5rem; --radius-xs: 0.25rem; --radius-sm: 0.5rem; --radius: 0.625rem; --radius-lg: 0.875rem; --radius-pill: 999rem; --app-max-w: 90rem; --app-gutter: 1.5rem; --app-gutter-y: 1rem; --app-radius: 1rem; --bs-body-font-size: 0.875rem; } /* ── Light palette ──────────────────────────────────────────── */ [data-theme-brand="ez-platform"] { /* ── Elevation scale (overrides Bootstrap's tiers) ───────────── Every raised surface (dropdowns, menus, popovers, toasts, modals, lightboxes, drag ghosts) references ONE of these three tokens - never a hand-rolled box-shadow. Values are the brand's softer, flat-friendly take on Bootstrap's defaults, re-declared per theme because a dark surface needs a heavier shadow than a light one. To flatten the whole app, set all three to `none` here. */ --bs-box-shadow-sm: 0 2px 8px rgba(0,0,0,.08); --bs-box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08); --bs-box-shadow-lg: 0 12px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08); /* ── Focus ring (overrides Bootstrap's tokens) ───────────────── Bootstrap's stock --bs-focus-ring-color is a literal blue at 0.25rem; we point it at the brand primary at 3px so EVERY focus ring - Bootstrap's own :focus-visible / .focus-ring, our form fields, pagination, input groups - is one brand-consistent halo. --ez-focus-ring is the box-shadow alias for rules that apply the ring directly. */ --bs-focus-ring-width: 0.1875rem; --bs-focus-ring-opacity: 0.25; --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity)); --ez-focus-ring: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color); /* ── No Bootstrap equivalent (keep as custom) ─────────────── */ --border-strong: #a99dd0; --ez-shadow-knob: 0 1px 3px rgba(0, 0, 0, .3); /* ── Bootstrap color tokens ────────────────────────────────── */ --bs-primary: #af85ff; --bs-primary-rgb: 175, 133, 255; --bs-secondary: #6c757d; --bs-secondary-rgb: 108, 117, 125; --bs-success: #198754; --bs-success-rgb: 25, 135, 84; --bs-warning: #ffc107; --bs-warning-rgb: 255, 193, 7; --bs-danger: #dc3545; --bs-danger-rgb: 220, 53, 69; --bs-info: #0dcaf0; --bs-info-rgb: 13, 202, 240; /* ── Bootstrap text tokens ─────────────────────────────────── */ --bs-body-color: #0c1a2e; --bs-secondary-color: #5a4a7a; --bs-tertiary-color: #3a2d60; /* ── Bootstrap surface tokens ──────────────────────────────── */ --bs-body-bg: #ffffff; --bs-body-bg-rgb: 255, 255, 255; --bs-secondary-bg: #ede9f7; --bs-secondary-bg-rgb: 237, 233, 247; --bs-tertiary-bg: #e4dff2; --bs-tertiary-bg-rgb: 228, 223, 242; /* ── Brand "subtle" surface tokens ───────────────────────────── Bootstrap ships these as literals derived from ITS default blue, so rebranding --bs-primary alone leaves .bg-primary-subtle / .border-primary-subtle / .text-primary-emphasis (and .alert-primary, .accordion active) off-brand. Deriving them from the brand token keeps every subtle surface on-brand, and a derived app brand that retints --bs-primary gets matching surfaces for free. Only primary needs this: success/warning/danger/info keep Bootstrap's own hues, so Bootstrap's own subtle values for those still match. */ --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg)); --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 34%, var(--bs-body-bg)); --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 70%, #000); /* ── Bootstrap border / link tokens ────────────────────────── */ --bs-border-color: #ccc5e8; /* Links derive from the single brand token, darkened for readable contrast on the light (white) surface; hover darkens further for affordance. */ --bs-link-color: color-mix(in srgb, var(--bs-primary) 70%, #000); --bs-link-color-rgb: var(--bs-primary-rgb); --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 50%, #000); --bs-code-color: var(--bs-primary); /* ── Bootstrap component tokens ────────────────────────────── */ --bs-card-bg: var(--bs-body-bg); --bs-card-border-color: var(--bs-border-color); --bs-card-cap-bg: transparent; --bs-modal-bg: var(--bs-body-bg); --bs-modal-border-color: var(--border-strong); --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Single monospace stack for the whole app (code blocks, diffs, shortcuts, IDs). Bootstrap consumes this token for /
; custom rules use var(--bs-font-monospace). */
    --bs-font-monospace: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    color-scheme: light;
}

/* ── Dark palette override ──────────────────────────────────── */
/* Deliberately carries the FULL token set - including tokens whose values equal
   the base block - so this block is a complete, self-contained template that a
   derived app brand can copy and retheme token-by-token without cross-referencing
   the light block. Do not trim the duplicates. */
[data-theme-brand="ez-platform"][data-bs-theme="dark"] {

    /* ── Elevation scale (dark values; see light block) ──────────── */
    --bs-box-shadow-sm: 0 2px 10px rgba(0,0,0,.4);
    --bs-box-shadow:    0 8px 28px rgba(0,0,0,.65), 0 2px 10px rgba(0,0,0,.4);
    --bs-box-shadow-lg: 0 14px 44px rgba(0,0,0,.6), 0 3px 10px rgba(0,0,0,.4);

    /* ── Focus ring (dark - a touch stronger; see light block) ───── */
    --bs-focus-ring-width:   0.1875rem;
    --bs-focus-ring-opacity: 0.35;
    --bs-focus-ring-color:   rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
    --ez-focus-ring:         0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);

    /* ── No Bootstrap equivalent ───────────────────────────────── */
    --border-strong:   #42424d;
    --ez-shadow-knob:  0 1px 3px rgba(0, 0, 0, .55);

    /* ── Bootstrap color tokens ────────────────────────────────── */
    --bs-primary:          #af85ff;
    --bs-primary-rgb:      175, 133, 255;
    --bs-secondary:        #6c757d;
    --bs-secondary-rgb:    108, 117, 125;
    --bs-success:          #198754;
    --bs-success-rgb:       25, 135,  84;
    --bs-warning:          #ffc107;
    --bs-warning-rgb:      255, 193,   7;
    --bs-danger:           #dc3545;
    --bs-danger-rgb:       220,  53,  69;
    --bs-info:             #0dcaf0;
    --bs-info-rgb:          13, 202, 240;

    /* ── Bootstrap text tokens ─────────────────────────────────── */
    --bs-body-color:       #fafafa;
    --bs-secondary-color:  #a1a1aa;
    --bs-tertiary-color:   #d4d4d8;
    /* Bootstrap uses --bs-emphasis-color-rgb for table text, hover/stripe overlays.
       [data-bs-theme=dark] flips these to white; we must mirror that here. */
    --bs-emphasis-color:     #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;

    /* ── Bootstrap surface tokens ──────────────────────────────── */
    --bs-body-bg:              #141416;
    --bs-body-bg-rgb:          20, 20, 22;
    --bs-secondary-bg:         #0d0d0f;
    --bs-secondary-bg-rgb:     13, 13, 15;
    --bs-tertiary-bg:          #09090b;
    --bs-tertiary-bg-rgb:      9,  9,  11;

    /* ── Brand "subtle" surface tokens (dark; see light block) ──── */
    /* Slightly less brand and a darker ground than the light block, so the result is a
       muted "blacky purple" that lifts off the card without glowing. */
    --bs-primary-bg-subtle:     color-mix(in srgb, var(--bs-primary) 12%, var(--bs-body-bg));
    --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 28%, var(--bs-body-bg));
    --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 70%, #fff);

    /* ── Bootstrap border / link tokens ────────────────────────── */
    --bs-border-color:       #2e2e35;
    /* On the dark surface the brand token reads well as-is; hover lightens for affordance. */
    --bs-link-color:         var(--bs-primary);
    --bs-link-color-rgb:     var(--bs-primary-rgb);
    --bs-link-hover-color:   color-mix(in srgb, var(--bs-primary) 70%, #fff);
    --bs-code-color:         var(--bs-primary);

    /* ── Bootstrap component tokens ────────────────────────────── */
    --bs-card-bg:            var(--bs-body-bg);
    --bs-card-border-color:  var(--bs-border-color);
    --bs-card-cap-bg:        transparent;
    --bs-modal-bg:           var(--bs-body-bg);
    --bs-modal-border-color: var(--border-strong);

    color-scheme: dark;
}

body { 
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* ── Base link styles ─────────────────────────────────────────── */
a {
    color: var(--bs-link-color);
    transition: color 0.2s ease;
}
a:hover {
    color: var(--bs-link-hover-color);
}

/* ── Logo sizing ──────────────────────────────────────────────── */
/* EzLogo renders two  elements (light + dark). These rules are global because
   child-component output gets no scoped-CSS attribute. The admin-configured height arrives
   as the --ez-logo-max-h custom property set by EzLogo on its anchor; here we keep the
   logos responsive and aspect-correct. */
.brand-logo {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--ez-logo-max-h, 2.5rem);
}

/* Show only the image matching the active colour mode (the [data-bs-theme] attribute is set
   on  by the theme switcher, and forced to "dark" on the auth hero). */
.brand-logo--light { display: block; }
.brand-logo--dark  { display: none; }
[data-bs-theme="dark"] .brand-logo--light { display: none; }
[data-bs-theme="dark"] .brand-logo--dark  { display: block; }

/* Bootstrap's .btn-close is a black SVG; invert it in dark mode so the modal X stays
   visible. Kept explicitly even though Bootstrap also inverts it under [data-bs-theme=dark]. */
[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Sidebar brand row: push the mobile close button to the far right (replaces the old flex:1). */
.brand-wordmark {
    min-width: 0;
    margin-right: auto;
    object-fit: contain;
    object-position: left center;
}

/* Logo upload previews on the admin settings page - each on its matching backdrop. */
.logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius, 0.375rem);
}
.logo-preview img { max-height: 3.75rem; width: auto; max-width: 100%; }
.logo-preview--light { background: #ffffff; }
.logo-preview--dark  { background: #0c1a2e; }

/* ── App shell (flex-based sidebar layout) ──────────────────── */

/* App shell. Base = the full-bleed mobile surface: edge-to-edge with no card border/margin, and
   transparent so the page ground (--bs-tertiary-bg = #09090b, the marketing site's ground colour)
   shows through the transparent header and behind the #141416 content cards - exactly the site's
   surface. The boxed card (centred max-width, border, radius, outer gutter) is added only at >=xl
   in the min-width block below, where the persistent side-menu appears. display:flex and
   overflow:hidden are global: flex drives the sidebar+main row, and overflow:hidden guards against
   stray horizontal overflow on mobile and clips the rounded card corners on desktop. */
.layout {
    display: flex;
    min-height: 100vh;
    overflow: hidden;
}

/* Google's PlaceAutocompleteElement (address autocomplete) renders its suggestion list
   inside the component's shadow DOM, absolutely positioned - so any overflow-clipping
   ancestor cuts the list off. EzActionMenu escapes clipping via CSS anchor positioning,
   but that cannot reach inside a third-party shadow root; instead, un-clip the shell
   only while it actually hosts an address autocomplete. */
.layout:has(gmp-place-autocomplete) { overflow: visible; }

/* At >=xl the app becomes a boxed shell: a centred card (border, radius, outer gutter) sitting
   next to the persistent side-menu. Below xl none of this applies, so the layout is full-bleed. */
@media (min-width: 1200px) {
    .layout {
        min-height: calc(100vh - var(--app-gutter-y, 0) * 2);
        max-width: min(var(--app-max-w), calc(100vw - var(--app-gutter) * 2));
        margin-inline: auto;
        margin-block: var(--app-gutter-y, 0);
        margin-bottom: 2rem;
        background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: var(--app-radius, 0);
    }
}

/* Main content column.

   Bottom padding = the surface's own gutter PLUS a shared 1.5rem (Bootstrap spacer 4) of breathing
   room, so a page's last card never sits hard against the bottom edge of the screen. The extra rides
   a custom property rather than being baked into each breakpoint's value so a page can opt out in
   ONE place: add .ez-page-flush-bottom to the page root (see the rule under the media blocks below).
   Opting out is for full-bleed interactive surfaces whose own layout already reaches the bottom -
   VCR's styling studios are the only ones today. */
.main {
    flex: 1;
    min-width: 0;
    padding: 0.875rem 1.5rem calc(1.75rem + var(--ez-page-bottom-extra, 1.5rem));
}

/* Page content area */
.page { margin-top: 1rem; }

/* Page header */
.page-header {
    display: flex;
    align-items: center;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-lg);
    padding: 0.625rem;
    min-height: 3.875rem;
}

/* Page title / breadcrumb row */
.page-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 0 0.5rem;
}
/* EzBreadcrumb renders h1 as a direct flex child of .page-title.
   Typography comes from .ez-title-1 on the h1; this rule keeps only
   the flex/truncation behavior. */
.page-title h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
/* Underline only the label text, not the arrow icon or the gap between them
   (a default anchor underline spans every inline descendant, including whitespace). */
.breadcrumb-back { text-decoration: none; }
.breadcrumb-back span { text-decoration: underline; }

/* Brand logo shown in the header on mobile/tablet only (see LayoutHeader). No fixed cap: it uses
   the app's configured (sidebar) logo height via .brand-logo's --ez-logo-max-h, so the app's
   mobile header logo matches the marketing site's header logo. */
.header-logo { display: inline-flex; align-items: center; flex: none; }

/* Responsive: collapse sidebar and adjust layout - Bootstrap < xl */
@media (max-width: 1199.98px) {
    /* Content gutter: match the marketing site (its .vm-shell uses 1.25rem) - the single source
       of truth for the app's mobile side padding. No top padding so the header bar sits flush at
       the top like the site's sticky nav. */
    .main { padding: 0 1.25rem calc(1.5rem + var(--ez-page-bottom-extra, 1.5rem)); }

    /* Mobile/tablet header = an EXACT clone of the marketing site's nav bar (source of truth):
       a borderless, card-less row (hamburger + logo + actions) that is 7.5rem tall with its
       content vertically centred, a 1.5rem hamburger<->logo gap, and a divider flush at the bar's
       bottom. Only the actions differ from the site (credit badge / bell / avatar vs its CTA).
       - column-gap 1.5rem = the site's .vm-nav-inner gap; row-gap 0 keeps the divider flush.
       - padding 0: the row content aligns to .main's 1.25rem gutter, like the site's .vm-shell. */
    .page-header {
        flex-wrap: wrap;
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        min-height: 0;
        column-gap: 1.5rem;
        row-gap: 0;
    }
    /* The logo carries the bar's 7.5rem height (matching the site's .vm-nav-inner min-height): it
       makes the first flex line 7.5rem tall and, being inline-flex + centred, sits the 70px logo
       dead centre - exactly the site's bar. Doing it here (not on .page-header) keeps the wrapped
       breadcrumb line OUT of the bar height, so the bar is a true fixed-height row like the site. */
    .header-logo { min-height: 7.5rem; }
    /* Breadcrumb / page title drops onto its own line under the bar, separated by a full-bleed
       divider flush at the bar's bottom (mirrors the site nav's border-bottom). The negative inline
       margin cancels .main's 1.25rem gutter so the rule spans edge-to-edge; the matching inline
       padding re-aligns the heading text back to the gutter. */
    .page-title {
        flex-basis: 100%;
        order: 5;
        /* The 7.5rem bar is taller than the logo's ink, which leaves ~0.8rem of dead space at its
           bottom. The studio pages reclaim exactly that (their content pulls up against the ink),
           so pulling this row up by the same amount lands the divider at the SAME height on every
           page - otherwise studio pages draw their line at ~107px and everything else at 120px. */
        margin: -0.8125rem -1.25rem 0;
        /* Tightened from 1rem so the header block sits as close to the studio pages' as it can
           while still carrying a title (they hide theirs, so their bar is the 7.5rem row alone). */
        padding: 0.5rem 1.25rem 0;
        /* ONE divider, and a faded one: a hairline drawn as a background gradient that dissolves
           toward both screen edges, instead of a solid grey rule ending abruptly at them. Painted
           rather than bordered so nothing changes the row's box or spacing. */
        border-top: 0;
        background-image: linear-gradient(to right,
            transparent 0%,
            var(--bs-border-color) 14%,
            var(--bs-border-color) 86%,
            transparent 100%);
        background-repeat: no-repeat;
        background-size: 100% 1px;
        background-position: top center;
    }
}

/* Bootstrap < md */
@media (max-width: 767.98px) {
    .page { margin-top: 1.125rem; }
}

/* Phone in landscape: wide but very short (a 410px-tall viewport is typical). The 7.5rem logo bar
   is sized to match the marketing site's nav, which is ~29% of the screen here - so the branding is
   scaled down for this orientation only, giving the page back roughly 64px of the little height it
   has. Keyed on height + orientation, NOT width, so a genuine tablet or desktop keeps the full bar. */
@media (orientation: landscape) and (max-height: 32rem) {
    .header-logo { min-height: 3.5rem; }
    .header-logo .brand-logo { --ez-logo-max-h: 2.25rem; }
    /* The title row's pull is calibrated to the tall bar's dead space; the short bar has far less. */
    .page-title { margin-top: -0.25rem; padding-top: 0.35rem; }
}

/* Bootstrap .btn is display:inline-block with no gap - override to flex so
   icon + label spacing is intentional, not dependent on whitespace text nodes.
   Value matches gap-2 (0.5rem) for consistency with the rest of the UI.
   Centring, height and the leading icon/spinner slot live in ez-platform-buttons.css
   alongside the .btn-ez-* tiers. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: visible;
}

/* .ez-btn-basic is gone. It existed to mark