/* ============================================================
   CloudLink Console — Theme System
   Dark:  bg #0a1628  |  text #ffffff / #e8edf2
   Light: bg #ffffff  |  text #0a1628
   ============================================================ */

/* ── Prevent flash on load ───────────────────────────────── */
html { background: #0a1628; }
[data-theme="light"] { background: #f4f7fb; }

/* ── Dark mode variables (default) ──────────────────────── */
:root,
[data-theme="dark"] {
    --navy:   #0a1628;
    --navy2:  #0f1f38;
    --navy3:  #162844;
    --gold:   #0094cc;
    --gold2:  #00b3f0;
    --text:   #e8edf2;
    --text2:  #94a3b8;
    --text3:  #5a7a9a;
    --border: rgba(0,148,204,0.15);
    --success:#22c55e;
    --danger: #ef4444;
    --warning:#f59e0b;
    --info:   #0094cc;
}

/* ── Light mode — override every variable ────────────────── */
[data-theme="light"] {
    --navy:   #f4f7fb;
    --navy2:  #ffffff;
    --navy3:  #e8eef6;
    --gold:   #0078a8;
    --gold2:  #0094cc;
    --text:   #0a1628;
    --text2:  #0a1628;
    --text3:  #3a5a7a;
    --border: rgba(0,0,0,0.1);
    --success:#16a34a;
    --danger: #dc2626;
    --warning:#d97706;
    --info:   #0078a8;
}

/* ── Light mode structural fixes ─────────────────────────── */
/* These are needed because console.css hardcodes some colours */

[data-theme="light"] body {
    background: #f4f7fb;
    color: #0a1628;
}

[data-theme="light"] .sidebar {
    background: #ffffff;
    border-right: 1px solid rgba(0,0,0,0.08);
}

[data-theme="light"] .nav-item {
    color: #0a1628;
}

[data-theme="light"] .nav-item:hover {
    background: #e8eef6;
    color: #0a1628;
}

[data-theme="light"] .nav-item.active {
    background: rgba(0,120,168,0.1);
    color: #0078a8;
    border-left-color: #0078a8;
}

[data-theme="light"] .main {
    background: #f4f7fb;
}

[data-theme="light"] .card {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .card-header {
    border-bottom-color: rgba(0,0,0,0.08);
    background: #ffffff;
}

[data-theme="light"] .card-title {
    color: #0a1628;
}

[data-theme="light"] .card-body {
    background: #ffffff;
    color: #0a1628;
}

[data-theme="light"] .stat-card {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .stat-label { color: #3a5a7a; }
[data-theme="light"] .stat-val   { color: #0a1628; }
[data-theme="light"] .stat-sub   { color: #3a5a7a; }

[data-theme="light"] .table th {
    color: #3a5a7a;
    border-bottom-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .table td {
    color: #0a1628;
    border-bottom-color: rgba(0,0,0,0.05);
}

[data-theme="light"] .table tbody tr:hover td {
    background: rgba(0,0,0,0.02);
    color: #0a1628;
}

[data-theme="light"] .page-title { color: #0a1628; }
[data-theme="light"] .page-sub   { color: #3a5a7a; }

[data-theme="light"] .btn-outline {
    color: #0a1628;
    border-color: rgba(0,0,0,0.15);
    background: transparent;
}

[data-theme="light"] .btn-outline:hover {
    background: #e8eef6;
    color: #0a1628;
}

[data-theme="light"] .btn-gold {
    background: #0078a8;
    color: #ffffff;
}

[data-theme="light"] .btn-gold:hover {
    background: #0094cc;
    color: #ffffff;
}

[data-theme="light"] .form-label { color: #3a5a7a; }
[data-theme="light"] .form-hint  { color: #3a5a7a; }

[data-theme="light"] .form-input {
    background: #f4f7fb;
    border-color: rgba(0,0,0,0.12);
    color: #0a1628;
}

[data-theme="light"] .form-input:focus {
    border-color: #0078a8;
}

[data-theme="light"] select.form-input option {
    background: #ffffff;
    color: #0a1628;
}

[data-theme="light"] .badge-gold {
    background: rgba(0,120,168,0.1);
    color: #0078a8;
}

[data-theme="light"] .badge-gray {
    background: rgba(58,90,122,0.1);
    color: #3a5a7a;
}

[data-theme="light"] .alert-success { background:rgba(22,163,74,.08); border-color:rgba(22,163,74,.2); color:#16a34a; }
[data-theme="light"] .alert-danger  { background:rgba(220,38,38,.08);  border-color:rgba(220,38,38,.2);  color:#dc2626; }
[data-theme="light"] .alert-info    { background:rgba(0,120,168,.08);  border-color:rgba(0,120,168,.2);  color:#0078a8; }

[data-theme="light"] .empty-title { color: #0a1628; }
[data-theme="light"] .empty-sub   { color: #3a5a7a; }

[data-theme="light"] .app-card {
    background: #f0f5fb;
    border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .app-name { color: #0a1628; }
[data-theme="light"] .app-desc { color: #3a5a7a; }

[data-theme="light"] .app-card-v2 {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .app-card-header {
    background: #ffffff;
    border-bottom-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .app-card-name  { color: #0094cc; }
[data-theme="light"] .app-card-url   { color: #3a5a7a; }

[data-theme="light"] .app-card-tiles {
    background: #ffffff;
    border-bottom-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .app-tile        { background: #eef3f9; }
[data-theme="light"] .app-tile-label  { color: #3a5a7a; }
[data-theme="light"] .app-tile-val    { color: #0a1628; }
[data-theme="light"] .app-card-footer { background: #ffffff; }

[data-theme="light"] .status-tooltip {
    background: #ffffff;
    border-color: rgba(0,0,0,0.1);
    color: #0a1628;
}

[data-theme="light"] .summary-card {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .summary-val   { color: #0a1628; }
[data-theme="light"] .summary-label { color: #3a5a7a; }

[data-theme="light"] .app-stat-card {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .app-stat-header { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .app-stat-name   { color: #0a1628; }
[data-theme="light"] .stat-row        { border-bottom-color: rgba(0,0,0,0.05); }
[data-theme="light"] .stat-key        { color: #3a5a7a; }
[data-theme="light"] .stat-val2       { color: #0a1628; }

[data-theme="light"] .log-row    { border-bottom-color: rgba(0,0,0,0.05); }
[data-theme="light"] .log-desc   { color: #0a1628; }
[data-theme="light"] .log-meta   { color: #3a5a7a; }
[data-theme="light"] .log-time   { color: #3a5a7a; }
[data-theme="light"] .log-count  { color: #3a5a7a; }

[data-theme="light"] .filter-input {
    background: #f4f7fb;
    border-color: rgba(0,0,0,0.12);
    color: #0a1628;
}

[data-theme="light"] .page-btn {
    background: #ffffff;
    border-color: rgba(0,0,0,0.1);
    color: #0a1628;
}

[data-theme="light"] .page-btn:hover { background: #e8eef6; }

[data-theme="light"] .page-btn.active {
    background: #0094cc;
    color: #ffffff;
    border-color: #0094cc;
}

[data-theme="light"] .tab-btn       { color: #3a5a7a; }
[data-theme="light"] .tab-btn:hover { color: #0a1628; }
[data-theme="light"] .tab-btn.active{ color: #0078a8; border-bottom-color: #0078a8; }
[data-theme="light"] .tab-bar       { border-bottom-color: rgba(0,0,0,0.08); }

[data-theme="light"] .php-card {
    background: #f0f5fb;
    border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .php-version { color: #0a1628; }
[data-theme="light"] .php-status  { color: #0a1628; }
[data-theme="light"] .site-row    { border-bottom-color: rgba(0,0,0,0.05); }
[data-theme="light"] .site-row:hover { background: rgba(0,0,0,0.02); }
[data-theme="light"] .site-name   { color: #0a1628; }
[data-theme="light"] .site-meta   { color: #3a5a7a; }
[data-theme="light"] .preview-box { background:#eef3f9; border-color:rgba(0,0,0,.08); color:#0a1628; }
[data-theme="light"] .step-label  { color: #3a5a7a; }

[data-theme="light"] .schedule-row  { background: #f0f5fb; }
[data-theme="light"] .backup-name   { color: #0a1628; }
[data-theme="light"] .backup-meta   { color: #3a5a7a; }
[data-theme="light"] .time-input    { background:#f4f7fb; border-color:rgba(0,0,0,.12); color:#0a1628; }

[data-theme="light"] .cl-modal-box    { background:#ffffff; border-color:rgba(0,0,0,.1); }
[data-theme="light"] .cl-modal-title  { color: #0a1628; }
[data-theme="light"] .cl-modal-body   { color: #0a1628; }
[data-theme="light"] .cl-modal-header { border-bottom-color:rgba(0,0,0,.08); }
[data-theme="light"] .cl-modal-footer { border-top-color:rgba(0,0,0,.08); }
[data-theme="light"] .cl-modal-input  { background:#f4f7fb; border-color:rgba(0,0,0,.12); color:#0a1628; }

[data-theme="light"] .sidebar-footer { border-top-color: rgba(0,0,0,0.08); }
[data-theme="light"] .user-name      { color: #0a1628; }
[data-theme="light"] .user-role      { color: #3a5a7a; }
[data-theme="light"] .user-avatar    { background: #0078a8; color: #ffffff; }
[data-theme="light"] .logout-btn     { color: #3a5a7a; }
[data-theme="light"] .logout-btn:hover { color: #dc2626; }

[data-theme="light"] .progress       { background: #e8eef6; }
[data-theme="light"] .toggle-slider  { background: #dde5ef; }

[data-theme="light"] code {
    background: #e8eef6;
    color: #0a1628;
    padding: 1px 5px;
    border-radius: 3px;
}

/* Inline style overrides for var(--navy3) boxes in settings */
[data-theme="light"] [style*="var(--navy3)"] {
    background: #eef3f9 !important;
    color: #0a1628 !important;
}

/* Login page */
[data-theme="light"] .left  { background: #ffffff; }
[data-theme="light"] .right { background: linear-gradient(160deg,#ddeef8,#f4f7fb); border-left:1px solid rgba(0,0,0,.08); }
[data-theme="light"] h1     { color: #0a1628; }

/* Theme toggle */
.theme-toggle-btn {
    background: none;
    border: none;
    color: var(--text3);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color .15s;
}
.theme-toggle-btn:hover { color: var(--text); }