/* ═══════════════════════════════════════════════════════════════════════════
   RTSMS — "Liquid Glass" theme
   ═══════════════════════════════════════════════════════════════════════════

   A FOURTH theme alongside dark / light / machinemax, not a replacement. It
   activates only under [data-theme="glass"], so switching away restores the
   previous look exactly and nothing here can affect the existing themes.

   Tokens taken from the client's proposal document rather than invented:
       surface      rgba(255,255,255,.05 – .06)
       blur         blur(36px) saturate(165%)
       border       1px solid rgba(255,255,255,.12)
       radii        30 / 22 / 14 / 11 / 7, and 100 for pills
       display      Plus Jakarta Sans, tight tracking
       numerals     JetBrains Mono

   PERFORMANCE NOTE — read before widening this
   backdrop-filter forces the compositor to re-blur everything behind an element
   on every repaint. This app draws Chart.js canvases, Leaflet tiles and a
   deck.gl WebGL layer, several of which animate. So the blur is applied ONLY to
   the persistent chrome (sidebar, topbar, modals) and to cards — not to chips,
   buttons, table rows or anything that repeats dozens of times per screen.
   .card carries `contain: paint`, which lets the browser skip compositing cards
   scrolled out of view. If the dashboard feels heavy on plant hardware, reduce
   --glass-blur before removing panels; 36px → 18px costs very little visually
   and roughly halves the compositing work.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

[data-theme="glass"]{
  /* ── surfaces ─────────────────────────────────────────────────────────── */
  --glass-fill:      rgba(255,255,255,.055);
  --glass-fill-soft: rgba(255,255,255,.035);
  --glass-fill-hi:   rgba(255,255,255,.10);
  --glass-line:      rgba(255,255,255,.12);
  --glass-line-hi:   rgba(255,255,255,.22);
  --glass-blur:      36px;
  --glass-sat:       165%;
  --glass-shadow:    0 30px 70px -26px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.20);

  /* ── radii ────────────────────────────────────────────────────────────── */
  --r-xl:30px; --r-lg:22px; --r-md:14px; --r-sm:11px; --r-xs:7px; --r-pill:100px;

  /* ── existing app tokens, remapped ───────────────────────────────────── */
  --bg:#0A0713; --bg2:#120A22; --bg3:#180E2C;
  /* SOLID, deliberately. These tokens are consumed by dozens of components
     that assume an opaque surface — dropdowns, popovers, native selects, table
     headers. Making them translucent turned every one of those see-through with
     nothing behind it, which is why the notification panel and the select list
     became unreadable. Glass is applied per-selector below, never through a
     token, so a component only becomes translucent if it also gets a blur. */
  --card:#171029; --surface:#171029; --surface2:#1E1636;
  --line:var(--glass-line); --border:var(--glass-line);
  --txt:#FCFDFF; --txt2:#C3C9DA; --txt3:#8E93A8;
  --text:#FCFDFF; --text2:#C3C9DA; --text3:#8E93A8;
  /* the app-wide accent is teal; under glass it reads as violet */
  --accent:#A78BFA;

  --sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ── the backdrop the glass sits on ──────────────────────────────────────
   Fixed, so panels blur against a stable image instead of re-sampling a
   scrolling gradient — cheaper and steadier. */
[data-theme="glass"] body{
  font-family:var(--sans);
  background:
    radial-gradient(1100px 780px at 12% -8%,  rgba(124,58,237,.55), transparent 62%),
    radial-gradient(980px  680px at 88%  6%,  rgba(37,99,235,.45),  transparent 60%),
    radial-gradient(900px  700px at 72% 92%,  rgba(13,148,136,.38), transparent 62%),
    radial-gradient(760px  600px at 22% 88%,  rgba(190,24,93,.28),  transparent 60%),
    #0A0713;
  background-attachment:fixed;
}

/* ── shell ───────────────────────────────────────────────────────────────── */
[data-theme="glass"] .sidebar,
[data-theme="glass"] .topbar{
  background:var(--glass-fill);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-color:var(--glass-line);
}
[data-theme="glass"] .sidebar{
  border-right:1px solid var(--glass-line);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.06);
}
[data-theme="glass"] .topbar{
  border-bottom:1px solid var(--glass-line);
  box-shadow:0 1px 0 rgba(255,255,255,.05);
}
[data-theme="glass"] .content{ background:transparent; }

/* ── cards ─────────────────────────────────────────────────────────────── */
[data-theme="glass"] .card{
  background:var(--glass-fill);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-shadow);
  /* contain:paint REMOVED. It was added to let the compositor skip off-screen
     cards, but it also CLIPS descendants to the card box and creates a stacking
     context. Several cards place a button slightly outside their top edge, and
     those were being cut in half. A rendering optimisation that truncates
     controls is not an optimisation. */
}
[data-theme="glass"] .card:hover{ border-color:var(--glass-line-hi); }

/* ── typography ──────────────────────────────────────────────────────────── */
[data-theme="glass"] .ct,
[data-theme="glass"] h1,[data-theme="glass"] h2,[data-theme="glass"] h3{
  font-family:var(--sans);
  letter-spacing:-.6px;
  font-weight:600;
  color:#FBFCFF;
}
[data-theme="glass"] .csub{ color:var(--txt2); }
/* Figures line up column-to-column and do not jitter as values update. */
[data-theme="glass"] .kpi-v,
[data-theme="glass"] td.num,
[data-theme="glass"] .num{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.3px;
}

/* ── controls: NO blur here on purpose (they repeat many times per screen) ─ */
[data-theme="glass"] .btn,
[data-theme="glass"] button:not(.pill),
[data-theme="glass"] select,
[data-theme="glass"] input[type="text"],
[data-theme="glass"] input[type="number"],
[data-theme="glass"] input[type="password"]{
  background:var(--glass-fill-soft);
  border:1px solid var(--glass-line);
  border-radius:var(--r-sm);
  color:var(--txt);
}
[data-theme="glass"] .btn:hover,
[data-theme="glass"] button:not(.pill):hover{
  background:var(--glass-fill-hi);
  border-color:var(--glass-line-hi);
}
[data-theme="glass"] .btn-primary{
  background:linear-gradient(135deg,#7C3AED,#2563EB);
  border-color:transparent;
  color:#fff;
}
[data-theme="glass"] .pill,
[data-theme="glass"] .chip,
[data-theme="glass"] .pt-chip{
  border-radius:var(--r-pill);
  background:var(--glass-fill-soft);
  border:1px solid var(--glass-line);
}

/* ── tables ──────────────────────────────────────────────────────────────── */
[data-theme="glass"] .tw{
  border:1px solid var(--glass-line);
  border-radius:var(--r-md);
  overflow:hidden;
}
[data-theme="glass"] table th{
  background:rgba(255,255,255,.04);
  color:var(--txt3);
  border-bottom:1px solid var(--glass-line);
}
[data-theme="glass"] table td{ border-bottom:1px solid rgba(255,255,255,.07); }
[data-theme="glass"] tbody tr:hover{ background:rgba(255,255,255,.045); }

/* ── modals sit above everything, so they carry the strongest blur ───────── */
[data-theme="glass"] .gf-modal,
[data-theme="glass"] .idle-modal,
[data-theme="glass"] .login-card{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid var(--glass-line-hi);
  border-radius:var(--r-xl);
  box-shadow:var(--glass-shadow);
}

/* ── back-to-top, matched to the theme ───────────────────────────────────── */
[data-theme="glass"] #to-top{
  background:var(--glass-fill-hi);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-line-hi);
  color:#FCFDFF;
}

/* ── accessibility ────────────────────────────────────────────────────────
   Glass lowers contrast between a surface and what is behind it, so a visible
   focus ring matters more here, not less. */
[data-theme="glass"] :focus-visible{
  outline:2px solid #A78BFA;
  outline-offset:2px;
  border-radius:var(--r-xs);
}

/* Respect a user's reduced-transparency or reduced-motion preference: drop the
   blur entirely and fall back to a solid surface. Some people find heavy
   translucency genuinely hard to read, and on a safety system legibility wins. */
@media (prefers-reduced-transparency:reduce){
  [data-theme="glass"] .card,
  [data-theme="glass"] .sidebar,
  [data-theme="glass"] .topbar,
  [data-theme="glass"] .gf-modal,
  [data-theme="glass"] .login-card{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:#141024;
  }
}
@media (prefers-reduced-motion:reduce){
  [data-theme="glass"] *{ transition:none !important; animation:none !important; }
}

/* ── let the backdrop through ─────────────────────────────────────────────
   Several full-height containers paint an opaque var(--bg) of their own. Under
   the other themes that is invisible — the colour matches the body. Here it
   covers the mesh gradient completely, so the glass has nothing to refract and
   the whole thing reads as flat dark. Making these transparent is what turns
   the theme on visually. */
[data-theme="glass"] #landingPage,
[data-theme="glass"] #app,
[data-theme="glass"] .main,
[data-theme="glass"] .lp-hero,
[data-theme="glass"] #loginPage{
  background-color:transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIXES FROM REVIEW ON THE LIVE BUILD
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── native <select> ──────────────────────────────────────────────────────
   The option LIST is drawn by the operating system, not the page. It cannot
   inherit a translucent background, so a see-through select produced white
   text on the OS's white list — invisible. Both the control and its options
   need a solid colour. */
[data-theme="glass"] select{
  background-color:#1E1636;
  color:#FCFDFF;
  border:1px solid var(--glass-line);
  border-radius:var(--r-sm);
}
[data-theme="glass"] select option,
[data-theme="glass"] select optgroup{
  background-color:#1E1636;
  color:#FCFDFF;
}

/* ── floating panels ──────────────────────────────────────────────────────
   Anything that overlays page content must be legible on its own. These get a
   solid base PLUS blur — the blur is decoration here, the opacity is what makes
   the text readable. */
[data-theme="glass"] .nc-panel,
[data-theme="glass"] .tb-sync-tip,
[data-theme="glass"] .ic-drop,
[data-theme="glass"] .notif{
  background:rgba(23,16,41,.92);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--glass-line-hi);
  color:var(--txt);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.8);
}

/* ── sidebar navigation ───────────────────────────────────────────────────
   The base build tints the active item teal, which fights the violet backdrop.
   Matched to the theme, with the left marker kept — it is the fastest way to
   see where you are. */
[data-theme="glass"] .ni{
  border-radius:var(--r-sm);
  color:var(--txt2);
  border:1px solid transparent;
}
[data-theme="glass"] .ni:hover{
  background:rgba(255,255,255,.07);
  color:var(--txt);
}
[data-theme="glass"] .ni.active{
  background:linear-gradient(90deg,rgba(167,139,250,.22),rgba(167,139,250,.05));
  border-color:rgba(167,139,250,.38);
  color:#FFFFFF;
}
[data-theme="glass"] .ni.active::before{ background:#A78BFA; }
[data-theme="glass"] .ni.active .ni-badge{ background:#A78BFA; color:#160F28; }
[data-theme="glass"] .ni-badge{
  background:rgba(255,255,255,.12);
  color:var(--txt);
}

/* ── section labels in the sidebar ───────────────────────────────────────── */
[data-theme="glass"] .nav-sec,
[data-theme="glass"] .ni-sec{ color:var(--txt3); }

/* ── inputs need a readable base too ─────────────────────────────────────── */
[data-theme="glass"] input[type="text"],
[data-theme="glass"] input[type="number"],
[data-theme="glass"] input[type="password"],
[data-theme="glass"] input[type="search"],
[data-theme="glass"] textarea{
  background-color:#1E1636;
  color:#FCFDFF;
  border:1px solid var(--glass-line);
}
[data-theme="glass"] input::placeholder,
[data-theme="glass"] textarea::placeholder{ color:#7C819A; }

/* ── table headers sit on the card's glass, so they only need a tint ─────── */
[data-theme="glass"] table th{ background:rgba(255,255,255,.055); color:var(--txt2); }

/* ═══════════════════════════════════════════════════════════════════════════
   SPECIFICITY: this app has BOTH a theme system and a skin system
   ═══════════════════════════════════════════════════════════════════════════
   <html> carries data-theme AND data-skin, and the skin rules are written as
   html[data-skin="steel"] .sidebar .ni.active — (0,4,1). A plain
   [data-theme="glass"] .ni.active is (0,3,0) and loses, which is why the active
   sidebar item kept its old colour while everything else themed correctly.

   Matching the skins' shape (html + .sidebar + .ni.active) puts these at the
   same specificity, and this file loads after app.css, so the cascade resolves
   in favour of the active theme. Written to beat the skins rather than to
   delete them: a skin is still meaningful under the other three themes. */

html[data-theme="glass"] .sidebar .ni{
  color:#C3C9DA;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:transparent;
}
html[data-theme="glass"] .sidebar .ni:hover{
  background:rgba(255,255,255,.07);
  color:#FCFDFF;
}
html[data-theme="glass"] .sidebar .ni.active{
  background:linear-gradient(90deg,rgba(167,139,250,.24),rgba(167,139,250,.06));
  border-color:rgba(167,139,250,.42);
  color:#FFFFFF;
  box-shadow:none;
}
html[data-theme="glass"] .sidebar .ni.active::before{ background:#A78BFA; }
html[data-theme="glass"] .sidebar .ni.active .ni-badge{ background:#A78BFA; color:#160F28; }
html[data-theme="glass"] .sidebar .ni-badge{ background:rgba(255,255,255,.13); color:#E9ECF6; }

/* Same reasoning for the shell and cards — skins restyle these too. */
html[data-theme="glass"] .sidebar,
html[data-theme="glass"] .topbar{
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
}
html[data-theme="glass"] .card{
  background:rgba(255,255,255,.055);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
}
html[data-theme="glass"] body{ background-color:#0A0713; }

/* ═══════════════════════════════════════════════════════════════════════════
   CAPSULE NAVIGATION — matching the proposal document
   ═══════════════════════════════════════════════════════════════════════════
   In the proposal the sidebar reads as a list of floating capsules: the active
   item is a filled, fully-rounded pill and every inactive item is plain text
   with no chrome at all. The shipped build does the opposite — each row carries
   a border and a left marker bar, so all fourteen items compete for attention
   and none of them wins.

   All selectors are html[...] + .sidebar to sit at the same specificity as the
   skin rules, which otherwise take these elements back.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section labels: quieter and further apart, so the groups read as groups. */
html[data-theme="glass"] .sidebar .sb-section{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:1.6px;
  color:#6E7391;
  opacity:1;
  font-weight:600;
  padding:20px 20px 8px;
}

/* Inactive rows carry NO border and NO background — that is what lets the one
   active capsule stand out. */
html[data-theme="glass"] .sidebar .ni{
  border:1px solid transparent;
  border-radius:var(--r-pill);
  background:transparent;
  color:#A8AEC6;
  padding:10px 16px;
  margin:2px 10px;
  font-size:13px;
  font-weight:500;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
html[data-theme="glass"] .sidebar .ni:hover{
  background:rgba(255,255,255,.06);
  border-color:transparent;
  color:#EDEFF7;
  transform:none;                      /* base build nudges 1px; capsules should sit still */
}

/* The single filled capsule. */
html[data-theme="glass"] .sidebar .ni.active{
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.20);
  color:#FFFFFF;
  font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 8px 22px -12px rgba(0,0,0,.7);
}
/* The left marker bar belongs to the old design language, not this one. */
html[data-theme="glass"] .sidebar .ni.active::before{ display:none; }

/* Counts sit inside the capsule as their own small pill. */
html[data-theme="glass"] .sidebar .ni-badge{
  background:rgba(255,255,255,.12);
  color:#D6DAEA;
  border-radius:var(--r-pill);
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:600;
  padding:2px 8px;
  border:none;
}
html[data-theme="glass"] .sidebar .ni.active .ni-badge{
  background:rgba(255,255,255,.22);
  color:#FFFFFF;
}

/* Brand block: no hard divider, just space. */
html[data-theme="glass"] .sidebar .sb-head{
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:20px 20px 18px;
}
html[data-theme="glass"] .sidebar .sb-title{
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:-.2px;
  color:#FCFDFF;
}
html[data-theme="glass"] .sidebar .sb-sub,
html[data-theme="glass"] .sidebar .sb-meta{ color:#8288A4; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOPBAR — same capsule language
   ═══════════════════════════════════════════════════════════════════════════
   Every control in the header currently draws its own rectangular box. Give
   them one shared pill treatment so the row reads as a set rather than four
   unrelated widgets.

   CONTROLS ONLY. .tb-meta was in this list and should never have been: it is a
   two-line text label, not a widget, and it is a full-width block — so the pill
   rendered as a ~780px empty bar across the header on every page. */
html[data-theme="glass"] .topbar .tb-sync,
html[data-theme="glass"] .topbar .tb-user,
html[data-theme="glass"] .topbar .btn-icon,
html[data-theme="glass"] .topbar select{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-pill);
  color:#E7EAF5;
  box-shadow:none;
}
html[data-theme="glass"] .topbar .tb-sync:hover,
html[data-theme="glass"] .topbar .tb-user:hover,
html[data-theme="glass"] .topbar .btn-icon:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.24);
}
/* Square-ish icon buttons become circles. */
html[data-theme="glass"] .topbar .btn-icon{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
}
html[data-theme="glass"] .topbar .tb-title{
  font-family:var(--sans);
  letter-spacing:-.5px;
  color:#FCFDFF;
}
/* The plant picker is a select, so it needs a solid list (OS-drawn) even while
   the closed control looks like a pill. */
html[data-theme="glass"] .topbar select{ background-color:#1E1636; }
html[data-theme="glass"] .topbar select option{ background-color:#1E1636; color:#FCFDFF; }

/* ═══════════════════════════════════════════════════════════════════════════
   STACKING — backdrop-filter creates a stacking context, and that broke a panel
   ═══════════════════════════════════════════════════════════════════════════
   The notification dropdown appeared to be transparent. It was not: its
   background computes to rgba(23,16,41,.92), fully opaque enough. The problem
   was z-ORDER. Dashboard cards were painting OVER it.

   Cause: backdrop-filter on .topbar creates a stacking context. .nc-panel lives
   inside the topbar and carries z-index:4000, but that value is only meaningful
   WITHIN its parent context — and the topbar itself was position:static with
   z-index:auto, so the whole context sat at the bottom of the page. Cards later
   in flow simply painted on top.

   The fix is to give the topbar's stacking context a real position in the
   order. 900 clears page content while staying below toasts (1100) and modals,
   so nothing that should sit above the header is affected. */
html[data-theme="glass"] .topbar{
  position:relative;
  z-index:900;
}
/* The sidebar gets the same treatment for the same reason — it is also blurred,
   so it is also a stacking context, and its flyouts need to clear content.

   DESKTOP ONLY. Below 880px the base stylesheet makes the sidebar a drawer:
   position:fixed + translateX(-100%) to park it off-screen. This rule is more
   specific (0,2,1 vs 0,1,0) and media queries add no specificity, so unscoped
   it won every width — forcing the drawer back into flow, where it reserved a
   column of empty space and squeezed the content into a sliver. That was the
   broken phone layout. Match the base breakpoint exactly. */
@media(min-width:881px){
  html[data-theme="glass"] .sidebar{
    position:relative;
    z-index:901;
  }
}
/* Belt and braces for the panel itself: it must beat anything inside the bar. */
html[data-theme="glass"] .nc-panel{ z-index:4000; }