/* Safety Observer Web — Design themes (overnight 2026-10-31).
   ADDITIVE: this file only ADDS the data-design theme system. It never
   removes or rewrites the classic themes.js options (emerald/aurora/
   midnight/porcelain/desert + ctheme/bg/icon): the Design picker in
   Settings overrides them while a design is active, because every rule
   here is scoped to html[data-design] and this stylesheet loads AFTER
   css/styles.css (so it wins specificity ties with body[data-*] rules).
   NEVER themed here, by owner rule: the weather strip (#dash-infoline
   and every .wx-* rule), the QR box, the editor canvas, logo plates. */

html[data-design] label input,
html[data-design] label select,
html[data-design] label textarea,
html[data-design] .rev-row select,
html[data-design] .rev-row input {
  background: var(--card);
}
html[data-design] .btn {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}
html[data-design] .btn-google { background: var(--card); }
html[data-design] .modal { background: var(--card); }
html[data-design] .tab:hover { background: rgba(128, 128, 128, .15); }

/* ---- A: Owner's Design (dark, from the approved sample) ---- */
html[data-design="a"],
html[data-design="a"] body {
  --bg: #16181d; --card: #24262c; --ink: #ffffff; --muted: #a9adb6;
  --line: #3a3d45; --green: #f26b21; --green-deep: #c2410c; --orange: #f26b21;
}
html[data-design="a"] .topbar { background: #000000; }
html[data-design="a"] .tabs { background: #24262c; }
html[data-design="a"] .slogan { color: #fcd34d; }
html[data-design="a"] h1,
html[data-design="a"] h2,
html[data-design="a"] h3,
html[data-design="a"] .folder-name { color: #fcd34d; }

/* ---- B: Premium glass / gold (dark navy + gold accents) ---- */
html[data-design="b"],
html[data-design="b"] body {
  --bg: #0f172a; --card: #1e293b; --ink: #f1f5f9; --muted: #94a3b8;
  --line: #334155; --green: #38bdf8; --green-deep: #1e3a8a; --orange: #0e7490;
}
html[data-design="b"] .topbar { background: linear-gradient(135deg, #1e3a8a 0%, #0e7490 100%); }
html[data-design="b"] .tabs { background: #1e293b; }
html[data-design="b"] .slogan { color: #fcd34d; }
html[data-design="b"] h1,
html[data-design="b"] h2,
html[data-design="b"] h3,
html[data-design="b"] .folder-name { color: #e2e8f0; }
html[data-design="b"] .tab.active { background: #0e7490; color: #fff; }
html[data-design="b"] .tile.active { border-color: #fbbf24; box-shadow: 0 0 0 2px rgba(251, 191, 36, .25); }
html[data-design="b"] .design-card:has(input:checked) { border-color: #fbbf24; box-shadow: 0 0 0 2px rgba(251, 191, 36, .25); }

/* ---- C: Vivid colorful (violet → pink → orange) ---- */
html[data-design="c"],
html[data-design="c"] body {
  --bg: #171321; --card: #221d33; --ink: #ffffff; --muted: #b8b0cc;
  --line: #4c4563; --green: #7c3aed; --green-deep: #5b21b6; --orange: #ea580c;
}
html[data-design="c"] .topbar { background: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #ea580c 100%); }
html[data-design="c"] .tabs { background: #221d33; }
html[data-design="c"] .slogan { color: #f0abfc; }
html[data-design="c"] h1,
html[data-design="c"] h2,
html[data-design="c"] h3,
html[data-design="c"] .folder-name { color: #ede9fe; }

/* ---- D: Light clean ---- */
html[data-design="d"],
html[data-design="d"] body {
  --bg: #f1f5f9; --card: #ffffff; --ink: #0f172a; --muted: #64748b;
  --line: #e2e8f0; --green: #ea580c; --green-deep: #c2410c; --orange: #f26b21;
}
html[data-design="d"] .topbar { background: #ffffff; }
html[data-design="d"] .tabs { background: #ffffff; }
html[data-design="d"] .slogan { color: #9a3412; }
html[data-design="d"] .hdr-identity { color: #0f172a; background: rgba(15, 23, 42, .06); border-color: rgba(15, 23, 42, .15); }
html[data-design="d"] .hdr-identity:hover { background: rgba(15, 23, 42, .10); }
html[data-design="d"] .hdr-designation { color: #475569; }
html[data-design="d"] .hdr-company-name { color: #64748b; }
html[data-design="d"] .hdr-email { color: rgba(15, 23, 42, .6); }
html[data-design="d"] .proj-picker { color: #334155; }

/* ---- E: Warm sunset ---- */
html[data-design="e"],
html[data-design="e"] body {
  --bg: #1c1410; --card: #2a1a12; --ink: #fdf6ec; --muted: #d6c4b2;
  --line: #4a2f22; --green: #fb923c; --green-deep: #7c2d12; --orange: #ea580c;
}
html[data-design="e"] .topbar { background: linear-gradient(135deg, #7c2d12 0%, #c2410c 55%, #ea580c 100%); }
html[data-design="e"] .tabs { background: #2a1a12; }
html[data-design="e"] .slogan { color: #fdba74; }
html[data-design="e"] h1,
html[data-design="e"] h2,
html[data-design="e"] h3,
html[data-design="e"] .folder-name { color: #fdba74; }
html[data-design="e"] .tab.active { background: #c2410c; color: #fff; }

/* ---- Outclass Grey ---- */
html[data-design="grey"],
html[data-design="grey"] body {
  --bg: #e5e7eb; --card: #ffffff; --ink: #1f2937; --muted: #6b7280;
  --line: #d1d5db; --green: #4b5563; --green-deep: #374151; --orange: #4b5563;
}
html[data-design="grey"] .topbar { background: linear-gradient(120deg, #374151 0%, #4b5563 100%); }
html[data-design="grey"] .tabs { background: #ffffff; }
html[data-design="grey"] .slogan { color: #4b5563; }

/* ---- Royal Blue ---- */
html[data-design="blue"],
html[data-design="blue"] body {
  --bg: #eff6ff; --card: #ffffff; --ink: #172554; --muted: #475569;
  --line: #bfdbfe; --green: #1d4ed8; --green-deep: #1e3a8a; --orange: #2563eb;
}
html[data-design="blue"] .topbar { background: linear-gradient(120deg, #1e3a8a 0%, #1d4ed8 100%); }
html[data-design="blue"] .tabs { background: #ffffff; }
html[data-design="blue"] .slogan { color: #1e40af; }

/* ---- Emerald Green ---- */
html[data-design="green"],
html[data-design="green"] body {
  --bg: #ecfdf5; --card: #ffffff; --ink: #022c22; --muted: #475569;
  --line: #a7f3d0; --green: #047857; --green-deep: #065f46; --orange: #059669;
}
html[data-design="green"] .topbar { background: linear-gradient(120deg, #065f46 0%, #047857 100%); }
html[data-design="green"] .tabs { background: #ffffff; }
html[data-design="green"] .slogan { color: #047857; }

/* ---- Light Brown ---- */
html[data-design="brown"],
html[data-design="brown"] body {
  --bg: #fdf8f3; --card: #ffffff; --ink: #292524; --muted: #78716c;
  --line: #e7d5c4; --green: #92400e; --green-deep: #78350f; --orange: #b45309;
}
html[data-design="brown"] .topbar { background: linear-gradient(120deg, #78350f 0%, #92400e 100%); }
html[data-design="brown"] .tabs { background: #ffffff; }
html[data-design="brown"] .slogan { color: #92400e; }

/* ---- Light Purple ---- */
html[data-design="purple"],
html[data-design="purple"] body {
  --bg: #faf5ff; --card: #ffffff; --ink: #3b0764; --muted: #6b7280;
  --line: #e9d5ff; --green: #7c3aed; --green-deep: #6d28d9; --orange: #9333ea;
}
html[data-design="purple"] .topbar { background: linear-gradient(120deg, #6d28d9 0%, #7c3aed 100%); }
html[data-design="purple"] .tabs { background: #ffffff; }
html[data-design="purple"] .slogan { color: #7e22ce; }