/* ============================================================================
   MGIoT — Design Tokens 2028 · "Enterprise Slate"
   Single source of truth. Loads LAST (see index.html) so it wins the cascade
   over every prior redesign layer (--mg-*, --mg2-*, --mgo-*, --r27-*, --whs-*,
   --c-*, --d-*, --primary/--accent, plain --brand/--bg/--ink). Every legacy
   variable name below is aliased to a canonical --mg-* token so existing CSS/
   markup keeps working while the whole app re-themes from one place.
   ========================================================================== */

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

:root{
  /* ---- Canonical brand + accent -------------------------------------
     Softened palette: the earlier slate-700/800 ramp read as near-black on
     buttons/sidebar and was tiring on the eyes. This is a calmer steel-blue
     ramp — lighter and less harsh, while white text on --mg-brand still
     clears WCAG AA (~6:1). --*/
  --mg-brand:            #45699C; /* soft steel blue (~6:1 on white) */
  --mg-brand-dark:       #375684; /* hover / pressed */
  --mg-brand-hover:      #375684;
  --mg-brand-active:     #2E4A72;
  --mg-brand-50:         #EFF3F9;
  --mg-brand-100:        #DBE5F0;
  --mg-brand-200:        #BACBE0;

  --mg-accent:           #059669; /* emerald-600 */
  --mg-accent-hover:     #047857;
  --mg-accent-bg:        #ECFDF5;
  --mg-accent-border:    #A7F3D0;

  /* ---- Canonical surfaces / text ------------------------------------- */
  --mg-bg:               #F8FAFC;
  --mg-surface:          #FFFFFF;
  --mg-surface-soft:     #F8FAFC;
  --mg-surface-row:      rgba(248,250,252,.7);

  --mg-border:           #E6E8EA;
  --mg-border-soft:      #F1F5F9;
  --mg-border-strong:    #CBD5E1;

  --mg-text-strong:      #0F172A;
  --mg-text:             #0F172A;
  --mg-text-mid:         #334155;
  --mg-text-soft:        #475569;
  --mg-text-muted:       #64748B;
  --mg-text-faint:       #94A3B8;

  /* ---- Status --------------------------------------------------------*/
  --mg-success-text:     #047857;
  --mg-success-strip:    #059669;
  --mg-success-bg:       #ECFDF5;
  --mg-success-border:   #A7F3D0;

  --mg-warn-text:        #B45309;
  --mg-warn-strip:       #F59E0B;
  --mg-warn-bg:          #FFFBEB;
  --mg-warn-border:      #FDE68A;

  --mg-danger:           #DC2626;
  --mg-danger-text:      #B91C1C;
  --mg-danger-strip:     #DC2626;
  --mg-danger-bg:        #FEF2F2;
  --mg-danger-border:    #FCA5A5;

  --mg-info-text:        #1D4ED8;
  --mg-info-strip:       #2563EB;
  --mg-info-bg:          #EFF6FF;
  --mg-info-border:      #BFDBFE;

  --mg-neutral-bg:       #F1F5F9;
  --mg-neutral-border:   #E2E8F0;
  --mg-neutral-text:     #475569;

  /* ---- "--mg-blue" is the legacy name for "the one brand blue" (see
         mgiot-color-harmony.css) — many old rules read it expecting brand
         color, so it must resolve to the brand, not a separate accent.
         Real chart/info blue lives at --mg-chart-blue / --mg-info-strip. --*/
  --mg-blue:             var(--mg-brand);
  --mg-blue-2:           var(--mg-brand-dark);
  --mg-blue-soft:        var(--mg-brand-50);
  --mg-blue-line:        var(--mg-brand-100);
  --mg-blue-strong:      var(--mg-brand-dark);
  --mg-chart-blue:       #2563EB;
  --mg-cyan:             #0891B2;
  --mg-orange:           #EA580C;
  --mg-orange-soft:      #FFF7ED;
  --mg-orange-100:       #FFEDD5;
  --mg-orange-dark:      #9A3412;

  /* ---- Radius / shadow / motion ----------------------------------------*/
  --mg-radius-sm:        8px;
  --mg-radius-md:        12px;
  --mg-radius-lg:        16px;
  --mg-radius-xl:        20px;
  --mg-radius-pill:      999px;

  --mg-shadow-sm:        0 1px 2px rgba(15,23,42,.05);
  --mg-shadow-md:        0 8px 24px -12px rgba(15,23,42,.16);
  --mg-shadow-lg:        0 20px 48px -16px rgba(15,23,42,.22);
  --mg-ring:             #45699C;
  --mg-ring-soft:        rgba(69,105,156,.20);

  --t-fast:              150ms cubic-bezier(.2,.7,.2,1);
  --t:                   220ms cubic-bezier(.2,.7,.2,1);

  /* ---- Type scale (Plus Jakarta Sans, kept close to legacy sizes to
         avoid reflow across ~40 untouched views) --------------------------*/
  --mg-font-arabic:      'Plus Jakarta Sans', Tahoma, Arial, sans-serif;
  --mg-font-latin:       'Plus Jakarta Sans', -apple-system, Segoe UI, Arial, sans-serif;
  --mg-font-xs:          11px;
  --mg-font-sm:          12.5px;
  --mg-font-base:        13.5px;
  --mg-font-md:          14.5px;
  --mg-font-lg:          16px;
  --mg-font-xl:          20px;
  --mg-font-2xl:         26px;

  /* ================= Legacy namespace aliases ========================= */
  /* plain (mgiot-shell.css) */
  --bg:#F8FAFC; --card:#FFFFFF; --ink:#0F172A; --muted:#64748B; --line:#E6E8EA;
  --brand:var(--mg-brand); --brand2:var(--mg-accent); --nav:#375684; --nav2:#2E4A72;
  --red:#DC2626; --amber:#F59E0B; --green:#059669; --blue:#2563EB; --cyan:#0891B2;
  --gray:#94A3B8; --gray-border:#E2E8F0; --gray-soft:#F1F5F9; --dark:#0F172A; --dark-2:#1E293B; --dark-3:#334155;
  --cream:#F8FAFC; --cream-2:#F1F5F9; --header-h:64px; --hover:#F1F5F9;
  --shadow:var(--mg-shadow-md); --shadow-lg:var(--mg-shadow-lg); --shadow-md:var(--mg-shadow-md); --shadow-sm:var(--mg-shadow-sm);
  --shadow-primary:0 8px 20px rgba(69,105,156,.25); --shadow-ring:var(--mg-ring-soft); --shadow-x:var(--mg-shadow-sm);
  --radius-sm:var(--mg-radius-sm); --radius-md:var(--mg-radius-md); --radius-lg:var(--mg-radius-lg); --radius-xl:var(--mg-radius-xl); --radiu:var(--mg-radius-md);
  --border:var(--mg-border); --border-strong:var(--mg-border-strong); --border-focus:var(--mg-brand); --border-focu:var(--mg-brand);
  --sidebar-w:280px; --sidebar-w-sm:76px; --sidebar-width:280px; --mgiot-sidebar-width:280px; --mgiot-sidebar-gap:0px;
  --green-border:var(--mg-success-border); --green-soft:var(--mg-success-bg);
  --red-border:var(--mg-danger-border); --amber-border:var(--mg-warn-border); --amber-soft:var(--mg-warn-bg); --blue-border:var(--mg-blue-line); --blue-soft:var(--mg-blue-soft);
  --accent:var(--mg-accent); --accent-50:var(--mg-accent-bg);

  /* style.css scheme */
  --primary:var(--mg-brand); --primary-hover:var(--mg-brand-hover); --primary-active:var(--mg-brand-active);
  --primary-50:var(--mg-brand-50); --primary-100:var(--mg-brand-100); --primary-200:var(--mg-brand-200);
  --primary-dark:var(--mg-brand-dark); --primary-light:var(--mg-brand-50);
  --bg-soft:#F8FAFC; --surface:#FFFFFF; --surface-alt:#F8FAFC;
  --text:var(--mg-text); --text-soft:var(--mg-text-soft); --text-muted:var(--mg-text-muted); --text-on-primary:#FFFFFF;
  --page-bg:var(--mg-bg);

  /* card sizing (mgiot-design.css) */
  --card-radius:var(--mg-radius-lg); --card-shadow:var(--mg-shadow-sm); --card-border:var(--mg-border);

  /* --c-* (compact tokens seen in a couple of pages) */
  --c-brand:var(--mg-brand); --c-brand-line:var(--mg-border); --c-brand-soft:var(--mg-brand-50); --c-brand-strong:var(--mg-brand-dark);
  --c-danger:var(--mg-danger); --c-info:var(--mg-info-strip); --c-succe:var(--mg-success-strip); --c-warning:var(--mg-warn-strip);
  --c-ink:var(--mg-text); --c-ink-mid:var(--mg-text-mid); --c-ink-soft:var(--mg-text-soft); --c-ink-faint:var(--mg-text-faint);
  --compact:1;

  /* --mg-blue-* extra aliases some pages read directly */
  --mg-primary:var(--mg-brand); --mg-primary-2:var(--mg-accent); --mg-muted:var(--mg-text-muted); --mg-soft:var(--mg-brand-50);
  --mg-warning:var(--mg-warn-strip); /* was var(--mg-danger) — a variable that referenced itself, which the
     spec resolves to nothing, emptying every danger colour downstream */
  --mg-danger:var(--mg-danger-strip); --mg-succe:var(--mg-success-strip);
  --mg-page-bg:var(--mg-bg); --mg-page-canva:var(--mg-bg); --mg-card-edge:var(--mg-border);
  --mg-grad-brand:linear-gradient(135deg,#45699C,#375684); --mg-grad-hero:linear-gradient(135deg,#375684,#2E4A72); --mg-grad-soft:linear-gradient(135deg,#EFF3F9,#F8FAFC);
  --mg-ring-soft:rgba(69,105,156,.16); --mg-neutral-bg:#F1F5F9; --mg-neutral-border:#E2E8F0; --mg-neutral-text:#475569;

  /* --whs-* (warehouse suite) */
  --whs-brand:var(--mg-brand); --whs-brand-soft:var(--mg-brand-50); --whs-bg-soft:var(--mg-bg);
  --whs-ink:var(--mg-text); --whs-ink-mid:var(--mg-text-mid); --whs-ink-soft:var(--mg-text-soft); --whs-ink-faint:var(--mg-text-faint);
  --whs-line:var(--mg-border); --whs-line-soft:var(--mg-border-soft); --whs-ease:var(--t);
  --whs-radiu:var(--mg-radius-md); --whs-radius-sm:var(--mg-radius-sm); --whs-radius-pill:var(--mg-radius-pill);
  --whs-shadow:var(--mg-shadow-sm); --whs-shadow-lift:var(--mg-shadow-md);

  /* --r27-* (2027 pilot: Overview + shell) */
  --r27-brand:var(--mg-brand); --r27-brand-600:var(--mg-brand-dark); --r27-accent:var(--mg-accent);
  --r27-canva:var(--mg-bg); --r27-surface:var(--mg-surface); --r27-surface-2:var(--mg-surface-soft);
  --r27-line:var(--mg-border); --r27-line-2:var(--mg-border-soft);
  --r27-ink:var(--mg-text); --r27-ink-mid:var(--mg-text-mid); --r27-ink-soft:var(--mg-text-soft); --r27-ink-faint:var(--mg-text-faint);
  --r27-green:var(--mg-success-strip); --r27-green-bg:var(--mg-success-bg);
  --r27-amber:var(--mg-warn-strip); --r27-amber-bg:var(--mg-warn-bg);
  --r27-red:var(--mg-danger); --r27-red-bg:var(--mg-danger-bg);
  --r27-cyan:var(--mg-cyan); --r27-cyan-bg:#ECFEFF; --r27-violet:#7C3AED; --r27-violet-bg:#F5F3FF;
  --r27-r:var(--mg-radius-md); --r27-r-lg:var(--mg-radius-lg);
  --r27-sh:var(--mg-shadow-sm); --r27-sh-md:var(--mg-shadow-md); --r27-ease:var(--t);

  /* --mgo-* (professional theme) — base/light values; overridden again for dark below */
  --mgo-primary:var(--mg-brand); --mgo-primary-100:var(--mg-brand-100); --mgo-primary-200:var(--mg-brand-200);
  --mgo-primary-dark:var(--mg-brand-dark); --mgo-primary-soft:var(--mg-brand-50);
  --mgo-accent:var(--mg-accent); --mgo-accent-soft:var(--mg-accent-bg);
  --mgo-bg:var(--mg-bg); --mgo-surface:var(--mg-surface); --mgo-surface-2:var(--mg-surface-soft);
  --mgo-border:var(--mg-border); --mgo-border-2:var(--mg-border-strong);
  --mgo-text:var(--mg-text); --mgo-muted:var(--mg-text-muted); --mgo-soft:var(--mg-brand-50);
  --mgo-danger:var(--mg-danger); --mgo-warning:var(--mg-warn-strip); --mgo-succe:var(--mg-success-strip);
  --mgo-radiu:var(--mg-radius-md); --mgo-radius-sm:var(--mg-radius-sm); --mgo-radius-lg:var(--mg-radius-lg); --mgo-radius-xl:var(--mg-radius-xl);
  --mgo-shadow:var(--mg-shadow-sm); --mgo-shadow-sm:var(--mg-shadow-sm); --mgo-shadow-lg:var(--mg-shadow-lg); --mgo-sidebar:var(--mg-surface);

  /* --mg2-* (2026 theme) — base/light values; overridden again for dark below */
  --mg2-navy-1:#0F172A; --mg2-navy-2:#1E293B; --mg2-navy-3:#334155;
  --mg2-blue:var(--mg-blue); --mg2-blue-dark:var(--mg-blue-strong); --mg2-electric:var(--mg-accent); --mg2-cyan:var(--mg-cyan); --mg2-cyan-soft:#ECFEFF;
  --mg2-bg:var(--mg-bg); --mg2-bg-2:var(--mg-surface-soft); --mg2-surface:var(--mg-surface); --mg2-surface-2:var(--mg-surface-soft);
  --mg2-border:var(--mg-border); --mg2-border-2:var(--mg-border-strong);
  --mg2-text:var(--mg-text); --mg2-muted:var(--mg-text-muted); --mg2-faint:var(--mg-text-faint);
  --mg2-succe:var(--mg-success-strip); --mg2-warning:var(--mg-warn-strip); --mg2-danger:var(--mg-danger);
  --mg2-surface-2:var(--mg-surface-soft); --mg2-row-border:var(--mg-border); --mg2-row-hover:var(--mg-brand-50); --mg2-grid:var(--mg-border);
  --mg2-th-bg:var(--mg-surface-soft); --mg2-th-text:var(--mg-text-mid); --mg2-input-bg:var(--mg-surface);
  --mg2-grad-brand:var(--mg-grad-brand); --mg2-grad-navy:var(--mg-grad-hero);
  --mg2-shadow-sm:var(--mg-shadow-sm); --mg2-shadow-md:var(--mg-shadow-md); --mg2-shadow-lg:var(--mg-shadow-lg);
  --mg2-ring:var(--mg-ring-soft); --mg2-r-sm:var(--mg-radius-sm); --mg2-r:var(--mg-radius-md); --mg2-r-lg:var(--mg-radius-lg); --mg2-r-xl:var(--mg-radius-xl);

  /* orange family used by a few status chips */
  --orange:var(--mg-orange); --orange-50:var(--mg-orange-soft); --orange-100:var(--mg-orange-100); --orange-dark:var(--mg-orange-dark); --orange-soft:var(--mg-orange-soft);

/* ----------------------------------------------------------------------
   Moved here from the older stylesheets, which are the ones that still
   won these ten. Values are the ones the browser was already computing,
   read back from the live page rather than worked out from the text —
   an earlier attempt to derive them by load order got --mg-brand wrong.
   Identical in light and dark, so no theme override is needed.
   ---------------------------------------------------------------------- */
  --mg-border-2:  #d9e0ea;
  --mg-radius:    14px;
  --mg-shadow:    0 10px 30px rgba(16,24,40,.06);
  --mg-success:   #16a34a;
  --mg-surface-2: #f8fafc;
  --r27-canvas:   #FBFCFE;
  --r27-pill:     999px;
  --radius:       10px;
  --red-soft:     #FEF2F2;
  --whs-radius:   16px;
}

/* Base typography — applied globally, replaces per-file Tahoma/Arial rules */
html, body{ font-family: var(--mg-font-arabic); }
html[dir="ltr"] body, html[dir="ltr"] body *{ font-family: var(--mg-font-latin); }
body{ color: var(--mg-text); background: var(--mg-bg); font-size: var(--mg-font-base); }
h1,h2,h3,h4{ font-weight:700; letter-spacing:-.01em; }

/* ============================================================================
   Dark mode — scoped so it only applies once html[data-theme="dark"] is set,
   independent of whether the legacy mgiot-dark-2026.css sheet is enabled.
   ========================================================================== */
html[data-theme="dark"]{
  --mg-bg:#0F172A; --mg-surface:#1E293B; --mg-surface-soft:#1A2436; --mg-surface-row:rgba(30,41,59,.55);
  --mg-border:#334155; --mg-border-soft:#293548; --mg-border-strong:#475569;
  --mg-text-strong:#F8FAFC; --mg-text:#F1F5F9; --mg-text-mid:#CBD5E1; --mg-text-soft:#94A3B8; --mg-text-muted:#7C8CA6; --mg-text-faint:#64748B;
  --mg-brand-50:#1E293B; --mg-brand-100:#293548;
  --bg:var(--mg-bg); --card:var(--mg-surface); --ink:var(--mg-text); --muted:var(--mg-text-muted); --line:var(--mg-border); --hover:#243247;
  --surface:var(--mg-surface); --surface-alt:var(--mg-surface-soft); --bg-soft:var(--mg-surface-soft); --page-bg:var(--mg-bg);
  --text:var(--mg-text); --text-soft:var(--mg-text-soft); --text-muted:var(--mg-text-muted);
  --whs-bg-soft:var(--mg-bg); --whs-ink:var(--mg-text); --whs-line:var(--mg-border);
  --r27-canva:var(--mg-bg); --r27-surface:var(--mg-surface); --r27-surface-2:var(--mg-surface-soft); --r27-line:var(--mg-border); --r27-ink:var(--mg-text);

  /* Dark-only namespaces the legacy dark stylesheet defines (--d-*, --mg2-*, --mgo-*) */
  --d-bg:var(--mg-bg); --d-bg-2:#0B1424; --d-surface:var(--mg-surface); --d-surface-2:var(--mg-surface-soft); --d-surface-3:#243247;
  --d-border:var(--mg-border); --d-border-2:var(--mg-border-strong); --d-text:var(--mg-text); --d-text-strong:var(--mg-text-strong);
  --d-muted:var(--mg-text-muted); --d-faint:var(--mg-text-faint); --d-row-border:var(--mg-border); --d-row-hover:#243247; --d-input-bg:#1A2436;

  --mg2-bg:var(--mg-bg); --mg2-bg-2:#0B1424; --mg2-surface:var(--mg-surface); --mg2-surface-2:var(--mg-surface-soft);
  --mg2-border:var(--mg-border); --mg2-border-2:var(--mg-border-strong); --mg2-text:var(--mg-text); --mg2-muted:var(--mg-text-muted); --mg2-faint:var(--mg-text-faint);
  --mg2-row-border:var(--mg-border); --mg2-row-hover:#243247; --mg2-grid:var(--mg-border); --mg2-th-bg:var(--mg-surface-soft); --mg2-th-text:var(--mg-text-mid);
  --mg2-input-bg:#1A2436; --mg2-blue:var(--mg-blue); --mg2-blue-dark:var(--mg-blue-strong); --mg2-cyan:var(--mg-cyan); --mg2-cyan-soft:#0E2E36;
  --mg2-danger:var(--mg-danger); --mg2-succe:var(--mg-success-strip); --mg2-warning:var(--mg-warn-strip); --mg2-electric:var(--mg-accent);
  --mg2-navy-1:#2E4A72; --mg2-navy-2:#375684; --mg2-navy-3:#45699C; --mg2-grad-brand:linear-gradient(135deg,#45699C,0,0,.35); --mg2-shadow-md:0 12px 30px rgba(0,0,0,.42); --mg2-shadow-lg:0 24px 60px rgba(0,0,0,.55);

  --mgo-bg:var(--mg-bg); --mgo-surface:var(--mg-surface); --mgo-surface-2:var(--mg-surface-soft);
  --mgo-border:var(--mg-border); --mgo-border-2:var(--mg-border-strong); --mgo-text:var(--mg-text); --mgo-muted:var(--mg-text-muted);
  --mgo-primary:var(--mg-brand); --mgo-primary-100:var(--mg-brand-100); --mgo-primary-200:var(--mg-brand-200); --mgo-primary-dark:var(--mg-brand-dark); --mgo-primary-soft:var(--mg-brand-50);
  --mgo-accent:var(--mg-accent); --mgo-accent-soft:var(--mg-accent-bg); --mgo-danger:var(--mg-danger); --mgo-warning:var(--mg-warn-strip); --mgo-succe:var(--mg-success-strip);
  --mgo-radiu:var(--mg-radius-md); --mgo-radius-sm:var(--mg-radius-sm); --mgo-radius-lg:var(--mg-radius-lg); --mgo-radius-xl:var(--mg-radius-xl);
  --mgo-shadow:0 1px 2px rgba(0,0,0,.35); --mgo-shadow-sm:0 1px 2px rgba(0,0,0,.35); --mgo-shadow-lg:0 24px 60px rgba(0,0,0,.5); --mgo-sidebar:var(--mg-surface); --mgo-soft:var(--mg-brand-50);

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

/* ============================================================================
   Dark-mode fills for 2028 semantic "soft" tokens. The kept legacy dark sheet
   (mgiot-dark-2026.css) flips surfaces/text/brand-50 but NOT these newer
   success/warn/danger/neutral soft backgrounds + text, so chips & badges were
   washed-out (light) on dark cards. Scoped to [data-theme="dark"] — light mode
   untouched. Loads after the dark sheet, so it wins.
   ========================================================================== */
html[data-theme="dark"]{
  --mg-success-bg: rgba(16,185,129,.15);  --mg-success-text:#34D399;
  --mg-warn-bg:    rgba(245,158,11,.15);  --mg-warn-text:#FBBF24;
  --mg-danger-bg:  rgba(239,68,68,.15);   --mg-danger-text:#F87171;
  --mg-neutral-bg: rgba(148,163,184,.14);
  --mg-surface-soft: #0F172A;
  --mg-surface-row:  rgba(148,163,184,.06);
}