/**
 * LIQUID GLASS — the one skin the whole app wears.
 *
 * Field brief (2026-08-15): "too complex and too busy … make it feel like an
 * Apple iPhone, like glass, smooth, modular, reduce critical thinking, keep
 * it simple stupid, institutional grade."
 *
 * DESIGN LAWS (human-psyche driven):
 *  1. ONE material  — every raised surface is the same frosted glass card.
 *     The eye learns it once; recognition replaces reading.
 *  2. ONE accent    — a single blue gradient means "act here". Everything
 *     else recedes into calm neutrals. Red is reserved for genuine danger.
 *  3. QUIET depth   — hairline borders + soft ambient shadow, never loud
 *     outlines. Hierarchy comes from blur/elevation, not decoration.
 *  4. MOTION as meaning — one spring curve; things settle, never jump.
 *  5. TOUCH first   — 44px targets, generous padding, no precision required.
 *
 * ENGINEERING LAW: this is a SKIN. It restyles the app's existing class
 * names (.card, .dash-widget, .topbar, .btn, .stat-card …) and renames
 * nothing, so every module keeps working untouched. Remove this file and
 * the app returns to its old look — fully modular.
 */

:root {
    --glass-bg: rgba(255, 255, 255, .72);
    --glass-bg-strong: rgba(255, 255, 255, .88);
    --glass-line: rgba(13, 24, 48, .08);
    --glass-shadow: 0 1px 2px rgba(13, 24, 48, .04), 0 8px 28px rgba(13, 24, 48, .07);
    --glass-shadow-hover: 0 2px 4px rgba(13, 24, 48, .05), 0 14px 40px rgba(13, 24, 48, .11);
    --glass-radius: 18px;
    --glass-radius-sm: 12px;
    --glass-spring: cubic-bezier(.32, .72, 0, 1);
    --glass-ink: #0b1220;
    --glass-ink-2: #55617a;
    --glass-accent: #0a5cff;
    --glass-grad: linear-gradient(135deg, #0a5cff 0%, #4f46e5 100%);
}

/* ═══ CANVAS — a living color mesh (vivid pass 2026-08-15: "gray and blue
   is boring … has to be inviting", ref capitalize.io). The field breathes
   slowly; the glass cards read crisp against it. ═══ */
body {
    background:
        radial-gradient(1000px 560px at 88% -120px, rgba(124, 58, 237, .16), transparent 62%),
        radial-gradient(900px 520px at -140px 30%, rgba(10, 92, 255, .15), transparent 60%),
        radial-gradient(800px 500px at 55% 115%, rgba(236, 72, 153, .11), transparent 60%),
        radial-gradient(700px 400px at 25% -60px, rgba(45, 212, 191, .10), transparent 55%),
        #f4f5fb !important;
    background-attachment: fixed;
}
/* Slow aurora shimmer over the mesh — alive, never distracting */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(52vmax 40vmax at 20% 15%, rgba(10, 92, 255, .10), transparent 60%),
        radial-gradient(48vmax 38vmax at 80% 80%, rgba(168, 85, 247, .10), transparent 60%);
    animation: glass-breathe 18s ease-in-out infinite alternate;
}
@keyframes glass-breathe {
    from { opacity: .5; transform: translateY(0); }
    to   { opacity: 1;  transform: translateY(-3vmax); }
}
.main-content, .page, .topbar, .sidebar { position: relative; z-index: 1; }

/* ═══ TOPBAR — floating glass toolbar ═══ */
.topbar {
    background: rgba(255, 255, 255, .78) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    border-bottom: 1px solid var(--glass-line) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 24px rgba(13, 24, 48, .05) !important;
}
.topnav-item { border-bottom-width: 2px !important; font-weight: 650; }
.topnav-item.active { color: var(--glass-accent) !important; border-bottom-color: var(--glass-accent) !important; }
.topnav-more-menu, .new-menu {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, .6) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(13, 24, 48, .18) !important;
    padding: 8px !important;
}
.topnav-more-menu a, .new-menu a { border-radius: 10px !important; min-height: 42px; }
.btn-new {
    background: var(--glass-grad) !important;
    box-shadow: 0 6px 16px rgba(10, 92, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
    transition: transform .22s var(--glass-spring), box-shadow .22s var(--glass-spring) !important;
}
.btn-new:hover { opacity: 1 !important; transform: scale(1.04); box-shadow: 0 10px 24px rgba(10, 92, 255, .42) !important; }
.btn-new:active { transform: scale(.97); }

/* ═══ THE ONE MATERIAL — every raised surface is this glass ═══ */
.card, .dash-widget, .stat-card,
#dash-signal-bar > div,
.dash-action, #myday-host > section {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: var(--glass-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: transform .3s var(--glass-spring), box-shadow .3s var(--glass-spring);
}
.dash-widget:hover, .stat-card:hover, .card.property-card:hover, .dash-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow-hover) !important;
}
.dash-widget-header {
    background: transparent !important;
    border-bottom: 1px solid var(--glass-line) !important;
    letter-spacing: -.01em;
}

/* ═══ CONTROLS — calm, rounded, springy ═══ */
.btn, button.btn { border-radius: 11px !important; transition: transform .2s var(--glass-spring), box-shadow .2s var(--glass-spring), background .15s ease; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--glass-grad) !important; border: none !important; box-shadow: 0 5px 14px rgba(10, 92, 255, .28) !important; }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(10, 92, 255, .38) !important; }
select, input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="search"], textarea {
    border-radius: 11px !important;
    border-color: var(--glass-line) !important;
    background: rgba(255, 255, 255, .8) !important;
    transition: box-shadow .18s ease, border-color .18s ease;
}
select:focus, input:focus, textarea:focus {
    outline: none !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 3px rgba(10, 92, 255, .2), 0 0 0 1.5px var(--glass-accent) !important;
}

/* ═══ MOBILE DRAWER — glass sheet ═══ */
.sidebar {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    backdrop-filter: blur(26px) saturate(1.5);
    border-right: 1px solid rgba(255, 255, 255, .5) !important;
}
.nav-item { border-radius: 12px !important; margin: 2px 8px; }
.nav-item.active { background: rgba(10, 92, 255, .1) !important; color: var(--glass-accent) !important; }

/* ═══ PAGE TITLES — bold gradient display cut (the capitalize.io hero move) ═══ */
h1.page-title, .page-title {
    letter-spacing: -.03em !important;
    font-weight: 800 !important;
    /* width fits the text so the gradient spans the WORD, not the page */
    display: inline-block;
    width: fit-content;
    background: linear-gradient(100deg, #0b1220 0%, #0a5cff 60%, #7c3aed 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #0b1220; /* fallback for non-webkit */
}
.page-subtitle { color: var(--glass-ink-2) !important; }

/* ═══ VIVID ACCENTS — color as wayfinding, not decoration ═══ */
/* Cards get a living edge: a soft conic glow appears on hover */
.dash-widget, .card, .stat-card { position: relative; }
.dash-widget::after, .stat-card::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(10, 92, 255, .55), rgba(168, 85, 247, .45), rgba(236, 72, 153, .40));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s var(--glass-spring);
    pointer-events: none;
}
.dash-widget:hover::after, .stat-card:hover::after { opacity: 1; }

/* Widget headers: each gets a colored icon tint via nth-of-type rhythm */
.dash-widget .dash-widget-header i { color: #0a5cff; }
.dash-widget:nth-of-type(2n) .dash-widget-header i { color: #7c3aed; }
.dash-widget:nth-of-type(3n) .dash-widget-header i { color: #db2777; }
.dash-widget:nth-of-type(4n) .dash-widget-header i { color: #0d9488; }

/* Stat cards: vivid gradient number + colored top edge */
.stat-card { overflow: hidden; }
.stat-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #0a5cff, #7c3aed, #ec4899);
    opacity: .85;
}
.stat-card .stat-value, .stat-value {
    background: linear-gradient(120deg, #0a5cff, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
}

/* Quick actions: playful lift + tinted glow per action */
.dash-action { cursor: pointer; }
.dash-action:hover { transform: translateY(-3px) scale(1.015); }
.dash-action:active { transform: scale(.98); }
.dash-action .da-ic {
    transition: transform .3s var(--glass-spring);
    box-shadow: 0 4px 12px rgba(13, 24, 48, .10);
}
.dash-action:hover .da-ic { transform: scale(1.12) rotate(-4deg); }

/* ═══ WEATHER ADVISORY (weather-intel.js renders into this) ═══ */
.wx-strip {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: linear-gradient(120deg, rgba(10, 92, 255, .10), rgba(79, 70, 229, .08)), var(--glass-bg);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid rgba(10, 92, 255, .18);
    border-radius: var(--glass-radius);
    padding: 13px 18px;
    margin-bottom: 20px;
    box-shadow: var(--glass-shadow);
    animation: wx-in .5s var(--glass-spring) both;
}
@keyframes wx-in { from { opacity: 0; transform: translateY(10px); } }
.wx-ic {
    width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
    background: var(--glass-grad); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
    box-shadow: 0 5px 14px rgba(10, 92, 255, .3);
}
.wx-title { font-size: 13.5px; font-weight: 800; color: var(--glass-ink); letter-spacing: -.01em; }
.wx-sub { font-size: 12.5px; color: var(--glass-ink-2); }
.wx-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; cursor: pointer;
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--glass-line);
    border-radius: 99px; padding: 7px 13px;
    font-family: inherit; font-size: 12.8px; font-weight: 700; color: var(--glass-ink);
    transition: transform .2s var(--glass-spring), box-shadow .2s var(--glass-spring);
}
.wx-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(13, 24, 48, .12); }
.wx-chip i { color: var(--glass-accent); }
.wx-chip.wx-risk i { color: #d97706; }
.wx-chip.wx-severe i { color: #dc2626; }
.wx-days { display: inline-flex; gap: 4px; margin-left: auto; }
.wx-day {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 40px; padding: 6px 4px; border-radius: 10px;
    font-size: 10.5px; font-weight: 700; color: var(--glass-ink-2);
    background: rgba(255, 255, 255, .55);
}
.wx-day i { font-size: 13px; color: var(--glass-accent); }
.wx-day.bad { background: rgba(220, 38, 38, .08); }
.wx-day.bad i { color: #dc2626; }
.wx-day b { color: var(--glass-ink); font-size: 11.5px; }

/* ═══ ACCESSIBILITY + SMALL SCREENS ═══ */
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none !important; }
    .card, .dash-widget, .stat-card, .btn, .btn-new, .wx-strip, .wx-chip, .dash-action { transition: none !important; animation: none !important; }
    .dash-widget::after, .stat-card::after { transition: none !important; }
}
@media (max-width: 640px) {
    .card, .dash-widget { border-radius: 15px !important; }
    .wx-days { display: none; }  /* keep the phone strip to one calm line */
}