/* Safety Observer Web — Six Themes (2026-11-06).
   Owner order (2026-11-06, after checking all 6 design samples):
   ALL SIX sample themes live in the app as a real switcher, and EACH
   theme must look genuinely different — different icon designs, different
   box/card styles, not just a different background colour.
   ADDITIVE: this file only ADDS the data-so6theme system. It loads AFTER
   css/themes2.css so it wins specificity ties with the old data-design
   themes; js/so6themes.js also clears data-design while a six-theme is
   active. The classic themes.js interfaces and the old design picker
   stay in place but dormant (their UI is replaced by the new picker).
   NEVER themed here, by the standing owner rule: the weather strip
   (#dash-infoline and every .wx-* rule) — the strip keeps its own
   condition colours; only the LIVE badge and the map button (controls
   inside it) use the theme accent. Same for the QR box, editor canvas
   and logo plates. */

/* ---- shared: the switcher + map modal + live badge ---- */
html[data-so6theme] .theme-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  padding: .6rem; min-width: 250px;
}
html[data-so6theme] .theme-pop h4 {
  margin: .1rem .3rem .5rem; font-size: .85rem; color: var(--muted);
}
html[data-so6theme] .theme-pop button {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  background: none; border: 1px solid transparent; border-radius: 10px;
  padding: .45rem .5rem; cursor: pointer; font: inherit; color: var(--ink);
  text-align: left;
}
html[data-so6theme] .theme-pop button:hover { background: rgba(128, 128, 128, .12); }
html[data-so6theme] .theme-pop button[aria-checked="true"] {
  border-color: var(--green); background: rgba(128, 128, 128, .08);
}
html[data-so6theme] .theme-pop .tp-sw {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, .18);
}
html[data-so6theme] .theme-pop .tp-name { font-weight: 700; font-size: .9rem; }
html[data-so6theme] .theme-pop .tp-look { display: block; font-size: .78rem; color: var(--muted); }
.topbar-right { position: relative; }

/* Theme picker cards in Settings → Appearance → Theme. */
.so6-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
@media (max-width: 600px) { .so6-grid { grid-template-columns: 1fr; } }
.so6-card {
  display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  border: 2px solid var(--line); border-radius: 14px; padding: .7rem .8rem;
  background: var(--card);
}
.so6-card:hover { border-color: var(--green); }
.so6-card:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 2px rgba(14, 116, 144, .25); }
.so6-card input { margin-top: .2rem; }
.so6-card .so6-sw { display: flex; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; border: 1px solid rgba(0, 0, 0, .15); }
.so6-card .so6-sw i { flex: 1; display: block; }
.so6-card b { display: block; font-size: .95rem; }
.so6-card span { font-size: .82rem; color: var(--muted); line-height: 1.35; }

/* ---- weather LIVE badge + site map button (controls in the strip) ---- */
.wx-live-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  color: #fff; background: #16a34a; border-radius: 999px; padding: .15rem .55rem;
  white-space: nowrap;
}
.wx-live-badge .wx-live-dot { animation: wx-live-pulse 1.6s ease-in-out infinite; }
@keyframes wx-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.wx-live-badge.wx-live-site { background: #0e7490; }
.wx-site-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-weight: 700; color: inherit; cursor: pointer;
  background: rgba(14, 116, 144, .10); border: 1px solid rgba(14, 116, 144, .35);
  border-radius: 999px; padding: .15rem .55rem;
}
.wx-site-btn:hover { background: rgba(14, 116, 144, .20); }
.wx-site-btn .wx-icon { width: 18px; height: 18px; }
.wx-map-hint { font-size: .72rem; font-weight: 800; letter-spacing: .05em; opacity: .75; }

/* ---- site map modal ---- */
.so6-modal {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 20, 16, .55); padding: 1rem;
}
.so6-modal[hidden] { display: none; }
.so6-modal-card {
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  width: min(680px, 96vw); max-height: 92vh; overflow: auto; padding: 1rem 1.2rem 1.2rem;
}
.so6-modal-card h3 { margin-bottom: .2rem; }
.so6-modal-card .so6-map-sub { color: var(--muted); font-size: .9rem; margin-bottom: .7rem; }
.so6-coords {
  font-size: 1.05rem; font-weight: 800; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; margin-bottom: .7rem;
}
.so6-coords small { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-top: .15rem; }
.so6-map-frame { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.so6-map-frame iframe { display: block; width: 100%; height: 380px; border: 0; }
.so6-modal-actions { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.so6-modal-note { color: var(--muted); font-size: .88rem; margin-top: .6rem; }

/* ---- per-theme variables + painting ---- */
/* 1 — Ocean Professional (DEFAULT): navy/teal, classic. Icons: OUTLINE. */
html[data-so6theme="ocean"] {
  --bg: #eef4f8; --card: #ffffff; --ink: #122f3d; --muted: #5b7280; --line: #d7e3ea;
  --green: #0e7490; --green-deep: #0b3d66; --orange: #0891b2;
  --so6-header: #0b3d66; --so6-accent: #0e7490; --so6-accent2: #0891b2;
  --so6-soft: #e0f2f7; --so6-calbg: #f1f6f9;
  --so6-radius: 16px; --so6-tab-radius: 10px;
  --so6-shadow: 0 3px 12px rgba(11, 61, 102, .08);
  --so6-g1: #0e7490; --so6-g2: #0891b2;
}
html[data-so6theme="ocean"] .topbar {
  background: linear-gradient(120deg, #0b3d66 0%, #0e7490 70%);
}

/* 2 — Emerald Safety: deep green. Icons: FILLED. Boxes: square-ish
   chips + a 4px accent bar on cards. */
html[data-so6theme="emerald"] {
  --bg: #edf7f0; --card: #ffffff; --ink: #123524; --muted: #557263; --line: #cfe6d8;
  --green: #059669; --green-deep: #065f46; --orange: #16a34a;
  --so6-header: #065f46; --so6-accent: #059669; --so6-accent2: #16a34a;
  --so6-soft: #dcfce7; --so6-calbg: #f0faf3;
  --so6-radius: 12px; --so6-tab-radius: 10px;
  --so6-shadow: 0 2px 8px rgba(6, 95, 70, .10);
  --so6-g1: #059669; --so6-g2: #16a34a;
}
html[data-so6theme="emerald"] .topbar {
  background: linear-gradient(120deg, #065f46 0%, #059669 70%);
}
html[data-so6theme="emerald"] .card, html[data-so6theme="emerald"] .panel {
  border-left: 4px solid var(--so6-accent);
}

/* 3 — Sunset Coral: coral→pink gradient hero header. Icons: DUOTONE.
   Boxes: big soft rounds + warm glow shadow. */
html[data-so6theme="sunset"] {
  --bg: #fdf3ec; --card: #ffffff; --ink: #3d2318; --muted: #8a6a58; --line: #f3d9c8;
  --green: #ea580c; --green-deep: #c2410c; --orange: #db2777;
  --so6-header: #c2410c; --so6-accent: #ea580c; --so6-accent2: #db2777;
  --so6-soft: #ffedd5; --so6-calbg: #fdf6ef;
  --so6-radius: 20px; --so6-tab-radius: 999px;
  --so6-shadow: 0 8px 22px rgba(234, 88, 12, .16);
  --so6-g1: #ea580c; --so6-g2: #db2777;
}
html[data-so6theme="sunset"] .topbar {
  background: linear-gradient(120deg, #c2410c 0%, #ea580c 55%, #db2777 100%);
}

/* 4 — Royal Indigo: indigo→violet gradient header. Icons: GRADIENT.
   Boxes: biggest rounds + violet glow shadow. */
html[data-so6theme="royal"] {
  --bg: #f1f0fb; --card: #ffffff; --ink: #1e1b3a; --muted: #6b6a85; --line: #ddd9f2;
  --green: #6d28d9; --green-deep: #3730a3; --orange: #4f46e5;
  --so6-header: #3730a3; --so6-accent: #6d28d9; --so6-accent2: #4f46e5;
  --so6-soft: #ede9fe; --so6-calbg: #f5f4fc;
  --so6-radius: 24px; --so6-tab-radius: 14px;
  --so6-shadow: 0 10px 28px rgba(109, 40, 217, .18);
  --so6-g1: #6d28d9; --so6-g2: #4f46e5;
}
html[data-so6theme="royal"] .topbar {
  background: linear-gradient(120deg, #3730a3 0%, #6d28d9 55%, #4f46e5 100%);
}

/* 5 — Midnight Dark: full dark. Icons: NEON GLOW. Boxes: glow ring. */
html[data-so6theme="midnight"] {
  --bg: #0f172a; --card: #1e293b; --ink: #e2e8f0; --muted: #94a3b8; --line: #334155;
  --green: #38bdf8; --green-deep: #7dd3fc; --orange: #818cf8;
  --so6-header: #0b1220; --so6-accent: #38bdf8; --so6-accent2: #818cf8;
  --so6-soft: #0c2b3d; --so6-calbg: #16233a;
  --so6-radius: 14px; --so6-tab-radius: 10px;
  --so6-shadow: 0 0 0 1px rgba(56, 189, 248, .22), 0 8px 24px rgba(0, 0, 0, .55);
  --so6-g1: #38bdf8; --so6-g2: #818cf8;
}
html[data-so6theme="midnight"] .topbar { background: #0b1220; }
html[data-so6theme="midnight"] .tabs { background: #16233a; }
html[data-so6theme="midnight"] .slogan { color: #7dd3fc; }
html[data-so6theme="midnight"] .tab.active { color: #06281a; }

/* 6 — Desert Gold: sand + gold. Icons: BADGE (glyph on a coloured tile).
   Boxes: square-ish, heavier 2px border. */
html[data-so6theme="desert"] {
  --bg: #faf3e3; --card: #fffdf6; --ink: #3a2c14; --muted: #8a7a5c; --line: #e8dcc0;
  --green: #0f766e; --green-deep: #8a5a1d; --orange: #b45309;
  --so6-header: #8a5a1d; --so6-accent: #0f766e; --so6-accent2: #b45309;
  --so6-soft: #fef3c7; --so6-calbg: #f7efdb;
  --so6-radius: 8px; --so6-tab-radius: 6px;
  --so6-shadow: 0 2px 6px rgba(138, 90, 29, .14);
  --so6-g1: #0f766e; --so6-g2: #b45309;
}
html[data-so6theme="desert"] .topbar { background: #8a5a1d; }

/* ---- shared box geometry: every theme paints the same surfaces
   with its own radius / shadow / border ---- */
html[data-so6theme] .card, html[data-so6theme] .panel {
  border-radius: var(--so6-radius);
  box-shadow: var(--so6-shadow);
}
html[data-so6theme] .tile {
  border-radius: var(--so6-radius);
  box-shadow: var(--so6-shadow);
}
html[data-so6theme] .tabs .tab { border-radius: var(--so6-tab-radius); }
html[data-so6theme] .tabs { background: var(--so6-calbg); }
html[data-so6theme] .folder-tile { border-radius: var(--so6-radius); }
html[data-so6theme] .infoline { border-radius: var(--so6-radius); }

/* ---- per-theme ICON styles ----
   The tab + tile icons are ONE svg each (see index.html): closed shapes
   carry class so6-c, open strokes class so6-o, knockout details so6-w,
   and detail shapes that sit ON TOP of a base shape (robot eyes, camera
   lens) class so6-d. Each svg carries its tab's own colour as
   style="--ic:#..." — the variable travels with the svg when the
   dashboard tiles copy the tab icons (renderTiles copies innerHTML),
   so tiles keep the tab colours too.
   Each theme renders those same paths in a genuinely different style —
   not a recolour: outline / filled / duotone / gradient / neon / badge. */
html[data-so6theme] .ticon svg { color: var(--ic, currentColor); }

/* Ocean — OUTLINE: every path a 2px stroke, no fill. */
html[data-so6theme="ocean"] .ticon svg .so6-c,
html[data-so6theme="ocean"] .ticon svg .so6-d,
html[data-so6theme="ocean"] .ticon svg .so6-o {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
html[data-so6theme="ocean"] .ticon svg .so6-w {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Emerald — FILLED: solid shapes, stroked lines. The fill is a TINT
   (55% tab colour + 45% white, with a plain-colour fallback line
   first) so the full-colour details on top of a shape — clock hands,
   calculator keys, robot eyes — stay visible instead of vanishing
   into a same-colour fill. */
html[data-so6theme="emerald"] .ticon svg .so6-c {
  fill: currentColor;
  fill: color-mix(in srgb, currentColor 55%, white);
  stroke: none;
}
html[data-so6theme="emerald"] .ticon svg .so6-d { fill: currentColor; stroke: none; }
html[data-so6theme="emerald"] .ticon svg .so6-o {
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
html[data-so6theme="emerald"] .ticon svg .so6-w { fill: #fff; stroke: none; }

/* Sunset — DUOTONE: shapes at 25% fill + full stroke, lines stroked. */
html[data-so6theme="sunset"] .ticon svg .so6-c,
html[data-so6theme="sunset"] .ticon svg .so6-d {
  fill: currentColor; fill-opacity: .25; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
html[data-so6theme="sunset"] .ticon svg .so6-o {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
html[data-so6theme="sunset"] .ticon svg .so6-w { fill: #fff; stroke: none; }

/* Royal — GRADIENT: shapes + lines filled/stroked with the theme
   gradient (#so6grad, stops bound to --so6-g1/--so6-g2). Open strokes
   use the tab colour (not the gradient — a gradient stroke on a
   gradient shape is invisible), and detail shapes are white so the
   robot eyes and camera lens read on the gradient. */
html[data-so6theme="royal"] .ticon svg .so6-c { fill: url(#so6grad); stroke: none; }
html[data-so6theme="royal"] .ticon svg .so6-d { fill: #fff; stroke: none; }
html[data-so6theme="royal"] .ticon svg .so6-o {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
html[data-so6theme="royal"] .ticon svg .so6-w { fill: #fff; stroke: none; }

/* Midnight — NEON GLOW: outline shapes with a coloured glow. */
html[data-so6theme="midnight"] .ticon svg {
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 9px currentColor);
}
html[data-so6theme="midnight"] .ticon svg .so6-c,
html[data-so6theme="midnight"] .ticon svg .so6-d,
html[data-so6theme="midnight"] .ticon svg .so6-o {
  fill: none; stroke: currentColor; stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}
html[data-so6theme="midnight"] .ticon svg .so6-w { fill: #fff; stroke: none; }
/* The strip keeps its own condition colours, but its TEXT inherits
   --green-deep, which is light in this dark theme — unreadable on the
   strip's light condition backgrounds. Dark ink there (night/storm
   keep light text on their dark backgrounds). Readability fix only;
   the strip's backgrounds are untouched. */
html[data-so6theme="midnight"] #dash-infoline { color: #122f3d; }
html[data-so6theme="midnight"] #dash-infoline.wx-theme-night,
html[data-so6theme="midnight"] #dash-infoline.wx-theme-storm { color: #e2e8f0; }

/* Desert — BADGE: the glyph sits white on a tile of the tab's own
   colour (var(--ic) travels with the svg, so tiles match the tabs).
   Detail shapes take the tab colour so they read on the white glyph. */
html[data-so6theme="desert"] .ticon svg {
  background: var(--ic, #8a5a1d); color: #fff;
  border-radius: 12px; padding: 4px; box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(58, 44, 20, .35);
}
html[data-so6theme="desert"] .tile .ticon svg { border-radius: 16px; padding: 8px; }
html[data-so6theme="desert"] .ticon svg .so6-c {
  fill: rgba(255, 255, 255, .35); stroke: #fff; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
html[data-so6theme="desert"] .ticon svg .so6-d { fill: var(--ic, #8a5a1d); stroke: none; }
html[data-so6theme="desert"] .ticon svg .so6-o {
  fill: none; stroke: #fff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Active tab: its pill is a strong theme colour, so the icon inside
   must be white in EVERY theme — the theme's own fill (e.g. Royal's
   purple gradient) blends into its own pill and the glyph goes faint.
   Detail accents (.so6-d) keep their colours. */
html[data-so6theme] #tabs .tab.active .ticon svg .so6-c,
html[data-so6theme] #tabs .tab.active .ticon svg .so6-o {
  fill: #fff;
  stroke: #fff;
}

/* ---- safety slogan: SAME place (dashboard top, under the weather
   strip), ATTRACTIVE banner — owner's slogan must catch the eye.
   A centred gradient pill in the theme's own accent pair, white
   text, shield mark. The gradient carries a darkening overlay so
   the white text stays readable on every theme's accents; Midnight
   gets darker stops outright (its accents are light). The text
   itself still rotates daily (js/slogan.js) — only the styling
   changes, never the words or the place. */
html[data-so6theme] .slogan {
  display: block;
  width: fit-content; max-width: min(880px, 94%);
  margin: .55rem auto .15rem;
  padding: .55rem 1.25rem;
  font-style: normal; font-weight: 800; font-size: 1.05rem;
  letter-spacing: .01em; line-height: 1.35; text-align: center;
  color: #fff;
  background:
    linear-gradient(rgba(0, 0, 0, .20), rgba(0, 0, 0, .20)),
    linear-gradient(120deg, var(--so6-g1), var(--so6-g2));
  border-radius: 999px;
  box-shadow: var(--so6-shadow);
}
html[data-so6theme] .slogan::before { content: "🛡  "; }
html[data-so6theme] .slogan:empty { display: none; }
html[data-so6theme="midnight"] .slogan {
  background:
    linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)),
    linear-gradient(120deg, #0369a1, #4338ca);
}