/* ══════════════════════════════════════════════════════
   CosmoScope — Dark-only design system
   ══════════════════════════════════════════════════════ */

/* ── Custom properties ──────────────────────────────── */
:root {
    /* Core palette */
    --color-bg:             #080c14;
    --color-card:           #0f1624;
    --color-card-border:    #1e3050;
    --color-accent:         #a78bfa;
    --color-accent-dim:     #6d28d9;
    --color-accent-muted:   rgba(167,139,250,0.15);
    --color-text:           #edf2fc;
    --color-secondary-text: #8fa5c8;
    --color-success:        #4ade80;
    --color-warning:        #fbbf24;
    --color-danger:         #f87171;

    /* Component-alias tokens (used by scoped component styles) */
    --color-surface:        var(--color-card);
    --color-surface-2:      #162035;
    --color-surface-3:      #1c2942;
    --color-border:         var(--color-card-border);
    --color-border-bright:  #2d4a73;
    --color-text-primary:   var(--color-text);
    --color-text-secondary: var(--color-secondary-text);
    --color-text-muted:     #4d6a8a;
    --color-card-bg:        rgba(255,255,255,0.04);

    --radius-card:          14px;
    --radius-pill:          999px;

    --nav-h:                4.25rem;
    --header-h:             3.375rem;
    --sidebar-w:            260px;

    --transition-fast:      150ms ease;
    --transition-med:       250ms ease;

    /* Typography */
    --font-sans:   system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif:  "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-mono:   "Geist Mono", ui-monospace, "SF Mono", monospace;

    /* Postcard / sky palette */
    --sky-night-1:        #050008;
    --sky-night-2:        #0a0420;
    --sky-twilight-1:     #1a0e30;
    --sky-twilight-2:     #2c1838;
    --sky-twilight-3:     #3a1f40;
    --sky-twilight-warm:  #6b3a5e;
    --sky-horizon-glow:   #b56a48;

    /* Activity colors */
    --color-frolf:        #34d399;
    --color-frolf-soft:   rgba(52,211,153,0.16);
    --color-moon:         #c084fc;
    --color-moon-soft:    rgba(192,132,252,0.16);

    /* Gold accent — Tonight scrubber, reminders */
    --color-gold:         #f5c45e;
    --color-gold-soft:    rgba(245,196,94,0.18);
}

/* ── Reset / base ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    overflow-x: hidden;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}

button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea { font-family: inherit; }
svg { display: block; flex-shrink: 0; }
ul { list-style: none; }

/* ── App shell ───────────────────────────────────────── */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
}

/* ── Tab content wrapper (for animate-in re-trigger) ── */
.tab-content-wrapper {
    height: 100%;
}

/* ── Global animate-in ───────────────────────────────── */
.animate-in {
    animation: globalFadeSlideUp 0.28s ease both;
}
@keyframes globalFadeSlideUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Location fallback banner ────────────────────────── */
.location-fallback-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px;
    background: rgba(251, 191, 36, 0.08);
    border-bottom: 1px solid rgba(251, 191, 36, 0.25);
    color: var(--color-warning, #fbbf24);
    font-size: 0.78rem;
    flex-shrink: 0;
}

/* ── Header ──────────────────────────────────────────── */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    padding: 0 16px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-card-border);
    flex-shrink: 0;
    z-index: 10;
}

.app-title {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

/* ── Tab body ────────────────────────────────────────── */
.tab-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px);
}

/* ── Bottom nav ──────────────────────────────────────── */
.bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-card);
    border-top: 1px solid var(--color-card-border);
    z-index: 100;
    transition: opacity 0.25s ease;
}

.nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--color-secondary-text);
    min-height: 44px;
    transition: color var(--transition-fast);
}
.nav-btn:hover       { color: var(--color-text); }
.nav-btn--active     { color: var(--color-accent); }
.nav-icon            { width: 1.375rem; height: 1.375rem; }
.nav-label           { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em; }

/* ── Shared tab styles ───────────────────────────────── */
.tab-view { padding: 0 0 8px; }

/* ── Loading screen ──────────────────────────────────── */
.loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60dvh;
    gap: 20px;
}
.loading-text { color: var(--color-secondary-text); font-size: 0.9rem; }

/* ── Offline banner ──────────────────────────────────── */
.offline-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1a1a2e;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card);
    padding: 8px 12px;
    font-size: 0.78rem;
    color: var(--color-secondary-text);
    margin: 6px 12px;
}

/* ── Side nav (desktop sidebar) ─────────────────────── */
.side-nav {
    display: none;
    flex-direction: column;
    position: fixed;
    left: 0; top: 0;
    height: 100dvh;
    width: var(--sidebar-w);
    background: var(--color-card);
    border-right: 1px solid var(--color-card-border);
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
    transition: opacity 0.25s ease;
}

.side-nav-brand {
    padding: 22px 20px 16px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-card-border);
    flex-shrink: 0;
}

.side-nav-links {
    flex: 1;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.side-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border-radius: 10px;
    color: var(--color-secondary-text);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.side-nav-btn .nav-icon { width: 20px; height: 20px; flex-shrink: 0; }
.side-nav-btn:hover  { background: var(--color-bg); color: var(--color-text); }
.side-nav-btn.active {
    background: var(--color-accent-muted);
    color: var(--color-accent);
    font-weight: 600;
}

/* ── Desktop layout (≥768px) ─────────────────────────── */
@media (min-width: 768px) {
    html { font-size: clamp(16px, 1.55vw, 26px); }

    .side-nav { display: flex; }
    .bottom-nav { display: none !important; }

    .app-shell {
        margin-left: var(--sidebar-w);
        height: 100dvh;
        overflow: hidden;
    }

    .app-header {
        display: none;
    }

    .tab-body {
        padding-bottom: 0;
        overflow-y: auto;
    }

    .tab-content-wrapper {
        height: 100%;
    }

    .tab-view {
        padding: 0 14px 14px;
    }
}

/* ── Wide layout (≥1200px) ─────────────────────────── */
@media (min-width: 1200px) {
    html { font-size: clamp(20px, 1.75vw, 32px); }

    .tab-view {
        padding: 0 20px 20px;
    }
}

/* ── Extra-wide (≥1600px) ─────────────────────────────── */
@media (min-width: 1600px) {
    html { font-size: clamp(26px, 1.9vw, 40px); }
}

/* ── Blazor default error UI ─────────────────────────── */
#blazor-error-ui {
    color-scheme: dark;
    background: #1a0a0a;
    border-top: 2px solid var(--color-danger);
    bottom: 0; left: 0;
    padding: 10px 20px;
    position: fixed; width: 100%;
    z-index: 1000;
    display: none;
    color: var(--color-danger);
    font-size: 0.85rem;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 8px; }

.blazor-error-boundary { background: #1a0a0a; border-left: 4px solid var(--color-danger); padding: 12px 16px; border-radius: 8px; }