/* ============================================================
   ETRE-EMMA v7.0 — themes.css
   Dark (default) + Light theme overrides
   Dark theme tokens are set in :root inside style.css
   ============================================================ */

/* ── LIGHT THEME ─────────────────────────────────────────────
   Sidebar stays dark for contrast — only content area flips.
   ─────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Backgrounds */
  --bg-app:      #f1f5f9;
  --bg-sidebar:  #0f1923;   /* stays dark */
  --bg-primary:  #ffffff;
  --bg-secondary:#f8fafc;
  --bg-elevated: #f1f5f9;

  /* Borders */
  --brd:         rgba(0,0,0,0.08);
  --brd-strong:  rgba(0,0,0,0.14);

  /* Text */
  --txt:         #0f172a;
  --txt-muted:   #64748b;
  --txt-faint:   #94a3b8;

  /* Accent */
  --ac:          #2563eb;
  --ac-hover:    #1d4ed8;
  --ac-subtle:   rgba(37,99,235,0.08);
  --ac-ring:     rgba(37,99,235,0.2);

  /* Semantic (slightly adjusted for light bg) */
  --green:       #16a34a;
  --green-bg:    rgba(22,163,74,0.1);
  --green-brd:   rgba(22,163,74,0.25);
  --amber:       #d97706;
  --amber-bg:    rgba(217,119,6,0.1);
  --amber-brd:   rgba(217,119,6,0.25);
  --red:         #dc2626;
  --red-bg:      rgba(220,38,38,0.08);
  --red-brd:     rgba(220,38,38,0.2);
  --purple:      #7c3aed;
  --purple-bg:   rgba(124,58,237,0.08);
}

/* ── LIGHT: Sidebar stays dark, text inside stays light ─────── */
[data-theme="light"] .sidebar {
  background: var(--bg-sidebar);
  border-right-color: rgba(255,255,255,0.07);
}
[data-theme="light"] .sidebar .nav-item,
[data-theme="light"] .sidebar .sb-title,
[data-theme="light"] .sidebar .sb-ver,
[data-theme="light"] .sidebar .nav-sec,
[data-theme="light"] .sidebar .sb-uname {
  color: #cbd5e1;
}
[data-theme="light"] .sidebar .sb-urole {
  background: rgba(37,99,235,0.2);
  color: #93c5fd;
}
[data-theme="light"] .sidebar .nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
[data-theme="light"] .sidebar .nav-item.active {
  background: rgba(37,99,235,0.2);
  color: #93c5fd;
}
[data-theme="light"] .sidebar .nav-sec {
  color: rgba(255,255,255,0.2);
}
[data-theme="light"] .sidebar .sb-footer {
  border-top-color: rgba(255,255,255,0.07);
}
[data-theme="light"] .sidebar .sb-brand {
  border-bottom-color: rgba(255,255,255,0.07);
}
[data-theme="light"] .sidebar .sb-user {
  border-bottom-color: rgba(255,255,255,0.07);
}
[data-theme="light"] .sidebar .sb-user:hover {
  background: rgba(255,255,255,0.04);
}
[data-theme="light"] .sidebar .txt-muted,
[data-theme="light"] .sidebar .notif-bell {
  color: rgba(255,255,255,0.35);
}
[data-theme="light"] .sb-overlay {
  background: rgba(0,0,0,0.5);
}

/* ── LIGHT: Topbar ──────────────────────────────────────────── */
[data-theme="light"] .topbar {
  background: #ffffff;
  border-bottom-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* ── LIGHT: Login page ──────────────────────────────────────── */
[data-theme="light"] #login-page {
  background: #e8eef7;
}
[data-theme="light"] .login-bg-grid {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(37,99,235,0.04) 81px),
    repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(37,99,235,0.04) 81px);
}
[data-theme="light"] .login-bg-grid::after {
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(37,99,235,0.06), transparent);
}
[data-theme="light"] .login-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 40px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.05);
}
[data-theme="light"] .login-brand h1,
[data-theme="light"] .brand-title {
  color: #0f172a;
}

/* ── LIGHT: Forms & inputs ──────────────────────────────────── */
[data-theme="light"] .inp {
  background: #f8fafc;
  border-color: rgba(0,0,0,0.14);
  color: #0f172a;
}
[data-theme="light"] .inp:focus {
  border-color: var(--ac);
  background: #ffffff;
}
[data-theme="light"] .inp::placeholder { color: #94a3b8; }
[data-theme="light"] .inp option { background: #ffffff; color: #0f172a; }

/* ── LIGHT: Buttons ─────────────────────────────────────────── */
[data-theme="light"] .btn-ghost {
  color: #475569;
  border-color: rgba(0,0,0,0.14);
}
[data-theme="light"] .btn-ghost:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* ── LIGHT: Cards ───────────────────────────────────────────── */
[data-theme="light"] .card     { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
[data-theme="light"] .stat-card{ box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

/* ── LIGHT: Table ───────────────────────────────────────────── */
[data-theme="light"] .tbl tbody tr:hover td {
  background: rgba(37,99,235,0.03);
}
[data-theme="light"] .tbl td {
  border-bottom-color: rgba(0,0,0,0.05);
}

/* ── LIGHT: Scrollbar ───────────────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* ── LIGHT: Chips ───────────────────────────────────────────── */
[data-theme="light"] .chip-blue   { background: rgba(37,99,235,0.1);  color: #1d4ed8; }
[data-theme="light"] .chip-green  { background: rgba(22,163,74,0.1);  color: #15803d; }
[data-theme="light"] .chip-amber  { background: rgba(217,119,6,0.1);  color: #b45309; }
[data-theme="light"] .chip-red    { background: rgba(220,38,38,0.1);  color: #b91c1c; }
[data-theme="light"] .chip-grey   { background: rgba(100,116,139,0.1);color: #475569; }
[data-theme="light"] .chip-purple { background: rgba(124,58,237,0.1); color: #6d28d9; }

/* ── LIGHT: Checklist items ─────────────────────────────────── */
[data-theme="light"] .cl-item { background: #ffffff; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .cl-item:hover { border-color: rgba(0,0,0,0.2); }
[data-theme="light"] .sbtn { background: #f1f5f9; border-color: rgba(0,0,0,0.14); color: #475569; }
[data-theme="light"] .sbtn:hover { border-color: var(--ac); color: #0f172a; }

/* ── LIGHT: Parts, emergency, device cards ──────────────────── */
[data-theme="light"] .part-card      { background: #ffffff; }
[data-theme="light"] .emrg-card      { background: #fff8f8; }
[data-theme="light"] .online-card    { background: #f8fafc; }
[data-theme="light"] .device-card    { background: #f8fafc; }
[data-theme="light"] .cl-mgr-item    { background: #f8fafc; }
[data-theme="light"] .gen-status-section { background: #f8fafc; }

/* ── LIGHT: Notification & issue rows ──────────────────────── */
[data-theme="light"] .notif-item      { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .notif-item.unread { background: rgba(37,99,235,0.04); }
[data-theme="light"] .issue-row       { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .log-row         { border-bottom-color: rgba(0,0,0,0.07); }

/* ── LIGHT: Modals ──────────────────────────────────────────── */
[data-theme="light"] .overlay { background: rgba(15,23,42,0.6); }
[data-theme="light"] .modal   { background: #ffffff; border-color: rgba(0,0,0,0.1); }

/* ── LIGHT: Toast ───────────────────────────────────────────── */
[data-theme="light"] #toast {
  background: #ffffff;
  border-color: var(--green);
  color: #0f172a;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* ── LIGHT: Page loader ─────────────────────────────────────── */
[data-theme="light"] #page-loader { background: #f1f5f9; }
[data-theme="light"] #page-loader p { color: #64748b; }

/* ── LIGHT: Theme buttons ───────────────────────────────────── */
[data-theme="light"] .theme-toggle-btn {
  background: #f8fafc;
  border-color: rgba(0,0,0,0.14);
  color: #0f172a;
}
[data-theme="light"] .theme-toggle-btn.active {
  border-color: var(--ac);
  background: rgba(37,99,235,0.08);
  color: var(--ac);
}

/* ── LIGHT: Rep items ───────────────────────────────────────── */
[data-theme="light"] .rep-item { background: #f8fafc; }
[data-theme="light"] .pill     { background: #f1f5f9; }