/*
 * SAGRIS ODC — shared design tokens (Phase 0).
 *
 * One visual identity for every odcube.landimage.info frontend. Link it in the
 * <head> of any app:
 *     <link rel="stylesheet" href="/assets/sagris-theme.css">
 *
 * Palette is the canonical set already used by the Manager (imported there from
 * Mapper/Calc). Everything is a CSS custom property so /config can retune the
 * whole platform by overriding these on :root at runtime (see
 * sagris-theme-loader.js) — no redeploy, no per-file edits.
 *
 * Phase 0 ships the TOKENS only. Base component classes (.btn/.badge/.pill/…)
 * arrive in Phase 2; apps keep their own component CSS until then and may start
 * referencing the var()s immediately.
 */
/* Condensed display face for app-name wordmarks (.sg-brand-name) — lets the name
   be large and bold yet still fit the sidebar-width column. Must precede all rules. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=optional');
:root {
  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --bg:#0f1923;        --panel:#131f2e;   --panel2:#1a2d42;
  --bg0:#0a1018;       --bg1:#0f1923;     --bg2:#131f2e;     --bg3:#1a2d42;
  --line:#1e3550;      --line2:#2a4a6a;

  /* ── Text (bright → dim) ──────────────────────────────────────────────── */
  --txt:#dfe7ef;       --txt2:#cdd6e0;    --txt3:#8aabb0;    --txt4:#4a7aab;
  /* legacy aliases used by Mapper/Calc imports */
  --text:#cdd6e0;      --text2:#8aabb0;   --text3:#4a7aab;   --text4:#2a4a6a;

  /* ── Accents ──────────────────────────────────────────────────────────── */
  --blue:#5bb8ff;      --blue2:#3a9fff;   --blue3:#1e5da0;   --blue4:#0d2a45;
  --signal:#5bb8ff;    --signal-dim:#1e5da0;
  --ok:#3abf80;        --info:#5bb8ff;    --warn:#f0b040;    --error:#cf7060;
  --ok-bg:rgba(58,191,128,.14);   --info-bg:rgba(91,184,255,.14);
  --warn-bg:rgba(240,176,64,.14); --error-bg:rgba(207,112,96,.14);

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-display:'Oswald','Arial Narrow',var(--sans);  /* condensed app-name wordmarks */
  /* Single knob for global scale — /config's "font size" slider edits this and
     every --fs-* below tracks it. */
  /* Two independent type axes — /config has a slider for each:
     --font-base = body / UI text;  --font-heading = title-bar headings. */
  /* Fluid type — scales with the CSS viewport (already zoom/DPI-normalized) so
     the UI stays comfortable from laptops to large hi-res monitors. The baseline
     (14/15) matches the ~1536x864 design target (1920@125%, 16:9).

     IMPORTANT — aspect-balanced scale. The variable term blends viewport WIDTH
     and HEIGHT so the chrome scales by the overall screen size, not width alone.
     The split (c/2 of vw + c*16/9/2 of vh) is calibrated so the result is
     IDENTICAL to a width-only `c*vw` on any 16:9 viewport (the design ratio) —
     existing 16:9 setups are unchanged — but on a taller-than-16:9 screen the
     vh term lifts the scale to match the layout (which fills 100vh), and on a
     wider/shorter screen it holds the scale down. This stops the UI from looking
     vertically stretched / horizontally compressed off the design aspect ratio.
     /config sliders still override. */
  --font-base:clamp(13px, 0.15vw + 0.267vh + 9.4px, 18px);     /* body / UI text knob     */
  --font-heading:clamp(14px, 0.15vw + 0.267vh + 10.4px, 19px); /* heading / title-bar     */
  --fs-xs:calc(var(--font-base) - 3px);      /* ~11 — badges, captions       */
  --fs-sm:calc(var(--font-base) - 2px);      /* ~12 — secondary controls     */
  --fs-md:var(--font-base);                  /*  14 — body / inputs          */
  --fs-lg:calc(var(--font-base) + 1px);      /* ~15 — buttons / controls     */
  --fs-xl:var(--font-heading);               /* app title bars (heading axis)*/
  --fs-2xl:calc(var(--font-heading) + 8px);  /* large page headings          */
  --lh:1.5;

  /* ── Spacing / shape ──────────────────────────────────────────────────── */
  /* Spacing scales with the viewport too (baseline 4/8/12/18 at ~1536x864),
     using the same aspect-balanced vw+vh blend as the type scale above. */
  --sp-1:clamp(4px, 0.065vw + 0.116vh + 2px, 6px);   --sp-2:clamp(8px, 0.13vw + 0.231vh + 4px, 12px);
  --sp-3:clamp(12px, 0.195vw + 0.347vh + 6px, 18px); --sp-4:clamp(18px, 0.295vw + 0.524vh + 9px, 26px);
  --radius:6px;       --radius-sm:4px;    --radius-lg:10px;
  --shadow:0 2px 10px rgba(0,0,0,.28);

  /* ── Layout (harmonized to the Tracker app) ──────────────────────────── */
  --sidebar-w:clamp(300px, 4.4vw + 7.82vh + 175px, 440px);  /* fluid (aspect-balanced): ~310px at 1536x864, wider on big screens */
  --topbar-pad:8px 16px;    /* top title-bar padding (sets its height) */
}

/* ════════════════════════════════════════════════════════════════════════════
 * Base components (Phase 2).
 *
 * Namespaced `.sg-*` so they NEVER collide with an app's existing classes —
 * linking this file changes nothing until an element opts in by using a class.
 * All values come from the tokens above, so /config retunes every component
 * platform-wide. Phase 3 migrates each app's markup/CSS onto these.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Buttons ─────────────────────────────────────────────────────────────────── */
.sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:9px 12px;border:1px solid transparent;border-radius:var(--radius-sm);
  font-family:var(--sans);font-size:var(--fs-lg);font-weight:600;letter-spacing:.4px;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  background:var(--panel2);color:var(--txt)}
.sg-btn:hover:not(:disabled){background:var(--line2)}
.sg-btn:disabled{opacity:.5;cursor:not-allowed}
.sg-btn-sm{width:auto;padding:5px 10px;font-size:var(--fs-sm)}
.sg-btn-primary{background:var(--blue3);border-color:var(--blue3);color:#dfeeff}
.sg-btn-primary:hover:not(:disabled){background:var(--blue2)}
.sg-btn-danger{background:#5a2020;border-color:#5a2020;color:#ffb3b3}
.sg-btn-danger:hover:not(:disabled){background:#7a2828}
.sg-btn-export{background:#0a2a1a;border:1px solid #1a4a2a;color:var(--ok)}
.sg-btn-export:hover:not(:disabled){background:#0d3520}
.sg-btn-ghost{background:transparent;border-color:var(--line2);color:var(--txt2)}
.sg-btn-ghost:hover:not(:disabled){color:var(--txt);border-color:var(--blue3)}

/* Inputs / selects ────────────────────────────────────────────────────────── */
.sg-input{width:100%;background:var(--bg0);border:1px solid var(--line);color:var(--txt);
  padding:6px 9px;border-radius:var(--radius-sm);font-family:var(--sans);font-size:var(--fs-md);
  outline:none;transition:border-color .2s}
.sg-input:focus{border-color:var(--blue3)}

/* Section label ───────────────────────────────────────────────────────────── */
.sg-section-title{font-size:var(--fs-sm);font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--txt4);margin-bottom:9px}

/* Badge ───────────────────────────────────────────────────────────────────── */
.sg-badge{display:inline-block;background:var(--blue4);color:var(--blue);
  font-size:var(--fs-xs);font-weight:600;padding:2px 8px;border-radius:10px;border:1px solid var(--blue3)}
.sg-badge-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.sg-badge-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
.sg-badge-error{background:var(--error-bg);color:var(--error);border-color:var(--error)}

/* Pill (toggle / filter) ──────────────────────────────────────────────────── */
.sg-pill{padding:5px 10px;border:1px solid var(--line);background:var(--bg0);color:var(--txt3);
  border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-sm);font-weight:600;
  transition:all .15s;text-align:center}
.sg-pill:hover{border-color:var(--line2);color:var(--txt)}
.sg-pill.active{border-color:var(--blue);background:var(--blue4);color:var(--blue)}

/* Card / panel section ────────────────────────────────────────────────────── */
.sg-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-3)}

/* Loading spinner ─────────────────────────────────────────────────────────── */
.sg-spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--line);
  border-top-color:var(--blue);border-radius:50%;animation:sg-spin .7s linear infinite;
  vertical-align:middle;margin-right:5px}
@keyframes sg-spin{to{transform:rotate(360deg)}}


/* Background-tasks floating panel ─────────────────────────────────────────────
 * Upper-right, just below the top bar — an auto-hiding stack of cards, one per
 * running background task, each with a determinate progress bar. Shared across
 * apps; driven by SAGRIS.tasks.render() in /assets/sagris-tasks.js.
 * Anchored to the TOP (not the bottom) so the cards are always fully on-screen
 * regardless of monitor size — a bottom-right anchor pushed the cards partly
 * off-screen on large displays. `--header-h` (set by maps/calc to 36px) gives
 * the bar height; the 44px fallback clears the padding-driven dashboard/data-app
 * bars (~42px). */
.sg-bgtasks{position:fixed;top:calc(var(--header-h, 44px) + 12px);right:18px;
  display:flex;flex-direction:column;gap:10px;z-index:1000;max-width:380px}
.sg-bgtasks:empty{display:none}
.sg-bgtask{background:var(--panel2);border:1px solid var(--warn);border-radius:8px;
  padding:11px 14px 9px;min-width:260px;box-shadow:0 6px 20px rgba(0,0,0,.45);
  animation:sg-bgfade .25s ease}
.sg-bgtask .sg-bgtask-head{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:12px}
.sg-bgtask .sg-bgtask-name{color:var(--warn);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.sg-bgtask .sg-bgtask-et{margin-left:auto;color:var(--txt3);font-variant-numeric:tabular-nums}
/* Optional per-card action button (e.g. Stop) — wired via SAGRIS.tasks onAction. */
.sg-bgtask .sg-bgtask-action{margin-left:8px;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.5px;color:var(--warn);cursor:pointer;
  background:transparent;border:1px solid var(--warn);border-radius:4px;padding:2px 8px}
.sg-bgtask .sg-bgtask-action:hover{background:var(--warn);color:var(--bg0)}
.sg-bgtask .sg-bgtask-det{font-family:var(--mono);font-size:11px;color:var(--txt2);margin:4px 0 8px;
  word-break:break-all}
.sg-bgtask .sg-bgtask-bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden}
/* Determinate growing bar — width set per-update; no infinite slide, no flash. */
.sg-bgtask .sg-bgtask-bar > i{display:block;height:100%;width:0;background:var(--warn);
  transition:width .8s linear}
@keyframes sg-bgfade{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* Top-bar pill system ──────────────────────────────────────────────────────────
 * ONE definition for every pill that sits on an app's top bar — the identity
 * pill (.sg-userpill), plus status chips / counters / badges (.sg-pill). The
 * Manager's bar is the reference look; this reproduces it for every app.
 *
 * Why a fixed height + line-height:1 + box-sizing:border-box: a pill MUST look
 * identical in every app, but each app's <body> sets a different font-size /
 * line-height (tracker 15px/1.5, maps 13px/1.45, manager 14px/1.55…). Without a
 * fixed height the pill inherits that and ends up a different height — and a
 * different height — per app. Pinning height:26px makes every pill the same
 * height and, with the bar's `align-items:center`, sit exactly on its vertical
 * centre. `flex:0 0 auto` means a pill never shrinks, so its text can't spill
 * over a neighbour. Colour is layered on by a modifier class on the element.
 *
 * Usage:
 *   <span class="sg-pill">…</span>                     a neutral chip
 *   <span class="sg-pill" style="…">…</span>           or with app colours
 *   <span id="sg-userpill" class="sg-userpill"></span> the identity pill
 *
 * Top-bar contract: the identity pill is ALWAYS in the far-right corner of the
 * bar — `margin-left:auto` shoves it there (it eats all free space to its left)
 * and `order:1000` makes it render last whatever its DOM position. App-specific
 * pills (.sg-pill) live at the LEFT/middle of the bar, well clear of it, so the
 * two groups can never share the corner or overlap. New apps get this for free
 * by mounting #sg-userpill and putting their own pills early in the bar. */
.sg-pill,.sg-userpill{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  height:26px;box-sizing:border-box;padding:0 11px;border-radius:13px;
  border:1px solid var(--line2);background:transparent;color:var(--txt2);
  font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.5px;white-space:nowrap}
.sg-pill b,.sg-userpill b{font-weight:700;color:var(--txt)}

/* Identity pill: teal, pinned to the far-right corner, hidden until populated. */
.sg-userpill{display:none;order:1000;margin-left:auto;color:var(--signal);border-color:var(--signal-dim);
  background:rgba(45,212,191,.06);text-transform:uppercase}
.sg-userpill.sg-userpill-ready{display:inline-flex}
.sg-userpill .sg-userpill-dot{color:var(--ok)}
.sg-userpill .sg-userpill-role{font-weight:700;color:var(--signal)}
.sg-userpill .sg-userpill-groups{color:var(--txt3);text-transform:none;letter-spacing:0}
.sg-userpill .sg-userpill-demo{color:var(--warn)}
.sg-userpill a{color:var(--txt3);text-decoration:none}
.sg-userpill a:hover{color:var(--signal)}

/* App brand block ───────────────────────────────────────────────────────────────
 * The identity block at the TOP of every app's left sidebar column (the same
 * place the Manager puts it): a green-gradient logo tile + a bold CONDENSED
 * "SAGRIS ODC <app>" wordmark (Oswald via --font-display) stacked over a short
 * mono UPPERCASE keyword (e.g. CHANGE DETECTION). The condensed face lets the name
 * be large yet still fit the sidebar-width column; the name + keyword ellipsize
 * within it rather than widening it. The block fills the sidebar width and is
 * separated from the menu below by a bottom border. Each app's shell makes the
 * sidebar span full height so this sits above the top bar, which starts at the
 * sidebar's right edge. Markup:
 *   <div class="sg-brand">
 *     <div class="sg-brand-logo">S</div>
 *     <div class="sg-brand-text">
 *       <h1 class="sg-brand-name"><strong>SAGRIS ODC</strong> Change Tracker</h1>
 *       <div class="sg-brand-sub">CHANGE DETECTION</div>
 *     </div>
 *   </div>                                                                       */
/* Metrics mirror the Manager's .brand block EXACTLY: 18px padding, a 26px logo
   tile aligned to the TITLE line (align-items:flex-start), and the keyword set a
   relaxed 8px below the title — not crammed against it. The bottom border + 14px
   margin separate it from the menu, same as the Manager sidebar. */
.sg-brand{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;flex-shrink:0;
  padding:18px;border-bottom:1px solid var(--line);margin-bottom:14px}
.sg-brand-logo{flex:0 0 auto;width:26px;height:26px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-display);font-size:16px;font-weight:700;color:#fff;letter-spacing:0;
  background:linear-gradient(135deg,var(--signal-dim),#2bbd8a)}

/* ── Application icon — Sentinel-1 satellite ─────────────────────────────────
   Replaces the legacy "S" glyph platform-wide. A centered ::before overlays the
   official Copernicus Sentinel-1 line-art icon (recoloured white,
   /assets/sentinel1-icon.png) on each logo box. The chip is a deliberate dark
   square with a subtle border (the look the Manager had by accident); the old
   text glyph is hidden with color:transparent. Brand chips (.sg-brand-logo and
   the Manager/Admin/API .hdr-logo) are enlarged to span the two-line title +
   keyword; the Help logo (.sg-help-logo) keeps its own size. Covers every app +
   the Help drawer + standalone manuals — no per-app markup change. */
.sg-brand-logo,.hdr-logo,.sg-help-logo{
  color:transparent !important;position:relative;
  background:var(--bg0) !important;          /* dark chip — replaces the old gradients */
  border:1.5px solid rgba(170,200,235,.50);  /* pronounced light frame to emphasise the icon */
}
.sg-brand-logo,.hdr-logo{                    /* brand chips: large, span title + keyword */
  width:44px !important;height:44px !important;border-radius:10px;
}
.brand .brand-txt{display:flex;flex-direction:column;min-width:0}  /* Manager/Admin/API title+sub column beside the icon */
.sg-brand-logo::before,.hdr-logo::before,.sg-help-logo::before{
  content:"";position:absolute;inset:0;
  background:center/80% no-repeat url("/assets/sentinel1-icon.png");
}
.sg-brand-text{display:flex;flex-direction:column;min-width:0}
.sg-brand-name{margin:0;min-width:0;font-family:var(--font-display);font-size:20px;font-weight:600;
  /* line-height + padding-bottom give the condensed face room for its descenders
     (g/p/y) — at line-height:1 the overflow:hidden clip shaved them off. */
  line-height:1.25;padding-bottom:2px;letter-spacing:.4px;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-brand-name strong{color:var(--signal);font-weight:700}
/* Short keyword under the wordmark — matches the Manager's .sub treatment
   (mono, uppercase, 2px tracking, a relaxed 8px below the title). */
.sg-brand-sub{margin-top:8px;min-width:0;font-family:var(--mono);font-size:10.5px;line-height:1;
  color:var(--txt3);letter-spacing:2px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Access gate (sign-in required / access restricted) ───────────────────────
   Shared so every app's sign-in / access-denied screen is identical. Mirrors the
   Manager's original card so all apps match it. Centre a `.sg-gate` card in the
   page (or in a full-width container) and use the helper classes below. */
.sg-gate{max-width:580px;margin:13vh auto;padding:36px;background:#11161c;
  border:1px solid #21303d;border-radius:11px;text-align:center;
  font-family:var(--sans);color:#cdd6e0}
.sg-gate-icon{font-size:44px;margin-bottom:10px}
.sg-gate-title{font-size:21px;margin:0 0 14px;color:#fff;font-weight:600}
.sg-gate p{line-height:1.6;color:#9fb0bf;margin:0 0 4px}
.sg-gate-note{color:#e0b050;margin:6px 0 0}
.sg-gate-btn{display:inline-block;background:#13344f;border:1px solid #2a6699;color:#cfe8ff;
  padding:11px 22px;border-radius:8px;text-decoration:none;font-weight:600;cursor:pointer}
.sg-gate-btn:hover{background:#184a6e}
.sg-gate-btn-ghost{display:inline-block;background:#1b2733;border:1px solid #21303d;color:#cdd6e0;
  padding:10px 20px;border-radius:8px;text-decoration:none}
.sg-gate-btn-ghost:hover{border-color:#2a6699}
.sg-gate-link{color:#5bb8ff;font-size:13px;text-decoration:none}
.sg-gate-link:hover{text-decoration:underline}