/* ============================================================
   Utility Specialist — PREMIUM SKIN (opt-in overlay)
   Reskins the existing suite in the "premium ui" folder aesthetic:
   layered dark/light palette, a left workspace sidebar, and premium
   top file-buttons. NO page logic is touched — this only remaps the
   shared design-system tokens and re-chromes the shell.

   Load order (per page):  shared.css -> <page>.css -> premium-skin.css
   Paired with:            js/premium-shell.js  (injects sidebar + toggle)
   ============================================================ */

/* ---- palette: dark is default, light via html.theme-light --------------
   We remap the LEGACY token *names* to the premium palette *values* so
   every existing component (buttons, cards, modals, badges, maps) reskins
   automatically with no markup changes. */
:root {
  --usa-side-w: 240px;

  --bg:           #111318;
  --bg-panel:     #20242c;
  --bg-card:      #262b34;
  --bg-hover:     #303743;
  --bg-input:     #171a21;

  --text:         #f2f5f8;
  --text-2:       #bdc7d3;
  --text-3:       #8190a2;

  --border:       #3a424e;
  --border-2:     #556171;

  --accent:       #56c4ba;
  --accent-h:     #6fd6cc;
  --accent-light: #7fe0d6;
  --accent-dim:   rgba(86,196,186,0.14);
  --accent-border:rgba(86,196,186,0.42);

  /* legacy brand token resolves to the teal accent so red usages reskin */
  --red:          #56c4ba;
  --red-h:        #6fd6cc;
  --red-dim:      rgba(86,196,186,0.14);
  --red-border:   rgba(86,196,186,0.42);

  --gold:         #d8bc63;
  --gold-dim:     rgba(216,188,99,0.14);
  --gold-border:  rgba(216,188,99,0.42);

  --success:      #6fd28b;
  --success-dim:  rgba(111,210,139,0.14);
  --success-border:rgba(111,210,139,0.42);

  --warning:      #e1b75c;
  --warning-dim:  rgba(225,183,92,0.14);
  --warning-border:rgba(225,183,92,0.42);

  --danger:       #f26d7d;
  --danger-dim:   rgba(242,109,125,0.14);
  --danger-border:rgba(242,109,125,0.42);

  --navy:         #101726;
  --shadow:       0 22px 60px rgba(0,0,0,0.30);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.28);
}

html.theme-light {
  --bg:           #f5f7fa;
  --bg-panel:     #ffffff;
  --bg-card:      #f0f3f7;
  --bg-hover:     #e5eaf1;
  --bg-input:     #ffffff;

  --text:         #172130;
  --text-2:       #46576b;
  --text-3:       #738299;

  --border:       #cbd4df;
  --border-2:     #aab8c7;

  --accent:       #127a72;
  --accent-h:     #0f665f;
  --accent-light: #1a9488;
  --accent-dim:   rgba(18,122,114,0.10);
  --accent-border:rgba(18,122,114,0.38);

  --red:          #127a72;
  --red-h:        #0f665f;
  --red-dim:      rgba(18,122,114,0.10);
  --red-border:   rgba(18,122,114,0.38);

  --gold:         #9c6a12;
  --gold-dim:     rgba(156,106,18,0.10);
  --gold-border:  rgba(156,106,18,0.38);

  --success:      #167c42;
  --success-dim:  rgba(22,124,66,0.10);
  --success-border:rgba(22,124,66,0.38);

  --warning:      #a06513;
  --warning-dim:  rgba(160,101,19,0.10);
  --warning-border:rgba(160,101,19,0.38);

  --danger:       #b72f48;
  --danger-dim:   rgba(183,47,72,0.10);
  --danger-border:rgba(183,47,72,0.38);

  --navy:         #101726;
  --shadow:       0 18px 48px rgba(38,57,77,0.15);
  --shadow-sm:    0 1px 4px rgba(38,57,77,0.10);
}

body { background: var(--bg); color: var(--text); }

/* ============================================================
   TOP BAR  ->  premium "titlebar" with file-buttons
   ============================================================ */
#top-bar {
  height: 50px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  z-index: 1200;
  /* neutralise shared.css's light-on-navy scoped palette so children
     resolve against the panel background (per theme) */
  --text:     #f2f5f8;
  --text-2:   #bdc7d3;
  --text-3:   #8190a2;
  --border:   #3a424e;
  --border-2: #556171;
  --bg-card:  #262b34;
  --bg-hover: #303743;
  --red-h:    var(--accent);
  --danger-dim: rgba(242,109,125,0.16);
}
html.theme-light #top-bar {
  --text:     #172130;
  --text-2:   #46576b;
  --text-3:   #738299;
  --border:   #cbd4df;
  --border-2: #aab8c7;
  --bg-card:  #f0f3f7;
  --bg-hover: #e5eaf1;
  --red-h:    var(--accent);
}

.brand-name { color: var(--text) !important; }
.brand-name .c-red { color: var(--accent) !important; }
.brand-sub  { color: var(--text-3) !important; }

/* nav links -> premium tab/file buttons */
.nav-links { gap: 2px; }
.nav-link {
  color: var(--text-2);
  border: 1px solid transparent;
  border-radius: 7px;
  height: 30px;
  transition: all var(--t, .14s ease);
}
.nav-link:hover { color: var(--text); background: var(--bg-hover); border-color: var(--border); }
.nav-link.active {
  color: var(--text);
  background: var(--accent-dim);
  border-color: var(--accent-border);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.nav-divider { background: var(--border); }

.user-pill {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-2);
}
.user-pill span { color: var(--text); }

/* theme toggle button injected by premium-shell.js */
.usa-icon-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 30px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-input);
  color: var(--text-2);
  transition: all var(--t, .14s ease);
}
.usa-icon-btn:hover { color: var(--text); background: var(--bg-hover); border-color: var(--border-2); }
.usa-icon-btn [data-lucide] { width: 16px; height: 16px; }

/* ============================================================
   LEFT WORKSPACE SIDEBAR  (injected by premium-shell.js)
   ============================================================ */
#usa-side {
  position: fixed;
  top: 50px; left: 0; bottom: 0;
  width: var(--usa-side-w);
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 12px 10px;
  gap: 3px;
  z-index: 1100;
  overflow-y: auto;
}
.usa-side-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text-3);
  padding: 4px 8px 8px;
}
.usa-side-nav { display: flex; flex-direction: column; gap: 3px; }
.usa-side-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center; gap: 10px;
  min-height: 36px; padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 12.5px; font-weight: 500;
  text-decoration: none;
  transition: all var(--t, .14s ease);
}
.usa-side-item [data-lucide] { width: 17px; height: 17px; color: var(--text-3); }
.usa-side-item span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.usa-side-item:hover {
  color: var(--text); background: var(--bg-hover); border-color: var(--border);
}
.usa-side-item:hover [data-lucide] { color: var(--text-2); }
.usa-side-item.active {
  color: var(--text); background: var(--accent-dim);
  border-color: var(--accent-border); font-weight: 600;
}
.usa-side-item.active [data-lucide] { color: var(--accent); }
.usa-side-spacer { flex: 1; }
.usa-side-foot {
  border-top: 1px solid var(--border);
  padding-top: 10px; margin-top: 6px;
  font-size: 10px; color: var(--text-3);
  display: flex; align-items: center; gap: 6px;
}

/* stitch item is desktop-suite-only, mirror the top-bar rule */
#usa-side .usa-side-item[href="stitch.html"] { display: none; }
html.in-suite #usa-side .usa-side-item[href="stitch.html"] { display: grid; }
/* project-mode gating carries over via the cloned .pm-hidden class */

/* ============================================================
   CONTENT SHIFT  — make room for the sidebar
   ============================================================ */
body { padding-left: var(--usa-side-w); }
/* Full-viewport / map layouts are position:fixed and ignore body padding,
   so shift them explicitly. (Refined per page as needed.) */
#layout, #map-wrap.solo, .full-layout { left: var(--usa-side-w); }

/* ============================================================
   LAYERED POLISH  — soft premium depth on cards & panels
   ============================================================ */
.stat-card, .project-card, .modal-box, .panel, .card {
  box-shadow: var(--shadow-sm);
}
.project-card { transition: transform var(--t,.14s ease), box-shadow var(--t,.14s ease), border-color var(--t,.14s ease); }
.project-card:hover { border-color: var(--border-2); box-shadow: var(--shadow); }
.modal-box { box-shadow: var(--shadow); }

/* scrollbars a touch more premium */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; border: 2px solid var(--bg-panel); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* login page: recolor only (no sidebar there) — undo the content shift */
body.usa-no-shell { padding-left: 0; }

/* ============================================================
   PAGE FIXUPS  (from the parallel per-page skin audit)
   ============================================================ */
/* fixed full-viewport containers the base shift rule didn't cover:
   Live fleet map + the browser-only stitcher explainer would slide
   under the 240px sidebar — shift them right like #layout. */
#fleet-layout  { top: 50px; left: var(--usa-side-w); }
#web-explainer { left: var(--usa-side-w); }

/* immersive fullscreen overlays must sit ABOVE the sidebar (1100) and
   top-bar (1200) so they cover the whole window, not slide under it:
   the 360° pano viewer and the drag-drop zones. */
#viewer-overlay { z-index: 1300; }
#drop-zone      { z-index: 1300; }

/* loading scrim + spinner were tuned for a light backdrop — make them
   theme-aware so the dark theme doesn't flash a near-white overlay. */
#loading { background: color-mix(in srgb, var(--bg) 82%, transparent); }
#loading .spinner {
  border-color: color-mix(in srgb, var(--text) 16%, transparent);
  border-top-color: var(--accent);
}

/* toast variants hardcoded light tints — use the themed dim tokens so
   they read correctly in both dark and light. */
.toast.success { background: var(--success-dim); }
.toast.error   { background: var(--danger-dim);  }
.toast.warning { background: var(--warning-dim); }
.toast.info    { background: var(--accent-dim);  }

/* a couple of inputs hardcoded a dark literal bg — token-ise so the
   light theme renders them as proper white fields. */
.gps-set-row input { background: var(--bg-input); }

/* ---- Login: card + inputs must follow the theme. login.css hardcodes a
   white card AND '.form-input:focus{background:#fff}', so in dark mode the
   focused field became white text on a white box (invisible typing). Make
   the card, tabs, and focused inputs use themed surfaces so text is always
   readable in both dark and light. The navy brand panel stays dark. */
.login-card {
  background: var(--bg-panel);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.tab.active {
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: none;
}
.login-card .form-input,
.login-form .form-input {
  background: var(--bg-input);
  color: var(--text);
}
.login-card .form-input:focus,
.login-form .form-input:focus,
.pw-wrap .form-input:focus {
  background: var(--bg-input);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}
.login-card .form-input::placeholder { color: var(--text-3); }