/* ================================================================
   RSolutions eCRM — theme.css
   Light / Dark theme toggle
   ================================================================ */

/* ── DARK MODE TOKENS ───────────────────────────────────────── */
[data-theme="dark"] {
    /* Backgrounds */
    --bg: #0F0F12;
    --bg-soft: #17171C;
    --bg-muted: #1E1E26;
    /* Borders */
    --border: rgba(255,255,255,.08);
    --border-mid: rgba(255,255,255,.13);
    /* Text */
    --text: #F4F4F5;
    --text-2: #A1A1AA;
    --text-3: #71717A;
    --text-4: #52525B;
    /* Brand stays the same — just tweak light tints */
    --brand-light: rgba(227,152,2,.15);
    --brand-glow: rgba(245,166,35,.2);
    /* Semantic colours — slightly adjusted for dark bg */
    --green-bg: rgba(22,163,74,.18);
    --blue-bg: rgba(37,99,235,.18);
    --red-bg: rgba(220,38,38,.14);
    --amber-bg: rgba(245,158,11,.15);
    /* Black token used in dashboard */
    --black: #F4F4F5;
}

    /* ── DARK: nav scrolled ─────────────────────────────────────── */
    [data-theme="dark"] .nav.scrolled {
        background: rgba(15,15,18,.92);
        box-shadow: 0 1px 0 var(--border), 0 4px 14px rgba(0,0,0,.3);
    }

    /* ── DARK: hero gradient ────────────────────────────────────── */
    [data-theme="dark"] .hero-bg {
        background: radial-gradient(ellipse 70% 55% at 70% 20%, rgba(245,166,35,.07) 0%, transparent 65%), radial-gradient(ellipse 50% 50% at 15% 80%, rgba(245,166,35,.04) 0%, transparent 65%), linear-gradient(170deg, #0F0F12 0%, #12121A 60%, #0F0F12 100%);
    }

    [data-theme="dark"] .nav-logo img {
        background-color: #fff;
    }

    [data-theme="dark"] .sidebar {
        background-color: #000;
    }

    [data-theme="dark"] .nav-item.active {
        color: #fff
    }

    [data-theme="dark"] .nav-item:hover {
        color: #fff
    }
    /* ── DARK: dashboard card (hero mock) ───────────────────────── */
    [data-theme="dark"] .dashboard-card {
        background: #1A1A24;
        border-color: rgba(255,255,255,.09);
        box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.2);
    }

    [data-theme="dark"] .float-notif,
    [data-theme="dark"] .float-metric {
        background: #1A1A24;
        border-color: rgba(255,255,255,.1);
        box-shadow: 0 8px 32px rgba(0,0,0,.4);
    }

    /* ── DARK: feat cards ───────────────────────────────────────── */
    [data-theme="dark"] .feat-card {
        background: #17171C;
    }

    [data-theme="dark"] .kanban-deal {
        background: #1E1E28;
    }

    /* ── DARK: module screens ───────────────────────────────────── */
    [data-theme="dark"] .module-screen,
    [data-theme="dark"] .ms-kpi,
    [data-theme="dark"] .ms-act-row,
    [data-theme="dark"] .ms-milestone,
    [data-theme="dark"] .ms-stat-box,
    [data-theme="dark"] .ms-mini-chart,
    [data-theme="dark"] .ms-ticket,
    [data-theme="dark"] .ms-approval-card {
        background: #1A1A24;
        border-color: rgba(255,255,255,.08);
    }

        [data-theme="dark"] .ms-ticket.t-crit {
            background: rgba(220,38,38,.08);
            border-color: rgba(220,38,38,.18);
        }

        [data-theme="dark"] .ms-ticket.t-high {
            background: rgba(245,166,35,.07);
            border-color: rgba(245,166,35,.16);
        }

    /* ── DARK: price cards ──────────────────────────────────────── */
    [data-theme="dark"] .price-card {
        background: #17171C;
    }

        [data-theme="dark"] .price-card.price-featured {
            background: linear-gradient(160deg, #1A1600 0%, #1E1A00 100%);
            border-color: rgba(245,166,35,.35);
        }

    /* ── DARK: CTA box ──────────────────────────────────────────── */
    [data-theme="dark"] .cta-box {
        background: linear-gradient(135deg, rgba(245,166,35,.08) 0%, rgba(245,166,35,.03) 100%);
    }

    /* ── DARK: logos strip ──────────────────────────────────────── */
    [data-theme="dark"] .logos-strip {
        background: var(--bg-soft);
    }

    /* ── DARK: steps section ────────────────────────────────────── */
    [data-theme="dark"] .steps-section {
        background: var(--bg-soft);
    }

    [data-theme="dark"] .step-circle {
        background: #1A1A24;
    }

    /* ── DARK: metrics band ─────────────────────────────────────── */
    [data-theme="dark"] .metrics-band {
        background: var(--bg-soft);
    }

    /* ── DARK: mobile nav overlay ───────────────────────────────── */
    [data-theme="dark"] .nav-open .nav-links,
    [data-theme="dark"] .nav-open .nav-actions {
        background: #17171C;
        border-color: var(--border);
    }

    /* ── DARK: scrollbar ────────────────────────────────────────── */
    [data-theme="dark"] ::-webkit-scrollbar-track {
        background: var(--bg-soft);
    }

    /* ══════════════════════════════════════════════════════════════
   DASHBOARD / ADMIN DARK OVERRIDES
   ══════════════════════════════════════════════════════════════ */
    [data-theme="dark"] .crm-wrapper {
        background: #0B0B0F;
    }

    [data-theme="dark"] .topbar {
        background: #0F0F14;
        border-bottom-color: rgba(255,255,255,.07);
        box-shadow: 0 1px 3px rgba(0,0,0,.3);
    }

    [data-theme="dark"] .topbar-title,
    [data-theme="dark"] .topbar-user {
        color: var(--text);
    }

    [data-theme="dark"] .icon-btn {
        background: #1A1A22;
        border-color: rgba(255,255,255,.09);
        color: #94A3B8;
    }

        [data-theme="dark"] .icon-btn:hover {
            background: #22222E;
            color: var(--text);
        }

    [data-theme="dark"] .notif-badge {
        border-color: #0F0F14;
    }

    [data-theme="dark"] .page-content {
        background: #0B0B0F;
    }

    /* Cards */
    [data-theme="dark"] .card {
        background: #13131A;
        box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.15);
    }

    [data-theme="dark"] .card-header {
        border-bottom-color: rgba(255,255,255,.07);
    }

    [data-theme="dark"] .card-title {
        color: var(--text);
    }

    [data-theme="dark"] .card-footer {
        background: #17171E;
        border-top-color: rgba(255,255,255,.07);
    }

    /* KPI cards */
    [data-theme="dark"] .kpi-card {
        background: #13131A;
        box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.15);
    }

    [data-theme="dark"] .kpi-value {
        color: var(--text);
    }

    [data-theme="dark"] .kpi-label {
        color: #64748B;
    }

    [data-theme="dark"] .report-card, [data-theme="dark"] .kpi-box, [data-theme="dark"] .chart-card {
        background: #13131A;
        box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.15);
    }

    [data-theme="dark"] .chart-title {
        color: #fff;
    }
    /* Buttons dark adjustments */
    [data-theme="dark"] .btn-secondary {
        background: #1A1A22;
        color: var(--text);
        border-color: rgba(255,255,255,.18);
    }

        [data-theme="dark"] .btn-secondary:hover {
            background: #22222E;
            color: var(--brand-deep);
            border-color: var(--brand-deep);
        }

    [data-theme="dark"] .btn-ghost {
        background: #1A1A22;
        color: var(--text-2);
        border-color: var(--border);
    }

        [data-theme="dark"] .btn-ghost:hover {
            background: #22222E;
            color: var(--text);
        }

    [data-theme="dark"] .btn-outline {
        color: var(--text);
        border-color: var(--border-mid);
    }

    /* Forms */
    [data-theme="dark"] .form-label {
        color: #CBD5E1;
    }

    [data-theme="dark"] .form-control {
        background: #1A1A22;
        border-color: rgba(255,255,255,.1);
        color: var(--text);
    }

        [data-theme="dark"] .form-control:focus {
            border-color: var(--brand);
            box-shadow: 0 0 0 3px rgba(245,166,35,.12);
        }

    [data-theme="dark"] .form-hint {
        color: #64748B;
    }

    [data-theme="dark"] .form-section {
        background: #17171E;
        border-color: rgba(255,255,255,.07);
    }

    [data-theme="dark"] .form-section-title {
        color: var(--text);
        border-bottom-color: rgba(255,255,255,.07);
    }

    /* Filter bar */
    [data-theme="dark"] .filter-bar {
        background: #13131A;
        box-shadow: 0 1px 3px rgba(0,0,0,.25);
    }

    [data-theme="dark"] .filter-input {
        background: #1A1A22;
        border-color: rgba(255,255,255,.1);
        color: var(--text);
    }

        [data-theme="dark"] .filter-input:focus {
            border-color: var(--brand);
        }

    /* Table */
    [data-theme="dark"] .crm-table th {
        color: #94A3B8;
        background: #17171E;
        border-bottom-color: rgba(255,255,255,.07);
    }

    [data-theme="dark"] .crm-table td {
        border-bottom-color: rgba(255,255,255,.05);
        color: #CBD5E1;
    }

    [data-theme="dark"] .crm-table tbody tr:hover td {
        background: #17171E;
    }

    /* Badges dark */
    [data-theme="dark"] .badge-success {
        background: rgba(16,185,129,.18);
        color: #34D399;
    }

    [data-theme="dark"] .badge-warning {
        background: rgba(245,158,11,.18);
        color: #FCD34D;
    }

    [data-theme="dark"] .badge-danger {
        background: rgba(239,68,68,.18);
        color: #FCA5A5;
    }

    [data-theme="dark"] .badge-info {
        background: rgba(59,130,246,.18);
        color: #93C5FD;
    }

    [data-theme="dark"] .badge-gray {
        background: rgba(100,116,139,.18);
        color: #94A3B8;
    }

    [data-theme="dark"] .badge-orange {
        background: rgba(194,65,12,.18);
        color: #FDA974;
    }

    [data-theme="dark"] .badge-purple {
        background: rgba(109,40,217,.18);
        color: #C4B5FD;
    }

    /* Avatar border in dark */
    [data-theme="dark"] .avatar-stack .avatar {
        border-color: #13131A;
    }

    /* Progress track */
    [data-theme="dark"] .progress {
        background: #1E1E2A;
    }

    /* Tab nav */
    [data-theme="dark"] .tab-nav {
        background: #13131A;
        box-shadow: 0 1px 3px rgba(0,0,0,.25);
    }

    [data-theme="dark"] .tab-btn:not(.active) {
        color: #94A3B8;
    }

        [data-theme="dark"] .tab-btn:not(.active):hover {
            background: #1E1E2A;
            color: var(--text);
        }

    /* Alerts dark */
    [data-theme="dark"] .alert-success {
        background: rgba(16,185,129,.14);
        border-color: rgba(16,185,129,.22);
        color: #34D399;
    }

    [data-theme="dark"] .alert-danger {
        background: rgba(239,68,68,.14);
        border-color: rgba(239,68,68,.22);
        color: #FCA5A5;
    }

    [data-theme="dark"] .alert-warning {
        background: rgba(245,158,11,.14);
        border-color: rgba(245,158,11,.22);
        color: #FCD34D;
    }

    [data-theme="dark"] .alert-info {
        background: rgba(59,130,246,.14);
        border-color: rgba(59,130,246,.22);
        color: #93C5FD;
    }

    /* Kanban board */
    [data-theme="dark"] .kanban-col {
        background: #17171E;
        border-color: rgba(255,255,255,.07);
    }

    [data-theme="dark"] .kanban-col-header {
        color: #CBD5E1;
    }

    [data-theme="dark"] .kanban-col-count {
        background: #1E1E2A;
        color: #94A3B8;
    }

    [data-theme="dark"] .kanban-card {
        background: #1A1A24;
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }

    [data-theme="dark"] .kanban-card-title {
        color: var(--text);
    }

    [data-theme="dark"] .kanban-card-meta {
        color: #64748B;
    }

    /* Stat rows */
    [data-theme="dark"] .stat-row {
        border-bottom-color: rgba(255,255,255,.06);
    }

    /* Timeline */
    [data-theme="dark"] .timeline::before {
        background: rgba(255,255,255,.08);
    }

    [data-theme="dark"] .timeline-dot {
        border-color: #13131A;
        box-shadow: 0 0 0 2px rgba(245,166,35,.2);
    }

    [data-theme="dark"] .timeline-content strong {
        color: var(--text);
    }

    [data-theme="dark"] .timeline-time {
        color: #64748B;
    }

    /* Page header text */
    [data-theme="dark"] .page-header-left h2 {
        color: var(--text);
    }

    [data-theme="dark"] .page-header-left p {
        color: #64748B;
    }

    /* Login box in dark */
    [data-theme="dark"] .login-box {
        background: #13131A;
        box-shadow: 0 40px 80px rgba(0,0,0,.6);
    }

    [data-theme="dark"] .login-logo h1 {
        color: var(--text);
    }

    [data-theme="dark"] .login-title {
        color: var(--text);
    }

    [data-theme="dark"] .login-subtitle,
    [data-theme="dark"] .login-footer,
    [data-theme="dark"] .login-logo p {
        color: #64748B;
    }

/* ══════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════ */
.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-soft);
    border: 1.5px solid var(--border-mid);
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-2);
    transition: all .22s;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
    font-family: inherit;
}

    .theme-toggle:hover {
        background: var(--bg-muted);
        color: var(--text);
        border-color: var(--brand);
    }

    /* Icon swap */
    .theme-toggle .icon-sun {
        display: none;
    }

    .theme-toggle .icon-moon {
        display: inline;
    }

[data-theme="dark"] .theme-toggle .icon-sun {
    display: inline;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

/* In the dashboard topbar the toggle sits alongside icon-btn elements */
.topbar .theme-toggle {
    background: #F8FAFC;
    border-color: #E2E8F0;
    color: #64748B;
}

[data-theme="dark"] .topbar .theme-toggle {
    background: #1A1A22;
    border-color: rgba(255,255,255,.09);
    color: #94A3B8;
}

.topbar .theme-toggle:hover {
    background: #E2E8F0;
    color: var(--black);
}

[data-theme="dark"] .topbar .theme-toggle:hover {
    background: #22222E;
    color: var(--text);
}

/* ── TRANSITION: smooth theme switch ────────────────────────── */
body,
body * {
    transition: background-color .25s ease, border-color .25s ease, color .18s ease, box-shadow .25s ease;
}

/* Don't animate transforms or opacity (breaks existing animations) */
.btn,
.feat-card,
.kpi-card,
.price-card,
.kanban-card,
.step-circle,
.nav-links a,
.bar,
.ms-bar {
    transition: background-color .25s ease, border-color .25s ease, color .18s ease, box-shadow .25s ease, transform .3s cubic-bezier(.16,1,.3,1);
}