/* =============================================================================
   Molonovo — Osteria Notturna
   Dark, nocturnal osteria — squid-ink canvas, coral accent, sea-glass teal,
   candlelight gold. Not a generic "AI SaaS" dark theme: we keep Fraunces
   italic headlines (artisan personality) over a near-black canvas
   (Raycast/Supabase technical elegance) — the combination is the whole point.

   Scoped via #mol-landing / #mol-app wrappers (+ .navbar globally).

   Palette:
     --canvas        #0d0e10   deep squid-ink (near-black, warm undertone)
     --canvas-raised #15171a   card surface
     --canvas-deeper #1b1e22   elevated / hover surface
     --ink           #f5ede1   warm cream text (NOT pure white)
     --ink-muted     #a8a298   secondary text
     --ink-faint     #70695e   captions / placeholders (AA on canvas)
     --border        #24272b   hairline
     --border-strong #3a3e43   prominent / inputs
     --accent        #ff5a3a   coral / persimmon (brand, CTA, danger)
     --accent-dark   #d9441f   pressed
     --sea           #4dd6bb   sea-glass teal (fresh / in-progress)
     --sand          #d4a853   candlelight gold (highlight / offerta)

   Typography:
     Display   — Fraunces (variable, italic-wonky for headlines)
     Body / UI — DM Sans
     Mono      — JetBrains Mono (prices, timestamps, KPIs)
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=DM+Sans:ital,opsz,wght@0,9..40,400..700;1,9..40,400..700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
    --canvas:        #0d0e10;
    --canvas-raised: #15171a;
    --canvas-deeper: #1b1e22;
    --ink:           #f5ede1;
    --ink-muted:     #a8a298;
    --ink-faint:     #8e887b;
    --border:        #24272b;
    --border-strong: #3a3e43;
    --accent:        #ff5a3a;
    --accent-dark:   #d9441f;
    --accent-soft:   rgba(255, 90, 58, 0.14);
    --sea:           #4dd6bb;
    --sea-soft:      rgba(77, 214, 187, 0.12);
    --sand:          #d4a853;
    --sand-soft:     rgba(212, 168, 83, 0.14);
    --warn:          #e8a33d;
    --danger:        #ff5a3a;

    --f-display: 'Fraunces', 'Times New Roman', Georgia, serif;
    --f-body:    'DM Sans', -apple-system, 'Segoe UI', sans-serif;
    --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

/* ---- Global: body + page chrome (unscoped so authed + legacy pages share it) */
html, body { background: var(--canvas) !important; }
body {
    color: var(--ink);
    font-family: var(--f-body);
    font-feature-settings: 'ss01', 'ss02', 'cv01';
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Landing + app share the squid-ink canvas + two quiet ambient glows */
#mol-landing,
#mol-app {
    background:
        /* coral ambient, top-right */
        radial-gradient(900px 520px at 92% -5%, rgba(255, 90, 58, 0.09), transparent 62%),
        /* sea-teal ambient, bottom-left */
        radial-gradient(820px 520px at -8% 110%, rgba(77, 214, 187, 0.06), transparent 62%),
        var(--canvas);
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--f-body);
}
#mol-landing *, #mol-app * { scrollbar-color: var(--border-strong) transparent; }

/* Firefox + webkit scrollbars: dark, hairline */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
    border: 2px solid var(--canvas);
}
::-webkit-scrollbar-thumb:hover { background: #4a4f55; }


/* =============================================================================
   LANDING PAGE
   ============================================================================= */

#mol-landing .mol-hero {
    position: relative;
    min-height: 86vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 4rem 1rem 5rem;
}

/* Decorative background: a faint centered ornamental rule, no glow orbs. */
#mol-landing .mol-hero-bg {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
#mol-landing .mol-hero-bg::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 10%;
    width: 1px;
    height: 80%;
    background: linear-gradient(180deg, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent);
    transform: translateX(-50%);
    opacity: 0.7;
}
/* Subtle diagonal-stripe texture, top-right — a nod to Raycast's signature
   stripe but dialed way down so it reads as ambient, not branded. */
#mol-landing .mol-hero-bg::after {
    content: '';
    position: absolute;
    right: -80px; top: -60px;
    width: 360px; height: 360px;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 90, 58, 0.08) 0,
        rgba(255, 90, 58, 0.08) 2px,
        transparent 2px,
        transparent 14px
    );
    mask: radial-gradient(closest-side, rgba(0,0,0,0.9), transparent 75%);
    -webkit-mask: radial-gradient(closest-side, rgba(0,0,0,0.9), transparent 75%);
    pointer-events: none;
    opacity: 0.9;
}

/* Corner marks + the single central dot — evolved from the old paper corners
   into luminous hairline frames that read on dark. */
#mol-landing .mol-orb {
    position: absolute;
    border: 1px solid var(--border-strong);
    background: transparent;
    border-radius: 0;
    filter: none;
    opacity: 0.7;
    animation: none;
}
#mol-landing .mol-orb-1 {
    width: 140px; height: 140px;
    top: 60px; left: 60px;
    border-right: none; border-bottom: none;
}
#mol-landing .mol-orb-2 {
    width: 140px; height: 140px;
    bottom: 60px; right: 60px;
    border-left: none; border-top: none;
}
#mol-landing .mol-orb-3 {
    width: 10px; height: 10px;
    top: 50%; left: 50%;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    opacity: 0.9;
    box-shadow: 0 0 16px 2px rgba(255, 90, 58, 0.45);
    transform: translate(-50%, -50%);
}

#mol-landing .mol-hero-container {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    text-align: center;
}

#mol-landing .mol-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 2rem;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
}
#mol-landing .mol-eyebrow::before,
#mol-landing .mol-eyebrow::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--accent);
    opacity: 0.55;
}

#mol-landing .mol-heading-xl {
    font-family: var(--f-display);
    font-size: clamp(2.8rem, 6.5vw, 5.4rem);
    font-weight: 360;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
    font-variation-settings: 'SOFT' 60, 'opsz' 144, 'WONK' 1;
}

/* The "fresco" accent is italic-wonky coral — the soul of the brand. */
#mol-landing .mol-gradient-text {
    background: none;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    background-clip: border-box;
    font-style: italic;
    font-weight: 420;
    color: var(--accent);
    font-variation-settings: 'SOFT' 100, 'opsz' 144, 'WONK' 1;
    display: inline;
    padding: 0 0.02em;
}

#mol-landing .mol-subtext {
    font-family: var(--f-body);
    font-size: 1.1rem;
    color: var(--ink-muted);
    max-width: 620px;
    margin: 1.75rem auto 0;
    line-height: 1.65;
    font-weight: 400;
}

#mol-landing .mol-cta-row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

/* Primary CTA — luminous cream pill on near-black. Inverts the prior ink-pill:
   on dark, a warm-cream fill is the loud signal. */
#mol-landing .mol-btn-primary,
#mol-app .mol-btn-primary {
    background: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    color: var(--canvas) !important;
    padding: 0.85rem 2.25rem !important;
    border-radius: 999px !important;
    font-family: var(--f-body) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.15) inset,
                0 10px 24px -14px rgba(255, 90, 58, 0.35) !important;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s, color 0.2s !important;
}
#mol-landing .mol-btn-primary:hover,
#mol-app .mol-btn-primary:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px -8px rgba(255, 90, 58, 0.5) !important;
}

/* Secondary CTA — outlined, warm cream ink on dark. */
#mol-landing .mol-btn-secondary,
#mol-app .mol-btn-secondary {
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink) !important;
    padding: 0.85rem 2.25rem !important;
    border-radius: 999px !important;
    font-family: var(--f-body) !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
#mol-landing .mol-btn-secondary:hover,
#mol-app .mol-btn-secondary:hover {
    background: var(--canvas-raised) !important;
    border-color: var(--ink) !important;
    color: var(--ink) !important;
}

#mol-landing .mol-pills {
    display: flex;
    gap: 0;
    justify-content: center;
    margin-top: 3.5rem;
    flex-wrap: wrap;
    font-family: var(--f-body);
}
#mol-landing .mol-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    padding: 0.4rem 1.25rem;
    border-radius: 0;
    color: var(--ink-muted);
    font-size: 0.82rem;
    font-weight: 500;
    border: none;
    backdrop-filter: none;
    border-right: 1px solid var(--border-strong);
}
#mol-landing .mol-pill:last-child { border-right: none; }
#mol-landing .mol-pill-dot {
    width: 7px; height: 7px; border-radius: 50%;
    box-shadow: 0 0 10px 0 currentColor !important;
}
#mol-landing .mol-dot-cyan    { background: var(--accent);  color: var(--accent); }
#mol-landing .mol-dot-emerald { background: var(--sea);     color: var(--sea); }
#mol-landing .mol-dot-sky     { background: var(--sand);    color: var(--sand); }


/* ---- Section 2: the three editorial cells ---- */

#mol-landing .mol-section {
    padding: 6rem 1rem;
}

#mol-landing .mol-section-head {
    max-width: 900px;
    margin: 0 auto 4rem;
    text-align: center;
}

#mol-landing .mol-section-eyebrow {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.25rem;
    display: inline-block;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--accent);
}

#mol-landing .mol-section-title {
    font-family: var(--f-display);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 360;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0.5rem 0 1rem;
    font-variation-settings: 'SOFT' 70, 'opsz' 80, 'WONK' 0;
}

#mol-landing .mol-section-sub {
    color: var(--ink-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 580px;
    margin: 0 auto;
}

#mol-landing .mol-bento {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
    background: var(--canvas-raised);
}

#mol-landing .mol-cell {
    position: relative;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-strong);
    border-radius: 0;
    padding: 3rem 2.25rem 2.5rem;
    transition: background 0.3s;
    overflow: hidden;
}
#mol-landing .mol-cell:last-child { border-right: none; }
#mol-landing .mol-cell:hover {
    background: var(--canvas-deeper);
    border-color: var(--border-strong);
    transform: none;
}

#mol-landing .mol-cell-num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 420;
    color: var(--accent);
    position: static;
    display: inline-block;
    letter-spacing: 0;
    margin-bottom: 1rem;
    font-variation-settings: 'SOFT' 100, 'opsz' 40, 'WONK' 1;
}
#mol-landing .mol-cell-num::after {
    content: '';
    display: inline-block;
    width: 24px; height: 1px;
    background: var(--accent);
    vertical-align: middle;
    margin-left: 0.6rem;
    opacity: 0.65;
}

#mol-landing .mol-cell-icon {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
    display: block;
    opacity: 0.7;
    filter: grayscale(30%) brightness(1.15);
}

#mol-landing .mol-cell-title {
    font-family: var(--f-display);
    color: var(--ink);
    font-weight: 440;
    font-size: 1.75rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
    font-variation-settings: 'SOFT' 50, 'opsz' 40, 'WONK' 0;
}

#mol-landing .mol-cell-text {
    font-family: var(--f-body);
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 400;
}

#mol-landing .mol-accent-line {
    width: 32px;
    height: 1px;
    border-radius: 0;
    margin-top: 1.5rem;
}
#mol-landing .mol-accent-cyan    { background: var(--accent); }
#mol-landing .mol-accent-emerald { background: var(--sea); }
#mol-landing .mol-accent-sky     { background: var(--sand); }

@media (max-width: 768px) {
    #mol-landing .mol-bento { grid-template-columns: 1fr; }
    #mol-landing .mol-cell {
        border-right: none;
        border-bottom: 1px solid var(--border-strong);
    }
    #mol-landing .mol-cell:last-child { border-bottom: none; }
}


/* ---- Section 3: editorial stats strip ---- */

#mol-landing .mol-stats-section { padding: 5rem 1rem 7rem; }

#mol-landing .mol-stats-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
}

#mol-landing .mol-stat-card {
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-strong);
    border-radius: 0;
    padding: 1.75rem 1.75rem 1.5rem;
    transition: background 0.25s;
}
#mol-landing .mol-stat-card:last-child { border-right: none; }
#mol-landing .mol-stat-card:hover {
    background: var(--canvas-raised);
    border-color: var(--border-strong);
    transform: none;
}

#mol-landing .mol-stat-number {
    font-family: var(--f-display);
    font-size: 3.25rem;
    font-weight: 360;
    font-style: italic;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
    font-variation-settings: 'SOFT' 80, 'opsz' 144, 'WONK' 1;
}
#mol-landing .mol-stat-label {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 1rem 0 0.5rem;
}
#mol-landing .mol-stat-desc {
    font-family: var(--f-body);
    font-size: 0.88rem;
    color: var(--ink-muted);
    line-height: 1.55;
    max-width: 28ch;
}

@media (max-width: 768px) {
    #mol-landing .mol-stat-card {
        border-right: none;
        border-bottom: 1px solid var(--border-strong);
    }
    #mol-landing .mol-stat-card:last-child { border-bottom: none; }
}


/* ---- Section 4: editorial CTA card ---- */

#mol-landing .mol-cta-section {
    padding: 3rem 1rem 7rem;
    text-align: center;
}
#mol-landing .mol-cta-card {
    max-width: 900px;
    margin: 0 auto;
    padding: 5rem 2rem 5.5rem;
    border-radius: 0;
    background:
        radial-gradient(600px 260px at 50% 0%, rgba(255, 90, 58, 0.08), transparent 65%),
        var(--canvas-raised);
    border: 1px solid var(--border-strong);
    position: relative;
}
#mol-landing .mol-cta-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid var(--border);
    pointer-events: none;
}
#mol-landing .mol-cta-heading {
    font-family: var(--f-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 360;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    font-style: italic;
    font-variation-settings: 'SOFT' 80, 'opsz' 144, 'WONK' 1;
}
#mol-landing .mol-cta-sub {
    font-family: var(--f-body);
    color: var(--ink-muted);
    font-size: 1.05rem;
    margin-bottom: 2.5rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}


/* =============================================================================
   APP SHELL — squid-ink canvas, editorial rhythm
   ============================================================================= */

#mol-app .mol-app-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem 5rem;
}

/* Page header */
#mol-app .mol-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-strong);
}

#mol-app .mol-page-title {
    font-family: var(--f-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 380;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0;
    font-variation-settings: 'SOFT' 60, 'opsz' 80, 'WONK' 0;
}

#mol-app .mol-page-sub {
    font-family: var(--f-body);
    color: var(--ink-muted);
    font-size: 0.95rem;
    margin-top: 0.4rem;
}

#mol-app .mol-page-actions {
    display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
}

/* Ghost + accent buttons in the header */
#mol-app .mol-btn-ghost {
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink) !important;
    padding: 0.5rem 1.1rem !important;
    border-radius: 999px !important;
    font-family: var(--f-body) !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.04em !important;
    transition: all 0.2s;
}
#mol-app .mol-btn-ghost:hover {
    background: var(--canvas-raised) !important;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
}

#mol-app .mol-btn-accent {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: #fff !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 999px !important;
    font-family: var(--f-body) !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 8px 20px -10px rgba(255, 90, 58, 0.55);
}
#mol-app .mol-btn-accent:hover {
    background: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
}

#mol-app .mol-page-meta {
    font-family: var(--f-mono);
    color: var(--ink-faint);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

/* Cards (unscoped — every dbc.Card across every page gets the nocturnal look) */
body .card {
    background: var(--canvas-raised) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}
body .card .card-body,
body .card .card-title,
body .card .card-text { color: var(--ink); font-family: var(--f-body); }
body .card .card-title { font-family: var(--f-display); font-weight: 440; letter-spacing: -0.01em; }
body .card .text-muted { color: var(--ink-muted) !important; }
/* Kill Bootstrap's drop-shadows globally — on dark they're invisible and
   depth comes from border contrast instead. */
body .shadow-sm,
body .shadow,
body .shadow-lg { box-shadow: none !important; }

body .text-muted { color: var(--ink-muted) !important; }
body h1, body h2, body h3,
body h4, body h5, body h6 {
    color: var(--ink);
    font-family: var(--f-display);
    font-weight: 440;
    letter-spacing: -0.01em;
}
body hr { border-color: var(--border-strong); opacity: 1; }

#mol-app .mol-card-title {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* KPI cards (admin dashboard) */
#mol-app .mol-kpi-card {
    background: var(--canvas-raised);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 1.4rem 1.1rem;
    transition: border-color 0.25s, transform 0.25s, background 0.25s;
    height: 100%;
}
#mol-app .mol-kpi-card:hover {
    border-color: var(--accent);
    background: var(--canvas-deeper);
    transform: translateY(-2px);
}

#mol-app .mol-kpi-label {
    font-family: var(--f-mono);
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 0.55rem;
}
#mol-app .mol-kpi-value {
    font-family: var(--f-mono);
    font-size: 1.9rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
}
#mol-app .mol-kpi-delta-up   { color: var(--sea);     font-family: var(--f-mono); font-size: 0.78rem; font-weight: 500; }
#mol-app .mol-kpi-delta-down { color: var(--accent);  font-family: var(--f-mono); font-size: 0.78rem; font-weight: 500; }
#mol-app .mol-kpi-delta-flat { color: var(--ink-faint); font-family: var(--f-mono); font-size: 0.78rem; font-weight: 500; }

/* Tabs (unscoped — admin pages live outside #mol-app too) */
body .nav-tabs {
    border-bottom: 1px solid var(--border-strong);
    gap: 0;
}
body .nav-tabs .nav-link {
    background: transparent;
    border: none;
    color: var(--ink-muted);
    font-family: var(--f-body);
    font-weight: 500;
    border-radius: 0;
    padding: 0.65rem 1.25rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
body .nav-tabs .nav-link:hover { color: var(--ink); border-color: transparent; }
body .nav-tabs .nav-link.active {
    background: transparent;
    color: var(--ink);
    border-color: transparent transparent var(--accent);
    font-weight: 600;
}

/* ButtonGroup filters — one unified segmented pill. */
body .btn-group > .btn,
body .btn-group > .btn-primary,
body .btn-group > .btn-secondary,
body .btn-group > .btn-outline-primary,
body .btn-group > .btn-outline-secondary {
    font-family: var(--f-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    border-radius: 0 !important;
    text-transform: none !important;
    padding: 0.45rem 1.1rem !important;
    box-shadow: none !important;
}
/* Outlined (unselected) state */
body .btn-group > .btn-outline-primary,
body .btn-group > .btn-outline-secondary {
    background: transparent !important;
    color: var(--ink-muted) !important;
    border: 1px solid var(--border-strong) !important;
}
body .btn-group > .btn-outline-primary:hover,
body .btn-group > .btn-outline-secondary:hover {
    background: var(--canvas-raised) !important;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
}
/* Filled (selected) state — cream-ink pill */
body .btn-group > .btn-primary,
body .btn-group > .btn-secondary {
    background: var(--ink) !important;
    color: var(--canvas) !important;
    border: 1px solid var(--ink) !important;
}
body .btn-group > .btn-primary:hover,
body .btn-group > .btn-secondary:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
/* Collapse double borders between adjacent buttons, then round the ends. */
body .btn-group > .btn + .btn { margin-left: -1px !important; }
body .btn-group > .btn:first-child {
    border-top-left-radius: 999px !important;
    border-bottom-left-radius: 999px !important;
}
body .btn-group > .btn:last-child {
    border-top-right-radius: 999px !important;
    border-bottom-right-radius: 999px !important;
}
body .btn-group > .btn-primary,
body .btn-group > .btn-secondary { z-index: 1; position: relative; }

/* Form inputs (unscoped — covers every page incl. admin flows) */
body .form-control,
body .form-select {
    background: var(--canvas-raised) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink) !important;
    border-radius: 8px;
    font-family: var(--f-body) !important;
    font-size: 0.95rem;
    padding: 0.6rem 0.9rem;
}
body .form-control::placeholder { color: var(--ink-faint); }
body .form-control:focus,
body .form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(255, 90, 58, 0.18) !important;
    color: var(--ink) !important;
    background: var(--canvas-deeper) !important;
    outline: none;
}
body .form-select {
    /* The earlier rule sets `background: var(--canvas-raised)` as a shorthand,
       which resets repeat/position/size. Restore them here along with the
       cream chevron so we don't get the icon tiled across the control. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a8a298' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.9rem center !important;
    background-size: 14px 12px !important;
    padding-right: 2.25rem !important;
}

body .input-group-text {
    background: var(--canvas-deeper) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink-muted) !important;
    font-family: var(--f-body) !important;
}

/* Badges (unscoped — status pills appear on admin/employee tables too) */
body .badge.bg-primary,
body .badge.badge-primary {
    background: var(--ink) !important;
    color: var(--canvas) !important;
    font-family: var(--f-body) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    border-radius: 4px !important;
    padding: 0.35em 0.6em !important;
}
body .badge.bg-info {
    background: var(--sea-soft) !important;
    color: var(--sea) !important;
    border: 1px solid rgba(77, 214, 187, 0.35) !important;
    font-family: var(--f-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    border-radius: 4px !important;
    padding: 0.35em 0.6em !important;
}
body .badge.bg-success {
    background: var(--sea-soft) !important;
    color: var(--sea) !important;
    border: 1px solid rgba(77, 214, 187, 0.35) !important;
    font-family: var(--f-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    border-radius: 4px !important;
    padding: 0.35em 0.6em !important;
}
body .badge.bg-warning,
body .badge.bg-warning.text-dark {
    background: var(--sand-soft) !important;
    color: var(--sand) !important;
    border: 1px solid rgba(212, 168, 83, 0.4) !important;
    font-family: var(--f-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    border-radius: 4px !important;
    padding: 0.35em 0.6em !important;
}
body .badge.bg-danger {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(255, 90, 58, 0.4) !important;
    font-family: var(--f-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    border-radius: 4px !important;
    padding: 0.35em 0.6em !important;
}
body .badge.bg-secondary {
    background: var(--canvas-deeper) !important;
    color: var(--ink-muted) !important;
    border: 1px solid var(--border-strong) !important;
    font-family: var(--f-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    border-radius: 4px !important;
    padding: 0.35em 0.6em !important;
}

/* Cart badge (catalog) — luminous coral pill */
#mol-app .mol-cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--accent);
    color: #fff;
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    padding: 0.7rem 1.35rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 10px 24px -10px rgba(255, 90, 58, 0.55);
    transition: background 0.25s, transform 0.2s;
}
#mol-app .mol-cart-badge:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
    color: #fff;
}

/* Product cards — fishmonger display crate, dark edition */
#mol-app .product-card {
    background: var(--canvas-raised) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    transition: border-color 0.25s, transform 0.2s, background 0.25s;
    position: relative;
    overflow: hidden;
}
#mol-app .product-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}
#mol-app .product-card:hover {
    border-color: var(--border-strong) !important;
    background: var(--canvas-deeper) !important;
    transform: translateY(-2px);
}
#mol-app .product-card:hover::before { transform: scaleY(1); }

#mol-app .product-card .card-title {
    color: var(--ink);
    font-family: var(--f-display);
    font-weight: 440;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}
#mol-app .product-card .card-text,
#mol-app .product-card .text-muted { color: var(--ink-muted) !important; }

/* Price in JetBrains Mono — chalkboard-style, luminous cream */
#mol-app .product-card .fw-bold {
    color: var(--ink);
    font-family: var(--f-mono);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Add-to-cart button inside product card */
#mol-app .product-card .btn-success {
    background: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    color: var(--canvas) !important;
    font-family: var(--f-body) !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    transition: background 0.2s, color 0.2s;
}
#mol-app .product-card .btn-success:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    filter: none;
}

/* Product-card quantity row: [qty][kg][AGGIUNGI]. Bootstrap input-group
   glues all three flush — push the button off the kg addon so it breathes,
   and restore both the button's pill radius and the addon's right radius
   (they'd been squared off to connect). */
#mol-app .product-card .input-group { flex-wrap: nowrap; }
#mol-app .product-card .input-group .btn-success {
    margin-left: 0.55rem !important;
    border-radius: 999px !important;
}
#mol-app .product-card .input-group .input-group-text {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Tables (unscoped — admin tables live outside #mol-app) */
body .table {
    color: var(--ink) !important;
    background: transparent !important;
    border-color: var(--border) !important;
    font-family: var(--f-body) !important;
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: var(--ink);
    --bs-table-hover-bg: var(--canvas-deeper);
    --bs-table-hover-color: var(--ink);
    --bs-table-border-color: var(--border);
    --bs-table-active-bg: var(--canvas-deeper);
    --bs-table-active-color: var(--ink);
}
body .table > :not(caption) > * > * {
    background-color: transparent !important;
    border-bottom-color: var(--border) !important;
    color: var(--ink) !important;
    padding: 0.85rem 0.8rem;
}
body .table thead th {
    color: var(--ink-muted) !important;
    font-family: var(--f-mono) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--border-strong) !important;
    background: transparent !important;
}
body .table-hover tbody tr:hover > * {
    background-color: var(--canvas-deeper) !important;
    color: var(--ink) !important;
}
body .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: var(--ink) !important;
}
body .table-bordered,
body .table-bordered > :not(caption) > * > * {
    border-color: var(--border) !important;
}
body .table-responsive { background: transparent !important; }

/* Alerts (unscoped) — soft tint + colored left border */
body .alert-info {
    background: var(--sea-soft) !important;
    border: 1px solid rgba(77, 214, 187, 0.35) !important;
    color: var(--sea) !important;
    font-family: var(--f-body) !important;
    border-radius: 8px !important;
}
body .alert-warning {
    background: var(--sand-soft) !important;
    border: 1px solid rgba(212, 168, 83, 0.4) !important;
    color: var(--sand) !important;
    font-family: var(--f-body) !important;
    border-radius: 8px !important;
}
body .alert-danger {
    background: var(--accent-soft) !important;
    border: 1px solid rgba(255, 90, 58, 0.4) !important;
    color: var(--accent) !important;
    font-family: var(--f-body) !important;
    border-radius: 8px !important;
}
body .alert-success {
    background: var(--sea-soft) !important;
    border: 1px solid rgba(77, 214, 187, 0.35) !important;
    color: var(--sea) !important;
    font-family: var(--f-body) !important;
    border-radius: 8px !important;
}

/* Loading spinner */
#mol-app ._dash-loading-callback,
#mol-landing ._dash-loading-callback { color: var(--accent); }

/* Small utilities */
#mol-app .mol-text-muted,
#mol-landing .mol-text-muted { color: var(--ink-muted) !important; }
#mol-app .mol-text-accent,
#mol-landing .mol-text-accent {
    color: var(--accent) !important;
    font-family: var(--f-display);
    font-style: italic;
}


/* =============================================================================
   Navbar — squid-ink strip with backdrop blur on every page
   ============================================================================= */

.navbar {
    background: rgba(13, 14, 16, 0.82) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid var(--border-strong) !important;
    margin-bottom: 0 !important;
    padding: 0.85rem 0 !important;
}
.navbar .navbar-brand {
    font-family: var(--f-display) !important;
    font-style: italic;
    font-weight: 440 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.01em !important;
    color: var(--ink) !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    background-clip: border-box !important;
    font-variation-settings: 'SOFT' 80, 'opsz' 40, 'WONK' 1;
}
.navbar .nav-link {
    color: var(--ink-muted) !important;
    font-family: var(--f-body) !important;
    font-weight: 500 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.01em !important;
    transition: color 0.2s;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--ink) !important;
}
/* Underline the active nav link, editorial-style */
.navbar .nav-link.active {
    position: relative;
}
.navbar .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0.75rem; right: 0.75rem;
    bottom: 2px;
    height: 1px;
    background: var(--accent);
}

.navbar-toggler {
    border-color: var(--border-strong) !important;
    box-shadow: none !important;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 90, 58, 0.25) !important; }
/* Replace Bootstrap's dark-stroked hamburger with a cream-stroked version.
   Bootstrap ships a chained rule (`.navbar-light .navbar-toggler-icon`) that
   outranks an unscoped `.navbar-toggler-icon` even with !important, so match
   its specificity by chaining inside `.navbar`. Override the Bootstrap 5.3
   CSS custom property too for theme-aware builds. */
body .navbar,
body .navbar-light,
body .navbar-dark {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f5ede1' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
body .navbar .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f5ede1' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

#navbar_div .dropdown-menu {
    background: var(--canvas-raised) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 8px !important;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.3);
    font-family: var(--f-body) !important;
}
#navbar_div .dropdown-item {
    color: var(--ink) !important;
    font-family: var(--f-body) !important;
}
#navbar_div .dropdown-item:hover {
    background: var(--canvas-deeper) !important;
    color: var(--ink) !important;
}
#navbar_div .dropdown-item.disabled {
    color: var(--ink-faint) !important;
    font-style: italic;
}


/* =============================================================================
   Responsive tweaks
   ============================================================================= */

@media (max-width: 576px) {
    #mol-landing .mol-hero-container { padding: 1rem; }
    #mol-landing .mol-hero { padding: 3rem 0.5rem 4rem; }
    #mol-landing .mol-section { padding: 4rem 0.75rem; }
    #mol-landing .mol-pills { flex-direction: column; gap: 0.25rem; }
    #mol-landing .mol-pill {
        font-size: 0.8rem;
        padding: 0.3rem 0.75rem;
        border-right: none;
    }
    #mol-landing .mol-cta-card { padding: 3rem 1.25rem; }
    #mol-app .mol-app-container { padding: 1.25rem 1rem 3rem; }
    .navbar .navbar-brand { font-size: 1.25rem !important; }
}


/* =============================================================================
   Legacy / unscoped Bootstrap selectors (login, signup, reset-password cards)
   These live outside #mol-app/#mol-landing and need the nocturnal look too.
   ============================================================================= */

/* Bootstrap card — global fallback (login card, signup card etc.) */
body > .container .card,
#login_container .card,
.card {
    background: var(--canvas-raised);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--ink);
    box-shadow: none !important;
    font-family: var(--f-body);
}

/* Titles in legacy cards render as display serif */
body .card-title,
body .card .card-title,
body h1, body h2, body h3, body h4, body h5, body h6 {
    font-family: var(--f-display);
    color: var(--ink);
    font-weight: 440;
    letter-spacing: -0.01em;
}

/* The big brand word on auth cards ("Molonovo") */
#login_container h3.card-title,
#signup_container h3.card-title,
#reset_container h3.card-title,
#newpw_container h3.card-title {
    font-style: italic;
    font-size: 2.2rem;
    font-weight: 440;
    font-variation-settings: 'SOFT' 100, 'opsz' 144, 'WONK' 1;
    color: var(--ink);
}

/* The smaller "Accedi" / "Crea il tuo account" subtitle on auth cards */
#login_container h5.card-title,
#signup_container h5.card-title {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.5rem !important;
}

/* Legacy forms — match app-shell inputs */
body .form-control,
body .form-select {
    background: var(--canvas-raised);
    border: 1px solid var(--border-strong);
    color: var(--ink);
    font-family: var(--f-body);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
}
body .form-control::placeholder { color: var(--ink-faint); }
body .form-control:focus,
body .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 90, 58, 0.18);
    background: var(--canvas-deeper);
    color: var(--ink);
}

/* Primary button — global (login ACCEDI, signup submit, etc.) */
.btn-primary {
    background: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    color: var(--canvas) !important;
    font-family: var(--f-body) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    padding: 0.7rem 1.5rem !important;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12) inset !important;
    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px -10px rgba(255, 90, 58, 0.55) !important;
}

.btn-secondary {
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink) !important;
    font-family: var(--f-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    border-radius: 999px !important;
}
.btn-secondary:hover {
    background: var(--canvas-raised) !important;
    border-color: var(--ink) !important;
    color: var(--ink) !important;
}

.btn-success {
    background: var(--sea) !important;
    border-color: var(--sea) !important;
    color: #0a1c18 !important;
    font-family: var(--f-body) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    border-radius: 999px !important;
}
.btn-success:hover {
    background: #3cbfa4 !important;
    border-color: #3cbfa4 !important;
    color: #0a1c18 !important;
}

.btn-danger {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    font-family: var(--f-body) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    border-radius: 999px !important;
}
.btn-danger:hover {
    background: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
    color: #fff !important;
}

.btn-warning {
    background: var(--sand) !important;
    border-color: var(--sand) !important;
    color: var(--canvas) !important;
    font-family: var(--f-body) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    border-radius: 999px !important;
}
.btn-warning:hover {
    background: #c29842 !important;
    border-color: #c29842 !important;
    color: var(--canvas) !important;
}

.btn-outline-primary {
    border: 1px solid var(--ink) !important;
    color: var(--ink) !important;
    background: transparent !important;
    font-family: var(--f-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    border-radius: 999px !important;
}
.btn-outline-primary:hover {
    background: var(--ink) !important;
    color: var(--canvas) !important;
}
.btn-outline-secondary {
    border: 1px solid var(--border-strong) !important;
    color: var(--ink-muted) !important;
    background: transparent !important;
    font-family: var(--f-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    border-radius: 999px !important;
}
.btn-outline-secondary:hover {
    border-color: var(--ink) !important;
    color: var(--ink) !important;
    background: var(--canvas-raised) !important;
}
.btn-outline-warning {
    border: 1px solid var(--sand) !important;
    color: var(--sand) !important;
    background: transparent !important;
    font-family: var(--f-body) !important;
    font-weight: 500 !important;
    border-radius: 999px !important;
}
.btn-outline-warning:hover {
    background: var(--sand-soft) !important;
    color: var(--sand) !important;
}

/* Links inside copy */
body a { color: var(--accent); text-decoration: none; }
body a:hover { color: #ff7a5c; text-decoration: underline; }
body a.fw-bold { color: var(--accent); }

/* Bootstrap `.btn-link` variant (e.g. "+ Aggiungi nota" on the cart row).
   Default Bootstrap blue on dark reads as generic purple/indigo — retheme
   to the coral accent, matching body link behavior. */
body .btn-link,
body .btn-link:focus {
    color: var(--accent) !important;
    text-decoration: none !important;
    font-family: var(--f-body) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
body .btn-link:hover {
    color: #ff7a5c !important;
    text-decoration: underline !important;
}

/* -----------------------------------------------------------------------
   Cart page (/carrello) — tighter mobile rhythm
   ----------------------------------------------------------------------- */

/* Round "×" remove button — square touch target on mobile. */
body .carrello-remove-btn {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Invia ordine: full-width on mobile, natural width on md+. */
body .carrello-invia-btn { width: 100%; }
@media (min-width: 768px) {
    body .carrello-invia-btn { width: auto; }
}

/* Title row on the cart page — compact headline + small clear button.
   The headline uses Fraunces display like other page titles but at H5 size
   so it sits happily alongside the Svuota button without dwarfing it. */
body .carrello-title {
    font-family: var(--f-display);
    font-weight: 440;
    letter-spacing: -0.01em;
    font-size: clamp(1.1rem, 3.2vw, 1.35rem);
    color: var(--ink);
}
body .carrello-clear-btn {
    font-size: 0.72rem !important;
    padding: 0.28rem 0.75rem !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap;
}

/* Totale headline stays prominent but doesn't overflow on small screens. */
body .carrello-totale {
    font-family: var(--f-display);
    font-weight: 440;
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    color: var(--ink);
    margin: 0;
}

/* Compact the cart table cells on mobile — the Prezzo column is gone but
   we still need the remaining four to fit. */
@media (max-width: 576px) {
    body .carrello-table th,
    body .carrello-table td {
        padding: 0.55rem 0.4rem !important;
        font-size: 0.85rem;
    }
    body .carrello-table .input-group-text { padding: 0.2rem 0.45rem; }
}

/* Label + hint text sizes on legacy forms */
body .form-label {
    font-family: var(--f-body);
    color: var(--ink-muted);
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

/* Remember-me switch */
body .form-check-input {
    border-color: var(--border-strong);
    background-color: var(--canvas-raised);
}
body .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
body .form-check-label {
    color: var(--ink-muted);
    font-family: var(--f-body);
}

/* Toast / small alerts */
body .toast {
    background: var(--canvas-raised);
    border: 1px solid var(--border-strong);
    color: var(--ink);
    font-family: var(--f-body);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.7);
}

/* Modal — dark sheet on a heavy overlay */
body .modal-content {
    background: var(--canvas-raised);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--ink);
    font-family: var(--f-body);
}
body .modal-header,
body .modal-footer {
    border-color: var(--border);
}
body .modal-title {
    font-family: var(--f-display);
    font-weight: 440;
    letter-spacing: -0.01em;
    color: var(--ink);
}
body .modal-backdrop.show {
    background: #000;
    opacity: 0.65 !important;
}
/* Close button on dark modals */
body .modal-header .btn-close,
body .btn-close {
    filter: invert(1) opacity(0.75);
}
body .btn-close:hover { filter: invert(1) opacity(1); }

/* List group (admin impostazioni, etc.) */
body .list-group-item {
    background: var(--canvas-raised);
    border-color: var(--border);
    color: var(--ink);
}

/* Bootstrap surface utilities — map the "light paper" utility to our
   elevated dark surface so any `.bg-light` island (e.g. the saved-address
   preview on checkout) reads on the nocturnal canvas. */
body .bg-light {
    background-color: var(--canvas-deeper) !important;
    color: var(--ink) !important;
}
body .bg-white {
    background-color: var(--canvas-raised) !important;
    color: var(--ink) !important;
}
body .border { border-color: var(--border) !important; }

/* Progress bar (storico, etc.) */
body .progress {
    background: var(--canvas-deeper);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    height: 0.6rem;
}
body .progress-bar {
    background: var(--accent);
}

/* Accordion (admin settings) */
body .accordion-item {
    background: var(--canvas-raised);
    border-color: var(--border);
    color: var(--ink);
}
body .accordion-button {
    background: var(--canvas-raised);
    color: var(--ink);
    font-family: var(--f-body);
    font-weight: 500;
}
body .accordion-button:not(.collapsed) {
    background: var(--canvas-deeper);
    color: var(--ink);
    box-shadow: inset 0 -1px 0 var(--border);
}
body .accordion-button::after {
    filter: invert(0.9);
}
body .accordion-body {
    background: var(--canvas-raised);
    color: var(--ink);
}

/* Date input + native pickers: tint calendar icon cream */
body input[type='date']::-webkit-calendar-picker-indicator,
body input[type='time']::-webkit-calendar-picker-indicator,
body input[type='datetime-local']::-webkit-calendar-picker-indicator {
    filter: invert(0.85) opacity(0.75);
    cursor: pointer;
}

/* Selection */
::selection {
    background: var(--accent);
    color: #fff;
}