/* QuickCloud themes — single source of truth for panel + admin colours.
 *
 * A theme is a set of CSS variables on <html data-theme="...">. Pages link this
 * file BEFORE their inline <style>, so component rules consume the variables.
 *
 *   default      — the original dark panel (ships as the global default)
 *   cloud-light  — premium light "Cloud" theme
 *   cloud-dark   — the Cloud theme's dark mode
 *   dash-dark    — "Dashboard" theme: modern control-panel look (dark)
 *   dash-light   — the Dashboard theme's light mode
 *
 * The admin picks the global default (Admin → Settings → Appearance, stored in
 * the `panel_theme` setting, served by GET /api/theme). Customers may override
 * per browser via the header picker (localStorage `qc_theme_override`).
 */

:root, [data-theme="default"] {
  color-scheme: dark;
  --bg:#0f1419; --panel:#1a2230; --line:#2a3547; --ink:#e6edf3; --muted:#8b98a9;
  --accent:#3b82f6; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --prov:#a78bfa;
  --field:#0d1117;                 /* inputs / sunken surfaces */
  --v4:#7dd3fc; --v6:#c4b5fd;      /* address tints */
  --ok-ink:#bbf7d0; --warn-ink:#fcd34d; --err-ink:#fecaca; --prov-ink:#ddd6fe;
  --info:#38bdf8; --info-ink:#bae6fd;
  --shadow:none;
  --canvas-grid:#1c2433;           /* visual canvas dot grid */
}

/* Premium light "Cloud" theme */
[data-theme="cloud-light"] {
  color-scheme: light;
  --bg:#f2f5fa; --panel:#ffffff; --line:#e2e8f2; --ink:#10203a; --muted:#5d6f88;
  --accent:#2563eb; --ok:#16a34a; --warn:#d97706; --err:#dc2626; --prov:#7c3aed;
  --field:#f6f8fc;
  --v4:#0369a1; --v6:#6d28d9;
  --ok-ink:#166534; --warn-ink:#92400e; --err-ink:#b91c1c; --prov-ink:#5b21b6;
  --info:#0284c7; --info-ink:#075985;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.07);
  --canvas-grid:#dde4ef;
}

/* The Cloud theme's dark mode — richer than the original default */
[data-theme="cloud-dark"] {
  color-scheme: dark;
  --bg:#0a0f1e; --panel:#111a30; --line:#233252; --ink:#e8eefc; --muted:#8da0c0;
  --accent:#4f8df9; --ok:#2dd673; --warn:#f5a623; --err:#f25c5c; --prov:#a78bfa;
  --field:#0b1326;
  --v4:#7dd3fc; --v6:#c4b5fd;
  --ok-ink:#a7f3c8; --warn-ink:#fcd34d; --err-ink:#fecaca; --prov-ink:#ddd6fe;
  --info:#38bdf8; --info-ink:#bae6fd;
  --shadow:0 10px 30px rgba(2,6,18,.45);
  --canvas-grid:#1a2440;
}

/* Cloud-theme polish (both modes): soft card shadows + gradient backdrop. */
html[data-theme="cloud-light"] body { background:linear-gradient(180deg,#edf1f8 0%,#f4f7fb 60%,#f2f5fa 100%) fixed; }
html[data-theme="cloud-dark"]  body { background:radial-gradient(1200px 500px at 70% -10%, #14204a 0%, #0a0f1e 55%) fixed; }
[data-theme="cloud-light"] .card, [data-theme="cloud-dark"] .card,
[data-theme="cloud-light"] .modal, [data-theme="cloud-dark"] .modal { box-shadow:var(--shadow); }
[data-theme="cloud-light"] header, [data-theme="cloud-dark"] header { background:var(--panel); box-shadow:var(--shadow); }
[data-theme="cloud-light"] .modal-bg { background:rgba(23,32,52,.45); }
[data-theme="cloud-light"] .sidenav a.active, [data-theme="cloud-dark"] .sidenav a.active { box-shadow:var(--shadow); }
html[data-theme="cloud-light"] header h1, html[data-theme="cloud-dark"] header h1 {
  background:linear-gradient(90deg, var(--accent) 20%, #7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ==========================================================================
 * "Dashboard" theme (dash-dark / dash-light) — modern control-panel look.
 *
 * PURELY ADDITIVE. Every rule below is scoped to html[data-theme^="dash"],
 * so the default and Cloud themes are untouched. Beyond the palette it
 * reshapes chrome with CSS only:
 *   - side menu becomes an elevated nav rail with a gradient active pill
 *   - cards get depth + larger radii; quota meters become stat tiles
 *   - the Cloud overview VM table renders as a responsive card grid
 *     (the <table>/<tr>/<td> DOM is untouched — filters/buttons all keep
 *     working — it's re-laid-out with CSS grid)
 *   - detail pages (VM / colo device) get a hero header card
 * The optional /dash.js enhancer adds an overview hero strip; without it
 * everything here still works.
 * ========================================================================== */

[data-theme="dash-dark"] {
  color-scheme: dark;
  --bg:#0b0e15; --panel:#121722; --line:#222b3e; --ink:#e8edf6; --muted:#8a96ab;
  --accent:#6366f1; --ok:#2dd673; --warn:#f5a623; --err:#f25c5c; --prov:#a78bfa;
  --field:#0d1119;
  --v4:#7dd3fc; --v6:#c4b5fd;
  --ok-ink:#a7f3c8; --warn-ink:#fcd34d; --err-ink:#fecaca; --prov-ink:#ddd6fe;
  --info:#38bdf8; --info-ink:#bae6fd;
  --shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 30px rgba(2,6,18,.40);
  --canvas-grid:#1a2136;
  --dash-grad:linear-gradient(135deg,#6366f1,#38bdf8);
  --dash-grad-soft:linear-gradient(135deg,rgba(99,102,241,.16),rgba(56,189,248,.05));
  --dash-panel-solid:#121722;
}
[data-theme="dash-light"] {
  color-scheme: light;
  --bg:#f3f5fb; --panel:#ffffff; --line:#e3e8f3; --ink:#131f38; --muted:#5e6e88;
  --accent:#4f46e5; --ok:#16a34a; --warn:#d97706; --err:#dc2626; --prov:#7c3aed;
  --field:#f6f8fd;
  --v4:#0369a1; --v6:#6d28d9;
  --ok-ink:#166534; --warn-ink:#92400e; --err-ink:#b91c1c; --prov-ink:#5b21b6;
  --info:#0284c7; --info-ink:#075985;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.08);
  --canvas-grid:#dde4ef;
  --dash-grad:linear-gradient(135deg,#4f46e5,#0ea5e9);
  --dash-grad-soft:linear-gradient(135deg,rgba(79,70,229,.10),rgba(14,165,233,.04));
  --dash-panel-solid:#ffffff;
}

/* --- backdrop + header ---------------------------------------------------- */
html[data-theme="dash-dark"]  body { background:radial-gradient(1100px 480px at 78% -12%, #181d33 0%, #0b0e15 55%) fixed; }
html[data-theme="dash-light"] body { background:linear-gradient(180deg,#eef1f9 0%,#f4f6fb 70%,#f3f5fb 100%) fixed; }
html[data-theme^="dash"] header { background:var(--dash-panel-solid); box-shadow:var(--shadow); }
html[data-theme^="dash"] header h1 {
  background:var(--dash-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --- wider shell + elevated nav rail -------------------------------------- */
html[data-theme^="dash"] main.shell { max-width:1520px; }
html[data-theme^="dash"] .sidenav {
  width:220px; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:10px; box-shadow:var(--shadow); gap:2px;
}
html[data-theme^="dash"] .sidenav a { border-radius:9px; padding:9px 12px; }
html[data-theme^="dash"] .sidenav a.active { background:var(--dash-grad); color:#fff; box-shadow:var(--shadow); }
html[data-theme^="dash"] .sidenav .ic { opacity:.85; }

/* --- cards, modals, buttons ------------------------------------------------ */
html[data-theme^="dash"] .card { border-radius:14px; box-shadow:var(--shadow); }
html[data-theme^="dash"] .modal { border-radius:16px; box-shadow:var(--shadow); }
html[data-theme="dash-light"] .modal-bg { background:rgba(23,32,52,.45); }
html[data-theme^="dash"] button { background:var(--dash-grad); border-radius:9px; }
html[data-theme^="dash"] button.ghost { background:var(--field); }
html[data-theme^="dash"] button.ghost.danger { background:transparent; }
html[data-theme^="dash"] .card h2 { letter-spacing:.06em; }

/* --- tables: airier, hover highlight (not the VM card grid below) ---------- */
html[data-theme^="dash"] tbody:not(#vmList) tr:hover td { background:rgba(99,102,241,.05); }
html[data-theme^="dash"] .status { font-weight:600; }
html[data-theme^="dash"] .s-running { background:rgba(45,214,115,.10); }
html[data-theme^="dash"] .s-provisioning { background:rgba(167,139,250,.10); }
html[data-theme^="dash"] .s-deleting, html[data-theme^="dash"] .s-error { background:rgba(242,92,92,.10); }

/* --- quota meters become stat tiles ---------------------------------------- */
html[data-theme^="dash"] .quota { gap:12px; }
html[data-theme^="dash"] .quota > div {
  background:var(--field); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-width:0;
}
html[data-theme^="dash"] .quota .bar > span,
html[data-theme^="dash"] .ovbar > span { background:var(--dash-grad); }
html[data-theme^="dash"] .quota .bar.full > span { background:var(--warn); }

/* --- Cloud overview: the VM table renders as a card grid -------------------
 * The DOM stays a real <table>; we re-lay it out with grid. Browsers without
 * :has() simply keep the classic table — graceful fallback. */
html[data-theme^="dash"] table:has(> tbody#vmList) { display:block; }
html[data-theme^="dash"] table:has(> tbody#vmList) > thead,
html[data-theme^="dash"] table:has(> tbody#vmList) > colgroup { display:none; }
html[data-theme^="dash"] tbody#vmList {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px;
}
html[data-theme^="dash"] tbody#vmList > tr {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 10px; align-items:start;
  background:var(--field); border:1px solid var(--line); border-radius:12px; padding:14px 15px 12px;
  white-space:normal;   /* undo the phone breakpoint's table-wide nowrap */
}
html[data-theme^="dash"] tbody#vmList > tr:hover { border-color:var(--accent); }
html[data-theme^="dash"] tbody#vmList > tr > td { display:block; border-bottom:0; padding:0; min-width:0; }
html[data-theme^="dash"] tbody#vmList > tr > td:nth-child(1) { grid-column:1; grid-row:1; }
html[data-theme^="dash"] tbody#vmList > tr > td:nth-child(4) { grid-column:2; grid-row:1; justify-self:end; }
html[data-theme^="dash"] tbody#vmList > tr > td:nth-child(2) { grid-column:1 / -1; grid-row:2; color:var(--muted); font-size:12px; }
html[data-theme^="dash"] tbody#vmList > tr > td:nth-child(3) { grid-column:1 / -1; grid-row:3; }
html[data-theme^="dash"] tbody#vmList > tr > td:nth-child(5) {
  grid-column:1 / -1; grid-row:4; border-top:1px solid var(--line); padding-top:10px; margin-top:4px;
}
html[data-theme^="dash"] tbody#vmList > tr > td.acts { text-align:left; white-space:normal; }
html[data-theme^="dash"] tbody#vmList > tr > td.acts button { margin:2px 6px 2px 0; }
html[data-theme^="dash"] tbody#vmList > tr > td:only-child {
  grid-column:1 / -1; grid-row:auto; color:var(--muted);
}

/* --- widget mosaic: two-column card flow on stacked sections ---------------
 * Dashboard only: a VM detail page reuses data-sec names ("network",
 * "protect") but its .shellbody starts with the header card — the
 * :not(:has(> .card)) guard keeps the mosaic off detail pages. */
@media (min-width:1100px) {
  html[data-theme^="dash"] .shellbody:not(:has(> .card)) > div[data-sec="protect"]:not(.sec-hidden),
  html[data-theme^="dash"] .shellbody:not(:has(> .card)) > div[data-sec="media"]:not(.sec-hidden),
  html[data-theme^="dash"] .shellbody:not(:has(> .card)) > div[data-sec="network"]:not(.sec-hidden) {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start;
  }
  html[data-theme^="dash"] .shellbody:not(:has(> .card)) > div[data-sec="protect"] > .card,
  html[data-theme^="dash"] .shellbody:not(:has(> .card)) > div[data-sec="media"] > .card,
  html[data-theme^="dash"] .shellbody:not(:has(> .card)) > div[data-sec="network"] > .card { margin-bottom:0; overflow-x:auto; }
}

/* --- hero header card on detail pages (VM + open colo device) -------------- */
html[data-theme^="dash"] .shellbody > .card:first-child,
html[data-theme^="dash"] #coloMineBody:has(#coloTabBody) > .card:first-of-type {
  background:var(--dash-grad-soft), var(--panel);
  border-color:rgba(99,102,241,.35);
}

/* --- overview hero strip (built by /dash.js when this theme is active) ------ */
html[data-theme^="dash"] .dash-hero {
  background:var(--dash-grad-soft), var(--panel);
  border:1px solid rgba(99,102,241,.35); border-radius:14px; box-shadow:var(--shadow);
  padding:18px 20px; margin-bottom:22px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
html[data-theme^="dash"] .dash-hero .dh-title { min-width:180px; flex:1; }
html[data-theme^="dash"] .dash-hero .dh-kicker {
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:3px;
}
html[data-theme^="dash"] .dash-hero .dh-ws { font-size:19px; font-weight:600; }
html[data-theme^="dash"] .dash-hero .dh-tiles { display:flex; gap:12px; flex-wrap:wrap; }
html[data-theme^="dash"] .dash-hero .dh-tile {
  background:var(--field); border:1px solid var(--line); border-radius:12px;
  padding:10px 16px; min-width:92px;
}
html[data-theme^="dash"] .dash-hero .dh-tile .k {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
}
html[data-theme^="dash"] .dash-hero .dh-tile .v { font-size:20px; font-weight:600; margin-top:2px; }
html[data-theme^="dash"] .dash-hero .dh-tile .v.ok { color:var(--ok); }
html[data-theme^="dash"] .dash-hero .dh-tile .v.muted { color:var(--muted); }
html[data-theme^="dash"] .dash-hero .dh-tile .v.warn { color:var(--warn-ink); }
