/* ============================================================================
   NEON ARCADE — Family Hub redesign theme overlay
   Blend: Direction D (gamification) × Direction B (palette), premium-lean.
   Loaded AFTER styles.css so it overrides the legacy light theme.

   Layers:
     1. Tokens        — remap legacy vars + new --na-* design tokens
     2. Base          — body, typography, scrollbars
     3. Shell         — sidebar nav, top bar, bottom tabs, hamburger, modal
     4. Primitives    — widgets/cards, buttons, inputs, tabs, utilities
     5. Home (.hb-*)  — glass cards, XP bars, stamp+glow check, neon avatars
   Per-page sections are appended further down as each view is themed.
   ============================================================================ */

/* ===== 1. TOKENS =========================================================== */
:root {
    /* Surfaces (glass over navy) */
    --na-bg-solid:     #0a0f20;
    --na-surface:      rgba(255,255,255,0.055);
    --na-surface-2:    rgba(255,255,255,0.038);
    --na-surface-3:    rgba(255,255,255,0.085);
    --na-solid:        #141b30;   /* opaque panel for inputs/modals */
    --na-solid-2:      #1b2540;

    /* Ink */
    --na-ink:          #EAF0FF;
    --na-ink-soft:     #9aa7c7;
    --na-ink-faint:    #6b7795;

    /* Lines */
    --na-border:       rgba(255,255,255,0.12);
    --na-border-strong:rgba(255,255,255,0.20);

    /* Accents (B palette) */
    --na-accent:       #22D3EE;   /* cyan */
    --na-accent-2:     #A78BFA;   /* violet */
    --na-on-accent:    #04121a;
    --na-danger:       #fb7185;
    --na-success:      #34D399;
    --na-warn:         #FBBF24;

    /* Geometry */
    --na-radius-card:  18px;
    --na-radius-chip:  13px;
    --na-radius-btn:   13px;
    --na-radius-pill:  999px;

    /* Elevation — premium-lean: soft shadow + glow, subtle hard block on game bits */
    --na-shadow-soft:  0 14px 34px rgba(2,6,16,0.45);
    --na-shadow-card:  0 10px 26px rgba(2,6,16,0.40);
    --na-block:        rgba(4,8,18,0.45);   /* hard-offset color for XP/press */
    --na-glow-cyan:    0 0 18px rgba(34,211,238,0.55);
    --na-glow-violet:  0 0 18px rgba(167,139,250,0.50);

    /* Fonts */
    --na-display: 'Bungee', 'Space Grotesk', system-ui, sans-serif;
    --na-body:    'Space Grotesk', system-ui, sans-serif;

    /* ---- Remap legacy tokens → dark (high-leverage cascade flip) ---- */
    --bg-primary:    var(--na-surface-2);
    --bg-secondary:  var(--na-surface);
    --bg-warm:       rgba(251,191,36,0.10);
    --text-primary:  var(--na-ink);
    --text-secondary:var(--na-ink-soft);
    --border-color:  var(--na-border);

    --accent-blue:   var(--na-accent);
    --accent-coral:  #fb7185;
    --accent-green:  var(--na-success);
    --accent-yellow: var(--na-warn);
    --accent-purple: var(--na-accent-2);
    --accent-pink:   #f472b6;

    --shadow-sm:  0 2px 8px rgba(2,6,16,0.35);
    --shadow-md:  0 8px 22px rgba(2,6,16,0.42);
    --shadow-lg:  0 16px 38px rgba(2,6,16,0.50);
    --shadow-warm:0 14px 30px rgba(34,211,238,0.18);

    /* Per-person identity colors (B palette) */
    --color-steve:  #38BDF8;
    --color-angie:  #FBBF24;
    --color-simon:  #34D399;
    --color-family: #A78BFA;
}

/* ===== 2. BASE ============================================================= */
body {
    font-family: var(--na-body);
    color: var(--na-ink);
    background:
        radial-gradient(90% 70% at 85% -5%, rgba(167,139,250,0.12), transparent 55%),
        radial-gradient(120% 100% at 12% -10%, #1b2748 0%, #0a0f20 60%),
        var(--na-bg-solid);
    background-attachment: fixed;
    min-height: 100vh;
}
/* Neutralize the legacy kid-mode paper gradient if ever toggled */
body.kid-mode {
    font-family: var(--na-body);
    background:
        radial-gradient(90% 70% at 85% -5%, rgba(167,139,250,0.12), transparent 55%),
        radial-gradient(120% 100% at 12% -10%, #1b2748 0%, #0a0f20 60%),
        var(--na-bg-solid);
    background-attachment: fixed;
}

/* Display headings → Bungee (page titles only, not sub-section labels) */
.widget-title,
.hb-person-name,
.hb-day-name,
.nav-drawer-title,
.view-title, .section-title,
.view-header h1, .view-header h2,
.modal-title,
.calendar-title,
.fin-section-title {
    font-family: var(--na-display) !important;
    letter-spacing: 0.012em;
    font-weight: 400;
}

/* Thin neon scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(34,211,238,0.45); }

.text-muted, .text-secondary { color: var(--na-ink-soft) !important; }

/* The legacy #mainContainer only ever holds the (always-hidden) summary bar —
   hide its empty padded box so the home board can use the full screen height. */
#mainContainer { display: none !important; }

/* ===== 3. SHELL =========================================================== */

/* ---- Sidebar (drawer repurposed as fixed rail on the wall display) ---- */
.nav-drawer {
    background: linear-gradient(180deg, rgba(20,27,48,0.92), rgba(10,15,32,0.96)) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-right: 1px solid var(--na-border) !important;
}
.nav-drawer-title { color: var(--na-ink-soft); }

.nav-item {
    color: var(--na-ink-soft);
    border-radius: var(--na-radius-btn);
    position: relative;
    transition: background .16s, color .16s, transform .12s;
}
.nav-item:hover { background: var(--na-surface); color: var(--na-ink); }
.nav-item:active { transform: scale(0.98); }
.nav-item.active {
    background: linear-gradient(90deg, rgba(34,211,238,0.16), rgba(34,211,238,0.04));
    color: #BDF4FF;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(34,211,238,0.25);
}
.nav-item.active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 58%; border-radius: 0 4px 4px 0;
    background: var(--na-accent); box-shadow: var(--na-glow-cyan);
}

/* ---- Top bar ---- */
.top-bar {
    background: rgba(10,15,32,0.72) !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--na-border) !important;
}
.current-time { color: var(--na-ink-soft) !important; letter-spacing: .05em; }

/* ---- Hamburger FAB (phone) ---- */
.hamburger-fab {
    background: var(--na-accent) !important;
    color: var(--na-on-accent) !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(34,211,238,0.40) !important;
}

/* ---- PWA bottom tab bar (phone) ---- */
.pwa-bottom-nav {
    background: rgba(10,15,32,0.86) !important;
    border-top: 1px solid var(--na-border) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pwa-bottom-nav-item { color: var(--na-ink-faint); }
.pwa-bottom-nav-item.active { color: var(--na-accent); }

/* Show the bottom tab bar on ALL phones (not only installed PWA), per the
   redesign brief — sidebar nav -> bottom tabs. The "More" tab opens the drawer
   for the remaining pages. FAB is hidden so the two don't overlap. */
@media (max-width: 600px) {
    .pwa-bottom-nav { display: flex !important; }
    .hamburger-fab  { display: none !important; }
    #viewContainer, .container {
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .hb-layout { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---- Drawer overlay / mobile sheet ---- */
.nav-drawer-overlay { background: rgba(4,8,18,0.6); }

/* ===== 4. PRIMITIVES ====================================================== */

/* ---- Cards / widgets (glass) ---- */
.widget {
    background: var(--na-surface) !important;
    border: 1px solid var(--na-border) !important;
    border-radius: var(--na-radius-card) !important;
    box-shadow: var(--na-shadow-card) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.widget-title { color: var(--na-ink); }

/* ---- Buttons ---- */
.btn-save, .btn-primary {
    background: linear-gradient(180deg, #2ee0f5, #16b6d4) !important;
    color: var(--na-on-accent) !important;
    border: none !important;
    border-radius: var(--na-radius-btn) !important;
    box-shadow: 0 6px 16px rgba(34,211,238,0.30) !important;
    transition: transform .1s, box-shadow .15s, filter .15s !important;
}
.btn-save:hover, .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 8px 22px rgba(34,211,238,0.42) !important; transform: translateY(-1px); }
.btn-save:active, .btn-primary:active { transform: translateY(1px) scale(.99); }

.btn-add {
    background: linear-gradient(180deg, #44e6ad, #21c98c) !important;
    color: #042016 !important; border: none !important;
    border-radius: var(--na-radius-btn) !important;
    box-shadow: 0 6px 16px rgba(52,211,153,0.28) !important;
}
.btn-add:hover { filter: brightness(1.06); }

.btn-secondary {
    background: var(--na-surface-3) !important;
    color: var(--na-ink) !important;
    border: 1px solid var(--na-border) !important;
    border-radius: var(--na-radius-btn) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-secondary:hover { background: rgba(255,255,255,0.12) !important; border-color: var(--na-border-strong) !important; }
.btn-secondary.active {
    background: linear-gradient(180deg, #2ee0f5, #16b6d4) !important;
    color: var(--na-on-accent) !important; border-color: transparent !important;
    box-shadow: var(--na-glow-cyan) !important;
}

.btn-danger { background: linear-gradient(180deg,#fb7185,#e23d5b) !important; border: none !important; border-radius: var(--na-radius-btn) !important; }

/* ---- Inputs ---- */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="search"], input[type="date"], input[type="time"], input[type="tel"],
select, textarea {
    background: var(--na-solid) !important;
    color: var(--na-ink) !important;
    border: 1px solid var(--na-border) !important;
    border-radius: var(--na-radius-btn) !important;
}
input::placeholder, textarea::placeholder { color: var(--na-ink-faint) !important; }
input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: rgba(34,211,238,0.6) !important;
    box-shadow: 0 0 0 3px rgba(34,211,238,0.18) !important;
}

/* ---- Modal ---- */
.modal-overlay { background: rgba(4,8,18,0.66) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-content {
    background: linear-gradient(180deg, var(--na-solid-2), var(--na-solid)) !important;
    color: var(--na-ink) !important;
    border: 1px solid var(--na-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--na-shadow-soft) !important;
}
.modal-close { color: var(--na-ink-soft) !important; }

/* ===== 5. HOME (.hb-*) ==================================================== */

/* Person column — glass card. min-width:0 lets 4 columns share the wall evenly. */
.hb-person-col {
    background: var(--na-surface) !important;
    border: 1px solid var(--na-border) !important;
    border-radius: var(--na-radius-card) !important;
    box-shadow: var(--na-shadow-card) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    min-width: 0;
}

/* Squared neon avatar (uses --pc set per-column by app.js).
   Smaller than the legacy 120px so four columns fit the landscape wall. */
.hb-person-avatar {
    width: 64px !important; height: 64px !important;
    font-size: 1.7rem !important;
    border-radius: 20px !important;
    border: 2.5px solid var(--pc, rgba(255,255,255,0.5));
    box-shadow: 0 0 18px -3px var(--pc, transparent);
}
@media (max-width: 768px) {
    .hb-person-avatar { width: 76px !important; height: 76px !important; font-size: 2rem !important; }
}
.hb-person-name { color: var(--na-ink); }
.hb-person-count {
    color: var(--pc, var(--na-ink-soft)) !important;
    font-weight: 800; font-variant-numeric: tabular-nums;
    background: rgba(255,255,255,0.06); padding: 2px 10px; border-radius: var(--na-radius-pill);
}

/* XP-style progress bar */
.hb-progress-bar {
    background: rgba(255,255,255,0.10) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
    height: 10px !important; border-radius: var(--na-radius-pill) !important;
}
.hb-progress-fill {
    border-radius: var(--na-radius-pill) !important;
    background: var(--pc, var(--na-accent)) !important;
    box-shadow: 0 0 12px var(--pc, var(--na-accent));
    transition: width .5s cubic-bezier(.34,1.56,.64,1) !important;
}

/* Task chip — pressable block (subtle, premium-lean) */
.hb-task {
    background: var(--na-surface-2) !important;
    border: 1px solid var(--na-border) !important;
    border-radius: var(--na-radius-chip) !important;
    box-shadow: 0 2px 0 var(--na-block);
    transition: transform .1s cubic-bezier(.3,.9,.4,1), box-shadow .12s, background .14s !important;
}
.hb-task:hover { background: var(--na-surface-3) !important; border-color: var(--na-border-strong) !important; }
.hb-task:active { transform: translateY(2px); box-shadow: 0 0 0 var(--na-block) !important; }
.hb-task.done { opacity: 0.5 !important; }
.hb-task-label { color: var(--na-ink); word-break: normal !important; overflow-wrap: break-word !important; }

/* Checkbox — neon, with stamp + glow on check */
.hb-task-check {
    background: rgba(255,255,255,0.05) !important;
    border: 2.5px solid var(--na-border-strong) !important;
    border-radius: 9px !important;
}
.hb-task-check.checked {
    background: var(--na-success) !important;
    border-color: var(--na-success) !important;
    box-shadow: 0 0 14px rgba(52,211,153,0.7);
    animation: na-stamp .45s cubic-bezier(.3,1.5,.5,1);
}
.hb-task-check.checked::after { color: #03130c !important; }
@keyframes na-stamp {
    0%   { transform: scale(1.55) rotate(-12deg); }
    55%  { transform: scale(0.86) rotate(4deg); }
    100% { transform: scale(1.15) rotate(0); }
}

/* Add-task button — dashed neon ghost */
.hb-add-task-btn {
    background: rgba(34,211,238,0.06) !important;
    color: var(--na-accent) !important;
    border: 1.5px dashed rgba(34,211,238,0.4) !important;
    border-radius: var(--na-radius-btn) !important;
    font-family: var(--na-display) !important; font-size: 0.78rem !important; letter-spacing: .02em;
    transition: background .15s, transform .1s !important;
}
.hb-add-task-btn:hover { background: rgba(34,211,238,0.13) !important; }
.hb-add-task-btn:active { transform: scale(0.97); }

/* Unified sidebar card (date + weather + schedule + alerts) */
.hb-unified-card {
    background: var(--na-surface) !important;
    border: 1px solid var(--na-border) !important;
    box-shadow: var(--na-shadow-card) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.hb-day-name { color: var(--na-ink); }
.hb-date-str { color: var(--na-ink-soft); }
.hb-unified-divider { background: var(--na-border) !important; }
.hb-section-label { color: var(--na-ink-soft) !important; }

/* Schedule items */
.hb-schedule-item {
    background: var(--na-surface-2) !important;
    border-radius: var(--na-radius-chip) !important;
}
.hb-schedule-time { color: var(--na-ink-soft) !important; }
.hb-schedule-label { color: var(--na-ink); }

/* Alerts */
.hb-alert-blue   { background: rgba(56,189,248,0.12) !important; border: 1px solid rgba(56,189,248,0.3) !important; color: #cdeefe !important; }
.hb-alert-yellow { background: rgba(251,191,36,0.12) !important; border: 1px solid rgba(251,191,36,0.3) !important; color: #fdeec2 !important; }
.hb-alert-red    { background: rgba(251,113,133,0.12) !important; border: 1px solid rgba(251,113,133,0.3) !important; color: #fdd5dc !important; }
.hb-btn-link { color: var(--na-accent) !important; }

/* ===== 6. CALENDAR ======================================================== */
.calendar-week-day { background: var(--na-surface) !important; border: 1px solid var(--na-border) !important; border-radius: var(--na-radius-chip) !important; }
.calendar-week-day.today, .calendar-day.today {
    background: rgba(34,211,238,0.10) !important;
    border-color: rgba(34,211,238,0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(34,211,238,0.25), 0 0 20px rgba(34,211,238,0.16) !important;
}
.calendar-week-day-name  { color: var(--na-ink-soft) !important; }
.calendar-week-day-num   { color: var(--na-ink) !important; }
.calendar-week-day-month { color: var(--na-ink-faint) !important; }
.calendar-day-weather, .calendar-forecast-note { color: var(--na-ink-soft) !important; }
.calendar-week-event { background: var(--na-surface-3) !important; border: 1px solid var(--na-border) !important; border-radius: 9px !important; color: var(--na-ink) !important; }
.cal-meal-card { background: var(--na-surface-2) !important; border: 1px solid var(--na-border) !important; }
.cal-meal-recipe-name { color: var(--na-ink) !important; }
.cal-meal-type-label { color: var(--na-ink-soft) !important; }
/* Month (30-day) view cells */
.calendar-day { background: var(--na-surface-2) !important; border: 1px solid var(--na-border) !important; }
.calendar-day-num { color: var(--na-ink) !important; }

/* ===== 7. MEAL PLANNER ==================================================== */
.week-day-column { background: var(--na-surface) !important; border: 1px solid var(--na-border) !important; border-radius: var(--na-radius-chip) !important; overflow: hidden; }
.week-day-header { background: var(--na-surface-3) !important; border-bottom: 1px solid var(--na-border) !important; }
.week-day-header .day-name { color: var(--na-accent) !important; }
.week-day-header .day-num  { color: var(--na-ink) !important; }
.week-day-column.today, .week-day-header.today { box-shadow: inset 0 0 0 1px rgba(34,211,238,0.45) !important; }
.meal-slot { background: transparent !important; border-color: var(--na-border) !important; }
.meal-slot.filled { background: var(--na-surface-3) !important; }
.meal-type-label { color: var(--na-ink-soft) !important; }
.meal-name, .meal-item, .meal-content { color: var(--na-ink) !important; }
.empty-slot { color: var(--na-ink-faint) !important; }
.btn-add-meal {
    background: rgba(34,211,238,0.07) !important; color: var(--na-accent) !important;
    border: 1px dashed rgba(34,211,238,0.4) !important; border-radius: 9px !important;
}
.btn-add-meal:hover { background: rgba(34,211,238,0.14) !important; }
.btn-remove-meal { color: var(--na-ink-faint) !important; }

/* Phone: one day per screen, swipe between days (CSS scroll-snap, no JS). */
@media (max-width: 600px) {
    .meal-plan-grid {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: 86%;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0.75rem;
        padding-bottom: 0.5rem;
        scroll-padding: 0 7%;
    }
    .week-day-column { scroll-snap-align: center; min-width: 0; }
}

/* ===== 8. INVENTORY ======================================================= */
.location-tab { background: var(--na-surface-3) !important; color: var(--na-ink-soft) !important; border: 1px solid var(--na-border) !important; border-radius: var(--na-radius-pill) !important; }
.location-tab.active { background: linear-gradient(180deg,#2ee0f5,#16b6d4) !important; color: var(--na-on-accent) !important; border-color: transparent !important; box-shadow: var(--na-glow-cyan) !important; }
.inventory-item-card { background: var(--na-surface) !important; border: 1px solid var(--na-border) !important; border-radius: var(--na-radius-card) !important; box-shadow: var(--na-shadow-card) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.inventory-item-card.low      { background: rgba(251,113,133,0.12) !important; border-color: rgba(251,113,133,0.40) !important; }
.inventory-item-card.expiring { background: rgba(251,191,36,0.12) !important; border-color: rgba(251,191,36,0.40) !important; }
.inventory-item-card.expiring.low { background: rgba(251,113,133,0.15) !important; border-color: rgba(251,113,133,0.45) !important; }
.item-name { color: var(--na-ink) !important; }
.item-meta { color: var(--na-ink-soft) !important; }
.edit-inventory-btn { background: var(--na-surface-3) !important; color: var(--na-ink) !important; border: 1px solid var(--na-border) !important; border-radius: 9px !important; }
.delete-inventory-btn { background: rgba(251,113,133,0.85) !important; color: #fff !important; border: none !important; border-radius: 9px !important; }

/* ===== CALENDAR ========================================================== */
.calendar-week-day, .calendar-day {
    background: var(--na-surface) !important;
    border: 1px solid var(--na-border) !important;
    border-radius: 14px !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.calendar-week-day.today, .calendar-day.today {
    background: linear-gradient(180deg, rgba(34,211,238,0.16), rgba(34,211,238,0.05)) !important;
    border: 1.5px solid rgba(34,211,238,0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(34,211,238,0.18), 0 0 18px -6px rgba(34,211,238,0.6) !important;
}
.calendar-week-day-name, .calendar-day-name { color: var(--na-ink-soft) !important; }
.calendar-week-day-num, .calendar-day-num { color: var(--na-ink) !important; }
.calendar-week-day-month, .calendar-day-meta, .calendar-day-weather,
.calendar-forecast-note { color: var(--na-ink-soft) !important; }
.calendar-week-event {
    background: var(--na-surface-3) !important;
    border: 1px solid var(--na-border) !important;
    border-radius: 9px !important;
    color: var(--na-ink) !important;
}
.calendar-day.today .calendar-day-num,
.calendar-week-day.today .calendar-week-day-num { color: #BDF4FF !important; }
/* Month-grid day cells with events */
.calendar-day.has-events { border-color: rgba(167,139,250,0.4) !important; }

/* Meal quick-add cards/buttons under each day */
.cal-meal-card { background: var(--na-surface-2) !important; border: 1px solid var(--na-border) !important; border-radius: 10px !important; }
.cal-meal-type-label { color: var(--na-ink-soft) !important; }
.cal-meal-recipe-name { color: var(--na-ink) !important; }
.cal-meal-add-btn { border-radius: 9px !important; border: none !important; filter: saturate(1.05); }

/* ===== MEAL PLANNER ====================================================== */
.meal-plan-grid { background: transparent !important; }
.meal-slot { border-color: var(--na-border) !important; }
.meal-slot:hover  { background: var(--na-surface-3) !important; }
.meal-slot.filled { background: var(--na-surface) !important; }
.meal-type-label  { color: var(--na-ink-soft) !important; }
.meal-name        { color: var(--na-ink) !important; }
.meal-slot.empty .meal-name, .empty-slot { color: var(--na-ink-faint) !important; }
.meal-content, .meal-item { color: var(--na-ink) !important; }
.btn-remove-meal {
    background: rgba(255,255,255,0.08) !important; color: var(--na-ink-soft) !important;
    border: 1px solid var(--na-border) !important; border-radius: 8px !important;
}
.btn-remove-meal:hover { background: rgba(251,113,133,0.2) !important; color: #fff !important; }
.btn-mark-cooked {
    background: var(--na-surface-3) !important; color: var(--na-ink) !important;
    border: 1px solid var(--na-border) !important; border-radius: 8px !important;
}
.btn-add-meal { color: var(--na-accent) !important; }

/* ===== GROCERY / SHOPPING LIST (glist-*) ================================= */
.glist-row { border-bottom: 1px solid var(--na-border) !important; }
.glist-label { color: var(--na-ink) !important; }
.glist-qty {
    color: var(--na-ink-soft) !important; background: rgba(255,255,255,0.07) !important;
    border-radius: var(--na-radius-pill) !important;
}
.glist-check-box {
    border: 2.5px solid var(--na-border-strong) !important;
    background: rgba(255,255,255,0.05) !important; border-radius: 8px !important;
}
.glist-done .glist-check-box, .glist-check-box.checked {
    background: var(--na-success) !important; border-color: var(--na-success) !important;
    box-shadow: 0 0 12px rgba(52,211,153,0.6);
}
.glist-done .glist-label { opacity: 0.5 !important; }
.glist-incart-header, .glist-store-label, .glist-store-prompt { color: var(--na-ink-soft) !important; }
.glist-loc-btn { background: var(--na-surface-3) !important; border: 1px solid var(--na-border) !important; color: var(--na-ink) !important; border-radius: var(--na-radius-btn) !important; }

/* ===== FINANCIALS (fin-*) ================================================ */
.fin-summary-card, .fin-budget-overview, .fin-trend-card, .fin-savings-card,
.fin-section, .fin-card, .fin-panel {
    background: var(--na-surface) !important;
    border: 1px solid var(--na-border) !important;
    border-radius: var(--na-radius-card) !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.fin-cat-bar-track {
    background: rgba(255,255,255,0.10) !important;
    border-radius: var(--na-radius-pill) !important;
}
.fin-cat-bar-fill { border-radius: var(--na-radius-pill) !important; }
.fin-summary-label, .fin-summary-muted, .fin-summary-sub, .fin-cat-limit, .fin-cat-rem,
.fin-health-label, .fin-income-label, .fin-cat-pct, .fin-month-label {
    color: var(--na-ink-soft) !important;
}
.fin-summary-amount, .fin-cat-name, .fin-cat-amounts, .fin-income-input { color: var(--na-ink) !important; }
.fin-summary-blue { color: var(--na-accent) !important; }
.fin-month-btn, .fin-cat-quick-add { background: var(--na-surface-3) !important; border: 1px solid var(--na-border) !important; color: var(--na-ink) !important; border-radius: var(--na-radius-btn) !important; }
.fin-row, .fin-cat-row { border-color: var(--na-border) !important; }

/* ===== SETTINGS + FORMS ================================================== */
/* .form-input often has no type attr, so the input[type=...] rule misses it. */
.form-input, textarea.form-input, select.form-input,
.glist-add-input, .glist-qty-input, .fin-income-input, .ics-add-input {
    background: var(--na-solid) !important;
    color: var(--na-ink) !important;
    border: 1px solid var(--na-border) !important;
    border-radius: var(--na-radius-btn) !important;
}
.form-input::placeholder { color: var(--na-ink-faint) !important; }
.form-input:focus { border-color: rgba(34,211,238,0.6) !important; box-shadow: 0 0 0 3px rgba(34,211,238,0.18) !important; }

.settings-section, .person-card, .manage-row, .profile-card {
    background: var(--na-surface) !important;
    border: 1px solid var(--na-border) !important;
    border-radius: var(--na-radius-card) !important;
}
.form-help, .manage-row-meta, .settings-subhead, .form-group label,
.settings-color-label { color: var(--na-ink-soft) !important; }
.manage-row-name, .settings-section-title { color: var(--na-ink) !important; }
.settings-color-swatch { border: 2px solid var(--na-border-strong) !important; }
.ics-source-row, .ics-add-form { background: var(--na-surface-2) !important; border: 1px solid var(--na-border) !important; border-radius: var(--na-radius-chip) !important; }

/* ===== HOME LAYOUT — weather/schedule band on top, person columns below === */

/* Person segmented control: hidden by default, shown on phone only. */
.hb-person-switcher { display: none; }

/* ---- Wall display: horizontal weather/schedule band, then 4 columns ---- */
@media (min-width: 1024px) and (orientation: landscape) {
    .hb-layout  { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0.7rem !important; padding: 0.45rem 1.25rem 0.7rem !important; }
    .hb-sidebar { width: 100% !important; flex: 0 0 auto !important; }
    .top-bar    { display: none !important; }   /* identity lives in the sidebar now */
    .hb-meals-strip { flex: 0 0 auto; }

    /* The unified card lays its sections out as a bounded horizontal band.
       max-height + per-section overflow keeps any one section from blowing up
       the band height (a narrow schedule used to wrap into a 1000px column). */
    .hb-unified-card {
        display: flex !important; flex-direction: row !important; align-items: center;
        gap: 0 !important; padding: 0.55rem 0 !important;
        max-height: 132px; overflow: hidden; flex: 0 0 auto;
    }
    .hb-unified-card .hb-unified-divider { display: none !important; }
    .hb-date-block, #weatherStatusBar, .hb-schedule-section, .hb-alerts-section {
        padding: 0.15rem 1.4rem !important;
    }
    #weatherStatusBar, .hb-schedule-section, .hb-alerts-section {
        border-left: 1px solid var(--na-border);
    }
    .hb-date-block   { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; }
    /* Weather fills the band: current conditions on the left, the multi-day
       forecast spread evenly across the remaining width. */
    #weatherStatusBar{ flex: 1 1 auto; max-width: none; display: flex; align-items: center; justify-content: flex-start; gap: 1.75rem; }
    #weatherStatusBar .wx-today-row { flex: 0 0 auto; }
    #weatherStatusBar .wx-today-row { align-items: center; }
    #weatherStatusBar .wx-forecast-row { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
    #weatherStatusBar .wx-fc-card { flex: 0 1 auto; align-self: center; min-width: 0; text-align: center; }
    #weatherStatusBar .wx-fc-desc { display: none; }   /* keep cards compact in the band */
    .hb-schedule-section { flex: 1 1 auto; min-width: 0; max-height: 214px; overflow-y: auto; }
    .hb-schedule-list { display: flex !important; flex-wrap: wrap; gap: 0.45rem; align-content: flex-start; }
    .hb-schedule-item { flex: 0 1 230px; max-width: 260px; margin: 0 !important; }
    .hb-alerts-section { flex: 0 0 270px; max-height: 214px; overflow-y: auto; }

    /* Keep the weather block compact so the temp doesn't clip in the band */
    #weatherStatusBar .wx-today-temp { font-size: 1.85rem !important; }
    #weatherStatusBar .wx-today-icon { font-size: 2.2rem !important; }
    #weatherStatusBar .wx-today-meta { font-size: 0.72rem !important; }
    #weatherStatusBar .wx-forecast { gap: 0.4rem !important; }

    /* Person columns: full width, four across, below the band. */
    .hb-columns    { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; }
    .hb-person-col { padding: 1.15rem 1rem !important; }
}

/* ---- Phone: segmented control toggles which person's checklist shows ---- */
@media (max-width: 600px) {
    .hb-person-switcher {
        display: flex; gap: 6px; margin-bottom: 0.9rem; padding: 5px;
        background: var(--na-surface-2); border: 1px solid var(--na-border);
        border-radius: var(--na-radius-pill); overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .hb-person-tab {
        flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 7px;
        background: none; border: none; cursor: pointer; white-space: nowrap;
        padding: 10px 14px; border-radius: var(--na-radius-pill); min-height: 44px;
        font-family: var(--na-body); font-weight: 700; font-size: 0.82rem; color: var(--na-ink-soft);
        transition: background .15s, color .15s;
    }
    .hb-person-tab-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); flex-shrink: 0; box-shadow: 0 0 8px var(--pc); }
    .hb-person-tab.active { background: var(--pc); color: #04121a; }
    .hb-person-tab.active .hb-person-tab-dot { background: rgba(255,255,255,0.92); box-shadow: none; }

    /* Show only the active person's column. */
    .hb-columns { display: block !important; }
    .hb-columns .hb-person-col { display: none !important; }
    .hb-columns .hb-person-col.hb-col-active { display: block !important; }
}

/* ===== HOME: Gantt-style timeline ("Today's Schedule") ==================== */
/* Wall-only: the phone keeps the vertical schedule list in the weather card. */
.hb-timeline-card { display: none; }
.hb-timeline { display: flex; flex-direction: column; gap: 6px; margin-top: 0.4rem; }
.hb-tl-lane { display: grid; grid-template-columns: 134px 1fr; align-items: center; gap: 12px; }
.hb-tl-lane-label {
    display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 0.92rem;
    color: var(--na-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hb-tl-lane-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 8px var(--pc); flex-shrink: 0; }
.hb-tl-lane-track {
    position: relative; height: 28px; border-radius: 9px; overflow: hidden;
    background-color: var(--na-surface-2);
    background-image: repeating-linear-gradient(90deg, var(--na-border) 0 1px, transparent 1px calc(100% / var(--tl-hours, 16)));
}
.hb-tl-axis .hb-tl-lane-track { height: 16px; background: none; overflow: visible; }
.hb-tl-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.66rem; font-weight: 600; color: var(--na-ink-soft); }
.hb-tl-block {
    position: absolute; display: flex; align-items: center;
    padding: 0 7px; border-radius: 6px; font-size: 0.72rem; font-weight: 700;
    color: #04121a; overflow: hidden; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.hb-tl-block span { overflow: hidden; text-overflow: ellipsis; }
.hb-tl-meal {
    background: rgba(16,185,129,0.18) !important; color: #d6fff0 !important;
    border: 1px solid rgba(16,185,129,0.55); box-shadow: none;
}
.hb-tl-now { position: absolute; top: -1px; bottom: -1px; width: 2px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.85); z-index: 4; }

/* ===== Alerts icon + popover (next to a "Today's Schedule" header) ======== */
.hb-section-label { display: flex; align-items: center; gap: 0.5rem; }
.hb-alerts-wrap { position: relative; display: inline-flex; }
.hb-alerts-btn {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    background: rgba(251,191,36,0.16); border: 1px solid rgba(251,191,36,0.5);
    color: #fde8b0; border-radius: var(--na-radius-pill); padding: 3px 9px;
    font-size: 0.82rem; line-height: 1.3; transition: background .15s, transform .1s;
}
.hb-alerts-btn:hover  { background: rgba(251,191,36,0.3); }
.hb-alerts-btn:active { transform: scale(0.94); }
.hb-alerts-badge {
    background: var(--na-warn); color: #2a1d00; font-weight: 800; font-size: 0.68rem;
    border-radius: 999px; padding: 0 5px; min-width: 16px; text-align: center;
}
/* Alerts modal (opened from the ⚠️ icon) */
.hb-alerts-modal { display: flex; flex-direction: column; gap: 14px; }
.hb-alerts-modal-title { font-family: var(--na-display); font-size: 1.15rem; color: var(--na-ink); letter-spacing: 0.01em; }
.hb-alerts-modal-body { display: flex; flex-direction: column; gap: 10px; }

/* ===== Today's Meals strip =============================================== */
.hb-meals-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hb-meal-chip {
    display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
    background: var(--na-surface); border: 1px solid var(--na-border);
    border-radius: var(--na-radius-chip); padding: 9px 12px; min-height: 52px;
    color: var(--na-ink); transition: transform .1s, background .15s, border-color .15s;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hb-meal-chip:hover  { background: var(--na-surface-3); border-color: var(--na-border-strong); }
.hb-meal-chip:active { transform: translateY(1px) scale(.99); }
.hb-meal-emoji { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.hb-meal-text  { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.hb-meal-type  { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--na-ink-soft); }
.hb-meal-name  { font-size: 0.92rem; font-weight: 600; color: var(--na-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-meal-chip.empty .hb-meal-name  { color: var(--na-ink-faint); }
.hb-meal-chip.empty .hb-meal-emoji { opacity: 0.45; }
.hb-meal-chip.cooked .hb-meal-name { text-decoration: line-through; color: var(--na-ink-soft); }
.hb-meal-chip.cooked::after { content: '✓'; margin-left: auto; color: var(--na-success); font-weight: 900; flex-shrink: 0; }
@media (max-width: 600px) { .hb-meals-strip { grid-template-columns: repeat(2, 1fr); } }

/* ===== Signed-in user chip in the sidebar header ========================= */
.nav-drawer-header { display: flex; align-items: center; gap: 10px; }
.nav-drawer-user { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.nav-drawer-user .user-avatar-wrap { display: flex; align-items: center; gap: 7px; cursor: pointer; position: relative; }
.nav-drawer-user .user-display-name { color: var(--na-ink); font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
.nav-drawer-user .user-avatar-fallback,
.nav-drawer-user .user-avatar-img { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; flex-shrink: 0; object-fit: cover; }
.nav-drawer-user .user-role-badge { font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 6px; background: rgba(34,211,238,0.18); color: var(--na-accent); }

/* ===== Weather forecast cards (themed + compact) ========================== */
.wx-today-temp { color: var(--na-ink) !important; }
.wx-today-desc { color: var(--na-ink-soft) !important; }
.wx-today-meta { color: var(--na-ink-faint) !important; font-size: 0.74rem !important; }
.wx-fc-card { color: var(--na-ink); display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.1; }
.wx-fc-label { font-size: 0.66rem; color: var(--na-ink-soft); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.wx-fc-emoji { font-size: 1.4rem; }
.wx-fc-temps { font-weight: 700; color: var(--na-ink); font-size: 0.92rem; }
.wx-fc-low   { color: var(--na-ink-soft); font-weight: 600; }
.wx-fc-desc  { font-size: 0.6rem; color: var(--na-ink-soft); }
.wx-fc-precip{ font-size: 0.62rem; color: #7cc5ff; }

@media (min-width: 1024px) and (orientation: landscape) {
    .hb-timeline-card    { display: block; padding: 0.6rem 1.3rem !important; flex: 0 0 auto; }
    .hb-schedule-section { display: none !important; }    /* hide the list in the band */

    /* Definite layout height so the board flex-fills exactly one screen
       (≈ viewport minus the top bar). overflow:hidden guards the seams; a
       person with many tasks gets an internal scroll instead of overflowing. */
    .hb-layout { height: calc(100vh - 12px) !important; min-height: 0 !important; overflow: hidden; }
    .hb-board  { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .hb-columns{ flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(0, 1fr); align-content: stretch; align-items: stretch !important; }
    .hb-person-col { display: flex !important; flex-direction: column; min-height: 0; }
    .hb-person-col .hb-task-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    /* push +Add to the bottom of each filled column */
    .hb-person-col .hb-add-task-btn { margin-top: auto; }
}