/* ═══════════════════════════════════════════════════════════════════════
   COLOR SYSTEM — Stay at Home SaaS
   ──────────────────────────────────────────────────────────────────────
   Primary palette: Indigo (#6366f1) + Violet (#8b5cf6) — analogous pair
   Rule: 60% neutral surfaces · 30% primary-tinted surfaces/borders · 10% full accent
   Semantic: Emerald (success) · Amber (warning) · Red (danger) · Blue (info)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Dark theme (default) ──────────────────────────────────────────── */
:root {
    /* Backgrounds */
    --bg:           #0f0f1a;

    /* Surfaces — primary-tinted instead of neutral white-opacity */
    --card-bg:      rgba(99,102,241,0.05);
    --card-border:  rgba(99,102,241,0.14);

    /* Brand */
    --primary:      #6366f1;   /* Indigo 500  — trust, technology */
    --primary-soft: #a5b4fc;   /* Indigo 300  — text on dark */
    --secondary:    #8b5cf6;   /* Violet 500  — depth, premium */

    /* Semantic — functional only */
    --success:  #10b981;   /* Emerald */
    --warning:  #f59e0b;   /* Amber   */
    --danger:   #ef4444;   /* Red     */
    --info:     #3b82f6;   /* Blue    */

    /* Typography */
    --text:     #e2e8f0;   /* Slate 200 */
    --muted:    #64748b;   /* Slate 500 */

    /* Legacy alias */
    --purple: #8b5cf6;
}

/* ── Light theme overrides ────────────────────────────────────────── */
html.light {
    --bg:           #f1f5f9;   /* Slate 100 — clean cool gray */
    --card-bg:      #ffffff;
    --card-border:  rgba(15,23,42,0.09);
    --primary:      #4f46e5;   /* Indigo 600 */
    --primary-soft: #6366f1;   /* Indigo 500 */
    --secondary:    #7c3aed;   /* Violet 600 */
    --text:         #0f172a;   /* Slate 900 — strong contrast */
    --muted:        #64748b;   /* Slate 500 */
}

/* ── Base ─────────────────────────────────────────────────────────── */
body { background: var(--bg); color: var(--text); min-height: 100vh; font-size: 0.9rem; }
html.light body { background: var(--bg); color: var(--text); }

/* ── Top bar ──────────────────────────────────────────────────────── */
.top-bar {
    background: rgba(12,12,28,0.96);   /* Darker than --bg for elevation */
    border-bottom: 1px solid var(--card-border);
    backdrop-filter: blur(12px);
    position: sticky; top: 0; z-index: 1000;
    padding: 0.6rem 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
html.light .top-bar {
    background: #ffffff;
    border-bottom: 1px solid rgba(15,23,42,0.08);
    box-shadow: 0 1px 8px rgba(15,23,42,0.06);
}

/* ── Brand ────────────────────────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.brand-icon {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
html.light .brand { color: #1e293b; }

/* ── Nav links ────────────────────────────────────────────────────── */
.nav-links { display: flex; gap: 0.2rem; flex-wrap: nowrap; }
.nav-links a {
    padding: 0.4rem 0.7rem; border-radius: 8px; color: #94a3b8;
    text-decoration: none; font-size: 0.78rem; border: 1px solid transparent;
    transition: all 0.15s; white-space: nowrap;
}
.nav-links a:hover { background: rgba(99,102,241,0.09); color: #c4b5fd; }
.nav-links a.active { background: rgba(99,102,241,0.13); border-color: rgba(99,102,241,0.32); color: #a5b4fc; }

html.light .nav-links a         { color: #475569; }
html.light .nav-links a:hover   { background: rgba(79,70,229,0.07); color: #4f46e5; }
html.light .nav-links a.active  { background: rgba(79,70,229,0.1); border-color: rgba(79,70,229,0.25); color: #4f46e5; }

/* Mobile nav dropdown */
@media (max-width: 991px) {
    .nav-links {
        position: fixed; top: 52px; left: 0; right: 0;
        background: #0d0d20;
        padding: 1rem; flex-direction: column;
        border-bottom: 1px solid var(--card-border);
        display: none; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        z-index: 999; max-height: calc(100vh - 52px); overflow-y: auto;
    }
    .nav-links.show { display: flex; }
    .menu-toggle { display: block !important; }
    html.light .nav-links { background: #f4f4ff; border-bottom-color: var(--card-border); }
}

@media (min-width: 992px) {
    .menu-toggle { display: none !important; }
    .nav-links { flex: 1; justify-content: center; }
}
.menu-toggle { background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; padding: 0.2rem 0.4rem; }

/* ── Desktop utility footer (desktop only) ────────────────────────── */
.desk-footer {
    display: none;
}
@media (min-width: 992px) {
    .desk-footer {
        display: flex;
        position: fixed; bottom: 0; left: 0; right: 0;
        z-index: 900;
        align-items: center;
        background: rgba(10,10,22,0.97);
        border-top: 1px solid var(--card-border);
        backdrop-filter: blur(12px);
        padding: 0 1rem;
        min-height: 40px;
        gap: 0.5rem;
    }
    html.light .desk-footer {
        background: rgba(255,255,255,0.97);
        border-top-color: rgba(15,23,42,0.08);
        box-shadow: 0 -1px 8px rgba(15,23,42,0.06);
    }
    .desk-footer-toggle {
        display: flex; align-items: center; gap: 0.4rem;
        background: none; border: none;
        color: #64748b; font-size: 0.72rem; font-weight: 600;
        cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 6px;
        transition: color 0.15s, background 0.15s;
        margin-left: auto;
    }
    .desk-footer-toggle:hover { color: #a5b4fc; background: rgba(99,102,241,0.08); }
    html.light .desk-footer-toggle { color: #94a3b8; }
    html.light .desk-footer-toggle:hover { color: #4f46e5; background: rgba(79,70,229,0.07); }
    .desk-footer-toggle i { transition: transform 0.2s; font-size: 0.65rem; }
    .desk-footer-panel {
        display: flex; align-items: center; gap: 0.5rem; flex: 1;
    }
    .desk-footer-sep {
        width: 1px; height: 16px; background: var(--card-border); flex-shrink: 0;
    }
    .desk-footer-link {
        display: flex; align-items: center; gap: 0.35rem;
        color: #64748b; text-decoration: none;
        font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.5rem;
        border-radius: 6px; border: none; background: none;
        cursor: pointer; transition: color 0.15s, background 0.15s;
        white-space: nowrap;
    }
    .desk-footer-link:hover { color: #a5b4fc; background: rgba(99,102,241,0.08); }
    html.light .desk-footer-link { color: #64748b; }
    html.light .desk-footer-link:hover { color: #4f46e5; background: rgba(79,70,229,0.07); }
    .desk-footer-link.superadmin-link { color: #8b5cf6; }
    .desk-footer-link.superadmin-link:hover { color: #c4b5fd; background: rgba(139,92,246,0.1); }
    html.light .desk-footer-link.superadmin-link { color: #7c3aed; }
    /* Push page content above footer */
    body { padding-bottom: 44px; }
}

/* ── Top-bar right controls (shared across all pages) ────────────── */
.theme-toggle-btn {
    background: var(--card-bg); border: 1px solid var(--card-border);
    color: var(--muted); border-radius: 8px; padding: 0.35rem 0.6rem;
    cursor: pointer; font-size: 0.82rem; transition: all 0.15s;
}
.theme-toggle-btn:hover { border-color: rgba(99,102,241,0.4); color: var(--primary-soft); }
html.light .theme-toggle-btn { background: #f8f8ff; border-color: rgba(79,70,229,0.13); color: #475569; }

.quota-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.68rem; font-weight: 600; padding: 3px 9px; border-radius: 8px;
    cursor: default; white-space: nowrap; flex-shrink: 0;
    background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.25); color: #a5b4fc;
    transition: background 0.3s;
}
.quota-badge.ok    { background: rgba(16,185,129,0.1);  border-color: rgba(16,185,129,0.3);  color: #6ee7b7; }
.quota-badge.warn  { background: rgba(245,158,11,0.1);  border-color: rgba(245,158,11,0.3);  color: #fbbf24; }
.quota-badge.error { background: rgba(239,68,68,0.1);   border-color: rgba(239,68,68,0.3);   color: #fca5a5; }
html.light .quota-badge       { background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.2); color: #4f46e5; }
html.light .quota-badge.ok    { background: rgba(5,150,105,0.06);  border-color: rgba(5,150,105,0.2);  color: #059669; }
html.light .quota-badge.warn  { background: rgba(217,119,6,0.06);  border-color: rgba(217,119,6,0.2);  color: #d97706; }
html.light .quota-badge.error { background: rgba(220,38,38,0.06);  border-color: rgba(220,38,38,0.2);  color: #dc2626; }

.ai-toggle-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.74rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 8px;
    cursor: pointer; white-space: nowrap; border: 1px solid; transition: all 0.2s;
}
.ai-toggle-btn.ai-on  { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.35); color: #34d399; }
.ai-toggle-btn.ai-off { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); color: #fbbf24; }
.ai-toggle-btn:disabled { opacity: 0.4; cursor: not-allowed; }
html.light .ai-toggle-btn.ai-on  { background: rgba(5,150,105,0.08);  border-color: rgba(5,150,105,0.3);  color: #059669; }
html.light .ai-toggle-btn.ai-off { background: rgba(217,119,6,0.08);   border-color: rgba(217,119,6,0.3);   color: #d97706; }

/* ── Toast ────────────────────────────────────────────────────────── */
.toast-msg {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
    padding: 0.7rem 1.2rem; border-radius: 10px; font-size: 0.85rem;
    background: #1a1a34; border: 1px solid var(--card-border); color: var(--text);
    transform: translateY(100px); opacity: 0; transition: all 0.25s;
}
html.light .toast-msg { background: #fff; border-color: var(--card-border); color: var(--text); }
.toast-msg.show   { transform: translateY(0); opacity: 1; }
.toast-msg.success { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.1); }
.toast-msg.error   { border-color: rgba(239,68,68,0.4);  background: rgba(239,68,68,0.1);  }

/* ── Utilities ────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.fa-spin, .spin { animation: spin 1s linear infinite; display: inline-block; }

/* ── Breadcrumb ───────────────────────────────────────────────────── */
.breadcrumb-bar {
    padding: 0.5rem 0 0.3rem; font-size: 0.76rem; color: var(--muted);
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.breadcrumb-bar a { color: var(--primary); text-decoration: none; transition: color 0.15s; }
.breadcrumb-bar a:hover { color: var(--primary-soft); }
.breadcrumb-bar .bc-sep     { color: rgba(99,102,241,0.25); font-size: 0.65rem; }
.breadcrumb-bar .bc-current { color: #94a3b8; font-weight: 600; }
html.light .breadcrumb-bar .bc-sep { color: rgba(79,70,229,0.2); }

/* ── Sub-tabs (used in Panel / Chat / Config groups) ─────────────── */
.sub-tabs {
    display: flex; gap: 0.25rem; padding: 0.4rem 0; margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--card-border);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tab {
    padding: 0.4rem 0.85rem; border-radius: 8px; font-size: 0.8rem; font-weight: 500;
    color: #94a3b8; text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; transition: all 0.15s;
}
.sub-tab:hover  { background: rgba(99,102,241,0.08); color: #c4b5fd; }
.sub-tab.active { background: rgba(99,102,241,0.11); border-color: rgba(99,102,241,0.3); color: #a5b4fc; font-weight: 600; }

html.light .sub-tab        { color: #64748b; }
html.light .sub-tab:hover  { background: rgba(79,70,229,0.07); color: #4f46e5; }
html.light .sub-tab.active { background: rgba(79,70,229,0.09); border-color: rgba(79,70,229,0.25); color: #4f46e5; }