/*
 * gw-brand.css — Gateway branding layer (Extreme Platform ONE design system).
 *
 * EVERY rule is scoped under html.gw-brand (+ .gw-theme-light / .gw-theme-dark).
 * Absent classes (Original mode) => NONE of this applies => factory look, untouched.
 *
 * Palette sourced from the Extreme Platform ONE Prototype Template (EP1/EDS):
 *   Accent purple:   #8981e5   (EP1 --primary)
 *   Accent soft:     #aba3fb   (EP1 --secondary-foreground)
 *   Accent deep:     #5f56c4   (derived: link-on-white, 5.8:1)
 *   Dark bg:         #14151e   (EP1 .dark --background)
 *   Dark surface:    #232534   (EP1 .dark --card)
 *   Dark surface-2:  #2d2f3e   (EP1 :root --card / sidebar)
 *   Success green:   #75bf63   (EP1 --chart-3)
 *   Error red:       #ed5f56   (EP1 --destructive)
 *   Text on dark:    #f8f8fb primary / #babcce muted (EP1 foreground/muted-foreground)
 *   Warning amber:   #e5b85c   (EP1 --status-warning)
 *
 * STATUS TOKEN PROVENANCE (2026-08-05 EDS alignment pass)
 *   The captured EP1 status set is: success #75bf63, warning #e5b85c,
 *   error #ed5f56, accent #8981e5. Those are used VERBATIM wherever they clear
 *   their contrast bar. Where they do not, the replacement preserves EP1 hue and
 *   saturation exactly and only walks lightness — never an eyeballed substitute.
 *   Bars applied: 4.5:1 for text, 3:1 for non-text indicators (WCAG 1.4.11).
 *   Strict backgrounds used for derivation: #f4f5f9 (light, darker than #ffffff)
 *   and #323448 (lightest dark surface in use).
 *
 *   NOT EP1: --gw-info / --gw-info-fill (#0a6ed1 / #58b0f6) and
 *   --feedback-orange-600. EP1 has no captured info or orange hue — its
 *   --status-info IS the accent purple #8981e5, which here would be
 *   indistinguishable from primary actions (deltaE 0 against --gw-accent).
 *   These blues are therefore deliberately retained, not brand-verified.
 *
 * The stock UI is variable-driven (assets/css/app-branding*.css defines
 * --primary-blue-*, --secondary-snow-*, --typography-midnight-*, --dialog-*-grey ...).
 * Sections 2L/2D re-point those vars INSIDE the gw scopes, which re-skins buttons,
 * dialogs, grids, menus and headers centrally. html.gw-brand.gw-theme-* out-ranks
 * the :root definitions on specificity, so load order does not matter.
 *
 * Sections:
 *   1.  GW design tokens (shared / light / dark)
 *   2L. native design-system remap — Light (Gateway)
 *   2D. native design-system remap — Dark (Gateway)
 *   3.  branded login (mode-independent dark card, EP1 colors)
 *   4.  shared chrome (buttons, tabs, links, side-nav, focus, scrollbar)
 *   5.  Light (Gateway) modernization (bg, cards, tables, status, alerts)
 *   6.  Dark (Gateway) modernization (de-harshing legacy app-dark.css)
 *   7.  layout fix (app-dark.css dead-space override)
 *   8.  Platform ONE™ header brand
 *   9.  v29 dark snapshot fixes (titled-border fieldsets, md toggles,
 *       ui-grid kebab menu, plain-table chrome, AFC planner, AP overview)
 */

/* =====================================================================
 * 1. GW DESIGN TOKENS
 * =================================================================== */

html.gw-brand {
  /* accents (mode-independent EP1 purple family) */
  --gw-accent:            #8981e5;
  --gw-accent-soft:       #aba3fb;
  --gw-accent-deep:       #5f56c4;
  --gw-accent-fg:         #1e1a46;   /* EP1 --primary-foreground, 4.9:1 on accent */

  /* radii / elevation (EP1) */
  --gw-radius:            4px;
  --gw-radius-card:       8px;
  --gw-radius-chip:       40px;

  /* login card is intentionally dark in every branded mode */
  --gw-login-bg:          #14151e;
  --gw-login-bg-hi:       #1e1f2a;
  --gw-login-card:        #232534;
  --gw-login-line:        rgba(153, 156, 179, 0.28);

  /* Header dropdown menus (profile / cloud-status / our Theme row) render on the
     stock dark --secondary-midnight-900 surface in BOTH modes, so their labels stay
     light even when the light-mode app bar is white. 10.4:1 on #2d2f3e.         */
  --gw-header-menu-fg:    rgba(255,255,255,0.87);

  /* legacy aliases (older injected snippets may still reference these) */
  --gw-purple:            var(--gw-accent);
  --gw-purple-hi:         var(--gw-accent-soft);
  --gw-purple-deep:       var(--gw-accent-deep);
  --gw-card:              var(--gw-login-card);
  --gw-bg-dark:           var(--gw-login-bg);
  --gw-line:              rgba(137, 129, 229, 0.30);
}

html.gw-brand.gw-theme-light {
  --gw-bg:                #f4f5f9;
  --gw-surface:           #ffffff;
  --gw-surface-2:         #fafafd;
  --gw-surface-hover:     #f4f3fc;
  --gw-surface-selected:  rgba(137, 129, 229, 0.14);
  --gw-border:            #e3e5ee;
  --gw-border-strong:     #c6c9d8;
  --gw-text-primary:      #23242f;
  --gw-text-secondary:    #4d4f63;
  --gw-text-muted:        #75778e;
  --gw-text-disabled:     #b0b2c4;
  --gw-link:              #5f56c4;
  --gw-btn-primary:       #6e66d6;   /* 4.6:1 with white label */
  --gw-btn-primary-hover: #8981e5;
  --gw-btn-primary-fg:    #ffffff;
  /* EP1 Platform ONE app bar is WHITE with dark text (factory is dark #0b121f).
     Tooltips/footer must NOT follow the header to white -> --gw-tooltip-bg.      */
  --gw-header-bg:         #ffffff;
  --gw-header-fg:         #23242f;   /* 15.8:1 on white */
  --gw-header-fg-muted:   #5f6175;   /* product name/version line, 6.3:1 */
  --gw-tooltip-bg:        #2d2f3e;   /* dark chip (was --gw-header-bg) */
  /* status text: EP1 hue+saturation preserved, lightness walked to clear 4.5:1
     on the strict light surface (--gw-bg #f4f5f9, darker than #ffffff)        */
  --gw-success:           #417c33;   /* from EP1 #75bf63, hue 108deg, 4.64:1 */
  --gw-warning:           #906817;   /* from EP1 #e5b85c, hue  40deg, 4.61:1 */
  --gw-error:             #c63d34;   /* EP1 hue 4deg, 4.68:1 - already compliant */
  --gw-info:              #0a6ed1;   /* no captured EP1 info hue - see note at top */
  /* status fills: captured EP1 values verbatim */
  --gw-success-fill:      #75bf63;   /* EP1 */
  --gw-warning-fill:      #e5b85c;   /* EP1 */
  --gw-error-fill:        #ed5f56;   /* EP1 */
  --gw-info-fill:         #58b0f6;   /* no captured EP1 info hue */
  --gw-focus-ring:        rgba(137, 129, 229, 0.35);
  --gw-shadow-1:          0 1px 3px rgba(30, 31, 42, 0.08), 0 1px 2px rgba(30, 31, 42, 0.06);
  --gw-shadow-2:          0 8px 24px rgba(30, 31, 42, 0.14);
  --gw-scrollbar-thumb:        #c6c9d8;
  --gw-scrollbar-thumb-hover:  #a9adc2;
}

html.gw-brand.gw-theme-dark {
  --gw-bg:                #14151e;
  --gw-surface:           #232534;
  --gw-surface-2:         #2d2f3e;
  --gw-surface-hover:     #323448;
  --gw-surface-selected:  rgba(137, 129, 229, 0.16);
  --gw-border:            #34374b;
  --gw-border-strong:     #4d4f63;
  --gw-text-primary:      #f8f8fb;
  --gw-text-secondary:    #babcce;
  --gw-text-muted:        #8e91a8;
  --gw-text-disabled:     #5f6175;
  --gw-link:              #aba3fb;
  --gw-btn-primary:       #8981e5;
  --gw-btn-primary-hover: #9c95ec;
  --gw-btn-primary-fg:    #1e1a46;
  --gw-header-bg:         #232534;
  --gw-header-fg:         rgba(255,255,255,0.87);
  --gw-header-fg-muted:   rgba(255,255,255,0.60);
  --gw-tooltip-bg:        #232534;   /* dark chip (same value as before) */
  /* status text: captured EP1 verbatim where it clears 4.5:1 on the strict
     dark surface (--gw-surface-hover #323448, lightest dark surface in use) */
  --gw-success:           #75bf63;   /* EP1, 5.46:1 */
  --gw-warning:           #e5b85c;   /* EP1, 6.59:1 */
  --gw-error:             #f07e76;   /* from EP1 #ed5f56 (4.01:1 fails) - hue 4deg, 4.62:1 */
  --gw-info:              #58b0f6;   /* no captured EP1 info hue - see note at top */
  /* status fills: captured EP1 values verbatim */
  --gw-success-fill:      #75bf63;   /* EP1 */
  --gw-warning-fill:      #e5b85c;   /* EP1 */
  --gw-error-fill:        #ed5f56;   /* EP1 */
  --gw-info-fill:         #58b0f6;   /* no captured EP1 info hue */
  --gw-focus-ring:        rgba(137, 129, 229, 0.45);
  --gw-shadow-1:          0 2px 4px rgba(15, 15, 21, 0.24);
  --gw-shadow-2:          0 8px 24px rgba(10, 10, 16, 0.45);
  --gw-scrollbar-thumb:        #3a3d52;
  --gw-scrollbar-thumb-hover:  #4d4f63;
}

/* =====================================================================
 * 2L. NATIVE DESIGN-SYSTEM REMAP — Light (Gateway)
 *     Teal/blue CTA family -> EP1 purple; soft hover/selection tints.
 * =================================================================== */

html.gw-brand.gw-theme-light {
  --primary-blue-800:      var(--gw-btn-primary);
  --primary-blue-600:      var(--gw-accent);
  --primary-blue-400:      var(--gw-btn-primary-hover);
  --cta-blue-600:          var(--gw-accent-deep);
  --cta-blue-400:          var(--gw-accent);
  --typography-blue-600:   var(--gw-link);
  --typography-blue-400:   var(--gw-accent);
  /* native token drives footer + tooltips + (factory) header. Our own .exol-header
     rule below wins for the header, so this must stay DARK or the footer and every
     native tooltip would go white-on-white when the header turned white.        */
  --secondary-midnight-900: var(--gw-tooltip-bg);    /* footer / tooltips */
  --secondary-snow-200:    #eef0f7;                  /* dashboard wash, hovers      */
  --grid-hover:            var(--gw-surface-hover);
  --input-border-grey:     #cfd2e0;
  --button-secondary:      #ecebf8;
  /* native feedback tokens -> EP1-derived status set (they render as text:
     #4f9e3f was 3.34:1 and #e05249 was 3.84:1 on white, both under 4.5:1)   */
  --feedback-green-600:    var(--gw-success);
  --feedback-red-600:      var(--gw-error);
  --feedback-orange-600:   #ef7d33;                  /* no captured EP1 orange */
  --feedback-yellow-600:   var(--gw-warning-fill);   /* EP1 #e5b85c */
}

/* =====================================================================
 * 2D. NATIVE DESIGN-SYSTEM REMAP — Dark (Gateway)
 *     Inverts the snow/midnight system onto EP1 dark surfaces.
 *     NOTE: --secondary-snow-000 is NOT remapped (it doubles as the
 *     white label color on primary buttons).
 * =================================================================== */

html.gw-brand.gw-theme-dark {
  --primary-blue-800:      var(--gw-btn-primary);
  --primary-blue-600:      var(--gw-accent);
  --primary-blue-400:      var(--gw-btn-primary-hover);
  --cta-blue-600:          var(--gw-accent-soft);
  --cta-blue-400:          var(--gw-accent-soft);
  --typography-blue-600:   var(--gw-link);
  --typography-blue-400:   var(--gw-accent-soft);

  --secondary-snow-100:    #1b1d29;
  --secondary-snow-200:    var(--gw-surface-2);      /* hovers, grid borders, washes */
  --secondary-snow-300:    #3a3d52;
  --secondary-snow-400:    var(--gw-surface-2);
  --secondary-snow-500:    var(--gw-border-strong);
  --secondary-snow-600:    var(--gw-text-secondary);

  --secondary-midnight-900: var(--gw-tooltip-bg);    /* footer / tooltips */
  --secondary-midnight-700: var(--gw-surface-2);
  --secondary-midnight-600: var(--gw-surface-hover);

  --typography-midnight-900: var(--gw-text-primary);
  --typography-midnight-500: #e2e3ee;
  --typography-midnight-400: var(--gw-text-secondary);
  --typography-midnight-300: var(--gw-text-muted);

  --dialog-header-grey:    var(--gw-surface-2);
  --dialog-footer-grey:    #1f2130;
  --dialog-header-close:   var(--gw-border-strong);
  --dialog-header-close-icn: var(--gw-text-secondary);
  --input-border-grey:     var(--gw-border-strong);
  --input-disabled-grey:   #2a2c3a;
  --button-secondary:      var(--gw-surface-hover);
  --button-primary-disabled: #3a3c4e;
  --button-primary-disabled-text: #6f7288;
  --grid-hover:            #2a2c3e;

  --feedback-green-600:    var(--gw-success);
  --feedback-red-600:      var(--gw-error);
  --feedback-orange-600:   #ff9a5c;                  /* no captured EP1 orange */
  --feedback-yellow-600:   var(--gw-warning-fill);   /* EP1 #e5b85c */
}

/* =====================================================================
 * 3. BRANDED LOGIN
 * The injected GW_LOGIN block in login.html supplies .gw-login-* elements;
 * they are hidden unless html.gw-brand is present. The card stays dark in
 * both branded modes (EP1 navy), so it uses the --gw-login-* tokens.
 * =================================================================== */
.gw-login-only { display: none; }
html.gw-brand .gw-login-only { display: block; }

/* page background + center the card */
html.gw-brand .exol-login {
  background: radial-gradient(120% 120% at 50% 0%, var(--gw-login-bg-hi) 0%, var(--gw-login-bg) 70%) !important;
}
/* turn the content column into an auto-height centered card (NOT full-height) */
html.gw-brand .exol-login .exol-login-content {
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  align-items: stretch !important;   /* children full-width => true left alignment */
  max-width: 520px;
  width: 92%;
  margin: auto;
  padding: 56px 56px 44px;
  background: var(--gw-login-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--gw-radius-card);
  box-shadow: 0 8px 32px rgba(0,0,0,0.50), 0 2px 8px rgba(0,0,0,0.30);
}
/* hide the factory pieces we replace */
html.gw-brand .exol-login .exol-login-content > img,
html.gw-brand .exol-login .exol-login-splash,
html.gw-brand .exol-login .exol-login-content-footer {
  display: none !important;
}

/* brand block — single centered Extreme logo (reference design) */
html.gw-brand .gw-login-brand { text-align: center; margin: 8px 0 44px; }
html.gw-brand .gw-login-logo  { width: 190px; height: auto; margin: 0 auto; display: block; }
/* legacy sub-brand rows (removed from markup; keep hidden if an old block lingers) */
html.gw-brand .gw-login-title,
html.gw-brand .gw-login-sub { display: none !important; }
html.gw-brand .gw-login-heading {
  color: rgba(255,255,255,0.92); font-size: 26px; font-weight: 400; line-height: 1.3;
  text-align: left; margin: 0 0 28px;
}

/* form: force a clean vertical stack regardless of Angular Material's flex layout */
html.gw-brand .exol-login-content-form {
  display: block !important;
  width: 100%;
  margin: 0 !important;              /* native rule pushes the form down 100px */
}
html.gw-brand .exol-login-content-form md-input-container {
  display: block !important;
  position: relative !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  min-height: 0 !important;
}
/* kill Material's spacer/animation chrome */
html.gw-brand .exol-login-content-form md-input-container .md-errors-spacer,
html.gw-brand .exol-login-content-form md-input-container ._md-char-counter { display: none !important; }
html.gw-brand .exol-login-content-form md-input-container .md-input-message-animation { margin: 0 !important; }

html.gw-brand .exol-login-content-form input,
html.gw-brand .exol-login-content-form input.md-input,
html.gw-brand .exol-login-content-form .form-control {
  display: block !important;
  position: static !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 48px !important;
  margin: 0 !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--gw-login-line) !important;
  border-radius: 6px !important;
  color: rgba(255,255,255,0.90) !important;
  padding: 0 14px 0 44px !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
html.gw-brand .exol-login-content-form input:focus {
  border-color: var(--gw-accent) !important;
  box-shadow: 0 0 0 3px rgba(137,129,229,0.25) !important;
  outline: none;
}
/* notched outline label — sentence case, sits in the border (reference style) */
html.gw-brand .exol-login-content-form md-input-container > label,
html.gw-brand .exol-login-content-form md-input-container .md-input-message-animation + label,
html.gw-brand .exol-login-content-form md-input-container label:not(.md-no-float) {
  position: absolute !important;
  top: -9px !important; bottom: auto !important; left: 12px !important;
  z-index: 3; pointer-events: none;
  background: var(--gw-login-card) !important; padding: 0 6px !important;
  color: var(--gw-text-secondary, #babcce) !important;
  font-size: 12px !important; font-weight: 400 !important;
  letter-spacing: 0.2px !important; text-transform: none !important;
  transform: none !important; width: auto !important;
}
/* no required-asterisk clutter (reference shows none) */
html.gw-brand .exol-login-content-form md-input-container label::after { display: none !important; }
/* leading material icon */
html.gw-brand .exol-login-content-form md-input-container::before {
  font-family: 'Material Icons'; position: absolute; left: 14px; top: 14px; z-index: 3;
  font-size: 19px; color: rgba(255,255,255,0.45); pointer-events: none;
}
html.gw-brand .exol-login-content-form md-input-container:nth-of-type(1)::before { content: 'mail_outline'; }
html.gw-brand .exol-login-content-form md-input-container:nth-of-type(2)::before { content: 'lock_outline'; }

/* Log In button — EP1 primary (purple fill, deep-indigo label, reference scale) */
html.gw-brand .exol-login .automation-login,
html.gw-brand .exol-login .btn-primary {
  width: 100% !important;
  height: 48px !important;
  max-height: 48px !important;
  background: var(--gw-accent) !important;
  border: none !important;
  color: var(--gw-accent-fg) !important;
  font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  border-radius: 6px !important; padding: 0 !important;
  margin-top: 8px;
  box-shadow: none !important;
}
html.gw-brand .exol-login .automation-login:hover,
html.gw-brand .exol-login .btn-primary:hover {
  background: var(--gw-accent-soft) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.30) !important;
}

/* footer link bar — quiet purple links, centered */
html.gw-brand .gw-login-links {
  margin-top: 32px; text-align: center;
  font-size: 13px; color: rgba(255,255,255,0.45);
}
html.gw-brand .gw-login-links a {
  color: var(--gw-accent-soft); text-decoration: none;
  padding: 0 10px; margin: 0;
}
html.gw-brand .gw-login-links a:hover { color: #ffffff; }
html.gw-brand .gw-login-links span { color: rgba(255,255,255,0.18); margin: 0; }

/* =====================================================================
 * 4. SHARED CHROME  (both branded modes)
 * =================================================================== */

/* primary buttons — EP1 fill (native .btn-primary is covered by the var
   remap; these catch Material raised buttons + legacy .exol-btn-primary) */
html.gw-brand.gw-theme-light .btn-primary,
html.gw-brand.gw-theme-dark .btn-primary,
html.gw-brand .exol-btn-primary,
html.gw-brand button.md-primary.md-raised,
html.gw-brand .md-button.md-primary.md-raised {
  background-color: var(--gw-btn-primary) !important;
  border-color: var(--gw-btn-primary) !important;
  color: var(--gw-btn-primary-fg) !important;
}
html.gw-brand.gw-theme-light .btn-primary:hover,
html.gw-brand.gw-theme-dark .btn-primary:hover,
html.gw-brand .exol-btn-primary:hover,
html.gw-brand button.md-primary.md-raised:hover {
  background-color: var(--gw-btn-primary-hover) !important;
  border-color: var(--gw-btn-primary-hover) !important;
  color: var(--gw-btn-primary-fg) !important;
}

/* header — EP1 app bar: flat surface + 2px accent rule */
html.gw-brand .main-header,
html.gw-brand .exol-header,
html.gw-brand md-toolbar.exol-header {
  background: var(--gw-header-bg) !important;
  background-color: var(--gw-header-bg) !important;
  border-bottom: 2px solid var(--gw-accent) !important;
  box-shadow: var(--gw-shadow-1) !important;
}

/* Header text / links / icons — follows --gw-header-fg, so it inverts with the bar.
   Stock app-common.css colors these via `.exol-header-toolbar i, span, a` with
   --typography-snow-100 (near-white), which must be overridden for the light bar.
   The header contains: hamburger + `dns` material-icon, cloud SVG (self-colored,
   left alone), notification bell, the username <h5> + caret, and our brand span. */
   The :not(.dropdown-menu *) guards matter: the profile menu, status menu and the
   theme row all live INSIDE .exol-header-toolbar but sit on a DARK surface
   (stock gives .header-user-menu / #profileMenu / .header-status-menu
   background:--secondary-midnight-900). Without the guard the white light-mode bar
   dragged their labels to #23242f — dark text on a dark menu. */
html.gw-brand .exol-header .automation-header-href-link:not(.dropdown-menu *),
html.gw-brand .exol-header h5,
html.gw-brand .exol-header-toolbar,
html.gw-brand .exol-header-toolbar a:not(.dropdown-menu *),
html.gw-brand .exol-header-toolbar span:not(.dropdown-menu *),
html.gw-brand .exol-header-toolbar i:not(.dropdown-menu *),
html.gw-brand .exol-header-toolbar .material-icons:not(.dropdown-menu *),
html.gw-brand .exol-header-toolbar .header-menu { color: var(--gw-header-fg) !important; }
html.gw-brand .exol-header .caret { border-top-color: var(--gw-header-fg) !important; }
/* product name / version sub-line under the username */
html.gw-brand .exol-header h5 > div:last-child { color: var(--gw-header-fg-muted) !important; }

/* Header dropdown menus keep the dark chip + light labels in BOTH modes, matching
   the stock surface they render on. Covers the profile menu, the cloud/status menu
   and our injected Theme row. rgba(255,255,255,.87) = 10.4:1 on #2d2f3e.        */
html.gw-brand .exol-header-toolbar .dropdown-menu,
html.gw-brand .exol-header-toolbar .dropdown-menu a,
html.gw-brand .exol-header-toolbar .dropdown-menu span,
html.gw-brand .exol-header-toolbar .dropdown-menu i,
html.gw-brand .exol-header-toolbar .dropdown-menu div,
html.gw-brand .exol-header-toolbar .dropdown-menu li > a,
html.gw-brand #profileMenu, html.gw-brand #profileMenu a, html.gw-brand #profileMenu span,
html.gw-brand .header-user-menu, html.gw-brand .header-user-menu a,
html.gw-brand .header-status-menu, html.gw-brand .header-status-menu div {
  color: var(--gw-header-menu-fg) !important;
}
/* Status dots inside the cloud menu keep their semantic color, but must use the
   -fill (EP1 verbatim) tokens, NOT --gw-success/--gw-error: this menu is dark in
   BOTH modes, and light mode's darkened text greens/reds read 2.62:1 / 2.59:1 on
   it. The fills are identical in both modes and clear 5.91:1 / 4.01:1.         */
html.gw-brand .header-status-menu .exol-status-green,
html.gw-brand .header-status-menu .exol-status-normal { color: var(--gw-success-fill) !important; }
html.gw-brand .header-status-menu .exol-status-red { color: var(--gw-error-fill) !important; }
html.gw-brand .header-status-menu .exol-status-grey { color: #a9adc2 !important; }

/* side-nav active rail + hover */
html.gw-brand .side-menu .parent-list-item.parentActive,
html.gw-brand .side-menu .menu-link.active,
html.gw-brand .root-menu .parentActive {
  box-shadow: inset 3px 0 0 0 var(--gw-accent) !important;
  background: var(--gw-surface-selected) !important;
}
html.gw-brand .side-menu .menu-link:hover { background: rgba(137,129,229,0.10) !important; }

/* active nav item text tint */
html.gw-brand .side-menu .parent-list-item.parentActive .menu-text,
html.gw-brand .side-menu .menu-link.active .menu-text {
  color: var(--gw-link) !important;
}

/* tabs — active color + EP1 ink bar */
html.gw-brand md-tabs .md-tab.md-active,
html.gw-brand md-tab-item.md-active,
html.gw-brand .nav-tabs > li.active > a {
  color: var(--gw-link) !important;
}
html.gw-brand md-tabs md-ink-bar { color: var(--gw-accent) !important; background: var(--gw-accent) !important; }
html.gw-brand .nav-tabs > li.active > a,
html.gw-brand .nav-tabs > li.active > a:hover,
html.gw-brand .nav-tabs > li.active > a:focus {
  background-color: var(--gw-surface) !important;
  color: var(--gw-link) !important;
  box-shadow: inset 0 -2px 0 0 var(--gw-accent) !important;
}
html.gw-brand .nav-tabs > li > a:hover { background-color: var(--gw-surface-hover); }

/* links + Material accents */
html.gw-brand a { color: var(--gw-link); }
html.gw-brand a:hover { color: var(--gw-accent); }
html.gw-brand .automation-header-href-link { color: var(--gw-link); }
html.gw-brand md-progress-linear .md-bar,
html.gw-brand .md-checkbox.md-checked .md-icon { background-color: var(--gw-accent) !important; }
html.gw-brand .md-checkbox.md-checked .md-icon { border-color: var(--gw-accent) !important; }
html.gw-brand md-progress-linear .md-container { background-color: var(--gw-surface-selected) !important; }

/* visible-but-calm keyboard focus */
html.gw-brand .btn:focus-visible,
html.gw-brand a:focus-visible,
html.gw-brand select:focus-visible,
html.gw-brand input:focus-visible,
html.gw-brand .md-button:focus-visible {
  outline: 2px solid var(--gw-focus-ring) !important;
  outline-offset: 1px;
}

/* scrollbars — slim, surface-matched; transparent track so the element's
   own background shows through (kills the white tracks in dark mode) */
html.gw-brand::-webkit-scrollbar,
html.gw-brand ::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
html.gw-brand::-webkit-scrollbar-track,
html.gw-brand ::-webkit-scrollbar-track,
html.gw-brand::-webkit-scrollbar-corner,
html.gw-brand ::-webkit-scrollbar-corner { background: transparent; }
html.gw-brand::-webkit-scrollbar-thumb,
html.gw-brand ::-webkit-scrollbar-thumb {
  background-color: var(--gw-scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid transparent;     /* inset look */
  background-clip: padding-box;
}
html.gw-brand::-webkit-scrollbar-thumb:hover,
html.gw-brand ::-webkit-scrollbar-thumb:hover {
  background-color: var(--gw-scrollbar-thumb-hover);
}
/* Firefox */
html.gw-brand,
html.gw-brand * { scrollbar-width: thin; scrollbar-color: var(--gw-scrollbar-thumb) transparent; }

/* status colors — EP1 feedback set (legacy hard greens/reds/yellows) */
html.gw-brand .exol-status-green,
html.gw-brand .exol-status-normal { color: var(--gw-success) !important; }
html.gw-brand .exol-status-yellow { color: var(--gw-warning) !important; }
html.gw-brand .exol-status-red    { color: var(--gw-error) !important; }
html.gw-brand .exol-status-grey   { color: var(--gw-text-muted) !important; }

/* badges / status pills — modern fills, dark text on light fills */
html.gw-brand .badge-success { background-color: var(--gw-success-fill) !important; color: #14301a !important; }
html.gw-brand .badge-warning { background-color: var(--gw-warning-fill) !important; color: #3d2c00 !important; }
/* #fff on EP1 #ed5f56 is only 3.30:1 — dark hue-matched label gives 4.60:1,
   and matches the dark-text-on-light-fill pattern of the other three badges  */
html.gw-brand .badge-danger  { background-color: var(--gw-error-fill)   !important; color: #4e0d08 !important; }
html.gw-brand .badge-info    { background-color: var(--gw-info-fill)    !important; color: #062a4a !important; }

/* unpinned-nav flyout (.header-menu-sidenav) — read as a real drawer, not a
   blended slab: hug the content (factory forces height:80%), crisp edge,
   elevation, rounded bottom corner */
html.gw-brand .header-menu-sidenav {
  height: auto !important;
  max-height: calc(100vh - 60px) !important;
  overflow-y: auto;
  padding-bottom: 56px;   /* room for the abs-positioned Help & Support / pin footer */
  border-radius: 0 0 var(--gw-radius-card) 0;
  box-shadow: var(--gw-shadow-2) !important;
}
html.gw-brand.gw-theme-dark .header-menu-sidenav {
  border: 1px solid var(--gw-border-strong);
  border-top: none;
  border-left: none;
  box-shadow: 16px 16px 40px rgba(10, 10, 16, 0.55) !important;
}
html.gw-brand.gw-theme-light .header-menu-sidenav {
  border: 1px solid var(--gw-border-strong);
  border-top: none;
  border-left: none;
}

/* tooltips (Bootstrap .tooltip + rail labels) — EP1 surface chip, not a black blob */
html.gw-brand .tooltip { font-family: inherit; }
html.gw-brand .tooltip.in { opacity: 1; }
html.gw-brand .tooltip .tooltip-inner {
  background: var(--gw-tooltip-bg) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(153, 156, 179, 0.28);
  border-radius: var(--gw-radius);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(10, 10, 16, 0.40);
}
/* arrows match the chip; rail (right) tooltips get breathing room from the icon */
html.gw-brand .tooltip.right  { margin-left: 9px; }
html.gw-brand .tooltip.right  .tooltip-arrow { border-right-color: var(--gw-tooltip-bg) !important; }
html.gw-brand .tooltip.left   .tooltip-arrow { border-left-color: var(--gw-tooltip-bg) !important; }
html.gw-brand .tooltip.top    .tooltip-arrow { border-top-color: var(--gw-tooltip-bg) !important; }
html.gw-brand .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--gw-tooltip-bg) !important; }

/* our injected theme <select> sizing */
html.gw-brand .gw-theme-select, .gw-theme-select { min-width: 150px; }

/* =====================================================================
 * 5. LIGHT (GATEWAY) MODERNIZATION
 *    Clean neutral canvas, white cards w/ soft elevation, readable tables.
 * =================================================================== */

html.gw-brand.gw-theme-light,
html.gw-brand.gw-theme-light body {
  background-color: var(--gw-bg) !important;
  color: var(--gw-text-secondary);
}
html.gw-brand.gw-theme-light .exol-main-content { background-color: var(--gw-bg); }

/* cards / panels / widgets */
html.gw-brand.gw-theme-light md-card,
html.gw-brand.gw-theme-light .panel,
html.gw-brand.gw-theme-light .exol-panel-default {
  background-color: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius-card);
  box-shadow: var(--gw-shadow-1);
}
html.gw-brand.gw-theme-light .exol-panel-default > .exol-panel-heading,
html.gw-brand.gw-theme-light .panel-heading {
  background-color: var(--gw-surface);
  color: var(--gw-text-primary);
  border-bottom: 1px solid var(--gw-border);
  border-radius: var(--gw-radius-card) var(--gw-radius-card) 0 0;
}
html.gw-brand.gw-theme-light .exol-panel-footer {
  background-color: var(--gw-surface-2);
  border-top: 1px solid var(--gw-border);
}

/* tables — clear header band, soft separators, purple-tinted hover/selection */
html.gw-brand.gw-theme-light .ui-grid-top-panel {
  background: var(--gw-surface-2) !important;
  color: var(--gw-text-primary);
}
html.gw-brand.gw-theme-light .ui-grid-header-cell {
  color: var(--gw-text-secondary);
  font-weight: 600;
}
html.gw-brand.gw-theme-light .ui-grid-header { border-bottom: 1px solid var(--gw-border-strong) !important; }
html.gw-brand.gw-theme-light .ui-grid-row:nth-child(odd) .ui-grid-cell,
html.gw-brand.gw-theme-light .ui-grid-row:nth-child(even) .ui-grid-cell {
  border-top: 1px solid var(--gw-border);
}
html.gw-brand.gw-theme-light .ui-grid-row:hover .ui-grid-cell { background-color: var(--gw-surface-hover) !important; }
html.gw-brand.gw-theme-light .ui-grid-row-selected,
html.gw-brand.gw-theme-light .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {
  background-color: var(--gw-surface-selected) !important;
  color: var(--gw-text-primary) !important;
}
html.gw-brand.gw-theme-light .exol-table-hover > tbody > tr:hover { background-color: var(--gw-surface-hover) !important; }

/* inputs */
html.gw-brand.gw-theme-light .form-control:focus,
html.gw-brand.gw-theme-light input[type="text"]:focus,
html.gw-brand.gw-theme-light input[type="password"]:focus,
html.gw-brand.gw-theme-light input[type="number"]:focus,
html.gw-brand.gw-theme-light input[type="email"]:focus,
html.gw-brand.gw-theme-light input[type="search"]:focus,
html.gw-brand.gw-theme-light textarea:focus {
  border: 1px solid var(--gw-accent) !important;
  box-shadow: 0 0 0 3px var(--gw-focus-ring) !important;
  outline: none;
}

/* modals — soft corners + EP1 elevation */
html.gw-brand.gw-theme-light .modal-content {
  border-radius: var(--gw-radius-card);
  border: 1px solid var(--gw-border);
  box-shadow: var(--gw-shadow-2);
}

/* alerts — pastel field + colored inset bar (modern hues).
   Body text is neutral (--gw-text-primary), so the 5px bar is the ONLY severity
   signal and must clear 3:1 (WCAG 1.4.11) against its own pastel field. The pale
   EP1 fills managed just 1.68–2.88:1 there, so the bar uses the darker status
   text token instead — same EP1 hue, 4.46–4.59:1.                            */
html.gw-brand.gw-theme-light .alert-danger  { background-color: #fdecea; box-shadow: var(--gw-error)   5px 0 0 0 inset; color: var(--gw-text-primary); }
html.gw-brand.gw-theme-light .alert-warning { background-color: #fdf3e0; box-shadow: var(--gw-warning) 5px 0 0 0 inset; color: var(--gw-text-primary); }
html.gw-brand.gw-theme-light .alert-success { background-color: #edf7ea; box-shadow: var(--gw-success) 5px 0 0 0 inset; color: var(--gw-text-primary); }
html.gw-brand.gw-theme-light .alert-info    { background-color: #e8f3fd; box-shadow: var(--gw-info)    5px 0 0 0 inset; color: var(--gw-text-primary); }

/* =====================================================================
 * 6. DARK (GATEWAY) MODERNIZATION
 *    Legacy app-dark.css ships harsh blacks (#050606 inputs, #090909
 *    selects, #262729 canvas, #430099 purple). Re-skin onto EP1 navy.
 * =================================================================== */

html.gw-brand.gw-theme-dark,
html.gw-brand.gw-theme-dark body {
  background-color: var(--gw-bg) !important;
  color: var(--gw-text-secondary);
}
html.gw-brand.gw-theme-dark .exol-main-content,
html.gw-brand.gw-theme-dark .exol-main-content-no-nav-dark { background-color: var(--gw-bg) !important; }
/* app-common paints the page content wrapper white */
html.gw-brand.gw-theme-dark .exol-container {
  background: var(--gw-bg) !important;
}
/* Angular Material md-content defaults to white; inherit the surface behind it */
html.gw-brand.gw-theme-dark md-content { background-color: transparent !important; }
html.gw-brand.gw-theme-dark .exol-page-header { color: var(--gw-text-primary) !important; }

/* cards / panels / widgets — elevated EP1 surfaces */
html.gw-brand.gw-theme-dark md-card,
html.gw-brand.gw-theme-dark .panel,
html.gw-brand.gw-theme-dark .exol-panel-default,
html.gw-brand.gw-theme-dark .exol-div-default,
html.gw-brand.gw-theme-dark .text-form-control-body {
  background-color: var(--gw-surface) !important;
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius-card);
  box-shadow: var(--gw-shadow-1);
  color: var(--gw-text-secondary);
}
html.gw-brand.gw-theme-dark .exol-panel-default > .exol-panel-heading,
html.gw-brand.gw-theme-dark .panel-heading {
  background-color: var(--gw-surface) !important;
  color: var(--gw-text-primary) !important;
  border-bottom: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-radius-card) var(--gw-radius-card) 0 0;
}
html.gw-brand.gw-theme-dark .exol-panel-footer {
  background-color: var(--gw-surface-2) !important;
  border-top: 1px solid var(--gw-border) !important;
}

/* dropdown menus / popovers / sidenav flyouts (white or #333 in legacy) */
html.gw-brand.gw-theme-dark .dropdown-menu,
html.gw-brand.gw-theme-dark .dd-area__content,
html.gw-brand.gw-theme-dark .header-menu-sidenav,
html.gw-brand.gw-theme-dark md-menu-content,
html.gw-brand.gw-theme-dark .md-select-menu-container md-select-menu,
html.gw-brand.gw-theme-dark .md-select-menu-container md-content {
  background-color: var(--gw-surface-2) !important;
  border: 1px solid var(--gw-border);
  box-shadow: var(--gw-shadow-2);
  color: var(--gw-text-secondary);
}
html.gw-brand.gw-theme-dark .dropdown-menu > li > a { color: var(--gw-text-secondary); }
html.gw-brand.gw-theme-dark .dropdown-menu > li > a:hover,
html.gw-brand.gw-theme-dark .dropdown-menu > li > a:focus {
  background-color: var(--gw-surface-hover) !important;
  color: var(--gw-text-primary);
}

/* text hierarchy on dark */
html.gw-brand.gw-theme-dark h1, html.gw-brand.gw-theme-dark h2,
html.gw-brand.gw-theme-dark h3, html.gw-brand.gw-theme-dark h4,
html.gw-brand.gw-theme-dark .exol-model-name { color: var(--gw-text-primary); }
html.gw-brand.gw-theme-dark pre,
html.gw-brand.gw-theme-dark .legendLabel { color: var(--gw-text-secondary) !important; }
html.gw-brand.gw-theme-dark .flot-x-axis,
html.gw-brand.gw-theme-dark .flot-y-axis { color: var(--gw-text-muted) !important; }
/* v60 — the footer "Terms" link is the one place the stock CSS uses a *snow* token as a
   TEXT colour: .app-footer-text-terms{color:var(--secondary-snow-100)}. Our dark remap
   turns snow-100 into a near-black surface (#1b1d29), which on the midnight-900 footer
   bar rendered at 1.1:1. Re-point the element instead of un-remapping the token —
   snow-100-as-a-surface is relied on elsewhere. Light theme leaves snow-100 near-white,
   so it is already legible there and needs no rule. */
html.gw-brand.gw-theme-dark .app-footer-text-terms { color: var(--gw-text-secondary) !important; }

/* inputs / selects — lift off pure black, visible borders, accent focus */
html.gw-brand.gw-theme-dark input[type="color"],
html.gw-brand.gw-theme-dark input[type="date"],
html.gw-brand.gw-theme-dark input[type="email"],
html.gw-brand.gw-theme-dark input[type="month"],
html.gw-brand.gw-theme-dark input[type="number"],
html.gw-brand.gw-theme-dark input[type="password"],
html.gw-brand.gw-theme-dark input[type="search"],
html.gw-brand.gw-theme-dark input[type="tel"],
html.gw-brand.gw-theme-dark input[type="text"],
html.gw-brand.gw-theme-dark input[type="time"],
html.gw-brand.gw-theme-dark input[type="url"],
html.gw-brand.gw-theme-dark input[type="week"],
html.gw-brand.gw-theme-dark textarea,
html.gw-brand.gw-theme-dark .input-text,
html.gw-brand.gw-theme-dark .form-control {
  background: #1b1d29 !important;
  border: 1px solid var(--gw-border-strong) !important;
  border-radius: var(--gw-radius) !important;
  color: var(--gw-text-primary) !important;
  box-shadow: none !important;
}
html.gw-brand.gw-theme-dark input:focus,
html.gw-brand.gw-theme-dark textarea:focus,
html.gw-brand.gw-theme-dark .input-text:focus,
html.gw-brand.gw-theme-dark .form-control:focus {
  border-color: var(--gw-accent) !important;
  box-shadow: 0 0 0 3px var(--gw-focus-ring) !important;
  outline: none;
}
html.gw-brand.gw-theme-dark select,
html.gw-brand.gw-theme-dark select:focus,
html.gw-brand.gw-theme-dark select.dropdown,
html.gw-brand.gw-theme-dark select.dropdown:active {
  background-color: #1b1d29 !important;
  border: 1px solid var(--gw-border-strong) !important;
  border-radius: var(--gw-radius) !important;
  color: var(--gw-text-primary) !important;
}
html.gw-brand.gw-theme-dark md-input-container .md-input {
  color: var(--gw-text-primary) !important;
  background-color: #1b1d29 !important;
}
html.gw-brand.gw-theme-dark md-input-container:not(.md-input-invalid).md-input-has-value label {
  color: var(--gw-text-muted) !important;
}
html.gw-brand.gw-theme-dark .form-control[disabled],
html.gw-brand.gw-theme-dark input[disabled],
html.gw-brand.gw-theme-dark select[disabled] {
  background: #20222e !important;
  color: var(--gw-text-disabled) !important;
  border-color: var(--gw-border) !important;
}

/* tables — flat rows on surface, soft separators, purple selection */
html.gw-brand.gw-theme-dark .ui-grid-top-panel {
  background: var(--gw-surface-2) !important;
  color: var(--gw-text-primary) !important;
}
html.gw-brand.gw-theme-dark .ui-grid-header-cell { color: var(--gw-text-secondary) !important; }
html.gw-brand.gw-theme-dark .ui-grid-row:nth-child(odd) .ui-grid-cell,
html.gw-brand.gw-theme-dark .ui-grid-row:nth-child(even) .ui-grid-cell,
html.gw-brand.gw-theme-dark .ui-grid-row:last-child .ui-grid-cell {
  background-color: var(--gw-surface) !important;
  border-top: 1px solid var(--gw-border) !important;
  color: var(--gw-text-secondary);
}
html.gw-brand.gw-theme-dark .ui-grid-row:hover .ui-grid-cell { background-color: var(--gw-surface-hover) !important; }
html.gw-brand.gw-theme-dark .ui-grid-row-selected,
html.gw-brand.gw-theme-dark .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {
  background-color: var(--gw-surface-selected) !important;
  color: var(--gw-text-primary) !important;
}
html.gw-brand.gw-theme-dark .ui-grid-viewport { background-color: var(--gw-surface) !important; }
html.gw-brand.gw-theme-dark .ui-grid-footer-panel,
html.gw-brand.gw-theme-dark .ui-grid-footer-info {
  background: var(--gw-bg) !important;
  color: var(--gw-text-secondary) !important;
  border-color: var(--gw-border) !important;
}
html.gw-brand.gw-theme-dark .ui-grid-menu .ui-grid-menu-inner {
  background: var(--gw-surface-2) !important;
  border: 1px solid var(--gw-border);
}
html.gw-brand.gw-theme-dark .exol-table-hover > tbody > tr:hover { background-color: var(--gw-surface-hover) !important; }
html.gw-brand.gw-theme-dark .ui-grid-row-static { background-color: var(--gw-surface-2) !important; }

/* modals / dialogs */
html.gw-brand.gw-theme-dark .modal-content,
html.gw-brand.gw-theme-dark md-dialog {
  background-color: var(--gw-surface) !important;
  border: 1px solid var(--gw-border-strong);
  border-radius: var(--gw-radius-card);
  box-shadow: var(--gw-shadow-2);
  color: var(--gw-text-secondary);
}

/* legacy harsh-purple interaction states -> EP1 accent */
html.gw-brand.gw-theme-dark .multiSelect > button {
  background-image: none !important;
  background-color: var(--gw-btn-primary) !important;
  border-color: var(--gw-btn-primary) !important;
  color: var(--gw-btn-primary-fg) !important;
}
html.gw-brand.gw-theme-dark .multiSelect > button:hover { background-color: var(--gw-btn-primary-hover) !important; }
html.gw-brand.gw-theme-dark .multiSelectItem:first-child,
html.gw-brand.gw-theme-dark .multiSelectItem:nth-child(2) {
  background: var(--gw-btn-primary) none !important;
  color: var(--gw-btn-primary-fg) !important;
}
html.gw-brand.gw-theme-dark .multiSelectItem:first-child:hover,
html.gw-brand.gw-theme-dark .multiSelectItem:nth-child(2):hover {
  background: var(--gw-btn-primary-hover) none !important;
  color: var(--gw-btn-primary-fg) !important;
}
html.gw-brand.gw-theme-dark .exol-wizard-toolbar-item.active,
html.gw-brand.gw-theme-dark .exol-progress .bar.done,
html.gw-brand.gw-theme-dark .exol-progress .circle.done,
html.gw-brand.gw-theme-dark .exol-progress .circle.done .label,
html.gw-brand.gw-theme-dark .exol-progress .circle.active .label {
  background: var(--gw-accent) !important;
  border-color: var(--gw-border-strong) !important;
  color: var(--gw-accent-fg) !important;
}

/* alerts — tinted dark fields instead of light pastels */
html.gw-brand.gw-theme-dark .alert-danger  { background-color: rgba(237, 95, 86, 0.14)  !important; box-shadow: var(--gw-error-fill)   5px 0 0 0 inset !important; color: var(--gw-text-primary) !important; border: unset; }
html.gw-brand.gw-theme-dark .alert-warning { background-color: rgba(229, 184, 92, 0.14) !important; box-shadow: var(--gw-warning-fill) 5px 0 0 0 inset !important; color: var(--gw-text-primary) !important; border: unset; }
html.gw-brand.gw-theme-dark .alert-success { background-color: rgba(117, 191, 99, 0.14) !important; box-shadow: var(--gw-success-fill) 5px 0 0 0 inset !important; color: var(--gw-text-primary) !important; border: unset; }
html.gw-brand.gw-theme-dark .alert-info    { background-color: rgba(88, 176, 246, 0.14) !important; box-shadow: var(--gw-info-fill)    5px 0 0 0 inset !important; color: var(--gw-text-primary) !important; border: unset; }

/* widget titles + tab labels (hardcoded #2b3952 / #24202b in app-common) */
html.gw-brand.gw-theme-dark .dashboard-widget-panel-heading { color: var(--gw-text-primary) !important; }
html.gw-brand.gw-theme-dark md-tabs .md-tab { color: var(--gw-text-secondary); }
html.gw-brand.gw-theme-dark md-tabs .md-tab[disabled] { color: var(--gw-text-disabled); }
html.gw-brand.gw-theme-dark md-tabs .md-tab.md-active { color: var(--gw-link); }
html.gw-brand.gw-theme-dark .nav-tabs > li > a { color: var(--gw-text-secondary); }
html.gw-brand.gw-theme-dark .dashboard-widget-header-button,
html.gw-brand.gw-theme-dark .dashboard-widget-header-button:hover,
html.gw-brand.gw-theme-dark .dashboard-widget-header-button:active { color: var(--gw-text-secondary) !important; }

/* dark inputs: app-common pins -webkit-text-fill-color to near-black */
html.gw-brand.gw-theme-dark .form-control,
html.gw-brand.gw-theme-dark input,
html.gw-brand.gw-theme-dark textarea {
  -webkit-text-fill-color: var(--gw-text-primary) !important;
}

/* selected rail icon chip (app-common: #e9e8ee !important) -> purple tint */
html.gw-brand.gw-theme-dark md-menu-item > menu-link > a.md-button.md-icon-button.selected,
html.gw-brand.gw-theme-dark md-menu-item > menu-icon > a.md-button.md-icon-button.selected,
html.gw-brand.gw-theme-dark md-menu-item > menu-toggle > a.md-button.md-icon-button.selected,
html.gw-brand.gw-theme-dark md-sidenav.exol-sidenav .selected,
html.gw-brand.gw-theme-dark md-sidenav.exol-sidenav-small .selected {
  background-color: var(--gw-surface-selected) !important;
  color: var(--gw-accent-soft) !important;
}

/* Highcharts (SVG) — re-skin onto card surface. Highcharts paints colors as
   inline styles/attrs; fill/stroke with !important out-rank them. */
html.gw-brand.gw-theme-dark .highcharts-background { fill: var(--gw-surface) !important; }
html.gw-brand.gw-theme-dark .highcharts-plot-background,
html.gw-brand.gw-theme-dark .highcharts-plot-border { fill: transparent !important; }
html.gw-brand.gw-theme-dark .highcharts-root text,
html.gw-brand.gw-theme-dark .highcharts-axis-labels text,
html.gw-brand.gw-theme-dark .highcharts-legend-item text,
html.gw-brand.gw-theme-dark .highcharts-axis-title,
html.gw-brand.gw-theme-dark .highcharts-title {
  fill: var(--gw-text-secondary) !important;
  color: var(--gw-text-secondary) !important;
}
/* §6a v60 — Highcharts renders its legend TWICE: an SVG <g class="highcharts-legend-item">
   carrying only the colour swatch <rect>, plus a parallel HTML overlay
   div.highcharts-legend > … > div.highcharts-legend-item > span carrying the *text*
   (legend useHTML). The SVG rules above never match that span, so on 10.19.x the
   labels kept their inline color:rgb(51,51,51) — 1.2:1 on the dark card. Scope to
   div. so we only hit the HTML half; !important out-ranks the inline style. */
html.gw-brand.gw-theme-dark div.highcharts-legend-item,
html.gw-brand.gw-theme-dark div.highcharts-legend-item span,
html.gw-brand.gw-theme-dark .highcharts-container div.highcharts-legend span {
  color: var(--gw-text-secondary) !important;
}
/* a legend entry for a toggled-off series must stay visibly *dimmer* than an active
   one, but still legible — don't let the rule above erase that distinction */
html.gw-brand.gw-theme-dark div.highcharts-legend-item-hidden,
html.gw-brand.gw-theme-dark div.highcharts-legend-item-hidden span {
  color: var(--gw-text-muted) !important;
}
html.gw-brand.gw-theme-dark .highcharts-grid-line { stroke: rgba(153, 156, 179, 0.16) !important; }
/* JS-painted pale series area fills glare on dark surfaces */
html.gw-brand.gw-theme-dark .highcharts-area { fill-opacity: 0.22 !important; }
html.gw-brand.gw-theme-dark .highcharts-axis-line,
html.gw-brand.gw-theme-dark .highcharts-tick { stroke: rgba(153, 156, 179, 0.32) !important; }
html.gw-brand.gw-theme-dark .highcharts-button-box { fill: transparent !important; stroke: transparent !important; }
html.gw-brand.gw-theme-dark .highcharts-button-symbol { stroke: var(--gw-text-secondary) !important; }
html.gw-brand.gw-theme-dark .highcharts-contextbutton:hover .highcharts-button-box { fill: var(--gw-surface-hover) !important; }
html.gw-brand.gw-theme-dark .highcharts-menu {
  background: var(--gw-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  box-shadow: var(--gw-shadow-2) !important;
}
html.gw-brand.gw-theme-dark .highcharts-menu-item { color: var(--gw-text-secondary) !important; }
html.gw-brand.gw-theme-dark .highcharts-menu-item:hover {
  background: var(--gw-surface-hover) !important;
  color: var(--gw-text-primary) !important;
}

/* left side rail (app-common forces white bg + near-black icons) */
html.gw-brand.gw-theme-dark md-sidenav > md-toolbar,
html.gw-brand.gw-theme-dark md-sidenav > md-toolbar.md-default-theme {
  background-color: var(--gw-surface) !important;
  color: var(--gw-text-primary) !important;
}
html.gw-brand.gw-theme-dark md-sidenav.exol-sidenav-small,
html.gw-brand.gw-theme-dark md-sidenav.md-closed.md-sidenav-right.exol-sidenav-small,
html.gw-brand.gw-theme-dark md-sidenav.md-closed.md-sidenav-left.exol-sidenav-small {
  background: var(--gw-surface) !important;
  border: 1px solid var(--gw-border) !important;
  box-shadow: var(--gw-shadow-1) !important;
}
html.gw-brand.gw-theme-dark md-sidenav.exol-sidenav-small .md-button {
  color: var(--gw-text-secondary);
  box-shadow: none !important;
}
/* app-dark.css draws a purple wedge (:before border triangle) on rail hover */
html.gw-brand.gw-theme-dark md-sidenav a.md-button:not([disabled]).md-icon-button:hover::before,
html.gw-brand.gw-theme-dark md-sidenav .md-button:not([disabled]).md-icon-button:hover::before {
  content: none !important;
  border: 0 !important;
  display: none !important;
}
html.gw-brand.gw-theme-dark md-sidenav .md-button:hover { background: var(--gw-surface-hover) !important; }
html.gw-brand.gw-theme-dark .side-menu,
html.gw-brand.gw-theme-dark .header-menu-sidenav-submenu-item,
html.gw-brand.gw-theme-dark .nav-sub-menu-item { color: var(--gw-text-secondary); }

/* expandable nav groups — app-common paints .menu-toggle-list white (+#666
   icons); app-dark adds a white inset glow. Both killed here. */
html.gw-brand.gw-theme-dark .menu-toggle-list {
  background-color: #1b1d29 !important;
  border-top-color: var(--gw-border) !important;
  border-bottom-color: var(--gw-border) !important;
  box-shadow: none !important;
}
html.gw-brand.gw-theme-dark .menu-toggle-list menu-link .md-button,
html.gw-brand.gw-theme-dark .menu-toggle-list menu-icon .md-button.md-icon-button {
  color: var(--gw-text-secondary) !important;
}

/* flyout expanded submenu — bootstrap .well ships light #f8fafb */
html.gw-brand.gw-theme-dark .well {
  background-color: #1b1d29 !important;
  border-color: var(--gw-border) !important;
  color: var(--gw-text-secondary);
  box-shadow: none;
}
html.gw-brand.gw-theme-dark .header-menu-sidenav-submenu { background-color: #1b1d29 !important; }
html.gw-brand.gw-theme-dark .header-menu-sidenav-submenu-item { color: var(--gw-text-secondary) !important; }
html.gw-brand.gw-theme-dark .header-menu-sidenav-submenu-item:hover {
  background: var(--gw-surface-hover) !important;
  color: var(--gw-text-primary) !important;
}
html.gw-brand.gw-theme-dark .header-menu-sidenav-item { color: var(--gw-text-secondary) !important; }
html.gw-brand.gw-theme-dark .header-menu-sidenav-item.md-focused,
html.gw-brand.gw-theme-dark .header-menu-sidenav .md-button.md-focused {
  background: var(--gw-surface-hover) !important;
  color: var(--gw-text-primary) !important;
}

/* workflow designer — canvas consumes --primary-blue-600 (remapped accent):
   keep nodes/icons, put the canvas on the dark page bg */
html.gw-brand.gw-theme-dark .workflow-bg { background: var(--gw-bg) !important; }
html.gw-brand.gw-theme-dark .workflowaccordion {
  background-color: var(--gw-surface-2) !important;
  color: var(--gw-text-primary) !important;
  border-color: var(--gw-border) !important;
}
html.gw-brand.gw-theme-dark .workflowaccordion.active { background-color: var(--gw-surface-hover) !important; }
html.gw-brand.gw-theme-dark .workflowaccordionPanel {
  background-color: var(--gw-surface) !important;
  color: var(--gw-text-secondary) !important;
}
html.gw-brand.gw-theme-dark md-autocomplete { background: transparent !important; }
html.gw-brand.gw-theme-dark md-autocomplete md-autocomplete-wrap { box-shadow: none !important; }

/* plain HTML tables (exol-table-*; the grids elsewhere are ui-grid) */
html.gw-brand.gw-theme-dark table.exol-table-hover,
html.gw-brand.gw-theme-dark .exol-table-white-shadow {
  background-color: var(--gw-surface) !important;
  box-shadow: var(--gw-shadow-1) !important;
  color: var(--gw-text-secondary) !important;
}
html.gw-brand.gw-theme-dark table.exol-table-hover th,
html.gw-brand.gw-theme-dark table.exol-table-hover td,
html.gw-brand.gw-theme-dark .exol-table-white-shadow th,
html.gw-brand.gw-theme-dark .exol-table-white-shadow td {
  border-color: var(--gw-border) !important;
  color: var(--gw-text-secondary) !important;
}
html.gw-brand.gw-theme-dark table.exol-table-hover thead th,
html.gw-brand.gw-theme-dark .exol-table-white-shadow thead th {
  background: var(--gw-surface-2) !important;
  color: var(--gw-text-primary) !important;
}

/* default buttons ship black text (Logs "Change", License "Synchronize Now") */
html.gw-brand.gw-theme-dark .btn-default {
  background-color: var(--gw-surface-hover) !important;
  border-color: var(--gw-border-strong) !important;
  color: var(--gw-text-primary) !important;
}
html.gw-brand.gw-theme-dark .btn-default:hover,
html.gw-brand.gw-theme-dark .btn-default:focus {
  background-color: var(--gw-border-strong) !important;
  color: var(--gw-text-primary) !important;
}

/* Applications page: link-blue names too dim on dark */
html.gw-brand.gw-theme-dark .application-panel-name { color: var(--gw-link) !important; }

/* AFC planning tool map text control */
html.gw-brand.gw-theme-dark .gcd-txt-control {
  background: #1b1d29 !important;
  color: var(--gw-text-primary) !important;
  border: 1px solid var(--gw-border-strong) !important;
}

/* misc legacy black panels (floor planner / popovers) -> surfaces */
html.gw-brand.gw-theme-dark .app-popover-fw,
html.gw-brand.gw-theme-dark .wall-info-popover-fw,
html.gw-brand.gw-theme-dark .wall-popover-fw,
html.gw-brand.gw-theme-dark .popover-title,
html.gw-brand.gw-theme-dark .badge-legend-panel,
html.gw-brand.gw-theme-dark .search-box-panel,
html.gw-brand.gw-theme-dark .floor-maps-view-panel,
html.gw-brand.gw-theme-dark .floor-filters-panel,
html.gw-brand.gw-theme-dark .floor-options-panel,
html.gw-brand.gw-theme-dark .floor-floors-panel,
html.gw-brand.gw-theme-dark .floor-edit-tools {
  background-color: var(--gw-surface-2) !important;
  border-color: var(--gw-border-strong) !important;
}
html.gw-brand.gw-theme-dark .popover-content button {
  background-color: var(--gw-surface-hover) !important;
  color: var(--gw-text-primary) !important;
}
html.gw-brand.gw-theme-dark .exol-nav-menu { background-color: var(--gw-surface) !important; }
html.gw-brand.gw-theme-dark .exol-breadcrumb {
  background-color: var(--gw-surface) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-radius);
}
html.gw-brand.gw-theme-dark .exol-trace-content {
  background-color: #1b1d29 !important;
  color: var(--gw-text-secondary) !important;
}
html.gw-brand.gw-theme-dark .exol-floor-toolbar {
  background-color: var(--gw-surface-2) !important;
  border: 1px solid var(--gw-border-strong) !important;
}
html.gw-brand.gw-theme-dark .exol-report-header {
  background-color: var(--gw-bg) !important;
  border-color: var(--gw-border) !important;
}
html.gw-brand.gw-theme-dark .exol-view-tab { background: var(--gw-surface) !important; }
html.gw-brand.gw-theme-dark .exol-view-tab:hover { background-color: var(--gw-surface-hover) !important; }
html.gw-brand.gw-theme-dark .selectedTab { background: var(--gw-surface-hover) !important; }
html.gw-brand.gw-theme-dark .btn-sq,
html.gw-brand.gw-theme-dark .exol-panel-mini-group,
html.gw-brand.gw-theme-dark .exol-panel-mini-group > .panel-heading,
html.gw-brand.gw-theme-dark .exol-btn-addon { background-color: var(--gw-surface) !important; }
html.gw-brand.gw-theme-dark .drop-box {
  background: var(--gw-surface) !important;
  border-color: var(--gw-border-strong) !important;
}
html.gw-brand.gw-theme-dark .exol-badge { background-color: var(--gw-surface-hover) !important; }
html.gw-brand.gw-theme-dark .exol-badge:hover { background-color: var(--gw-border-strong) !important; }
html.gw-brand.gw-theme-dark .exol-accent-alt {
  background-color: var(--gw-surface-2) !important;
  color: var(--gw-text-primary) !important;
}

/* dashboard edit — widget picker (app-common ships #eee accordion rows on a
   white drag panel; the row glyphs are near-black sprites) */
html.gw-brand.gw-theme-dark button.accordion {
  background-color: var(--gw-surface-2) !important;
  color: var(--gw-text-primary) !important;
}
html.gw-brand.gw-theme-dark button.accordion.active,
html.gw-brand.gw-theme-dark button.accordion:hover { background-color: var(--gw-surface-hover) !important; }
html.gw-brand.gw-theme-dark button.accordion:after { color: var(--gw-text-muted) !important; }
html.gw-brand.gw-theme-dark div.accordionPanel { background-color: var(--gw-surface) !important; }
html.gw-brand.gw-theme-dark .dragPanel .dragWidget { border-bottom-color: var(--gw-border) !important; }
html.gw-brand.gw-theme-dark .dragPanel .dragWidget .widgetName { color: var(--gw-text-secondary) !important; }
/* sprite glyphs are near-black — sit them on a small light chip so they read */
html.gw-brand.gw-theme-dark .dragPanel .dragWidget .icon:not(.agregation) {
  background-color: #dfe1ec;
  border-radius: 4px;
}
/* widget grid filter/search row paints itself white in app-common */
html.gw-brand.gw-theme-dark .dashboard-widget-filters { background-color: var(--gw-surface) !important; }

/* tab panes — app-dark outlines .tab-content/.exol-tab-content and the view
   tabs with light #ccc/#ddd borders (the stray white lines and outlined bars) */
html.gw-brand.gw-theme-dark .tab-content,
html.gw-brand.gw-theme-dark .exol-tab-content { border-color: var(--gw-border) !important; }
html.gw-brand.gw-theme-dark .exol-view-tab,
html.gw-brand.gw-theme-dark .exol-view-tab:hover,
html.gw-brand.gw-theme-dark .selectedTab { border-color: var(--gw-border) !important; }
html.gw-brand.gw-theme-dark .exol-icon-btn {
  background: var(--gw-surface-2) !important;
  border: 1px solid var(--gw-border-strong) !important;
}

/* inputs lacking a type attribute escape the [type="..."] selectors above */
html.gw-brand.gw-theme-dark input:not([type]) {
  background: #1b1d29 !important;
  border: 1px solid var(--gw-border-strong) !important;
  border-radius: var(--gw-radius) !important;
  color: var(--gw-text-primary) !important;
}
html.gw-brand.gw-theme-dark input:not([type]):focus {
  border-color: var(--gw-accent) !important;
  box-shadow: 0 0 0 3px var(--gw-focus-ring) !important;
  outline: none;
}

/* =====================================================================
 * 7. LAYOUT FIX — app-dark.css sets .exol-main-content padding:60px 10px
 *    10px 193px (designed for the old fixed header + full-width sidenav).
 *    Native v10.18.02 layout uses flex for rail spacing and NO padding
 *    (app-common). Neutralize ONLY where app-dark.css is actually loaded
 *    (Dark mode); Light keeps pure native geometry.
 * =================================================================== */
html.gw-brand.gw-theme-dark .exol-main-content { padding: 0 !important; }

/* =====================================================================
 * 8. PLATFORM ONE™ HEADER BRAND
 * =================================================================== */
html.gw-brand #gw-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding-left: 12px;
  text-decoration: none;
  vertical-align: middle;
}
/* nav unpinned: the hamburger md-menu-bar (position:fixed,left:0) precedes the
   brand — give it room, like the native logo's 50px margin (factory behavior) */
html.gw-brand .exol-header md-menu-bar + #gw-header-brand { padding-left: 52px; }
html.gw-brand .gw-e-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
  display: block;
}
html.gw-brand .gw-header-title {
  color: var(--gw-header-fg);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
html.gw-brand .gw-one { font-weight: 700; }
/* 0.38 read at 2.27:1 against the white light-mode bar; 0.55 -> 3.58:1 and still
   reads as a subtle separator. Dark mode keeps the original weight.            */
html.gw-brand .gw-pipe { opacity: 0.55; margin: 0 4px; }
html.gw-brand.gw-theme-dark .gw-pipe { opacity: 0.38; }

/* The cloud status glyph is a self-colored SVG (#66c041 connected / #FF5C5C
   offline) authored for the dark factory bar — 2.29:1 on white. We must not edit
   the original asset, so darken it in light mode only: brightness(.8) -> 3.48:1. */
html.gw-brand.gw-theme-light .exol-header-toolbar img[src*="cloud_"] {
  filter: brightness(0.8);
}

/* =====================================================================
 * 9. V29 DARK SNAPSHOT FIXES
 *    Sources of truth: components/directives/titledBorder*.css (white
 *    fieldsets), templates with <md-checkbox|md-radio-button
 *    class="form-control">, vendor assets/libs/angular-ui-grid/ui-grid.css
 *    (#000 menu items on #fff), inline-styled tables in
 *    components/aps/ap{,-header}.html, <style> blocks in
 *    components/afc/afc-vis.tmpl.html + aps/ap.html (channel band colors).
 * =================================================================== */

/* 9a. titled-border fieldset cards ship white bg + groove border; their
   legend reads --typography-midnight-500 (remapped light) and floats on
   the card edge — dark card + solid border makes both legible. */
html.gw-brand.gw-theme-dark fieldset.titled-border,
html.gw-brand.gw-theme-dark fieldset.titled-border-white {
  background: var(--gw-surface) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-radius-card);
  box-shadow: var(--gw-shadow-1) !important;
}
/* bare <legend> elsewhere (System Information page) defaults to #333 */
html.gw-brand.gw-theme-dark legend {
  color: var(--gw-text-primary) !important;
  border-bottom-color: var(--gw-border);
}

/* 9b. Material toggles carry class="form-control" in these templates, so
   the dark input skin (bg #1b1d29 + border) paints the WHOLE component as
   a dark box — radios read as a clipped circle + stray vertical bar,
   checkboxes vanish. Exempt the components, then restyle their icons. */
html.gw-brand.gw-theme-dark md-checkbox.form-control,
html.gw-brand.gw-theme-dark md-radio-group.form-control,
html.gw-brand.gw-theme-dark md-radio-button.form-control,
html.gw-brand.gw-theme-dark md-switch.form-control {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.gw-brand.gw-theme-dark md-checkbox:not(.md-checked) .md-icon {
  border-color: var(--gw-text-muted) !important;
  background-color: transparent !important;
}
html.gw-brand.gw-theme-dark md-checkbox.md-checked .md-icon {
  background-color: var(--gw-accent) !important;
  border-color: var(--gw-accent) !important;
}
html.gw-brand.gw-theme-dark md-checkbox[disabled] .md-icon { opacity: .55; }
html.gw-brand.gw-theme-dark md-radio-button .md-off { border-color: var(--gw-text-muted) !important; }
html.gw-brand.gw-theme-dark md-radio-button.md-checked .md-off { border-color: var(--gw-accent) !important; }
html.gw-brand.gw-theme-dark md-radio-button .md-on { background-color: var(--gw-accent) !important; }
/* native custom radios (app-common appearance:none) ship a white disc */
html.gw-brand.gw-theme-dark input[type="radio"] { background-color: transparent !important; }

/* 9c. ui-grid kebab button + grid menu: vendor css is #f3f3f3 button,
   #000 item text — unreadable on the darkened menu surface. */
html.gw-brand.gw-theme-dark .ui-grid-menu-button {
  background: var(--gw-surface-2) !important;
  border-color: var(--gw-border) !important;
  color: var(--gw-text-secondary) !important;
}
html.gw-brand.gw-theme-dark .ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid { border-color: var(--gw-border) !important; }
html.gw-brand.gw-theme-dark .ui-grid-menu .ui-grid-menu-inner ul li .ui-grid-menu-item {
  color: var(--gw-text-secondary) !important;
}
html.gw-brand.gw-theme-dark .ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item:hover,
html.gw-brand.gw-theme-dark .ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item:focus {
  background-color: var(--gw-surface-hover) !important;
  color: var(--gw-text-primary) !important;
}
html.gw-brand.gw-theme-dark .ui-grid-menu .ui-grid-menu-inner ul li:not(:last-child) > .ui-grid-menu-item {
  border-bottom-color: var(--gw-border) !important;
}

/* 9d. plain bootstrap tables: white striped rows (app-common paints BOTH
   odd+even white) + light #ddd cell borders — RADIUS health dialog etc. */
html.gw-brand.gw-theme-dark .table-striped > tbody > tr:nth-of-type(odd),
html.gw-brand.gw-theme-dark .table-striped > tbody > tr:nth-of-type(even),
html.gw-brand.gw-theme-dark .exol-table-white-shadow tr,
html.gw-brand.gw-theme-dark table.exol-table-hover tr {
  background-color: var(--gw-surface) !important;
}
html.gw-brand.gw-theme-dark .table > thead > tr > th,
html.gw-brand.gw-theme-dark .table > tbody > tr > th,
html.gw-brand.gw-theme-dark .table > tbody > tr > td,
html.gw-brand.gw-theme-dark .table > tfoot > tr > td {
  border-color: var(--gw-border) !important;
}
/* WLAN-assignment rows pin label color:black inline */
html.gw-brand.gw-theme-dark .form-control-static { color: var(--gw-text-secondary) !important; }

/* 9e. AFC planning tool (template <style> blocks) */
/* white "Loading, awaiting answer..." pill w/ inherited light text */
html.gw-brand.gw-theme-dark .map-overlay-loading-img {
  background-color: var(--gw-surface-2) !important;
  border-color: var(--gw-border-strong) !important;
  color: var(--gw-text-primary) !important;
}
/* channel/power band tables: pastel fills under light theme text — keep
   each band's hue but on dark fills; white cell grid -> border token */
html.gw-brand.gw-theme-dark table.channel td { border-color: var(--gw-border-strong) !important; }
html.gw-brand.gw-theme-dark .odd20m,
html.gw-brand.gw-theme-dark .even20m  { background-color: #323a57 !important; }
html.gw-brand.gw-theme-dark .odd40m,
html.gw-brand.gw-theme-dark .even40m  { background-color: #2c4343 !important; }
html.gw-brand.gw-theme-dark .odd80m,
html.gw-brand.gw-theme-dark .even80m  { background-color: #4a3050 !important; }
html.gw-brand.gw-theme-dark .odd160m,
html.gw-brand.gw-theme-dark .even160m { background-color: #5e3a75 !important; }
html.gw-brand.gw-theme-dark .even20mGrey  { background-color: #232634 !important; color: var(--gw-text-disabled) !important; }
html.gw-brand.gw-theme-dark .even40mGrey  { background-color: #1f2733 !important; color: var(--gw-text-disabled) !important; }
html.gw-brand.gw-theme-dark .even80mGrey  { background-color: #2a2531 !important; color: var(--gw-text-disabled) !important; }
html.gw-brand.gw-theme-dark .even160mGrey { background-color: #2b2330 !important; color: var(--gw-text-disabled) !important; }
html.gw-brand.gw-theme-dark .bordered-div { border-color: var(--gw-border) !important; }
html.gw-brand.gw-theme-dark .content-color { color: var(--gw-accent-soft) !important; }

/* 9f. AP overview (ap-header.html): labels hardcode midnight inks and the
   panels/tables inline light #EBEEF5 borders + a pale header shadow */
html.gw-brand.gw-theme-dark .ap-header { color: var(--gw-text-muted) !important; }
html.gw-brand.gw-theme-dark .ap-data { color: var(--gw-text-secondary) !important; }
html.gw-brand.gw-theme-dark .ap-header-details-secion { color: var(--gw-text-primary) !important; }
html.gw-brand.gw-theme-dark .automation-aphdr-radio-detail-tbl,
html.gw-brand.gw-theme-dark .automation-aphdr-radio-detail-tbl td {
  color: var(--gw-text-secondary) !important;
  border-color: var(--gw-border) !important;
}
html.gw-brand.gw-theme-dark [style*="EBEEF5"] { border-color: var(--gw-border) !important; }
html.gw-brand.gw-theme-dark [style*="161, 160, 160"] { box-shadow: none !important; }
html.gw-brand.gw-theme-dark #lldpTable td { border-color: var(--gw-border) !important; }
html.gw-brand.gw-theme-dark .border-right,
html.gw-brand.gw-theme-dark .border-top { border-color: var(--gw-border) !important; }
html.gw-brand.gw-theme-dark .rightMapOption { color: var(--gw-text-secondary) !important; }
html.gw-brand.gw-theme-dark .selectedRightMapOption { color: var(--gw-link) !important; }

/* =====================================================================
 * 10. DEPRECATED FEATURES — hidden in branded modes (Light + Dark) only.
 *     Scoped under html.gw-brand, so Original keeps the full factory UI.
 *     These nav features will not be brought forward in the Gateway.
 *
 *     Each top-level sidenav section is an <li.parent-list-item> holding a
 *     button whose uib-tooltip is the interpolated {{section.name|translate}}.
 *     :has() targets it independent of collapsed/expanded state.
 *     Verified live: matches exactly 1 <li> (the Onboard section).
 * =================================================================== */
html.gw-brand li.parent-list-item:has([uib-tooltip="OnBoard"]) {
  display: none !important;
}

/* Flyout sub-items (pages inside a section's menu-icon flyout). These nest, so we
 * match the EXACT row via a direct-descendant :has(> menu-icon > tooltip) — a plain
 * :has([uib-tooltip="Switches"]) would also match the parent group wrapper and hide
 * the whole group. (verified live: ExtremeGuest=1 row, Switches=2 rows, parents kept)
 *   ExtremeGuest -> #/extreme-guests          (under Configure)
 *   Switches     -> #/switches/{monitor,configure} (under Monitor + Configure)
 */
html.gw-brand md-menu-item.menu-icon-menu-item:has(> menu-icon > [uib-tooltip="ExtremeGuest"]),
html.gw-brand md-menu-item.menu-icon-menu-item:has(> menu-icon > [uib-tooltip="Switches"]) {
  display: none !important;
}