/* Glass theme — the default (dark) look on every page: navy → teal gradient
   background, frosted translucent cards, white primary buttons and text.
   Loaded after each page's own styles and mobile.css, so equal-specificity
   rules here win. Light mode is untouched (it uses the same navy/teal palette). */

html[data-theme="dark"] {
  --g-bg-1:     #0a1a2e;
  --g-bg-2:     #0e2c45;
  --g-bg-3:     #164a63;
  --g-glass:    rgba(255,255,255,0.06);
  --g-glass-2:  rgba(255,255,255,0.10);
  --g-glass-hi: rgba(255,255,255,0.16);
  --g-solid:    #0f2a42;          /* menus, modals, dropdowns — must stay readable */
  --g-line:     rgba(255,255,255,0.12);
  --g-line-2:   rgba(255,255,255,0.22);
  --g-blur:     blur(16px) saturate(140%);

  /* page tokens used everywhere */
  --cream:      rgba(255,255,255,0.04);
  --white:      var(--g-glass);
  --text:       #ffffff;
  --text-2:     rgba(226,238,248,0.78);
  --text-3:     rgba(203,220,235,0.55);
  --border:     var(--g-line);
  --border-2:   var(--g-line-2);
  --shadow:     rgba(0,0,0,0.28);
  --gold:       #e6f4fb;
  --gold-dark:  #ffffff;
  --gold-light: #ffffff;
  --gold-pale:  rgba(255,255,255,0.08);
  --gold-muted: rgba(255,255,255,0.14);
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(56,163,199,0.28), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(21,90,124,0.35), transparent 60%),
    linear-gradient(135deg, var(--g-bg-1) 0%, var(--g-bg-2) 55%, var(--g-bg-3) 100%) !important;
  background-attachment: fixed !important;
  color: var(--text);
}
html[data-theme="dark"] ::selection { background: rgba(255,255,255,0.25); }

/* ── Scrollbars ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] * { scrollbar-color: rgba(255,255,255,0.22) transparent; scrollbar-width: thin; }
html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .sidebar {
  background: rgba(8,20,36,0.72) !important;
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  border-right: 1px solid var(--g-line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .sidebar-logo,
html[data-theme="dark"] .sidebar-footer { border-color: var(--g-line) !important; }
html[data-theme="dark"] .sidebar-logo-mark { background: var(--g-glass-2); border-color: var(--g-line-2); box-shadow: none; }
html[data-theme="dark"] .sidebar-section { color: rgba(255,255,255,0.45); }
html[data-theme="dark"] .sidebar-section::after { background: linear-gradient(90deg, rgba(255,255,255,0.14), transparent); }
html[data-theme="dark"] .sidebar-item,
html[data-theme="dark"] .sidebar-link {
  color: rgba(255,255,255,0.86); border-left-color: transparent !important;
  border-radius: 10px; box-shadow: none !important; transform: none !important;
}
html[data-theme="dark"] .sidebar-item:hover,
html[data-theme="dark"] .sidebar-link:hover { background: rgba(255,255,255,0.07); color: #fff; }
html[data-theme="dark"] .sidebar-item.active {
  background: rgba(255,255,255,0.12); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10) !important;
}
html[data-theme="dark"] .sidebar-item.active .si-icon { filter: none; }
html[data-theme="dark"] .sidebar-badge { background: rgba(255,255,255,0.14); }
html[data-theme="dark"] .sidebar-divider { background: var(--g-line); }

/* ── Topbar ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .topbar {
  background: rgba(8,20,36,0.45) !important;
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  border-bottom: 1px solid var(--g-line) !important; box-shadow: none !important;
}
html[data-theme="dark"] .tbar-icon-btn,
html[data-theme="dark"] .hdr-btn,
html[data-theme="dark"] .notif-bell-btn,
html[data-theme="dark"] .sidebar-toggle,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .theme-toggle {
  background: var(--g-glass) !important; border: 1px solid var(--g-line) !important; color: #fff !important; box-shadow: none !important;
}
html[data-theme="dark"] .tbar-icon-btn:hover,
html[data-theme="dark"] .hdr-btn:hover,
html[data-theme="dark"] .notif-bell-btn:hover,
html[data-theme="dark"] .sidebar-toggle:hover,
html[data-theme="dark"] .icon-btn:hover { background: var(--g-glass-hi) !important; }

/* ── Glass cards ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .mod-card,
html[data-theme="dark"] .user-mod-card,
html[data-theme="dark"] .exp-conn-card,
html[data-theme="dark"] .exp-prog-card,
html[data-theme="dark"] .sync-pair-card,
html[data-theme="dark"] .sync-job-card,
html[data-theme="dark"] .env-card,
html[data-theme="dark"] .project-btn,
html[data-theme="dark"] .lmd-card,
html[data-theme="dark"] .lmd-proj,
html[data-theme="dark"] .welcome-card {
  background: var(--g-glass) !important;
  border: 1px solid var(--g-line) !important;
  border-radius: 18px;
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  box-shadow: 0 10px 34px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] .project-btn:hover,
html[data-theme="dark"] .lmd-proj:hover,
html[data-theme="dark"] .mod-card:hover { background: var(--g-glass-2) !important; border-color: var(--g-line-2) !important; }
html[data-theme="dark"] .project-btn.active,
html[data-theme="dark"] .project-btn.selected,
html[data-theme="dark"] .lmd-proj.sel {
  background: rgba(255,255,255,0.14) !important; border-color: rgba(255,255,255,0.45) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] .card-title::after { background: linear-gradient(90deg, var(--g-line-2), transparent); }
html[data-theme="dark"] .stat-num { color: #fff !important; -webkit-text-fill-color: #fff; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] th,
html[data-theme="dark"] .lmd-table th {
  background: rgba(255,255,255,0.05) !important; color: rgba(255,255,255,0.62) !important;
  border-color: var(--g-line) !important;
}
html[data-theme="dark"] td { border-color: rgba(255,255,255,0.07) !important; }
html[data-theme="dark"] tbody tr:hover td { background: rgba(255,255,255,0.04); }

/* ── Inputs ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: #fff !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: rgba(255,255,255,0.4) !important; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: rgba(255,255,255,0.5) !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.10) !important; outline: none;
}
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup { background: var(--g-solid); color: #fff; }
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] { accent-color: #e6f4fb; }

/* ── Buttons: primary = white pill with navy text (like "View insights") ── */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .db-btn-primary,
html[data-theme="dark"] .deploy-btn,
html[data-theme="dark"] .dc-btn-deploy,
html[data-theme="dark"] .patch-submit-btn,
html[data-theme="dark"] .welcome-go-btn,
html[data-theme="dark"] .ac-btn-ok,
html[data-theme="dark"] .sc-btn-ok,
html[data-theme="dark"] .ce-btn-ok,
html[data-theme="dark"] .fc-btn-confirm,
html[data-theme="dark"] .btn-sync,
html[data-theme="dark"] .ds-btn-again,
html[data-theme="dark"] .again-btn,
html[data-theme="dark"] .dbb-submit,
html[data-theme="dark"] .login-wrap .btn,
html[data-theme="dark"] .lmd-btn.primary {
  background: #ffffff !important; color: #0b1f33 !important;
  border: 1px solid #ffffff !important; box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .btn-primary:hover:not(:disabled),
html[data-theme="dark"] .db-btn-primary:hover:not(:disabled),
html[data-theme="dark"] .deploy-btn:hover:not(:disabled),
html[data-theme="dark"] .dc-btn-deploy:hover:not(:disabled),
html[data-theme="dark"] .patch-submit-btn:hover:not(:disabled),
html[data-theme="dark"] .welcome-go-btn:hover,
html[data-theme="dark"] .btn-sync:hover:not(:disabled),
html[data-theme="dark"] .dbb-submit:hover:not(:disabled),
html[data-theme="dark"] .login-wrap .btn:hover:not(:disabled),
html[data-theme="dark"] .lmd-btn.primary:hover:not(:disabled) { background: #e6f4fb !important; color: #0b1f33 !important; }
html[data-theme="dark"] .btn-primary:disabled,
html[data-theme="dark"] .deploy-btn:disabled,
html[data-theme="dark"] .lmd-btn.primary:disabled { opacity: .45; }

/* Accent chips, step numbers and active states that were "gold fill + white text":
   white fill with navy text, like the reference's white accents */
html[data-theme="dark"] .badge-admin,
html[data-theme="dark"] .u-avatar,
html[data-theme="dark"] .proj-env-filter.active,
html[data-theme="dark"] .mod-card-tick,
html[data-theme="dark"] .fm-ab-sel-chip,
html[data-theme="dark"] .fm-ab-upload,
html[data-theme="dark"] .spc-btn,
html[data-theme="dark"] .pg-btn.active,
html[data-theme="dark"] .tbl-expand-btn.open,
html[data-theme="dark"] .exp-step-num,
html[data-theme="dark"] .exp-dl-btn,
html[data-theme="dark"] .nav-tab.active .nav-badge,
html[data-theme="dark"] .step-num-circle,
html[data-theme="dark"] .section-label .num,
html[data-theme="dark"] .active-check,
html[data-theme="dark"] .sp-open-btn,
html[data-theme="dark"] .ce-step-num,
html[data-theme="dark"] .fab-refresh,
html[data-theme="dark"] .role-switch-btn .sw-arr {
  background: #ffffff !important; color: #0b1f33 !important;
  border-color: #ffffff !important; text-shadow: none !important;
}
html[data-theme="dark"] .fab-refresh { box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important; }
html[data-theme="dark"] .fab-refresh svg { stroke: #0b1f33; color: #0b1f33; }

/* secondary / ghost buttons */
html[data-theme="dark"] .btn-cancel,
html[data-theme="dark"] .btn-sm,
html[data-theme="dark"] .btn-edit,
html[data-theme="dark"] .pg-btn,
html[data-theme="dark"] .fm-btn,
html[data-theme="dark"] .db-btn,
html[data-theme="dark"] .lmd-btn:not(.primary):not(.rb),
html[data-theme="dark"] .ac-btn-cancel,
html[data-theme="dark"] .sc-btn-cancel,
html[data-theme="dark"] .rb-btn-cancel,
html[data-theme="dark"] .dc-btn-cancel,
html[data-theme="dark"] .fc-btn-cancel,
html[data-theme="dark"] .patch-cancel-btn,
html[data-theme="dark"] .ds-btn-close,
html[data-theme="dark"] .visit-btn,
html[data-theme="dark"] .clear-btn,
html[data-theme="dark"] .role-switch-btn {
  background: var(--g-glass) !important; border: 1px solid var(--g-line-2) !important;
  color: #fff !important; box-shadow: none !important;
}
html[data-theme="dark"] .btn-cancel:hover,
html[data-theme="dark"] .btn-sm:hover,
html[data-theme="dark"] .btn-edit:hover,
html[data-theme="dark"] .pg-btn:hover:not(:disabled),
html[data-theme="dark"] .fm-btn:hover:not(:disabled),
html[data-theme="dark"] .db-btn:hover:not(:disabled),
html[data-theme="dark"] .lmd-btn:not(.primary):not(.rb):hover:not(:disabled),
html[data-theme="dark"] .visit-btn:hover,
html[data-theme="dark"] .role-switch-btn:hover { background: var(--g-glass-hi) !important; }
/* keep delete buttons red */
html[data-theme="dark"] .btn-del,
html[data-theme="dark"] .fm-btn-del { background: rgba(239,68,68,0.14) !important; border: 1px solid rgba(248,113,113,0.4) !important; color: #fca5a5 !important; }

/* ── Tabs, pills, chips ─────────────────────────────────────────────────── */
html[data-theme="dark"] .nav-tab,
html[data-theme="dark"] .dbh-tab,
html[data-theme="dark"] .lmd-tab,
html[data-theme="dark"] .env-pill,
html[data-theme="dark"] .fpill,
html[data-theme="dark"] .proj-pill,
html[data-theme="dark"] .exp-opt-pill {
  background: var(--g-glass) !important; border-color: var(--g-line) !important; color: rgba(255,255,255,0.8) !important;
}
html[data-theme="dark"] .nav-tab.active,
html[data-theme="dark"] .dbh-tab.active,
html[data-theme="dark"] .lmd-tab.on,
html[data-theme="dark"] .env-pill.active,
html[data-theme="dark"] .fpill.active,
html[data-theme="dark"] .proj-pill.active,
html[data-theme="dark"] .exp-opt-pill.active {
  background: rgba(255,255,255,0.16) !important; border-color: rgba(255,255,255,0.45) !important; color: #fff !important;
  box-shadow: none !important;
}

/* ── Overlays, modals, dropdowns, toasts — solid glass so text stays readable ── */
html[data-theme="dark"] .modal-overlay,
html[data-theme="dark"] .access-overlay,
html[data-theme="dark"] .access-detail-overlay,
html[data-theme="dark"] .ac-overlay,
html[data-theme="dark"] .deploy-detail-overlay,
html[data-theme="dark"] .rb-confirm-overlay,
html[data-theme="dark"] .rollback-overlay,
html[data-theme="dark"] .deploy-confirm-overlay,
html[data-theme="dark"] .deploy-success-overlay,
html[data-theme="dark"] .commit-err-overlay,
html[data-theme="dark"] .folder-confirm-overlay,
html[data-theme="dark"] .patch-overlay,
html[data-theme="dark"] .patch-success-overlay,
html[data-theme="dark"] .site-preview-overlay,
html[data-theme="dark"] .sc-overlay,
html[data-theme="dark"] .upload-overlay,
html[data-theme="dark"] .welcome-overlay,
html[data-theme="dark"] .sidebar-overlay,
html[data-theme="dark"] .lmd-modal {
  background: rgba(3,10,20,0.6) !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
html[data-theme="dark"] .modal,
html[data-theme="dark"] .access-modal,
html[data-theme="dark"] .deploy-detail-modal,
html[data-theme="dark"] .patch-modal,
html[data-theme="dark"] .site-preview-modal,
html[data-theme="dark"] .notif-dropdown,
html[data-theme="dark"] .db-os-popup,
html[data-theme="dark"] .lmd-modal-box,
html[data-theme="dark"] .welcome-card {
  background: linear-gradient(160deg, rgba(20,50,76,0.96), rgba(12,32,52,0.97)) !important;
  border: 1px solid var(--g-line-2) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.5) !important;
  color: #fff;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .access-modal-hdr,
html[data-theme="dark"] .access-modal-ftr,
html[data-theme="dark"] .notif-dropdown-head { border-color: var(--g-line) !important; background: transparent !important; }
html[data-theme="dark"] .notif-item { border-color: rgba(255,255,255,0.07) !important; }
html[data-theme="dark"] .notif-item:hover { background: rgba(255,255,255,0.05) !important; }
html[data-theme="dark"] .toast,
html[data-theme="dark"] .db-toast {
  background: rgba(15,42,66,0.94) !important; color: #fff !important; border: 1px solid var(--g-line-2) !important;
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
}

/* ── Misc surfaces ──────────────────────────────────────────────────────── */
html[data-theme="dark"] .drop-zone,
html[data-theme="dark"] .lmd-drop {
  background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.22) !important; color: var(--text-2) !important;
}
html[data-theme="dark"] .drop-zone:hover,
html[data-theme="dark"] .lmd-drop:hover { border-color: rgba(255,255,255,0.5) !important; background: rgba(255,255,255,0.07) !important; }
html[data-theme="dark"] .terminal-body,
html[data-theme="dark"] .lmd-logs { background: rgba(3,10,20,0.55) !important; border: 1px solid var(--g-line); }
html[data-theme="dark"] .lmd-bar,
html[data-theme="dark"] .jd-prog-bar,
html[data-theme="dark"] .egb-fill { background-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .lmd-bar > div { background: #ffffff; }
html[data-theme="dark"] .lmd-step span.n,
html[data-theme="dark"] .step-num-circle,
html[data-theme="dark"] .step-circle { background: #ffffff !important; color: #0b1f33 !important; }
html[data-theme="dark"] .lmd-proj-ico { background: var(--g-glass-2); border-color: var(--g-line-2); }
html[data-theme="dark"] .lmd-kv b { color: #fff; }
html[data-theme="dark"] code { color: #e6f4fb; }
html[data-theme="dark"] a { color: #bfe6f7; }
html[data-theme="dark"] .sidebar a, html[data-theme="dark"] .sidebar-item, html[data-theme="dark"] .sidebar-link { color: rgba(255,255,255,0.86); }

/* Lambda screen: Upload / History switch */
html[data-theme="dark"] .lmd-views { background: var(--g-glass) !important; border-color: var(--g-line) !important; backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); }
html[data-theme="dark"] .lmd-view { color: rgba(255,255,255,0.72); }
html[data-theme="dark"] .lmd-view:hover { background: rgba(255,255,255,0.06); color: #fff; }
html[data-theme="dark"] .lmd-view.on { background: #ffffff; color: #0b1f33; box-shadow: none; }
html[data-theme="dark"] .lmd-view.on .cnt { background: #0b1f33; color: #fff; border-color: #0b1f33; }