/* SSSS UI Phase 3a — design tokens.
 * Mirror current implicit values; not changing them in Phase 3.
 * Phase 9 (visual modernization) is the only place these values should be revised.
 */
:root {
  /* Brand */
  --ssss-orange: #ffa328;

  /* Text colors */
  --ssss-text-dark: #000;
  --ssss-danger-red: red;

  /* Borders */
  --ssss-border-dark: #000;

  /* Typography */
  --ssss-font-base: 14px;
  --ssss-font-table: 14px;
  --ssss-font-section-title: 22px;

  /* Form-row geometry */
  --ssss-form-label-width: 20%;
  --ssss-form-input-width: 70%;
  --ssss-form-row-gap: 25px;

  /* Modal */
  --ssss-modal-max-height: 640px;
}

/* ----- Utility classes — Phase 3b -----
 * Namespaced ssss-* to avoid collision with Bootstrap 4 utilities.
 * Each class mirrors a specific high-frequency inline pattern; Phase 3c/3d
 * substitute the inline patterns with these.
 */

.ssss-text-brand        { color: var(--ssss-orange); }
.ssss-text-black        { color: var(--ssss-text-dark); }

.ssss-required-mark     { color: var(--ssss-danger-red); margin-left: 5px; }

.ssss-border-dark       { border: 1px solid var(--ssss-border-dark); }

.ssss-table-100         { width: 100%; font-size: var(--ssss-font-table); }

.ssss-form-row-label    {
  display: inline-block;
  width: var(--ssss-form-label-width);
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: var(--ssss-form-row-gap);
}
.ssss-form-row-input    {
  display: inline-block;
  width: var(--ssss-form-input-width);
  margin-bottom: var(--ssss-form-row-gap);
}

.ssss-modal-body-tall   { max-height: var(--ssss-modal-max-height); }

.ssss-section-title     {
  margin-left: 7px;
  font-size: var(--ssss-font-section-title);
}

.ssss-divider-orange    { border-right: 2px solid var(--ssss-orange); }

/* Phase 7g — WCAG 2.5.5 / Apple HIG 44×44 minimum tap target. */
.ssss-tap-44 {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Bump dropdown-item taps to 44px without altering visual paint padding. */
.navbar .dropdown-menu .dropdown-item {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Hamburger toggler and inline menu-hide button — original SVGs are 12×12. */
#navMenu .navbar-toggler,
#navShowMenu .navbar-text > div,
#navMenu .navbar-text > div {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Phase 7b — page intro paragraph (one-sentence what-does-this-page-do hint). */
.ssss-page-intro {
  margin: 0.5rem 0 1rem 0;
  padding: 0.5rem 0.75rem;
  background-color: #fafafa;
  border-left: 3px solid var(--ssss-orange);
  color: #333;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Phase 7c — glossary chip (clickable `?` next to a domain term). */
.ssss-glossary-chip {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  border-radius: 50%;
  background-color: var(--ssss-orange);
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
}
.ssss-glossary-chip:hover { background-color: #e8951f; text-decoration: none; }

/* Phase 8a — mobile guard banner.
   z-index 1040: above navbar fixed-top (1030), below modal-backdrop (1050) +
   modal (1055) so Bootstrap modals' bottom-aligned action buttons (Save/
   Cancel/Confirm in modal-footer) stay clickable when modal-content scrolls
   to bottom on mobile. Original 9999 covered modal-footer — see PR following
   8a code review. App doesn't use Bootstrap offcanvas (also defaults to 1040),
   so no collision. */
#ssss-mobile-guard {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: #222;
    color: #fff;
    border-top: 3px solid var(--ssss-orange, #ffa328);
    padding: 12px 16px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
    font-size: 14px;
}
#ssss-mobile-guard .ssss-mobile-guard-inner {
    max-width: 100%;
    margin: 0 auto;
}
#ssss-mobile-guard strong {
    display: block;
    margin-bottom: 4px;
}
#ssss-mobile-guard p {
    margin: 0 0 8px 0;
}
@media (max-width: 767.98px) {
    #ssss-mobile-guard { display: block; }
}
.ssss-mobile-continued #ssss-mobile-guard { display: none !important; }

/* ==========================================================================
 * W300 polish — friendly_id cell + mobile card view
 * ==========================================================================
 * Desktop: cname column renders 2-line (primary name + secondary dev_code).
 * IMEI column renders mono small + copy button.
 *
 * Mobile (<768px): DataTable hidden, parallel mobile-card list shown.
 * Tier classes defined for lifecycle states (normal / stale / offline).
 * Alarm tier classes (--critical / --high / --acked) defined as empty
 * placeholders here; a follow-up iteration populates them after PR #136
 * (W300 PR-C alarm path) merges.
 */

/* ---- Desktop cname / imei cell rendering ---- */
.ssss-w300-id-primary       { font-weight: 600; color: #111827; }
.ssss-w300-id-secondary     { font-size: 11px; color: #6b7280; letter-spacing: 0.4px; margin-top: 2px; }
.ssss-w300-imei             { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #9ca3af; }
.ssss-w300-imei-copy        {
    background: transparent; border: none;
    color: #9ca3af; padding: 4px 6px;
    cursor: pointer; min-height: 32px; min-width: 32px;
    margin-left: 4px;
}
.ssss-w300-imei-copy:hover  { color: #374151; }

/* ---- Mobile card container ---- */
.ssss-w300-mobile-cards     { display: none; padding: 12px 0; }

.ssss-w300-card {
    background: #fff; border-radius: 12px;
    margin-bottom: 12px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    border-left: 4px solid #e5e7eb;
}
.ssss-w300-card--normal     { border-left-color: #16a34a; }
.ssss-w300-card--stale      { border-left-color: #f59e0b; }
.ssss-w300-card--offline    { border-left-color: #6b7280; background: #fafafa; }
.ssss-w300-card--offline .ssss-w300-card-vitals { opacity: 0.55; }

/* placeholders for follow-up iteration — JS class strings already work */
.ssss-w300-card--critical   { border-left-color: #dc2626; }
.ssss-w300-card--high       { border-left-color: #ea580c; }
.ssss-w300-card--acked      { border-left-color: #ca8a04; }

.ssss-w300-card-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 12px 14px 6px 14px;
}
.ssss-w300-card-lastseen    {
    text-align: right; font-size: 12px; color: #6b7280; white-space: nowrap;
}
.ssss-w300-card-lastseen--stale     { color: #ea580c; font-weight: 600; }
.ssss-w300-card-lastseen--offline   { color: #6b7280; font-style: italic; }

.ssss-w300-card-vitals {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 8px 14px 10px 14px;
}
.ssss-vital-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px;
    background: #f9fafb; border: 1px solid #e5e7eb;
    border-radius: 999px; font-size: 12px; color: #374151;
}
.ssss-vital-pill .v         { font-weight: 600; color: #111827; }
.ssss-vital-pill .u         { font-size: 10px; color: #9ca3af; }

.ssss-w300-card-imei {
    padding: 8px 14px 10px 14px;
    border-top: 1px solid #f3f4f6;
    display: flex; align-items: center; justify-content: space-between;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; color: #9ca3af;
}

/* ---- Responsive toggle ---- */
@media (max-width: 767.98px) {
    .ssss-w300-desktop-table        { display: none !important; }
    .ssss-w300-desktop-table + .dataTables_wrapper,
    .dataTables_wrapper:has(.ssss-w300-desktop-table) { display: none !important; }
    .ssss-w300-mobile-cards         { display: block; }
}

/* =====================================================================
   PHASE 9 — DESIGN FOUNDATION (Track 0)  [APPEND-ONLY — do not edit
   the :root block at lines 5-28; these EXTEND it, never replace it.]
   Namespace: --ssss-*  · loaded after bootstrap.min.css (pageHead.php:6-7)
   ===================================================================== */
:root {
  /* ---- BRAND (re-expressed from the existing --ssss-orange:#ffa328) -- */
  --ssss-orange-500: #ffa328;            /* == existing --ssss-orange     */
  --ssss-orange-600: #e08c1c;            /* hover/active, ~10% darker      */
  --ssss-orange-400: #ffb757;            /* lighter tint for dark surfaces */
  --ssss-orange-700: #c2780f;            /* pressed                        */
  /* On-orange text: orange is a mid-tone -> DARK text clears 4.5:1.
     #1a1205 on #ffa328 = 9.29:1 ;  #000 on #ffa328 = 10.52:1 ;
     white on #ffa328 = 2.00:1 (NEVER put white text on orange).         */
  --ssss-on-orange: #1a1205;

  /* ---- SEMANTIC COLOR ROLES (status; light-context defaults) -------- */
  --ssss-success: #1e7d46;
  --ssss-warning: #9a6b00;
  --ssss-danger:  #c62828;               /* legacy --ssss-danger-red:red kept */
  --ssss-info:    #1565a0;
  --ssss-critical:    #6a0000;           /* black-rain / T8+ typhoon — beyond danger */
  --ssss-on-critical: #ffffff;
  --ssss-focus:   #ffa328;               /* focus ring uses brand orange   */

  /* RGB helpers (comma-separated) — Bootstrap 5.3 reads rgba(var(--bs-*-rgb),a)
     for tints/subtle bgs; these MUST match the hex tokens just above + the
     surface tokens below (one source of truth, no new colors introduced). */
  --ssss-success-rgb:     30, 125, 70;   /* == #1e7d46 */
  --ssss-warning-rgb:     154, 107, 0;   /* == #9a6b00 */
  --ssss-danger-rgb:      198, 40, 40;   /* == #c62828 */
  --ssss-info-rgb:        21, 101, 160;  /* == #1565a0 */
  --ssss-surface-0-rgb:   255, 255, 255; /* == #ffffff (body-bg)  */
  --ssss-on-surface-rgb:  22, 24, 28;    /* == #16181c (body-color) */

  /* ---- TYPE SCALE (base 16px; existing 14px tokens UNCHANGED) -------- */
  --ssss-fs-100: 0.75rem;   /* 12px  caption/meta            */
  --ssss-fs-200: 0.875rem;  /* 14px  == legacy body (compat) */
  --ssss-fs-300: 1rem;      /* 16px  NEW base body           */
  --ssss-fs-400: 1.25rem;   /* 20px  sub-heading             */
  --ssss-fs-500: 1.5rem;    /* 24px  section title           */
  --ssss-fs-600: 2rem;      /* 32px  page/hero h2            */
  --ssss-fs-700: 2.75rem;   /* 44px  landing hero h1         */
  --ssss-lh-tight: 1.2;
  --ssss-lh-base:  1.5;
  --ssss-fw-regular: 400;
  --ssss-fw-medium:  500;
  --ssss-fw-bold:    700;

  /* ---- SPACING SCALE (4px base grid) -------------------------------- */
  --ssss-space-0: 0;
  --ssss-space-1: 0.25rem;  /* 4px  */
  --ssss-space-2: 0.5rem;   /* 8px  */
  --ssss-space-3: 0.75rem;  /* 12px */
  --ssss-space-4: 1rem;     /* 16px */
  --ssss-space-5: 1.5rem;   /* 24px */
  --ssss-space-6: 2rem;     /* 32px */
  --ssss-space-7: 3rem;     /* 48px */
  --ssss-space-8: 4rem;     /* 64px */

  /* ---- RADIUS SCALE ------------------------------------------------- */
  --ssss-radius-xs: 4px;
  --ssss-radius-sm: 8px;
  --ssss-radius-md: 12px;   /* login card / panels                       */
  --ssss-radius-lg: 16px;
  --ssss-radius-pill: 999px;

  /* ---- ELEVATION / SHADOW RAMP (light context) ---------------------- */
  --ssss-elev-0: none;
  --ssss-elev-1: 0 1px 2px rgba(16,18,22,0.08), 0 1px 1px rgba(16,18,22,0.04);
  --ssss-elev-2: 0 2px 6px rgba(16,18,22,0.10), 0 1px 2px rgba(16,18,22,0.06);
  --ssss-elev-3: 0 8px 24px rgba(16,18,22,0.14), 0 2px 6px rgba(16,18,22,0.08);
  --ssss-elev-4: 0 16px 48px rgba(16,18,22,0.20), 0 4px 12px rgba(16,18,22,0.12);

  /* ---- MOTION TOKENS ------------------------------------------------ */
  --ssss-dur-instant: 80ms;
  --ssss-dur-fast:    160ms;
  --ssss-dur-base:    240ms;
  --ssss-dur-slow:    400ms;
  --ssss-ease-standard:   cubic-bezier(0.2, 0, 0, 1);     /* enter/move   */
  --ssss-ease-decelerate: cubic-bezier(0, 0, 0, 1);       /* incoming     */
  --ssss-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);     /* outgoing     */
  --ssss-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.05);  /* hero accent  */

  /* ---- SURFACE RAMP — LIGHT (dashboards/ops stay light) ------------- */
  --ssss-surface-0: #ffffff;   /* base page                    */
  --ssss-surface-1: #fafafa;   /* == legacy intro tint          */
  --ssss-surface-2: #f1f2f4;   /* raised card                   */
  --ssss-surface-3: #e7e9ec;   /* raised+                       */
  --ssss-on-surface:        #16181c;   /* body text  (17.8:1 on #fff)   */
  --ssss-on-surface-muted:  #565b62;   /* muted text (6.84:1 on #fff)   */
  --ssss-border:            #d4d7dc;
  --ssss-border-strong:     #b4b8bf;

  /* ---- GLASS TUNABLES (read by .ssss-glass; overridden in dark) ----- */
  --ssss-glass-bg:        rgba(255,255,255,0.62);  /* light fallback tint */
  --ssss-glass-bg-solid:  #f4f5f7;                 /* @supports-none / RT  */
  --ssss-glass-border:    rgba(255,255,255,0.55);
  --ssss-glass-blur:      14px;                    /* <=20px per perf budget */
  --ssss-glass-saturate:  140%;
  --ssss-glass-shadow:    var(--ssss-elev-3);
  --ssss-glass-text:      var(--ssss-on-surface);
}

/* ---- SURFACE RAMP — DARK + glass re-tint (public surfaces only) -----
   Applied only when an ancestor carries data-bs-theme="dark"
   (Track A sets it on the login + landing surfaces ONLY).              */
[data-bs-theme="dark"] {
  --ssss-surface-0: #0e1116;   /* near-black page base                  */
  --ssss-surface-1: #151a21;   /* elevated                              */
  --ssss-surface-2: #1c222b;   /* card                                  */
  --ssss-surface-3: #242c37;   /* raised+ (glass reads against this)    */
  --ssss-on-surface:        #f3f5f7;   /* 17.3:1 on surface-0           */
  --ssss-on-surface-muted:  #b3bac3;   /* 9.66:1 on surface-0           */
  --ssss-border:            #2a323d;
  --ssss-border-strong:     #3a4452;

  /* brand reads brighter on dark; on-orange text stays dark            */
  --ssss-orange-500: #ffb142;          /* lifted for dark legibility    */
  --ssss-on-orange:  #1a1205;          /* 10.26:1 on #ffb142            */

  /* status roles re-tuned for AA on dark surface-0                     */
  --ssss-success: #4cc98a;
  --ssss-warning: #ffce6a;
  --ssss-danger:  #ff6b6b;
  --ssss-info:    #5fb1ef;

  /* glass on dark: low-alpha light film over the elevated dark ramp    */
  --ssss-glass-bg:       rgba(36,44,55,0.55);   /* tint over surface-3  */
  --ssss-glass-bg-solid: #1c222b;               /* solid fallback       */
  --ssss-glass-border:   rgba(255,255,255,0.14);
  --ssss-glass-shadow:   0 16px 48px rgba(0,0,0,0.55);
  --ssss-glass-text:     var(--ssss-on-surface);
}

/* =====================================================================
   .ssss-glass — frosted panel for SMALL CHROME ONLY
   (login card #divLogin/#divCommunity, landing nav).
   NEVER place over <video>, data tables, or map tiles (perf constraint).
   ===================================================================== */
.ssss-glass {
  position: relative;
  background-color: var(--ssss-glass-bg-solid);   /* solid base first... */
  border: 1px solid var(--ssss-glass-border);
  border-radius: var(--ssss-radius-md);
  box-shadow: var(--ssss-glass-shadow);
  color: var(--ssss-glass-text);
  font-size: var(--ssss-fs-300);
  line-height: var(--ssss-lh-base);
}

/* Enable translucency ONLY where backdrop-filter is truly supported.    */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ssss-glass {
    background-color: var(--ssss-glass-bg);       /* ...upgrade to film  */
    -webkit-backdrop-filter: blur(var(--ssss-glass-blur))
                             saturate(var(--ssss-glass-saturate));
            backdrop-filter: blur(var(--ssss-glass-blur))
                             saturate(var(--ssss-glass-saturate));
  }
}

/* A11y: reduce transparency -> revert to solid panel, drop the blur.    */
@media (prefers-reduced-transparency: reduce) {
  .ssss-glass {
    background-color: var(--ssss-glass-bg-solid);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

/* A11y: reduced-motion collapses token durations to ~0.                 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ssss-dur-instant: 0.01ms;
    --ssss-dur-fast:    0.01ms;
    --ssss-dur-base:    0.01ms;
    --ssss-dur-slow:    0.01ms;
  }
  .ssss-glass { transition: none !important; }
}

/* Visible keyboard focus ring (:focus-visible). Brand-orange ring.      */
.ssss-glass :focus-visible,
.ssss-focus-ring:focus-visible {
  outline: 3px solid var(--ssss-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255,163,40,0.30);
}

/* 44px tap targets inside glass chrome (WCAG 2.5.5).                    */
.ssss-glass .btn,
.ssss-glass button,
.ssss-glass [role="button"] {
  min-height: 44px;
}

/* Low-FX escape hatch toggled by Track A's perf detector.               */
body.is-lowfx .ssss-glass {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background-color: var(--ssss-glass-bg-solid);
}

/* Brand-primary remap — neutralize Bootstrap blue, adopt --ssss-orange.
   --bs-btn-* variable theming is present in 5.2.0-beta1 (verified), so
   this works on the CURRENT vendored Bootstrap — no 5.3 upgrade needed. */
:root {
  --bs-primary: var(--ssss-orange-500);
  --bs-primary-rgb: 255, 163, 40;

  /* ---- Bridge extension (GATE 0 / T6) — additive, dormant ------------
     Map Bootstrap 5.3's remaining theme-color + surface variables onto the
     existing --ssss-* tokens so vendored components inherit the brand
     palette with ZERO page edits. No new hex literals here: every value
     points at a token already defined in the append-only :root blocks
     above. 5.3 also reads rgba(var(--bs-*-rgb),a) for subtle bgs/tints, so
     the matching --bs-*-rgb come from the --ssss-*-rgb helpers. */
  --bs-success:        var(--ssss-success);
  --bs-success-rgb:    var(--ssss-success-rgb);
  --bs-danger:         var(--ssss-danger);
  --bs-danger-rgb:     var(--ssss-danger-rgb);
  --bs-warning:        var(--ssss-warning);
  --bs-warning-rgb:    var(--ssss-warning-rgb);
  --bs-info:           var(--ssss-info);
  --bs-info-rgb:       var(--ssss-info-rgb);

  --bs-body-bg:        var(--ssss-surface-0);
  --bs-body-bg-rgb:    var(--ssss-surface-0-rgb);
  --bs-body-color:     var(--ssss-on-surface);
  --bs-body-color-rgb: var(--ssss-on-surface-rgb);
  --bs-border-color:   var(--ssss-border);
}
.btn-primary {
  --bs-btn-bg: var(--ssss-orange-500);
  --bs-btn-border-color: var(--ssss-orange-500);
  --bs-btn-color: var(--ssss-on-orange);          /* dark text on orange */
  --bs-btn-hover-bg: var(--ssss-orange-600);
  --bs-btn-hover-border-color: var(--ssss-orange-600);
  --bs-btn-hover-color: var(--ssss-on-orange);
  --bs-btn-active-bg: var(--ssss-orange-700);
  --bs-btn-active-border-color: var(--ssss-orange-700);
  --bs-btn-active-color: var(--ssss-on-orange);
  --bs-btn-focus-shadow-rgb: 255, 163, 40;
}

/* Brand the DataTables/Bootstrap pagination ACTIVE cell too (the .btn remap
   above only covered --bs-btn-*). 5.2.0-beta1 exposes --bs-pagination-* (verified
   bootstrap.css), and .active>.page-link reads them. NB: default active-color is
   #fff which FAILS on orange (~2:1) — dark on-orange clears AA (~9.3:1). */
.pagination {
  --bs-pagination-active-bg: var(--ssss-orange-500);
  --bs-pagination-active-border-color: var(--ssss-orange-500);
  --bs-pagination-active-color: var(--ssss-on-orange);
}

/* Path B only: minimal Bootstrap-chrome dark bridge for 5.2.0-beta1.
   Scoped to [data-bs-theme="dark"] -> zero effect on light pages.       */
[data-bs-theme="dark"] body {
  background-color: var(--ssss-surface-0);
  color: var(--ssss-on-surface);
}
[data-bs-theme="dark"] .form-control {
  background-color: var(--ssss-surface-2);
  border-color: var(--ssss-border);
  color: var(--ssss-on-surface);
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--ssss-on-surface-muted); }
[data-bs-theme="dark"] .modal-content {
  background-color: var(--ssss-surface-2);
  color: var(--ssss-on-surface);
  border-color: var(--ssss-border);
}
[data-bs-theme="dark"] .alert-warning {
  background-color: #3a2f12;
  border-color: #5a4a1c;
  color: var(--ssss-warning);
}
[data-bs-theme="dark"] .alert-warning .ssss-text-black { color: var(--ssss-on-surface); }

/* IoT usage guide */
.iotguide-pill{border:1px solid #ccc;margin:0 4px 4px 0;background:#fff}
.iotguide-pill.active{background:#e87b00;color:#fff;border-color:#e87b00}
.iotguide-pane{display:none}
.iotguide-pane.active{display:block}

/* =====================================================================
   Weather-safety widget (homepage step 1) — dormant until pageMaster
   wires it (Task 9). Tokens only, no new raw hex outside the
   --ssss-critical / --ssss-on-critical definitions above.
   ===================================================================== */
.ssss-weather              { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.ssss-weather--stale       { color: var(--ssss-warning); font-style: italic; }
.ssss-weather-badge        { font-size: 11px; }
.ssss-badge-critical       { background-color: var(--ssss-critical); color: var(--ssss-on-critical); }
.ssss-weather-banner       { padding: 6px 12px; text-align: center; font-weight: bold; }
.ssss-weather-banner a     { color: var(--ssss-on-critical); text-decoration: underline; }
.iotguide-steps{line-height:1.8}