/**
 * MyStatusDashboard product theme (landing + /dashboards app shell).
 * Load AFTER page-local styles so light overrides win the cascade.
 * Cookie: lochstudios_theme = auto | light | dark (same as portal).
 * Control UX: Aetia-style labeled cycle (System / Light / Dark).
 */

/* ---------- Aetia-style labeled theme toggle ---------- */
.msd-theme-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    height: 2.15rem;
    padding: 0 0.7rem 0 0.55rem;
    border: 1px solid var(--line-strong, rgba(242, 244, 248, 0.16));
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted, #8a93a3);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.msd-theme-toggle:hover {
    color: var(--ink, #f2f4f8);
    border-color: rgba(93, 211, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
}
.msd-theme-toggle:focus-visible {
    outline: 2px solid var(--accent, #5dd3ff);
    outline-offset: 2px;
}
.msd-theme-toggle-dot {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    flex-shrink: 0;
    /* Auto: half-and-half system hint */
    background: linear-gradient(90deg, #f2f4f8 50%, #1a1f2a 50%);
    box-shadow: inset 0 0 0 1px rgba(242, 244, 248, 0.25);
    transition: background 0.15s, box-shadow 0.15s;
}
/* Light lock: filled sun disc */
.msd-theme-toggle[data-theme-state="light"] .msd-theme-toggle-dot {
    background: #e8b84a;
    box-shadow: none;
}
/* Dark lock: moon disc */
.msd-theme-toggle[data-theme-state="dark"] .msd-theme-toggle-dot {
    background: #5dd3ff;
    box-shadow: inset -3px -1px 0 0 #0a0c10;
}
.msd-theme-toggle[data-theme-state="light"],
.msd-theme-toggle[data-theme-state="dark"] {
    color: var(--ink, #f2f4f8);
}

/* ---------- Light theme tokens ---------- */
html[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f6fa;
    --bg-elev: #ffffff;
    --ink: #12151c;
    --muted: #5a6474;
    --faint: #7a8494;
    --line: rgba(18, 21, 28, 0.08);
    --line-strong: rgba(18, 21, 28, 0.14);
    --accent: #0b8eb8;
    --accent-dim: rgba(11, 142, 184, 0.1);
    --ok: #1f9a5c;
    --warn: #b8860b;
    --paper: #12151c;
    --paper-2: #5a6474;
    --ink-3: #e8ecf2;
    --bg-glow: rgba(11, 142, 184, 0.08);
    --bg-top: #eef2f7;
    --surface-inset: rgba(18, 21, 28, 0.04);
    --surface-inset-strong: rgba(18, 21, 28, 0.06);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg-glow: rgba(93, 211, 255, 0.1);
    --bg-top: #0c1018;
    --surface-inset: rgba(0, 0, 0, 0.22);
    --surface-inset-strong: rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] body,
html[data-theme="light"] body.msd-app {
    color: var(--ink);
    background: var(--bg);
}

html[data-theme="light"] body::before,
html[data-theme="light"] body.msd-app::before {
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, var(--bg-glow), transparent 55%),
        linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 28%) !important;
}

html[data-theme="light"] .nav,
html[data-theme="light"] .msd-nav {
    border-bottom-color: var(--line);
}

html[data-theme="light"] .logo,
html[data-theme="light"] .msd-logo {
    color: var(--ink);
}

html[data-theme="light"] .nav-links a:not(.btn),
html[data-theme="light"] .msd-nav-links a:not(.msd-btn):not(.btn) {
    color: var(--muted);
}
html[data-theme="light"] .nav-links a:not(.btn):hover,
html[data-theme="light"] .msd-nav-links a:not(.msd-btn):not(.btn):hover {
    color: var(--ink);
}
/* Solid CTA in nav must keep high-contrast label (not muted grey). */
html[data-theme="light"] .nav-links a.btn-solid,
html[data-theme="light"] .msd-nav-links a.btn-solid,
html[data-theme="light"] .msd-nav-links a.msd-btn-solid {
    color: #fff;
}

html[data-theme="light"] .nav-user,
html[data-theme="light"] .msd-nav-links .who {
    color: var(--ink);
    background: var(--surface-inset);
    border-color: var(--line-strong);
}

html[data-theme="light"] .btn,
html[data-theme="light"] .msd-btn {
    color: var(--ink);
    border-color: var(--line-strong);
    background: var(--bg-elev);
}
html[data-theme="light"] .btn:hover,
html[data-theme="light"] .msd-btn:hover {
    background: var(--surface-inset);
    border-color: rgba(18, 21, 28, 0.22);
}
html[data-theme="light"] .btn-solid,
html[data-theme="light"] .msd-btn-solid {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

html[data-theme="light"] .msd-theme-toggle {
    background: #fff;
    border-color: var(--line-strong);
    color: var(--muted);
}
html[data-theme="light"] .msd-theme-toggle:hover {
    color: var(--ink);
    border-color: rgba(11, 142, 184, 0.45);
}
html[data-theme="light"] .msd-theme-toggle-dot {
    box-shadow: inset 0 0 0 1px rgba(18, 21, 28, 0.12);
}
html[data-theme="light"] .msd-theme-toggle[data-theme-state="auto"] .msd-theme-toggle-dot {
    background: linear-gradient(90deg, #f4f6fa 50%, #12151c 50%);
}
html[data-theme="light"] .msd-theme-toggle[data-theme-state="dark"] .msd-theme-toggle-dot {
    background: #0b8eb8;
    box-shadow: inset -3px -1px 0 0 #eef2f7;
}

/* Landing cards */
html[data-theme="light"] .preview,
html[data-theme="light"] .feat,
html[data-theme="light"] .plan,
html[data-theme="light"] .cta-band {
    background: var(--bg-elev);
    border-color: var(--line);
    box-shadow: 0 1px 3px rgba(18, 21, 28, 0.06);
}
html[data-theme="light"] .preview {
    box-shadow: 0 12px 32px rgba(18, 21, 28, 0.08);
}
html[data-theme="light"] .preview-bar,
html[data-theme="light"] .kpi {
    background: var(--surface-inset) !important;
}
html[data-theme="light"] .plan--pro {
    border-color: rgba(11, 142, 184, 0.35);
    box-shadow: 0 0 0 1px rgba(11, 142, 184, 0.08);
}
html[data-theme="light"] .step {
    border-left-color: rgba(11, 142, 184, 0.4);
}
html[data-theme="light"] .cta-band {
    background:
        linear-gradient(135deg, rgba(11, 142, 184, 0.08), transparent 50%),
        var(--bg-elev) !important;
}

html[data-theme="light"] footer,
html[data-theme="light"] .msd-foot {
    border-top-color: var(--line);
    color: var(--faint);
}
html[data-theme="light"] footer a,
html[data-theme="light"] .msd-foot a {
    color: var(--muted);
}
html[data-theme="light"] footer a:hover,
html[data-theme="light"] .msd-foot a:hover {
    color: var(--ink);
}

/* App shell / manage */
html[data-theme="light"] .msd-dash-card,
html[data-theme="light"] .msd-monitor,
html[data-theme="light"] .msd-add-box,
html[data-theme="light"] .msd-stat,
html[data-theme="light"] .msd-product .panel,
html[data-theme="light"] body.msd-app .panel {
    background: var(--bg-elev);
    border-color: var(--line);
    box-shadow: 0 1px 2px rgba(18, 21, 28, 0.04);
}
html[data-theme="light"] .msd-dash-card:hover,
html[data-theme="light"] .msd-monitor:hover {
    border-color: rgba(11, 142, 184, 0.35);
    background: #fff;
}
html[data-theme="light"] .msd-tabs {
    background: var(--surface-inset);
    border-color: var(--line);
}
html[data-theme="light"] .msd-tab.is-active {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 0 0 1px var(--line-strong);
}
html[data-theme="light"] .msd-empty {
    background: var(--surface-inset);
    border-color: var(--line-strong);
}

html[data-theme="light"] body.msd-app input,
html[data-theme="light"] body.msd-app select,
html[data-theme="light"] body.msd-app textarea {
    background: #fff !important;
    color: var(--ink) !important;
    border-color: var(--line-strong) !important;
}

html[data-theme="light"] body.msd-app .page-head h1 {
    color: var(--ink);
}
html[data-theme="light"] body.msd-app .page-head p {
    color: var(--muted);
}

/* ---------- Accessibility (focus + reduced motion) ---------- */
:focus-visible {
    outline: 2px solid var(--accent, #5dd3ff);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.msd-btn:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent, #5dd3ff);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}