/* =============================================
   Viewella shared theme system — dark/light
   ============================================= */

/* --- CSS vars: dark (default) --- */
:root {
  --bg:          #070710;
  --surface-1:   #0e0e1c;
  --surface-2:   rgba(19,19,33,.5);
  --surface-3:   #1a1a2e;
  --border:      rgba(110,90,220,.18);
  --border-hi:   rgba(140,120,255,.32);
  --accent:      #7c6bff;
  --accent-lt:   #a89aff;
  --accent-glow: rgba(124,107,255,.18);
  --accent-dim:  rgba(124,107,255,.1);
  --text-1:      #eeeef8;
  --text-2:      #9090b8;
  --text-3:      #50507a;
  --success:     #4ade80;
  --danger:      #f87171;
}

/* --- CSS vars: light overrides --- */
[data-theme="light"] {
  --bg:          #f4f4f8;
  --surface-1:   #ffffff;
  --surface-2:   rgba(240,240,250,.8);
  --surface-3:   #ededf5;
  --border:      rgba(110,90,220,.15);
  --border-hi:   rgba(110,90,220,.4);
  --accent:      #6b5aed;
  --accent-lt:   #5040cc;
  --accent-glow: rgba(107,90,237,.12);
  --accent-dim:  rgba(107,90,237,.07);
  --text-1:      #1a1a2e;
  --text-2:      #4a4a6a;
  --text-3:      #8888aa;
  --success:     #16a34a;
  --danger:      #dc2626;
}

/* --- Theme toggle button --- */
.btn-theme {
  background: none;
  border: 1px solid var(--border, rgba(110,90,220,.18));
  color: var(--text-2, #9090b8);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: border-color .15s, color .15s;
  vertical-align: middle;
}
.btn-theme:hover {
  border-color: var(--border-hi, rgba(140,120,255,.32));
  color: var(--text-1, #eeeef8);
}
.btn-theme svg { width: 15px; height: 15px; pointer-events: none; }

/* --- Logo image (shared) --- */
.logo img, .logo-img {
  height: 28px;
  display: block;
  transition: filter .2s;
}

/* =============================================
   Light mode: global overrides (use !important
   to win over hardcoded dark-page CSS)
   ============================================= */

/* Body */
[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--text-1) !important;
}

/* Header / navbar */
[data-theme="light"] header {
  background: rgba(244,244,248,.97) !important;
  border-bottom-color: var(--border) !important;
}
[data-theme="light"] header a,
[data-theme="light"] header .back-link,
[data-theme="light"] header .nav-link {
  color: var(--text-2) !important;
}
[data-theme="light"] header a:hover,
[data-theme="light"] header .back-link:hover {
  color: var(--accent) !important;
}
[data-theme="light"] header nav a {
  color: var(--text-2) !important;
}

/* Logo: white image → dark in light mode */
[data-theme="light"] .logo img,
[data-theme="light"] .logo-img {
  filter: brightness(0) opacity(.8);
}

/* Common card / panel class patterns */
[data-theme="light"] .card,
[data-theme="light"] .card-inner,
[data-theme="light"] .card-body,
[data-theme="light"] .section-card,
[data-theme="light"] .content-card,
[data-theme="light"] .account-card,
[data-theme="light"] .settings-card,
[data-theme="light"] .settings-section,
[data-theme="light"] .settings-group,
[data-theme="light"] .device-card,
[data-theme="light"] .stat-box,
[data-theme="light"] .stat-card,
[data-theme="light"] .info-box,
[data-theme="light"] .report-card,
[data-theme="light"] .report-item,
[data-theme="light"] .log-container,
[data-theme="light"] .log-entry,
[data-theme="light"] .table-container,
[data-theme="light"] .table-wrapper,
[data-theme="light"] .overlay-card,
[data-theme="light"] .modal,
[data-theme="light"] .modal-body,
[data-theme="light"] .panel,
[data-theme="light"] .box,
[data-theme="light"] .inner-box,
[data-theme="light"] .content-box,
[data-theme="light"] .result-box,
[data-theme="light"] .download-card,
[data-theme="light"] .drop-zone,
[data-theme="light"] .upload-area,
[data-theme="light"] .pass-card,
[data-theme="light"] .invite-card,
[data-theme="light"] .status-card,
[data-theme="light"] .server-card,
[data-theme="light"] .step-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .platform-card,
[data-theme="light"] .provider-card,
[data-theme="light"] .action-card {
  background: var(--surface-1) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
}

/* Inputs / selects / textareas */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--surface-1) !important;
  color: var(--text-1) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: var(--text-3) !important;
}

/* Tables */
[data-theme="light"] table { border-color: var(--border) !important; }
[data-theme="light"] th {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] td {
  color: var(--text-1) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] tr:hover td {
  background: var(--surface-2) !important;
}

/* Page titles / headings (common hardcoded #fff) */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: var(--text-1) !important;
}
[data-theme="light"] p,
[data-theme="light"] .sub,
[data-theme="light"] .subtitle,
[data-theme="light"] .desc,
[data-theme="light"] .hint,
[data-theme="light"] .label {
  color: var(--text-2) !important;
}

/* Generic buttons (non-accent, non-theme) */
[data-theme="light"] button:not(.btn-theme):not([class*="btn-primary"]):not([class*="btn-accent"]):not([class*="btn-danger"]) {
  color: var(--text-1) !important;
  border-color: var(--border) !important;
}

/* Accent buttons: keep color, just adjust border */
[data-theme="light"] [class*="btn-primary"],
[data-theme="light"] [class*="btn-accent"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}