/* ════════════════════════════════════════════════════════════
   DASHBOARD THEME — single file for visual customization
   ════════════════════════════════════════════════════════════

   This configuration file contains all the colors and other visual settings for the dashboard. 
   It is split into two sections:

   ════════════════════════════════════════════════════════════ */

:root {

  /* — Backgrounds — */
  --bg-canvas:    #1E273D;  /* overall page background color */
  --bg-primary:   #1E273D;  /* panel/card background color */
  --bg-secondary: #334268;  /* secondary background (buttons, bars) */

  /* — Header (logo + title) — */
  --header-logo-bg:    rgba(0, 51, 153, 1);  /* background behind the logo */
  --header-title-bg-1: rgba(0, 51, 153, 1);  /* title gradient start color */
  --header-title-bg-2: rgb(126, 24, 235);    /* title gradient end color */
  --header-title-gradient: linear-gradient(90deg, var(--header-title-bg-1) 0%, var(--header-title-bg-2) 100%);

  /* — Text — */
  --text-primary:   #ffffff;  /* main text (on dark backgrounds) */
  --text-secondary: #d8dadd;  /* secondary, slightly dimmer text */
  --text-disabled:  #999ca3;  /* disabled / low-emphasis text */
  --text-link:      #5794f2;  /* link color */

  /* — Status colors (used in KPIs, satellites, map, alerts) — */
  --c-green:        #73bf69;  /* OK / available status */
  --c-green-light:  #96d98d;  /* OK status, light tone (KPI card values) */
  --c-red:          #f2495c;  /* error / unavailable status */
  --c-orange:       #ff9830;  /* warning status */
  --c-blue:         #5794f2;  /* info / loading */
  --c-light-blue:   rgb(146, 190, 240);  /* info, light tone */
  --c-blue-light:   #c0d8ff;  /* visibility counters */
  --c-yellow:       #fade2a;  /* form field pending to be applied */

  /* — Main buttons — */
  --btn-update-bg:   #aad8a4;  /* "Update" button */
  --btn-cancel-bg:   #f2495c;  /* "Update" button when it turns into "Cancel" */

  /* — Other accents — */
  --header-help-btn-border: rgba(255, 255, 255, 0.6);  /* header "?" button border */
  --header-help-btn-bg:     rgba(255, 255, 255, 0.08); /* header "?" button background */
  --header-help-btn-bg-hover: rgba(255, 255, 255, 0.18); /* header "?" button background on hover */
  --epoch-label-bg: rgba(87, 185, 242, 0.12);  /* epoch slider value background */

  /* — Map and skyplot colors (satellites) —
     These same colors are also used in the KPI cards and the
     satellite status grids, to keep everything consistent. */
  --sat-healthy:        #81D4FA;  /* satellite with healthy status (SiS OK) */
  --sat-healthy-text:   #012848;  /* text over the color above */
  --sat-unhealthy:      #C7CCD1;  /* satellite with unhealthy status */
  --sat-unhealthy-text: #3A4047;  /* text over the color above */
  --sat-has:            #81C784;  /* satellite with HAS correction available */
  --sat-has-text:       #0A2E0C;  /* text over the color above */
  --sat-tx-blue:        #ffffff;  /* "transmitting OSNMA" icon */
  --sat-tx-green:       #3274D9;  /* "transmitting OSNMA + ADKD4" icon */
  --sat-user-pin:       #FF7043;  /* user location marker */
  --sat-mask-line:      #00BFFF;  /* elevation mask line */

  /* — PDOP gauge fill colors (KPI bargauge, by percentage) — */
  --pdop-gauge-na:      #555555;  /* no data */
  --pdop-gauge-vhigh:   #73bf69;  /* >= 85% */
  --pdop-gauge-high:    #4caf50;  /* >= 75% */
  --pdop-gauge-mid:     #fade2a;  /* >= 50% */
  --pdop-gauge-low:     #ffb357;  /* >= 25% */
  --pdop-gauge-vlow:    #f2495c;  /* < 25% */

  /* — KPI sparkline (small history chart behind KPI values) — */
  --sparkline-line:     #7ebd6c;  /* line color */
  --sparkline-fill:     126, 189, 108;  /* fill color, as "r, g, b" (used with variable opacity) */
  --sparkline-dot:      #ffffff;  /* current-epoch marker dot */

  /* — Skyplot / geomap chart chrome (axes, legend, tooltip, map) — */
  --viz-tooltip-bg:        rgba(22, 23, 25, 0.97);  /* tooltip background */
  --viz-tooltip-border:    #2f3440;  /* tooltip border */
  --viz-tooltip-text:      #ccccdc;  /* tooltip text */
  --viz-tooltip-label:     #9fa7b3;  /* tooltip row label text */
  --viz-tooltip-title:     #ffffff;  /* tooltip title text */
  --viz-status-good:       #73bf69;  /* tooltip "good" status text (e.g. authenticated) */
  --viz-status-warn:       #ffb357;  /* tooltip "warn" status text (e.g. not authenticated) */
  --viz-status-neutral:    #ccccdc; /* tooltip neutral status text */
  --viz-axis-line:         #cad5e4;  /* skyplot axis lines/labels, geomap legend text */
  --viz-legend-inactive:   #444444;  /* geomap legend, unselected item color */
  --viz-map-area:          #445d7a;  /* geomap land area color */
  --viz-map-border:        #304d66;  /* geomap land border color */
  --viz-osnma-ring:        #ffffff;  /* white ring drawn around OSNMA-authenticated satellites (must be a 6-digit #rrggbb hex, not rgb/rgba) */
  --viz-marker-label:      #ffffff;  /* default text label color drawn on satellite markers */
  --viz-newloc-marker:     #ffe066;  /* temporary marker shown after double-clicking the map */


  --bg-tooltip:      #14192b;

  --border-weak:     rgba(204, 204, 220, 0.07);
  --border-medium:   rgba(204, 204, 220, 0.15);
  --border-strong:   rgba(204, 204, 220, 0.25);
  --border-selected: #57b9f2;

  --slider-track:        #3f4148;

  --brand-primary:   #3d71d9;
  --brand-accent:    #1f60c4;

  --c-green-dark:    #37872d;
  --c-red-dark:      #c4162a;
  --c-orange-light:  #ffb357;
  --c-sky:           #81d4fa;

  /* Cell backgrounds (satellite status grids) */
  --cell-green-bg:   linear-gradient(90deg, rgba(72, 158, 70, 1)   0%, rgba(106, 179, 84, 1) 100%);
  --cell-blue-bg:    linear-gradient(90deg, rgba(24, 85, 235, 1) 0%, rgba(58, 147, 239, 1) 100%);
  --cell-gray-bg:    linear-gradient(90deg, rgba(65, 65, 65, 1) 0%, rgba(85, 85, 85, 1) 100%);

  /* PDOP table row colors, based on value */
  --c-pdop-row-na:      linear-gradient(90deg, rgba(85, 85, 85, 0.30) 0%, rgba(85, 85, 85, 0.04)   100%);
  --c-pdop-row-vlow:    linear-gradient(90deg, rgba(133, 229, 133, 1) 0%, rgba(186, 237, 170, 1) 100%);
  --c-pdop-row-low:     linear-gradient(90deg, rgba(88, 199, 88, 1)   0%, rgba(140, 210, 120, 1) 100%);
  --c-pdop-row-mid:     linear-gradient(90deg, rgba(243, 255, 79, 1)  0%, rgba(254, 231, 124, 1)  100%);
  --c-pdop-row-high:    linear-gradient(90deg, rgba(255, 198, 52, 1)  0%, rgba(255, 173, 96, 1)  100%);
  --c-pdop-row-vhigh:   linear-gradient(90deg, rgba(224, 21, 20, 1)   0%, rgba(239, 47, 90, 1) 100%);
  --c-pdop-row-crit:    linear-gradient(90deg, rgba(129, 16, 14, 1)   0%, rgba(169, 19, 34, 1) 100%);

  /* Spacing and rounded corners */
  --gap:   2px 8px;
  --r:     2px;
  --r-lg:  8px;

  /* Form field label */
  --label-bg: linear-gradient(90deg, rgb(63, 111, 167) 0%, rgba(68,93,122, 1) 100%);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Form controls don't inherit font-family from the body by default */
input, button, select, textarea { font-family: inherit; }

html { font-size: 14px; }

body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: 'Montserrat', 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Scrollbar (optional cosmetic tweak) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }