/* ============================================================
   MASAR SCADA — base.css
   Design tokens, reset, typography, splash & login
   Theme: clean modern white + blue
   ============================================================ */

:root{
  /* ============================================================
     THE STATE OF QATAR BRAND IDENTITY
     The palette the Ministry of Municipality works to, taken from
     the government brand guidelines and mapped onto the roles this
     console already used, so every page inherits it at once.

       Al Adaam  #8A1538   the national maroon — IDENTITY
       Dune      #A29475   the neutral it warms every surface with
       Skyline   #0D4261   deep blue — INTERACTION
       Palm      #129B82 · Sea #4194B3 · Sunrise #FDF39D
       Salmon    #DD7877 · Dark purple #511C3C · Green #5A895A
       Purple    #8067A4 · Yellow #E9C56B

     ONE RULE GOVERNS IT. Al Adaam is identity, never interaction:
     it carries the mark, section rules and the round-progress bar.
     Buttons, selection and focus use Skyline. On a wall-mounted
     screen a maroon fill sitting next to a red alarm is a hazard,
     so the red end of the spectrum belongs to alarms alone.
     ============================================================ */

  /* --- Skyline ramp: the interactive colour --- */
  --b50:#eaf1f6;  --b100:#d3e3ee; --b200:#b4d0e1; --b300:#8ab5ce;
  --b400:#5c93b4; --b500:#2c7a99; --b600:#0d4261; --b700:#0a3650;
  --b800:#072a3f; --b900:#051f2f; --b950:#031421;

  /* --- Al Adaam: the identity colour --- */
  --brand:#8a1538; --brand-2:#a81b45; --brand-ink:#40061b; --brand-bg:#fbe9ee;

  /* --- surfaces, warmed with Dune rather than cooled with grey --- */
  --bg:#f2efe8;
  --bg-grad:radial-gradient(1200px 600px at 78% -8%, #f7f4ed 0%, transparent 60%),
            radial-gradient(900px 500px at 4% 102%, #f5f1e9 0%, transparent 55%);
  --surface:#ffffff;
  --surface-2:#faf8f4;
  --surface-3:#f4f1eb;
  --line:#e7e1d6;
  --line-2:#dcd5c9;

  /* --- text --- */
  --ink:#1c1a17;
  --text:#3c362e;
  --muted:#6e6659;
  --dim:#8c8477;
  --on-brand:#ffffff;

  /* --- status: every one from the national secondary palette,
         darkened where it had to clear 4.5:1 on white --- */
  --ok:#0e7a66;      --ok-bg:#e4f5f0;      /* Palm */
  --warn:#8a6a15;    --warn-bg:#fbf3dc;    /* Yellow / Sunrise */
  --bad:#c5221f;     --bad-bg:#fce8e6;     /* alarms, and nothing else */
  --info:#2c7a99;    --info-bg:#e4f0f5;    /* Sea */
  --violet:#6b529a;  --violet-bg:#eee8f7;  /* Purple */
  --idle:#8c8477;    --idle-bg:#f2efe8;    /* Dune */

  /* --- layers ---
     Leaflet numbers its own panes 200-700 and, because the map
     container establishes no stacking context of its own, those panes
     compete with the app chrome at the root. That is how the vehicle
     inspector — opened at z-index 70 — ended up painting *behind* the
     map canvas: the panel was there, sized and visible, with the map
     drawn over it. map.css gives .leaflet-container `isolation:isolate`
     so its panes stay inside it, and every piece of chrome is placed on
     this one scale rather than on a number picked per component. --- */
  --z-map:0;        /* the map and everything Leaflet draws inside it */
  --z-hud:500;      /* overlays that sit on the map: tools, stats, legend */
  --z-panel:900;    /* the vehicle inspector */
  --z-drawer:920;   /* alarm drawer, mobile sidebar */
  --z-chat:940;     /* assistant dock and its launcher */
  --z-toast:1000;
  --z-modal:1100;

  /* --- shape: Material 3's scale --- */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:24px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(28,26,23,.06);
  --sh-2:0 1px 3px 1px rgba(28,26,23,.10), 0 1px 2px rgba(28,26,23,.14);
  --sh-3:0 4px 8px 3px rgba(28,26,23,.11), 0 1px 3px rgba(28,26,23,.16);
  --sh-4:0 8px 12px 6px rgba(28,26,23,.13), 0 4px 4px rgba(28,26,23,.2);
  --ring:0 0 0 3px rgba(13,66,97,.18);

  /* --- metrics --- */
  --side-w:242px; --side-w-min:66px; --top-h:60px;
  --f:'Roboto','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'Roboto Mono','JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  color-scheme:light;
  font-size:14px;
}

/* ============================================================
   MATERIAL SYMBOLS

   One icon set, called by name, instead of paths drawn by hand.
   `U.ms('local_shipping')` anywhere; add `fill` for the solid cut.
   ============================================================ */
.ms{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;
  line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;
  white-space:nowrap;word-wrap:normal;direction:ltr;vertical-align:middle;
  -webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.ms.fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
/* the stand-in when the symbol font never arrives — a line icon, drawn
   at the same box so nothing shifts */
.ms.alt{display:inline-grid;place-items:center;font-family:inherit}
.ms.alt svg{display:block}

/* ---------------- dark theme ---------------- */
body.dark{
  --bg:#12100d;
  --bg-grad:radial-gradient(1100px 620px at 80% -10%, #1d1a15 0%, transparent 60%),
            radial-gradient(820px 460px at 0% 100%, #1a1713 0%, transparent 55%);
  --surface:#1b1915;
  --surface-2:#211e1a;
  --surface-3:#2a2620;
  --line:#332e26;
  --line-2:#423b31;
  --brand:#e8899f; --brand-2:#f0a3b5; --brand-ink:#ffd9e1; --brand-bg:#3a1020;
  --ink:#f3efe7;
  --text:#ddd6ca;
  --muted:#a79e8f;
  --dim:#857d70;
  --ok-bg:#0d2b24;  --warn-bg:#2e2410; --bad-bg:#33151a;
  --info-bg:#0d2733; --violet-bg:#221a33; --idle-bg:#262119;
  --ok:#5fd6bb; --warn:#e9c56b; --bad:#f28b82; --info:#79bcd6; --violet:#b9a3e0; --idle:#a79e8f;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 3px rgba(0,0,0,.45), 0 8px 22px -8px rgba(0,0,0,.6);
  --sh-3:0 2px 8px rgba(0,0,0,.5), 0 20px 46px -14px rgba(0,0,0,.7);
  --ring:0 0 0 3px rgba(121,188,214,.24);
  color-scheme:dark;
}

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

/* `hidden` must win over a component's own display value — a bar
   declared display:flex ignores the browser's [hidden] rule and shows
   itself while empty. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  font-family:var(--f);
  background:var(--bg);
  background-image:var(--bg-grad);
  background-attachment:fixed;
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .3s ease,color .3s ease;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--b600);text-decoration:none}
h1,h2,h3,h4{color:var(--ink);font-weight:700;letter-spacing:-.015em;line-height:1.25}
b,strong{font-weight:650;color:var(--ink)}
table{border-collapse:collapse;width:100%}
svg{display:block}
::selection{background:var(--b200);color:var(--b950)}
body.dark ::selection{background:var(--b800);color:#fff}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.off{display:none !important}
.push{margin-left:auto}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.tiny{font-size:11px}
.sm-t{font-size:12px}
.center{text-align:center}
.nowrap{white-space:nowrap}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gap6{display:flex;gap:6px}.gap8{display:flex;gap:8px}.gap12{display:flex;gap:12px}
.col{display:flex;flex-direction:column}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}

/* ---------------- splash ---------------- */
#splash{
  position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  background:linear-gradient(155deg,#0a1730 0%,#122a52 45%,#0b1c3a 100%);
  transition:opacity .55s ease,visibility .55s;
}
#splash::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(700px 400px at 50% 30%, rgba(96,165,250,.16), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
}
#splash.gone{opacity:0;visibility:hidden}
.sp-logo{animation:spin-in .9s cubic-bezier(.2,.9,.3,1);line-height:0}

/* --- the operator's own logo -------------------------------------
   js/core/brand.js swaps the drawn mark for logo/image.jpeg once the
   file has decoded. A photographic logo is usually drawn on white, so
   it is given its own white plate rather than being laid straight on
   a tinted or dark surface. ---------------------------------------- */
[data-brand-mark]{line-height:0}
[data-brand-mark].has-logo{display:inline-grid;place-items:center}
.brand-img{display:block;object-fit:contain;background:#fff;border-radius:8px}
.sp-logo .brand-img{width:72px;height:72px;padding:7px;border-radius:18px;
  box-shadow:0 12px 30px rgba(15,30,53,.16)}
.lg-logo .brand-img{padding:3px;border-radius:10px;box-shadow:0 2px 8px rgba(15,30,53,.10)}
.side-mark .brand-img{padding:2px;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.28)}
@keyframes spin-in{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.sp-name{font-size:38px;font-weight:800;color:#fff;letter-spacing:5px;position:relative}
.sp-name span{color:var(--b400)}
.sp-sub{font-size:12.5px;color:#8fb4e8;letter-spacing:.4px;position:relative}
.sp-bar{width:260px;height:3px;background:rgba(255,255,255,.13);border-radius:4px;overflow:hidden;margin-top:10px;position:relative}
.sp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--b500),var(--b300));animation:spbar 2.1s cubic-bezier(.5,0,.2,1) forwards}
@keyframes spbar{0%{width:0}35%{width:52%}70%{width:78%}100%{width:100%}}
.sp-log{font-family:var(--mono);font-size:11px;color:#5f86bf;letter-spacing:.3px;position:relative;height:14px}

/* ---------------- login ---------------- */
#login{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:1.15fr .85fr;background:var(--surface)}
.lg-art{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,#0b1c3a 0%,#123566 55%,#0d2444 100%);
  display:flex;align-items:center;padding:64px;
}
.lg-art::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(96,165,250,.25), transparent 42%),
    radial-gradient(circle at 78% 78%, rgba(59,130,246,.20), transparent 45%);
}
.lg-art::after{
  content:'';position:absolute;inset:-10%;opacity:.16;
  background-image:
    linear-gradient(rgba(147,197,253,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147,197,253,.5) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 72%);
  animation:drift 40s linear infinite;
}
@keyframes drift{to{transform:translate(56px,56px)}}
.lg-art-in{position:relative;max-width:520px;color:#e7f0ff}
.lg-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:1.6px;color:var(--b300);
  border:1px solid rgba(147,197,253,.35);background:rgba(147,197,253,.10);padding:6px 12px;border-radius:100px;margin-bottom:22px}
.lg-art h1{font-size:44px;line-height:1.1;color:#fff;letter-spacing:-.03em;margin-bottom:16px}
.lg-art p{font-size:14.5px;line-height:1.7;color:#a9c6ee;max-width:440px}
.lg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px;padding-top:26px;border-top:1px solid rgba(147,197,253,.18)}
.lg-stats div{display:flex;flex-direction:column;gap:3px}
.lg-stats b{font-size:22px;color:#fff;font-family:var(--mono);font-weight:700}
.lg-stats span{font-size:11px;color:#8fb4e8;letter-spacing:.4px}
.lg-form{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--surface)}
.lg-card{width:100%;max-width:372px}
.lg-logo{display:flex;align-items:center;gap:12px;margin-bottom:34px}
.lg-logo div{display:flex;flex-direction:column;line-height:1.25}
.lg-logo b{font-size:17px;letter-spacing:1.5px;color:var(--ink)}
.lg-logo div span{font-size:11.5px;color:var(--muted)}
.lg-card h2{font-size:22px;margin-bottom:6px}
.lg-hint{font-size:12.5px;color:var(--muted);margin-bottom:24px}
.lg-foot{margin-top:20px;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:7px;justify-content:center}

@media(max-width:980px){ #login{grid-template-columns:1fr} .lg-art{display:none} }