/* LOOP-IT V4.1.4 — Protected Route Visual Harmonisation
 * Cosmetic extension only for Live Tracking and Operational Insights.
 * Protected shared runtime, Worker, D1, WebSocket, map controller and route logic remain untouched.
 */

/* Route scope is derived from the accepted V4.1.3 navigation bridge. */
body:has(.loopit-v413-nav-link[data-loopit-v413-route="live-route-tracking"].is-active),
body:has(.loopit-v413-nav-link[data-loopit-v413-route="operational-insights"].is-active) {
  --loopit-v414-card-top: rgba(10,27,31,.96);
  --loopit-v414-card-bottom: rgba(5,17,21,.98);
  --loopit-v414-card-border: rgba(255,255,255,.075);
  --loopit-v414-card-shadow: 0 18px 46px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025);
}

body:has(.loopit-v413-nav-link[data-loopit-v413-route="live-route-tracking"].is-active) .loopit-shared-overlay__content,
body:has(.loopit-v413-nav-link[data-loopit-v413-route="operational-insights"].is-active) .loopit-shared-overlay__content {
  background: radial-gradient(circle at 80% 0%,rgba(50,215,231,.025),transparent 28%),#02090d !important;
}

/* V4 glass-card language: clean surface, depth and consistent borders. */
body:has(.loopit-v413-nav-link[data-loopit-v413-route="live-route-tracking"].is-active) #loopit-shared-content-root :is(.permanent-authority-strip,.control-panel,.metric-card,.insight-card,.viz-callout,.permanent-access-gate),
body:has(.loopit-v413-nav-link[data-loopit-v413-route="operational-insights"].is-active) #loopit-shared-content-root :is(.permanent-authority-strip,.control-panel,.metric-card,.insight-card,.viz-callout,.permanent-access-gate) {
  background: linear-gradient(180deg,var(--loopit-v414-card-top),var(--loopit-v414-card-bottom)) !important;
  border-color: var(--loopit-v414-card-border) !important;
  box-shadow: var(--loopit-v414-card-shadow) !important;
  backdrop-filter: blur(10px);
}

/* Inner rows use the same neutral software-surface treatment. */
body:has(.loopit-v413-nav-link[data-loopit-v413-route="live-route-tracking"].is-active) #loopit-shared-content-root :is(.status-stack>div,.shared-breadcrumb-row),
body:has(.loopit-v413-nav-link[data-loopit-v413-route="operational-insights"].is-active) #loopit-shared-content-root :is(.status-stack>div,.shared-breadcrumb-row) {
  background: linear-gradient(180deg,rgba(9,23,28,.88),rgba(6,18,22,.94)) !important;
  border-color: rgba(255,255,255,.055) !important;
}

body:has(.loopit-v413-nav-link[data-loopit-v413-route="live-route-tracking"].is-active) #loopit-shared-content-root .shared-breadcrumb-list,
body:has(.loopit-v413-nav-link[data-loopit-v413-route="operational-insights"].is-active) #loopit-shared-content-root .shared-breadcrumb-list {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.065) !important;
}

/* Live Tracking map: remove broad green wash but keep genuine live-state green markers. */
body:has(.loopit-v413-nav-link[data-loopit-v413-route="live-route-tracking"].is-active) .loopit-live-route-map {
  background: linear-gradient(145deg,#071116,#02090d) !important;
  border-color: rgba(50,215,231,.14) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body:has(.loopit-v413-nav-link[data-loopit-v413-route="live-route-tracking"].is-active) .loopit-live-route-map__surface {
  background: radial-gradient(circle at 50% 45%,rgba(50,215,231,.035),transparent 38%),linear-gradient(160deg,#081318,#02090d) !important;
}
body:has(.loopit-v413-nav-link[data-loopit-v413-route="live-route-tracking"].is-active) :is(.loopit-live-route-map__status-card,.loopit-live-route-map__control,.loopit-live-route-map__mode,.loopit-live-route-map__legend) {
  background: rgba(6,16,20,.94) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025) !important;
}

/* Realistic LED treatment. Semantic colours stay unchanged; only depth/glow is standardised. */
body:has(.loopit-v413-nav-link[data-loopit-v413-route="live-route-tracking"].is-active) #loopit-shared-content-root .signal-dot--green,
body:has(.loopit-v413-nav-link[data-loopit-v413-route="operational-insights"].is-active) #loopit-shared-content-root .signal-dot--green {
  box-shadow: 0 0 2px rgba(255,255,255,.75),0 0 7px rgba(128,242,76,.90),0 0 15px rgba(128,242,76,.42) !important;
}
body:has(.loopit-v413-nav-link[data-loopit-v413-route="live-route-tracking"].is-active) #loopit-shared-content-root .signal-dot--cyan,
body:has(.loopit-v413-nav-link[data-loopit-v413-route="operational-insights"].is-active) #loopit-shared-content-root .signal-dot--cyan {
  box-shadow: 0 0 2px rgba(255,255,255,.70),0 0 7px rgba(66,220,229,.88),0 0 15px rgba(66,220,229,.38) !important;
}
body:has(.loopit-v413-nav-link[data-loopit-v413-route="live-route-tracking"].is-active) #loopit-shared-content-root .signal-dot--amber,
body:has(.loopit-v413-nav-link[data-loopit-v413-route="operational-insights"].is-active) #loopit-shared-content-root .signal-dot--amber {
  box-shadow: 0 0 2px rgba(255,255,255,.68),0 0 7px rgba(255,200,87,.86),0 0 15px rgba(255,200,87,.34) !important;
}
body:has(.loopit-v413-nav-link[data-loopit-v413-route="live-route-tracking"].is-active) #loopit-shared-content-root .signal-dot--red,
body:has(.loopit-v413-nav-link[data-loopit-v413-route="operational-insights"].is-active) #loopit-shared-content-root .signal-dot--red {
  box-shadow: 0 0 2px rgba(255,255,255,.65),0 0 7px rgba(255,101,117,.82),0 0 15px rgba(255,101,117,.32) !important;
}

/* Green remains intentional on true live markers / connected states, never as a page-wide tint. */
body:has(.loopit-v413-nav-link[data-loopit-v413-route="live-route-tracking"].is-active) .loopit-live-map-marker--live {
  box-shadow: 0 0 0 7px rgba(128,242,76,.14),0 0 18px rgba(128,242,76,.40),0 5px 16px rgba(0,0,0,.38) !important;
}