/* ══════════════════════════════════════════════════════
   Solar Dashboard: Shared Design Tokens & Components
   See DESIGN.md for the full design system reference.
   ══════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
    /* Primary */
    --color-primary: #133B6B;
    --color-primary-dark: #0f2d52;
    --color-primary-light: #1a5296;

    /* Accent */
    --color-accent: #46AC66;
    --color-accent-hover: #3d9659;
    --color-accent-subtle: rgba(70,172,102,0.15);

    /* Semantic */
    --color-success: #2e7d32;
    --color-success-bg: #d4edda;
    --color-success-border: #b7d7be;
    --color-warning: #e65100;
    --color-warning-bg: #fef4e5;
    --color-warning-border: #fcd9a8;
    --color-error: #dc2626;
    --color-error-bg: #f8d7da;
    --color-error-border: #f1aeb5;
    --color-info: #1565c0;
    --color-info-bg: #e3f1fc;

    /* Neutrals */
    --color-bg: #f0f2f5;
    --color-surface: #fff;
    --color-border: rgba(19,59,107,0.06);
    --color-border-strong: rgba(19,59,107,0.18);
    --color-text: #333;
    --color-text-primary: #133B6B;
    --color-text-secondary: #6b7280;
    --color-text-muted: #999;

    /* Vendor */
    --color-sunsynk-bg: #e3f1fc;
    --color-sunsynk-text: #1a5fa0;
    --color-sunsynk-border: #bfdbfe;
    --color-solarman-bg: #fef4e5;
    --color-solarman-text: #b37300;
    --color-solarman-border: #fed7aa;

    /* Sidebar-specific whites */
    --sidebar-text: rgba(255,255,255,0.85);
    --sidebar-text-dim: rgba(255,255,255,0.7);
    --sidebar-text-dimmer: rgba(255,255,255,0.45);
    --sidebar-text-faint: rgba(255,255,255,0.3);
    --sidebar-border: rgba(255,255,255,0.08);
    --sidebar-hover-bg: rgba(255,255,255,0.06);
    --sidebar-active-bg: rgba(255,255,255,0.1);

    /* Typography */
    --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: 'Courier New', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.25rem;
    --font-size-lg: 1.5rem;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Shadows */
    --shadow-sm: 0 1px 4px rgba(19,59,107,0.06);
    --shadow-md: 0 1px 4px rgba(19,59,107,0.08);
    --shadow-lg: 0 2px 6px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);

    /* Motion */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.45s ease;

    /* Layout */
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 56px;
    --header-z: 50;
    --sidebar-z: 100;

    /* Subtle status surfaces: alpha aliases of existing semantic colours
       (no new hues introduced; --color-accent-subtle already exists above) */
    --color-warning-subtle: rgba(230,81,0,0.18);
    --color-error-subtle:   rgba(220,38,38,0.18);
    --color-info-subtle:    rgba(21,101,192,0.15);
    --color-primary-subtle: rgba(26,82,150,0.12);

    /* Card system tokens: Variant C "Modern Console" */
    --card-radius: 8px;
    --card-radius-inner: 4px;
    --card-bg: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(252,253,255,0.96));
    --card-shadow: 0 1px 2px rgba(19,59,107,0.05), 0 8px 32px -8px rgba(19,59,107,0.10);
    --card-shadow-hover: 0 1px 2px rgba(19,59,107,0.05), 0 16px 40px -8px rgba(19,59,107,0.18);
    --card-hairline-cycle: 7s;

    /* Page-level ambient tint: alpha variants of --color-accent and
       --color-primary-light, no new hues */
    --page-tint:
        radial-gradient(ellipse 800px 400px at 10% 0%, rgba(70,172,102,0.05), transparent 60%),
        radial-gradient(ellipse 600px 300px at 90% 100%, rgba(26,82,150,0.05), transparent 60%);
}

/* ── Base Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }

/* ── Focus ── */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── Utilities ── */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Animations ── */
@keyframes fadeSlideUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes pulseGlow { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideInMsg {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.anim-entrance { opacity:0; animation: fadeSlideUp var(--transition-slow) forwards; }
.anim-delay-1 { animation-delay: 0.07s; }
.anim-delay-2 { animation-delay: 0.14s; }
.anim-delay-3 { animation-delay: 0.21s; }
.anim-delay-4 { animation-delay: 0.28s; }
.anim-delay-5 { animation-delay: 0.35s; }

@keyframes card-hairline-pan {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes pill-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50%      { box-shadow: 0 0 0 6px transparent; opacity: 0.55; }
}
@keyframes card-ripple {
    from { transform: translate(-50%, -50%) scale(0); opacity: 0.18; }
    to   { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
@keyframes card-detail-expand {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .card-modern::before { animation: none !important; }
    .status-pill::before { animation: none !important; }
    .card-rippleable::after { display: none !important; }
    [data-mk-donut] { transition: none !important; }
}

/* ══════════════════════════════════════════════════════
   Card system: Variant C "Modern Console"
   Top-level card primitive used by:
   .card-modern (home overview, plant panels, alert incidents,
   onboard sections, choice tiles)
   ══════════════════════════════════════════════════════ */

/* Page tint applied via body[data-modern-bg] on the four card-heavy pages */
body[data-modern-bg]::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--page-tint);
    pointer-events: none;
    z-index: -1;
}

.card-modern {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    position: relative;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
    /* Default accent (overridden by status modifiers below) */
    --mk-accent: var(--color-primary-light);
    --mk-accent-subtle: var(--color-primary-subtle);
}
.card-modern::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--card-radius) + 1px);
    padding: 1px;
    background: linear-gradient(110deg,
        transparent 30%,
        var(--mk-accent) 45%,
        rgba(19,59,107,0.4) 55%,
        transparent 70%);
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.55;
    animation: card-hairline-pan var(--card-hairline-cycle) linear infinite;
}
.card-modern:hover {
    transform: translateY(-3px) scale(1.005);
    box-shadow: var(--card-shadow-hover), 0 0 0 1px var(--mk-accent-subtle);
}
.card-modern:hover::before { opacity: 0.85; }

.card-modern__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    position: relative;
    z-index: 1;
}
.card-modern__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}
.card-modern__body {
    padding: var(--space-5);
    position: relative;
    z-index: 1;
}
.card-modern__donut-wrap {
    position: relative;
    display: inline-block;
}
.card-modern__donut-wrap::before {
    content: "";
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, var(--mk-accent-subtle), transparent 70%);
    z-index: -1;
    border-radius: 50%;
}

/* Status modifiers: bind --mk-accent and --mk-accent-subtle to existing tokens.
   No new hues; every accent is already in the palette. */
.card-modern.is-online   { --mk-accent: var(--color-accent);        --mk-accent-subtle: var(--color-accent-subtle); }
.card-modern.is-warning  { --mk-accent: var(--color-warning);       --mk-accent-subtle: var(--color-warning-subtle); }
.card-modern.is-fault    { --mk-accent: var(--color-error);         --mk-accent-subtle: var(--color-error-subtle); }
.card-modern.is-info     { --mk-accent: var(--color-info);          --mk-accent-subtle: var(--color-info-subtle); }
.card-modern.is-neutral  { --mk-accent: var(--color-primary-light); --mk-accent-subtle: var(--color-primary-subtle); }

/* Hover ripple: shared with .choice-card and other interactive cards */
.card-rippleable { position: relative; overflow: hidden; }
.card-rippleable::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--mk-accent-subtle, rgba(70,172,102,0.35));
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}
.card-rippleable:hover::after { animation: card-ripple 0.55s ease-out; }

/* Status pill: pulsing dot, current-colour aware */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--mk-accent-subtle);
    color: var(--mk-accent);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid currentColor;
}
.status-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--mk-accent);
    border-radius: 50%;
    animation: pill-pulse-dot 2s ease-in-out infinite;
}

/* Donut SVG primitives shared across home/plant cards */
.card-modern__donut-base { fill: none; stroke: rgba(19,59,107,0.08); stroke-width: 10; }
.card-modern__donut-fill {
    fill: none;
    stroke: var(--mk-accent);
    stroke-width: 10;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

/* Card entrance: staggered fade-slide-up.
   Animation is gated on .mk-ready (added by Motion.applyStagger) so the
   browser latches the correct --mk-delay at animation start, even when
   JS runs after the elements have been parsed. */
.mk-enter { opacity: 0; }
.mk-enter.mk-ready {
    animation: fadeSlideUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--mk-delay, 0s);
}
/* Fallback: if Motion never runs (e.g. JS error), reveal at 1s so the page
   isn't permanently blank. */
@keyframes mk-fallback-reveal { to { opacity: 1; } }
.mk-enter:not(.mk-ready) {
    animation: mk-fallback-reveal 0.01s linear 1s forwards;
}

/* Bind the card-detail-expand keyframe so any panel that opens animates in.
   Works with both the legacy .open class on .incident-detail and the
   .mk-detail-open marker on a parent card. */
.incident-detail.open,
.mk-detail-open .incident-detail,
.mk-detail-open .card-modern__detail {
    animation: card-detail-expand 0.32s ease-out;
}

/* ══════════════════════════════════════════════════════
   Layout
   ══════════════════════════════════════════════════════ */
.app-layout { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
    width: var(--sidebar-width); background: var(--color-primary-dark); color: var(--sidebar-text);
    flex-shrink: 0; display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--sidebar-z);
    overflow-y: auto; transition: width var(--transition-normal), transform 0.3s ease;
}
.sidebar.collapsed { width: var(--sidebar-width-collapsed); }

.sidebar-brand {
    padding: var(--space-4); display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--sidebar-border); min-height: 64px; overflow: hidden;
}
.sidebar-brand-logo {
    width: 160px; height: 44px; flex-shrink: 0; object-fit: contain;
    filter: brightness(0) invert(1); transition: width 0.2s ease, height 0.2s ease;
}
.sidebar.collapsed .sidebar-brand-logo { width: 32px; height: 32px; }

.sidebar-collapse-btn {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 0; border: none; background: none;
    color: var(--sidebar-text-dimmer); cursor: pointer; font-size: 1.1em;
    transition: color var(--transition-fast), transform var(--transition-normal);
    border-bottom: 1px solid rgba(255,255,255,0.06); width: 100%;
}
.sidebar-collapse-btn:hover { color: #fff; }
.sidebar.collapsed .sidebar-collapse-btn { transform: rotate(180deg); }

.sidebar-nav { flex: 1; padding: var(--space-2) 0; }
.nav-section { margin-bottom: 2px; }

.nav-item {
    display: flex; align-items: center; gap: 10px; padding: 12px 18px; min-height: 44px;
    font-size: var(--font-size-sm); font-weight: 500; color: var(--sidebar-text-dim);
    cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease; text-decoration: none;
    border: none; background: none; width: 100%; text-align: left;
    font-family: var(--font-family); white-space: nowrap; overflow: hidden;
}
.nav-item:hover { background: var(--sidebar-hover-bg); color: #fff; padding-left: 21px; }
.nav-item.active { background: var(--sidebar-active-bg); color: #fff; font-weight: 600; }
.nav-item.active:hover { background: rgba(255,255,255,0.12); }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; transition: opacity 0.18s, transform 0.18s; }
.nav-item:hover svg { opacity: 1; transform: scale(1.08); }
.nav-item.active svg { opacity: 1; }
.nav-item .nav-label { overflow: hidden; opacity: 1; transition: opacity 0.2s ease; }
.sidebar.collapsed .nav-item .nav-label { opacity: 0; width: 0; }

/* Nav sub-items (used on home page) */
.nav-item .nav-arrow { font-size: 0.7em; margin-left: auto; transition: transform 0.2s, opacity 0.2s; }
.sidebar.collapsed .nav-item .nav-arrow { opacity: 0; width: 0; }
.nav-sub {
    overflow: hidden; max-height: 0; transition: max-height 0.25s ease;
    background: rgba(0,0,0,0.15);
}
.nav-sub.open { max-height: 300px; }
.sidebar.collapsed .nav-sub { max-height: 0 !important; }
.nav-sub .nav-item { padding-left: 46px; font-size: 0.78em; }
.nav-sub .nav-item:hover { padding-left: 49px; }

.nav-sub-item {
    display: flex; align-items: center; gap: 9px; padding: 8px 18px 8px 46px; min-height: 0;
    font-size: 0.78em; font-weight: 400;
    color: rgba(255,255,255,0.55); text-decoration: none;
    transition: all 0.18s ease; cursor: pointer; white-space: nowrap;
}
.nav-sub-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.6; transition: opacity 0.18s, transform 0.18s; }
.nav-sub-item:hover { color: #fff; background: rgba(255,255,255,0.04); padding-left: 50px; }
.nav-sub-item:hover svg { opacity: 1; }
.nav-sub-item.active { color: var(--color-accent); font-weight: 500; }
.nav-sub-item.active svg { opacity: 1; }

.nav-item.nav-toggle { cursor: pointer; }
.nav-item.nav-toggle.expanded .nav-arrow { transform: rotate(180deg); }

/* Alert badge in nav — notification bubble */
.nav-badge {
    margin-left: auto;
    background: #ef4444; color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; line-height: 1;
    animation: nav-badge-pulse 1.8s ease-out infinite;
}
@keyframes nav-badge-pulse {
    0% {
        box-shadow: 0 0 0 2px var(--color-primary-dark),
                    0 0 0 0 rgba(239, 68, 68, 0.55),
                    0 1px 2px rgba(0, 0, 0, 0.3);
    }
    70% {
        box-shadow: 0 0 0 2px var(--color-primary-dark),
                    0 0 0 9px rgba(239, 68, 68, 0),
                    0 1px 2px rgba(0, 0, 0, 0.3);
    }
    100% {
        box-shadow: 0 0 0 2px var(--color-primary-dark),
                    0 0 0 0 rgba(239, 68, 68, 0),
                    0 1px 2px rgba(0, 0, 0, 0.3);
    }
}
@media (prefers-reduced-motion: reduce) {
    .nav-badge {
        animation: none;
        box-shadow: 0 0 0 2px var(--color-primary-dark), 0 1px 2px rgba(0, 0, 0, 0.3);
    }
}

.sidebar-footer {
    padding: 14px 18px; border-top: 1px solid var(--sidebar-border);
    font-size: 0.68em; color: var(--sidebar-text-faint); text-align: center;
    white-space: nowrap; overflow: hidden; transition: opacity 0.2s;
}
.sidebar.collapsed .sidebar-footer { opacity: 0; }

/* Collapsed tooltips */
.sidebar.collapsed .nav-item { position: relative; }
.sidebar.collapsed .nav-item::after {
    content: attr(data-tooltip); position: absolute; left: var(--sidebar-width-collapsed); top: 50%;
    transform: translateY(-50%) translateX(4px); background: var(--color-text); color: #fff;
    padding: 4px 10px; border-radius: 0; font-size: 0.78em; white-space: nowrap;
    z-index: 200; pointer-events: none; opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.sidebar.collapsed .nav-item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 99; opacity: 0; transition: opacity 0.3s ease;
}
.sidebar-overlay.visible { display: block; opacity: 1; }

/* Hamburger (mobile) */
.hamburger-btn {
    display: none; background: none; border: none; color: #fff; cursor: pointer;
    padding: var(--space-1); border-radius: 0;
}
.hamburger-btn svg { width: 22px; height: 22px; }

/* ── Main Content ── */
.main-content {
    flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; padding: 0;
    transition: margin-left var(--transition-normal);
}
.sidebar.collapsed ~ .sidebar-overlay ~ .main-content,
.sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-width-collapsed); }

/* ── Header ── */
.header {
    background: linear-gradient(135deg, #0a1f3d 0%, var(--color-primary) 40%, #1a5080 100%);
    color: #fff;
    padding: var(--space-5) var(--space-8);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    border-bottom: 1px solid var(--sidebar-border);
    position: sticky; top: 0; z-index: var(--header-z);
    overflow: hidden;
}
/* Faint circuit-line texture overlay */
.header::before {
    content: '';
    position: absolute; inset: 0;
    opacity: 0.04;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
/* Subtle radial glow behind the left area */
.header::after {
    content: '';
    position: absolute; top: -40%; left: -10%; width: 50%; height: 180%;
    background: radial-gradient(ellipse, rgba(70,172,102,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.header-left { display: flex; align-items: center; gap: var(--space-3); position: relative; z-index: 1; }
.header-title {
    color: #fff; font-size: var(--font-size-md); font-weight: 700;
    display: flex; align-items: center; gap: var(--space-3);
}
.header-title svg { width: 22px; height: 22px; }
.header-sub { color: rgba(255,255,255,0.6); font-size: 0.85em; font-weight: 400; margin-top: 3px; }
.header-right { display: flex; align-items: center; gap: var(--space-3); position: relative; z-index: 1; }
.header-meta { font-size: 0.78em; color: rgba(255,255,255,0.7); font-weight: 400; }

/* ── Status dot (live indicator) ── */
.status-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--color-accent); display: inline-block;
    animation: glowPulse 2s ease-in-out infinite;
}
.status-dot.health-good { background: var(--color-accent); }
.status-dot.health-slow { background: #F5A100; animation-name: glowPulseAmber; }
.status-dot.health-down { background: var(--color-error); animation-name: glowPulseRed; }
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(70,172,102,0.4); }
    50%      { box-shadow: 0 0 0 4px rgba(70,172,102,0.08); }
}
@keyframes glowPulseAmber {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,161,0,0.4); }
    50%      { box-shadow: 0 0 0 4px rgba(245,161,0,0.08); }
}
@keyframes glowPulseRed {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,0.4); }
    50%      { box-shadow: 0 0 0 4px rgba(220,53,69,0.08); }
}

/* ── Refresh button ── */
.refresh-btn {
    background: rgba(255,255,255,0.15); color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 7px 18px; border-radius: 6px; cursor: pointer;
    font-size: 0.8em; font-family: var(--font-family);
    font-weight: 500; letter-spacing: 0.5px;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: inline-flex; align-items: center; gap: 6px;
}
.refresh-btn:hover { background: var(--color-accent); border-color: var(--color-accent); transform: translateY(-1px); }
.refresh-btn:active { transform: translateY(0); }
.refresh-btn .refresh-icon { display: inline-block; transition: transform 0.3s ease; }
.refresh-btn.spinning .refresh-icon { animation: spinOnce 0.6s ease; }
@keyframes spinOnce { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Keyboard hint chips ── */
.kbd-hint {
    display: inline-block; background: rgba(19,59,107,0.08); color: rgba(255,255,255,0.5);
    font-family: var(--font-family); font-size: 0.65em; font-weight: 600;
    padding: 1px 5px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.12);
    margin-left: 6px; vertical-align: middle; letter-spacing: 0;
}

/* ── Welcome header (home page) ── */
.header-welcome { display: flex; flex-direction: column; gap: 1px; }
.welcome-greeting { font-size: var(--font-size-md); font-weight: 600; color: #fff; letter-spacing: 0.2px; }
.welcome-date { font-size: var(--font-size-xs); color: rgba(255,255,255,0.6); font-weight: 400; }

.back-btn {
    display: inline-flex; align-items: center; gap: 6px; color: var(--sidebar-text-dim);
    text-decoration: none; font-size: 0.8em; font-weight: 500; padding: 6px var(--space-3);
    border: 1px solid rgba(255,255,255,0.2); border-radius: 0; transition: background-color var(--transition-fast), color var(--transition-fast);
}
.back-btn:hover { background: var(--sidebar-active-bg); color: #fff; }

/* ── Print: header overrides ── */
@media print {
    .header { background: #fff !important; color: var(--color-primary) !important; border-bottom: 2px solid var(--color-primary); padding: 8px 0 !important; }
    .header::before, .header::after { display: none !important; }
    .header-meta { color: var(--color-text) !important; }
    .status-dot { animation: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ── Page content area ── */
.page-content { padding: 36px var(--space-12); }

/* ── Section title ── */
.section-title {
    font-size: var(--font-size-sm); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--color-text-secondary); margin-bottom: var(--space-5);
    display: flex; align-items: center; gap: 10px;
}
.section-title svg { width: 18px; height: 18px; color: var(--color-accent); }

/* ── Shared app footer ── */
.app-footer {
    margin: var(--space-8) 0 0;
    padding: 24px 28px;
    text-align: center;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.app-footer-label {
    margin: 0 0 6px;
    font-size: 0.9em;
    color: var(--color-text-secondary);
}
.app-footer-logo {
    display: inline-block;
    margin-bottom: 8px;
    transition: transform var(--transition-fast);
}
.app-footer-logo:hover { transform: scale(1.03); }
.app-footer-logo img {
    width: 183px;
    height: 25px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(16%) sepia(45%) saturate(1200%) hue-rotate(185deg) brightness(95%);
}
.app-footer-copy {
    margin: 0;
    font-size: 0.84em;
    color: var(--color-text-secondary);
}

/* ── Vendor tags ── */
.vendor-tag {
    display: inline-block; padding: 2px var(--space-2);
    font-size: 0.75em; font-weight: 600; letter-spacing: 0.5px;
    text-transform: uppercase; transition: transform var(--transition-fast);
}
.vendor-tag:hover { transform: scale(1.05); }
.vendor-sunsynk { background: var(--color-sunsynk-bg); color: var(--color-sunsynk-text); }
.vendor-solarman { background: var(--color-solarman-bg); color: var(--color-solarman-text); }
.vendor-default { background: #e2e3e5; color: #495057; }

/* ══════════════════════════════════════════════════════
   Mobile Responsive (shared sidebar behavior)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width) !important;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.visible { display: block; }
    .sidebar-collapse-btn { display: none; }
    .hamburger-btn { display: flex; }
    .main-content { margin-left: 0 !important; }
}
@media (max-width: 768px) {
    .header { padding: var(--space-4) var(--space-5); }
    .page-content { padding: var(--space-6) var(--space-5); }
    .app-footer {
        margin: var(--space-6) 0 0;
        padding: 20px;
    }

    /* Responsive two-column grids collapse to single column */
    .status-overview,
    .info-panels,
    .charts-grid {
        grid-template-columns: 1fr !important;
    }

    /* Tables: ensure horizontal scroll on narrow screens */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Stat/metric strips: wrap on small screens */
    .summary-strip,
    .stats-strip {
        flex-wrap: wrap;
    }

    /* Prevent header controls from overflowing */
    .header-right {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
}

@media (max-width: 480px) {
    .page-content { padding: var(--space-4) var(--space-4); }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar select,
    .toolbar input[type="date"] { width: 100%; }
}

/* ══════════════════════════════════════════════════════
   Toast Notification System
   Requires: <div class="toast-container" id="toast-container">
   JS: /toast.js
   ══════════════════════════════════════════════════════ */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: #1a1a2e;
    color: #fff;
    padding: 12px 20px;
    border-radius: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    max-width: 340px;
}
.toast.visible {
    transform: translateX(0);
    opacity: 1;
}
.toast.toast-leaving {
    transform: translateX(120%);
    opacity: 0;
}
.toast-icon { font-size: 1.1em; flex-shrink: 0; }
.toast-success { border-top: 3px solid var(--color-accent); }
.toast-error   { border-top: 3px solid var(--color-error); }
.toast-info    { border-top: 3px solid var(--color-warning); }

/* ══════════════════════════════════════════════════════
   Buttons (soft pill) — shared action-button system
   ══════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--font-family); font-size: 0.78em; font-weight: 600;
    padding: 8px 16px;
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text-secondary); cursor: pointer;
    border-radius: 999px; box-shadow: 0 1px 2px rgba(19,59,107,0.06);
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.btn svg { width: 14px; height: 14px; }
.btn:hover { background: #f8f9fc; color: var(--color-primary); box-shadow: 0 2px 6px rgba(19,59,107,0.10); }
.btn-resolve { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.btn-resolve:hover { background: #dbeafe; color: #1e3a8a; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-light); color: #fff; }
.btn-success { background: var(--color-accent); color: #fff; }
.btn-success:hover { background: var(--color-accent-hover); color: #fff; }
.btn-warn { background: #f59e0b; color: #fff; }
.btn-warn:hover { background: #d97706; color: #fff; }
.btn-danger { background: var(--color-error); color: #fff; }
.btn-danger:hover { background: #b91c1c; color: #fff; }
.btn-outline { background: var(--color-surface); color: var(--color-primary); border: 1px solid #d1d5db; }
.btn-outline:hover { background: #f3f4f6; border-color: #9ca3af; }
.btn-sm { padding: 4px 10px; font-size: 0.72em; }
.btn:disabled { opacity: 0.4; cursor: default; }