:root {
  --lux-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lux-fast: 150ms;
  --lux-med: 280ms;
  --lux-slow: 480ms;
  --lux-page: 220ms;
  --lux-micro: 120ms;
  --lux-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.14);
  --lux-shadow-mid: 0 4px 14px rgba(0, 0, 0, 0.18);
  --lux-shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.24);
  --lux-shadow-glow: 0 16px 48px rgba(2, 8, 20, 0.28);
  --lux-accent: #39c8ff;
  --lux-accent-2: #00d4ff;
  --lux-radius: 14px;
}

/* ── Admin-only back button: hidden by default, JS sets .admin-visible to show ── */
#btnFactoryChooser { display: none !important; }
#btnFactoryChooser.admin-visible { display: inline-flex !important; }

  /* Brand palette */
  --brand: #39c8ff;
  --brand-light: #91e6ff;
  --brand-glow: rgba(57, 200, 255, 0.14);

  /* Radius scale */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-critical: 500;
}

html, body {
  overflow-x: hidden;
}

body {
  position: relative;
  letter-spacing: 0.01em;
}

/* ── ACXA Command Shell Root ── */
body.acxa-command-shell {
  font-family: var(--font-ui, 'Fira Sans', system-ui, sans-serif);
}

/* Ambient glow removed — was causing visible artifacts */

html.dark body {
  background:
    radial-gradient(ellipse 60% 50% at 8% 6%, rgba(57,200,255,0.06), transparent 40%),
    radial-gradient(ellipse 50% 45% at 92% 4%, rgba(30,64,175,0.08), transparent 38%),
    linear-gradient(168deg, var(--acxa-bg-0,#060c14) 0%, var(--acxa-bg-1,#0a1320) 40%, var(--acxa-bg-2,#0e1926) 100%) !important;
}

html:not(.dark) body {
  background: #f0f4f8 !important;
}

html:not(.dark) {
  color: #0f172a;
}

/* Grid overlay removed — was causing visible artifacts */

.main-content {
  position: relative;
  isolation: isolate;
}

/* Content top-glow removed — was causing visible artifacts */

.glass {
  backdrop-filter: blur(12px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.35) !important;
}

.glow {
  box-shadow: none !important;
}

.premium-card,
[class*="bg-surface-800"],
[class*="bg-surface-900"] {
  border-radius: var(--radius-md) !important;
}

.premium-card {
  isolation: isolate;
  border-color: var(--acxa-line) !important;
}

.premium-card::before {
  display: none;
}

.premium-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.card-hover,
button,
a[href],
.tab-btn,
.nav-btn,
.wifi-net-item,
.ota-target-item {
  transition: transform var(--lux-fast) var(--lux-ease), box-shadow var(--lux-med) var(--lux-ease),
    border-color var(--lux-fast) ease, background-color var(--lux-fast) ease, color var(--lux-fast) ease !important;
}

.premium-card,
.node-card,
.gw-info-cell,
#desktopNav,
.topbar.premium-header,
.mobile-bottom-nav .mob-nav-inner {
  will-change: auto;
}

.card-hover:hover,
.ota-target-item:hover,
.wifi-net-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

button:hover,
a[href]:hover,
.tab-btn:hover,
.nav-btn:hover {
  transform: translateY(-1px);
}

button:active,
a[href]:active {
  transform: translateY(0);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(57, 200, 255, 0.40);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(57, 200, 255, 0.08) !important;
}

.input-field,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  border-color: rgba(148, 163, 184, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

html.dark .input-field,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="tel"],
html.dark input[type="number"],
html.dark select,
html.dark textarea {
  background: linear-gradient(180deg, rgba(9, 20, 31, 0.92), rgba(11, 23, 35, 0.85)) !important;
}

html:not(.dark) .input-field,
html:not(.dark) input[type="text"],
html:not(.dark) input[type="email"],
html:not(.dark) input[type="password"],
html:not(.dark) input[type="tel"],
html:not(.dark) input[type="number"],
html:not(.dark) select,
html:not(.dark) textarea {
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
}

[class*="bg-surface-800"],
[class*="bg-surface-900"] {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark [class*="bg-surface-800"] {
  background: linear-gradient(150deg, rgba(24, 38, 56, 0.88), rgba(20, 32, 48, 0.82)) !important;
}

html.dark [class*="bg-surface-900"] {
  background: linear-gradient(160deg, rgba(16, 26, 40, 0.96), rgba(14, 24, 36, 0.92)) !important;
}

/* Keep tile/panel surface color consistent with Machine Details across key pages. */
:root {
  --acxa-page-panel-bg-dark: rgba(16, 26, 40, 0.55);
}

html.dark #page-alerts #alertsList > div,
html.dark #page-alerts #alertsList > details,
html.dark #page-alerts #alertsList details > button,
html.dark #page-alerts #alertsList .card-hover,
html.dark #page-operators #operatorStats > div,
html.dark #page-operators #operatorsGrid > div,
html.dark #page-shifts #shiftsMachineGrid > div,
html.dark #page-shifts #shiftTimeline > div,
html.dark #page-shifts #shiftHandoverLog > div,
html.dark #page-shifts #shiftRfidEvents > div,
html.dark #page-reports #reportsPageContent .rpt-card,
html.dark #page-stats .card-hover,
html.dark #page-ai > .grid > .space-y-4 > div,
html.dark #page-ai > .grid > .lg\:col-span-3 {
  background: var(--acxa-page-panel-bg-dark) !important;
}

/* Light mode surfaces handled directly in index.html with full opacity —
   do not override here to avoid specificity conflicts. */

/* from-/to-surface gradient-stop classes (used by section panels) → solid white */
html:not(.dark) .from-surface-800\/80,
html:not(.dark) .from-surface-800\/60,
html:not(.dark) .from-surface-800\/40,
html:not(.dark) .from-surface-800\/50 {
  --tw-gradient-from: #ffffff !important;
  background: #ffffff !important;
}
html:not(.dark) .to-surface-800\/80,
html:not(.dark) .to-surface-800\/60,
html:not(.dark) .to-surface-800\/40,
html:not(.dark) .to-surface-800\/50 {
  --tw-gradient-to: #f8fafc !important;
  background: #ffffff !important;
}
html:not(.dark) .bg-gradient-to-br[class*="from-surface"],
html:not(.dark) .bg-gradient-to-b[class*="from-surface"],
html:not(.dark) .bg-gradient-to-r[class*="from-surface"] {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(0,0,0,0.07) !important;
  box-shadow: 0 4px 20px rgba(15,23,42,0.08) !important;
}
html:not(.dark) .backdrop-blur-sm,
html:not(.dark) .backdrop-blur,
html:not(.dark) .backdrop-blur-md,
html:not(.dark) .backdrop-blur-lg {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:not(.dark) .glow {
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08), 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[class*="bg-gradient-to-r"],
[class*="bg-gradient-to-br"] {
  filter: saturate(1.1) contrast(1.05);
}

.tab-btn.active,
.nav-btn.active {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.topbar.premium-header,
#desktopNav,
.mobile-bottom-nav .mob-nav-inner {
  box-shadow: var(--lux-shadow-glow);
}

.topbar.premium-header {
  border-radius: 0;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--acxa-line) !important;
  background: rgba(6, 12, 20, 0.92) !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
}

/* ── Command Topbar Shell ── */
.command-topbar {
  font-family: var(--font-ui);
}
.command-topbar .cmd-page-title {
  font-size: var(--fs-page-title, 1.25rem);
  line-height: 1.15;
}
.command-topbar .cmd-helper {
  font-size: var(--fs-helper, 11px);
  line-height: 1.3;
}
.command-topbar #headerLogo {
  height: 28px;
  width: auto;
}
html:not(.dark) .topbar.premium-header {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

#desktopNav {
  position: sticky;
  top: 44px;
  z-index: 24;
  padding: 4px 6px !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-radius: 12px !important;
  margin-top: var(--shell-top-gap, 8px) !important;
  border: 1px solid var(--acxa-line) !important;
  box-shadow: 0 14px 34px rgba(2, 8, 20, 0.16), 0 4px 14px rgba(2, 8, 20, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(10, 18, 31, 0.92), rgba(8, 15, 27, 0.82)) !important;
}

#desktopNav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 50%);
}

#desktopNav::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(2, 8, 20, 0.24);
}

.nav-btn,
.tab-btn {
  position: relative;
  overflow: visible;
}

/* Desktop tab compact sizing */
#desktopNav .nav-btn {
  padding: 5px 9px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  gap: 4px !important;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.72) !important;
  border: 1px solid transparent !important;
}
#desktopNav .nav-btn svg {
  width: 12px !important;
  height: 12px !important;
  opacity: 0.55;
  transition: opacity var(--lux-micro, 120ms) ease;
}
#desktopNav .nav-btn:hover {
  color: rgba(248, 250, 252, 0.96) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
  background: rgba(148, 163, 184, 0.06) !important;
}
#desktopNav .nav-btn:hover svg,
#desktopNav .nav-btn.active svg {
  opacity: 1;
}

.nav-btn::after,
.tab-btn::after,
.mob-nav-btn::after {
  display: none;
}

.nav-btn.active,
.tab-btn.active {
  background: rgba(57, 200, 255, 0.10) !important;
  border-color: rgba(57, 200, 255, 0.22) !important;
  color: #f1f5f9 !important;
}

/* Active tab accent underline */
#desktopNav .nav-btn.active {
  position: relative;
}
#desktopNav .nav-btn.active::before {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 20%;
  right: 20%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--acxa-cyan), var(--brand-light, #91e6ff));
  opacity: 0.9;
}

.mobile-bottom-nav {
  padding: 0 10px calc(env(safe-area-inset-bottom, 4px) + 4px);
}

#setupModal,
.export-modal-overlay,
.kbd-modal-overlay,
.onboard-overlay,
#faultDetailModal,
#adminBootLogModal,
#signalChartModal,
#bootHistoryModal,
#adminLoginOverlay {
  backdrop-filter: blur(12px) saturate(1.18);
  -webkit-backdrop-filter: blur(12px) saturate(1.18);
}

#setupModal > div,
.export-modal,
.kbd-modal,
.onboard-card,
#faultDetailModal > div,
#signalChartModal > div,
#bootHistoryModal > div,
#adminBootLogModal > div > div,
#adminLoginOverlay > div {
  border-radius: 26px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  box-shadow: var(--lux-shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#setupModal > div::before,
.export-modal::before,
.kbd-modal::before,
.onboard-card::before,
#faultDetailModal > div::before,
#signalChartModal > div::before,
#bootHistoryModal > div::before,
#adminBootLogModal > div > div::before,
#adminLoginOverlay > div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.1), transparent 28%);
}

#setupModal input,
#setupModal select,
#setupModal textarea,
.export-modal input,
.export-modal select,
#faultDetailModal input,
#faultDetailModal select,
#bootHistoryModal input,
#bootHistoryModal select,
#signalChartModal select,
#adminBootLogModal select,
#adminLoginOverlay input,
#adminLoginOverlay select,
#adminLoginOverlay textarea {
  min-height: 42px;
  border-radius: 14px !important;
}

#setupModal button,
.export-modal button,
#faultDetailModal button,
#bootHistoryModal button,
#signalChartModal button,
#adminBootLogModal button,
#adminLoginOverlay button {
  border-radius: 14px !important;
}

#setupModal .rounded-2xl,
#faultDetailModal .rounded-2xl,
#signalChartModal .rounded-2xl,
#bootHistoryModal .rounded-2xl,
#adminBootLogModal .rounded-2xl,
#adminLoginOverlay .rounded-2xl {
  border-radius: 22px !important;
}

html:not(.dark) #setupModal > div,
html:not(.dark) .export-modal,
html:not(.dark) .kbd-modal,
html:not(.dark) .onboard-card,
html:not(.dark) #faultDetailModal > div,
html:not(.dark) #signalChartModal > div,
html:not(.dark) #bootHistoryModal > div,
html:not(.dark) #adminBootLogModal > div > div,
html:not(.dark) #adminLoginOverlay > div {
  border-color: rgba(2, 132, 199, 0.14) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

.mobile-bottom-nav .mob-nav-inner {
  gap: 4px;
  padding: 6px;
  border-radius: 20px;
  border: 1px solid var(--acxa-line);
  background: linear-gradient(180deg, rgba(6, 12, 20, 0.94), rgba(8, 14, 22, 0.98));
}

.mob-nav-btn {
  position: relative;
  flex: 1 1 0;
  min-height: 48px;
  border: 1px solid transparent;
}

.mob-nav-btn.active {
  transform: translateY(-1px);
  border-color: rgba(57, 200, 255, 0.16);
}

.page {
  position: relative;
  opacity: 0;
  transition: opacity var(--lux-micro, 120ms) ease !important;
  max-width: var(--shell-max-width, 1600px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--shell-gutter, 16px);
  padding-right: var(--shell-gutter, 16px);
}

.page.page-visible {
  opacity: 1;
}

.page.page-visible > * {
  animation: none;
}

body.page-switching .page.page-visible {
  pointer-events: none;
}

/* ── Command Page Shell Rhythm ── */
.page > .cmd-section + .cmd-section { margin-top: var(--panel-gap, 12px); }
.page > .grid { gap: var(--panel-gap, 12px); }
.page > .space-y-4 > * + * { margin-top: var(--panel-gap, 12px); }

/* ═══════════════════════════════════════════════════════════════════════
   SHARED COMPONENT LANGUAGE — Phase 1 Primitives
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Section Eyebrow ── */
.cmd-eyebrow {
  font-family: var(--font-data, 'Fira Code', monospace);
  font-size: var(--fs-data-label, 10px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.64);
  margin-bottom: 8px;
}
html:not(.dark) .cmd-eyebrow { color: #64748b; }

/* ── Command Panel ── */
.cmd-panel {
  background: var(--acxa-panel, rgba(14,25,38,0.88));
  border: 1px solid var(--acxa-line);
  border-radius: var(--radius-md, 14px);
  box-shadow: var(--elevation-card);
  padding: 14px 16px;
  position: relative;
}
.cmd-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
html:not(.dark) .cmd-panel {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* ── Metric Tile ── */
.cmd-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmd-metric-label {
  font-family: var(--font-data, 'Fira Code', monospace);
  font-size: var(--fs-data-label, 10px);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.56);
}
.cmd-metric-value {
  font-family: var(--font-data, 'Fira Code', monospace);
  font-size: var(--fs-kpi, 2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  line-height: 1.1;
  color: var(--acxa-cyan, #39c8ff);
}
html:not(.dark) .cmd-metric-label { color: #64748b; }
html:not(.dark) .cmd-metric-value { color: #0284c7; }

/* ── Status Chip ── */
.cmd-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: var(--font-data, 'Fira Code', monospace);
  font-size: var(--fs-micro, 9px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6;
}
.cmd-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cmd-status--live { background: var(--acxa-cyan-muted); color: var(--acxa-cyan); }
.cmd-status--live .cmd-status-dot { background: var(--acxa-cyan); }
.cmd-status--warn { background: var(--acxa-amber-muted); color: var(--acxa-amber); }
.cmd-status--warn .cmd-status-dot { background: var(--acxa-amber); }
.cmd-status--danger { background: var(--acxa-danger-muted); color: var(--acxa-danger); }
.cmd-status--danger .cmd-status-dot { background: var(--acxa-danger); }
.cmd-status--ok { background: var(--acxa-success-muted); color: var(--acxa-success); }
.cmd-status--ok .cmd-status-dot { background: var(--acxa-success); }
.cmd-status--neutral { background: rgba(148,163,184,0.10); color: rgba(148,163,184,0.64); }
.cmd-status--neutral .cmd-status-dot { background: rgba(148,163,184,0.40); }

/* ── Loading Skeleton Grammar ── */
.cmd-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.06);
  border-radius: var(--radius-sm, 8px);
}
.cmd-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(148,163,184,0.08) 50%, transparent 100%);
  animation: cmd-shimmer 1.6s ease infinite;
}
@keyframes cmd-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
html:not(.dark) .cmd-skeleton { background: rgba(15, 23, 42, 0.04); }
html:not(.dark) .cmd-skeleton::after { background: linear-gradient(90deg, transparent 0%, rgba(15,23,42,0.06) 50%, transparent 100%); }

@media (prefers-reduced-motion: reduce) {
  .cmd-skeleton::after { animation: none; }
}

/* ── Locked-State Panel ── */
.cmd-locked {
  position: relative;
  padding: 24px 20px;
  text-align: center;
  background: var(--acxa-panel, rgba(14,25,38,0.88));
  border: 1px dashed rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-md, 14px);
}
.cmd-locked-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 10px;
  opacity: 0.35;
}
.cmd-locked-title {
  font-family: var(--font-ui);
  font-size: var(--fs-body, 13px);
  font-weight: 600;
  color: rgba(148, 163, 184, 0.72);
  margin-bottom: 4px;
}
.cmd-locked-sub {
  font-family: var(--font-ui);
  font-size: var(--fs-helper, 11px);
  color: rgba(148, 163, 184, 0.48);
}
html:not(.dark) .cmd-locked {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.24);
}
html:not(.dark) .cmd-locked-title { color: #475569; }
html:not(.dark) .cmd-locked-sub { color: #94a3b8; }

/* ── Typography: Command-room hierarchy ── */
.cmd-page-title {
  font-family: var(--font-display, 'Fira Sans', sans-serif);
  font-size: var(--fs-page-title, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.cmd-section-title {
  font-family: var(--font-ui);
  font-size: var(--fs-section-title, 13px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cmd-data-label {
  font-family: var(--font-data, 'Fira Code', monospace);
  font-size: var(--fs-data-label, 10px);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cmd-helper {
  font-family: var(--font-ui);
  font-size: var(--fs-helper, 11px);
  color: rgba(148, 163, 184, 0.56);
}
.cmd-mono {
  font-family: var(--font-data, 'Fira Code', monospace);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ── Reduced-motion safety ── */
@media (prefers-reduced-motion: reduce) {
  .page { transition-duration: 0ms !important; }
  .card-hover, button, a[href], .tab-btn, .nav-btn { transition-duration: 0ms !important; }
  .premium-card, .node-card, .gw-info-cell { transition-duration: 0ms !important; }
}

@media (min-width: 1024px) {
  #nodeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* content-visibility removed for instant tab switching */

.premium-card,
.node-card,
.gw-info-cell,
.chart-shell,
#page-live .grid.grid-cols-2.lg\:grid-cols-4 > div,
#page-overview .grid.grid-cols-2.lg\:grid-cols-4 > div {
  contain: layout style;
}

#factoryBanner {
  position: relative;
  padding: 20px 16px 14px;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

#factoryBanner::before {
  display: none;
}

#factoryDisplayName {
  font-family: var(--font-display, 'Fira Sans', sans-serif);
  letter-spacing: -0.032em;
  font-weight: 700;
  text-shadow: 0 12px 32px rgba(2, 8, 20, 0.3);
}

html:not(.dark) #factoryDisplayName {
  color: #1e293b;
  text-shadow: none;
}

#factoryDisplayId {
  font-family: var(--font-data, 'Fira Code', monospace);
  font-size: var(--fs-micro, 9px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(147, 197, 253, 0.56);
}

.chart-shell,
.chart-scroll-outer,
#compareChartWrap,
#page-stats .rounded-2xl,
#page-nodes .rounded-2xl {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* (Chart shell/legend/skeleton rules moved to Chart Design System v3.0 at end of file) */

#searchDropdown {
  padding: 6px;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(10, 18, 28, 0.98), rgba(8, 15, 24, 0.94)) !important;
  box-shadow: var(--lux-shadow-glow) !important;
  z-index: var(--z-modal, 300) !important;
}

#searchDropdown > div {
  border-radius: 12px;
  border: 1px solid transparent;
}

#searchDropdown > div:hover {
  border-color: rgba(57, 200, 255, 0.18);
  transform: translateX(2px);
}

#alertsList > div,
#alertsFeed > div[class*="rounded-xl"] {
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  box-shadow: 0 16px 32px rgba(2, 8, 20, 0.18);
}

#alertsList > div::before,
#alertsFeed > div[class*="rounded-xl"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 40%, rgba(14, 165, 233, 0.04));
}

#faultEventTable,
#page-auth table,
.inspector-table,
.ai-table {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(2, 8, 20, 0.16);
}

#faultEventTable th,
#page-auth th,
.inspector-table th,
.ai-table th {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#faultEventTable td,
#page-auth td,
.inspector-table td,
.ai-table td {
  transition: background-color var(--lux-fast) ease, color var(--lux-fast) ease;
}

#faultEventTable tr:hover td,
#page-auth tbody tr:hover td,
.ai-table tr:hover td {
  background: rgba(57, 200, 255, 0.06) !important;
}

#dbCollList > button,
#dbDocList > div,
#otaTargetList > label,
#shippedList > div,
#otaJobsList > div,
#otaHistory > div {
  box-shadow: 0 12px 26px rgba(2, 8, 20, 0.14);
}

#dbCollList > button:hover,
#dbDocList > div:hover,
#otaTargetList > label:hover {
  transform: translateY(-2px);
}

#authUsersList tr {
  position: relative;
}

#authUsersList tr::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.14), transparent);
}

#authUsersList tr:last-child::after {
  display: none;
}

/* (Old chart light mode rules moved to Chart Design System v3.0) */

html:not(.dark) #searchDropdown {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
}

html:not(.dark) #alertsList > div,
html:not(.dark) #alertsFeed > div[class*="rounded-xl"] {
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

html:not(.dark) #faultEventTable,
html:not(.dark) #page-auth table,
html:not(.dark) .inspector-table,
html:not(.dark) .ai-table {
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.chart-skeleton,
.kpi-skeleton {
  background-size: 240% 100%;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .topbar.premium-header,
  #desktopNav,
  .mobile-bottom-nav .mob-nav-inner,
  .pull-refresh-indicator,
  .toast-inner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html.dark .glass,
  html.dark .topbar.premium-header,
  html.dark #desktopNav,
  html.dark .mobile-bottom-nav .mob-nav-inner {
    background: rgba(8, 15, 22, 0.96) !important;
  }

  html:not(.dark) .glass,
  html:not(.dark) .topbar.premium-header,
  html:not(.dark) #desktopNav,
  html:not(.dark) .mobile-bottom-nav .mob-nav-inner {
    background: rgba(255, 255, 255, 0.96) !important;
  }
}

html:not(.dark) #desktopNav::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), transparent 42%, rgba(2, 132, 199, 0.08));
}

html:not(.dark) .mobile-bottom-nav .mob-nav-inner {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.96));
  border-color: rgba(2, 132, 199, 0.14);
}

html:not(.dark) #factoryBanner {
  background: transparent;
  border-color: transparent;
}

html:not(.dark) #factoryDisplayId {
  color: rgba(51, 65, 85, 0.7);
}

.auth-shell {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}

.auth-panel,
.auth-sidepanel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}

.auth-panel::before,
.auth-sidepanel::before {
  display: none;
}

.auth-panel {
  background: rgba(16, 26, 40, 0.88);
}

.auth-sidepanel {
  padding: 32px;
  background: rgba(14, 22, 34, 0.78);
}

.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, 0.18);
  background: rgba(14, 165, 233, 0.08);
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.55);
}

.auth-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.auth-metric {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.36);
}

.auth-metric-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.78);
}

.auth-metric-value {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #f8fafc;
}

.auth-feature-list {
  display: grid;
  gap: 12px;
}

.auth-feature-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.28);
}

.auth-feature-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.16);
  color: #67e8f9;
}

.auth-feature-title {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
}

.auth-feature-copy {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.55;
  color: #94a3b8;
}

.auth-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.auth-trust-chip {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  font-weight: 600;
  color: #cbd5e1;
}

.auth-tab-dock {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(8, 15, 22, 0.58);
}

.auth-tab-dock > button {
  min-height: 44px;
}

.auth-footer-note {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}

/* ── LIGHT MODE: Auth pages — full override ──────────────────────── */

/* Base body text for auth pages */
html:not(.dark) body.text-gray-200 {
  color: #1e293b !important;
}

html:not(.dark) .auth-panel,
html:not(.dark) .auth-sidepanel {
  border-color: rgba(2, 132, 199, 0.12);
  box-shadow: 0 8px 40px rgba(15, 23, 42, 0.07), 0 2px 8px rgba(15, 23, 42, 0.04);
}

html:not(.dark) .auth-panel {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(20px);
}

html:not(.dark) .auth-sidepanel {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.97), rgba(241, 245, 249, 0.97)) !important;
}

/* Badge — dark text on light tinted bg */
html:not(.dark) .auth-badge {
  border-color: rgba(2, 132, 199, 0.22);
  background: rgba(14, 165, 233, 0.08);
  color: #0369a1;
}

/* Tab dock — light bg, visible borders */
html:not(.dark) .auth-tab-dock {
  border-color: rgba(15, 23, 42, 0.10);
  background: rgba(241, 245, 249, 0.8) !important;
}

/* Inactive tabs inside dock */
html:not(.dark) .auth-tab-dock > button[class*="bg-surface-9"] {
  background: transparent !important;
  color: #475569 !important;
}
html:not(.dark) .auth-tab-dock > button[class*="bg-surface-9"]:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  color: #0f172a !important;
}

/* Metric cards */
html:not(.dark) .auth-metric {
  border-color: rgba(2, 132, 199, 0.12);
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

/* Feature items */
html:not(.dark) .auth-feature-item {
  border-color: rgba(2, 132, 199, 0.10);
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
}

/* Feature icon bubble → brand tint */
html:not(.dark) .auth-feature-icon {
  background: rgba(14, 165, 233, 0.10);
  border-color: rgba(2, 132, 199, 0.18);
  color: #0284c7;
}

/* Trust chips */
html:not(.dark) .auth-trust-chip {
  border-color: rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.65) !important;
  color: #475569;
}

html:not(.dark) .auth-feature-title,
html:not(.dark) .auth-metric-value {
  color: #0f172a;
}

html:not(.dark) .auth-feature-copy {
  color: #475569;
}

html:not(.dark) .auth-footer-note {
  color: #64748b;
}

html:not(.dark) .auth-metric-label {
  color: #64748b;
}

/* Input fields in login inline styles — override dark borders and bg */
html:not(.dark) .input-field {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) .input-field:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12) !important;
}
html:not(.dark) .input-field::placeholder {
  color: #94a3b8 !important;
}

/* Resend / secondary button inside auth-panel */
html:not(.dark) .auth-panel button[class*="bg-surface-9"] {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #334155 !important;
}
html:not(.dark) .auth-panel button[class*="bg-surface-9"]:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Toast in light mode */
html:not(.dark) .toast-msg .bg-surface-800 {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #0f172a;
}

/* Eye icon for password toggle */
html:not(.dark) .text-gray-500.hover\:text-gray-300 {
  color: #64748b !important;
}

/* Recovery/forgot sections */
html:not(.dark) .bg-surface-900\/60 {
  background: rgba(248, 250, 252, 0.9) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Side panel bottom text */
html:not(.dark) .auth-sidepanel .text-gray-600,
html:not(.dark) .auth-sidepanel .text-gray-600\/70 {
  color: #64748b !important;
}

/* Override Tailwind hover:text-white on auth tab buttons in light mode */
html:not(.dark) .auth-tab-dock > button.hover\:text-white:hover {
  color: #0f172a !important;
}
html:not(.dark) .auth-tab-dock > button.hover\:bg-surface-800:hover {
  background: rgba(255, 255, 255, 0.9) !important;
}

/* Strength meter bar in light mode */
html:not(.dark) .strength-bar {
  background: #e2e8f0;
}

@media (max-width: 900px) {
  .auth-shell {
    max-width: 460px;
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-sidepanel {
    order: 2;
    padding: 22px 18px;
  }
}

.toast-msg > div {
  border-color: rgba(103, 232, 249, 0.28) !important;
  box-shadow: var(--lux-shadow-mid) !important;
}

table tr,
.inspector-table tr,
#alertsList > div {
  transition: background-color var(--lux-fast) ease, transform var(--lux-fast) ease;
}

table tr:hover,
.inspector-table tr:hover,
#alertsList > div:hover {
  background-color: rgba(56, 189, 248, 0.09) !important;
}

canvas {
  filter: none;
}

html:not(.dark) body::before {
  opacity: 0.12;
}

html:not(.dark) .gradient-text {
  background: linear-gradient(135deg, #0f172a 10%, #0f4f77 55%, #0284c7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

html:not(.dark) :is(h1, h2, h3, h4, h5, h6, p, span, div, label, small, strong, li, td, th, dt, dd).text-white,
html:not(.dark) :is(h1, h2, h3, h4, h5, h6, p, span, div, label, small, strong, li, td, th, dt, dd).text-gray-100,
html:not(.dark) :is(h1, h2, h3, h4, h5, h6, p, span, div, label, small, strong, li, td, th, dt, dd).text-gray-200 {
  color: #0f172a !important;
}

/* Preserve white text ON colored gradient buttons — never turn it dark */
html:not(.dark) button[class*="from-brand"] .text-white,
html:not(.dark) button[class*="from-orange"] .text-white,
html:not(.dark) button[class*="from-red"] .text-white,
html:not(.dark) button[class*="from-green"] .text-white,
html:not(.dark) button[class*="bg-red-"] .text-white,
html:not(.dark) button[class*="from-brand"],
html:not(.dark) button[class*="from-orange"],
html:not(.dark) button[class*="from-red"],
html:not(.dark) button[class*="from-green"],
html:not(.dark) button[class*="bg-red-6"],
html:not(.dark) button[class*="bg-red-7"] {
  color: #ffffff !important;
}

html:not(.dark) .text-gray-300,
html:not(.dark) .text-gray-400 {
  color: #1e293b !important;
}

html:not(.dark) .text-gray-500,
html:not(.dark) .text-gray-600 {
  color: #334155 !important;
}

html:not(.dark) .text-brand-300,
html:not(.dark) .text-brand-400,
html:not(.dark) .text-brand-500 {
  color: #0369a1 !important;
}

html:not(.dark) .glow {
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

html:not(.dark) .card-hover:hover,
html:not(.dark) .ota-target-item:hover,
html:not(.dark) .wifi-net-item:hover {
  box-shadow: 0 16px 34px rgba(14, 116, 144, 0.14) !important;
  border-color: rgba(14, 116, 144, 0.26) !important;
}

html:not(.dark) .tab-btn {
  color: #334155 !important;
}

html:not(.dark) .tab-btn.active,
html:not(.dark) .nav-btn.active {
  color: #0369a1 !important;
  background: rgba(14, 165, 233, 0.12) !important;
  box-shadow: 0 3px 10px rgba(14, 116, 144, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html:not(.dark) button[class*="from-brand-600"],
html:not(.dark) button[class*="to-brand-500"] {
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #475569 !important;
}

html:not(.dark) select,
html:not(.dark) input,
html:not(.dark) textarea {
  color: #0f172a !important;
}

html:not(.dark) .border-surface-700,
html:not(.dark) .border-surface-700\/50,
html:not(.dark) .border-surface-700\/30 {
  border-color: rgba(2, 132, 199, 0.17) !important;
}

html:not(.dark) .bg-red-950\/30 {
  background: rgba(254, 242, 242, 0.9) !important;
}

html:not(.dark) .bg-surface-950,
html:not(.dark) .bg-surface-950\/90 {
  background: linear-gradient(180deg, #eef4fb 0%, #e8eff7 100%) !important;
}

/* ── LIGHT MODE: Panel containers using gradient dark bg (Machine Info, Live Data, Fault, History, Fault Dist) ── */
/* Target the 'from-surface-*' gradient-stop classes that set Tailwind's --tw-gradient-from to a dark color */
html:not(.dark) [class*="from-surface-8"],
html:not(.dark) [class*="from-surface-9"],
html:not(.dark) [class*="to-surface-8"],
html:not(.dark) [class*="to-surface-9"] {
  background: #ffffff !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

/* Also cover bg-surface-8xx and bg-surface-9xx variants in light mode */
html:not(.dark) [class*="bg-surface-8"],
html:not(.dark) [class*="bg-surface-9"] {
  background: #ffffff !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Remove filters/blurs on gradients in light mode.
   IMPORTANT: only kill background on actual dark surface panels (from-surface rules above).
   Brand/colored gradient buttons must KEEP their gradient. */
html:not(.dark) [class*="bg-gradient-to-r"]:not(button):not(a):not([class*="from-brand"]):not([class*="from-orange"]):not([class*="from-red"]):not([class*="from-green"]):not([class*="from-emerald"]):not([class*="from-cyan"]):not([class*="from-sky"]),
html:not(.dark) [class*="bg-gradient-to-br"]:not(button):not(a):not([class*="from-brand"]):not([class*="from-orange"]):not([class*="from-red"]):not([class*="from-green"]):not([class*="from-cyan"]):not([class*="from-sky"]) {
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html:not(.dark) .bg-surface-700,
html:not(.dark) .bg-surface-700\/50,
html:not(.dark) .bg-surface-700\/60,
html:not(.dark) button.bg-surface-700,
html:not(.dark) button.bg-surface-700\/50 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.95)) !important;
  border-color: rgba(2, 132, 199, 0.16) !important;
  color: #334155 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07) !important;
}

html:not(.dark) .bg-surface-700:hover,
html:not(.dark) .bg-surface-700\/50:hover,
html:not(.dark) .bg-surface-700\/60:hover,
html:not(.dark) button.bg-surface-700:hover,
html:not(.dark) button.bg-surface-700\/50:hover {
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  color: #0f172a !important;
}

html:not(.dark) .chat-msg .bg-surface-700\/50 {
  background: linear-gradient(135deg, #ffffff 0%, #f4f8fc 100%) !important;
  border: 1px solid rgba(2, 132, 199, 0.14) !important;
  color: #1e293b !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

html:not(.dark) .chat-msg .bg-brand-600\/30,
html:not(.dark) .chat-msg .bg-brand-500\/30 {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(3, 105, 161, 0.28) !important;
}

html:not(.dark) .opacity-50,
html:not(.dark) [class*="opacity-50"],
html:not(.dark) .opacity-40,
html:not(.dark) [class*="opacity-40"] {
  opacity: 0.94 !important;
  filter: none !important;
}

html:not(.dark) .inspector-table th {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-bottom: 1px solid rgba(2, 132, 199, 0.16) !important;
}

html:not(.dark) .inspector-table td {
  color: #334155 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24) !important;
}

html:not(.dark) [style*="#0f1923"],
html:not(.dark) [style*="rgba(20, 30, 40"],
html:not(.dark) [style*="rgba(15, 25, 40"] {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9)) !important;
  color: #1e293b !important;
  border-color: rgba(2, 132, 199, 0.16) !important;
}

html:not(.dark) .text-red-400 {
  color: #dc2626 !important;
}

html:not(.dark) .text-emerald-400 {
  color: #059669 !important;
}

html:not(.dark) .text-amber-400 {
  color: #b45309 !important;
}

/* (Old global canvas drop-shadow removed — handled by Chart Design System v3.0) */

/* ══════════════════════════════════════════════════════════
   VALUE STAT TILES  — .nc-data grid
   Structure: .nc-data > div.grid > div (tile)
                                    > div (label, top)
                                    > div.nc-named-val (number, bottom)
   ══════════════════════════════════════════════════════════ */

/* ── THE TILE SHELL ── */
.nc-data > div > div {
  position: relative;
  border-radius: 10px !important;
  padding: 10px 8px 8px !important;
  text-align: center !important;
  overflow: hidden;
  transition:
    transform 150ms cubic-bezier(0.22,1,0.36,1),
    border-color 180ms ease,
    box-shadow 200ms ease !important;
}

/* Hover lift */
.nc-data > div > div:hover {
  transform: translateY(-2px) !important;
}

/* ── LABEL (first child div) ── */
.nc-data > div > div > div:first-child {
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  margin-bottom: 5px !important;
}

/* ── VALUE NUMBER (nc-named-val / second child) ── */
.nc-data > div > div .nc-named-val,
.nc-data > div > div .font-bold {
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--font-data) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

/* ── DARK MODE TILES ── */
html.dark .nc-data > div > div {
  background: linear-gradient(155deg, rgba(10,22,38,0.92) 0%, rgba(8,17,30,0.80) 100%) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}
html.dark .nc-data > div > div:hover {
  border-color: rgba(255,255,255,0.13) !important;
  box-shadow: none !important;
}
html.dark .nc-data > div > div > div:first-child {
  color: #8d9bb0 !important;
}
html.dark .nc-data > div > div .nc-named-val,
html.dark .nc-data > div > div .font-bold {
  color: #f0f4f8 !important;
}

/* ── LIGHT MODE TILES ── */
html:not(.dark) .nc-data > div > div {
  background: linear-gradient(155deg, #ffffff 0%, #f0f7ff 100%) !important;
  border: 1px solid rgba(2,132,199,0.16) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,1) !important;
}
html:not(.dark) .nc-data > div > div:hover {
  background: linear-gradient(155deg, #f5fbff 0%, #e4f1fb 100%) !important;
  border-color: rgba(2,132,199,0.30) !important;
  box-shadow: 0 6px 18px rgba(2,132,199,0.10), inset 0 1px 0 rgba(255,255,255,1) !important;
}
html:not(.dark) .nc-data > div > div > div:first-child {
  color: #334155 !important;
}
html:not(.dark) .nc-data > div > div .nc-named-val,
html:not(.dark) .nc-data > div > div .font-bold {
  color: #0f172a !important;
}

/* ── EFFICIENCY BAR ── */
.nc-progress {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.nc-pbar-row {
  min-width: 0;
}
.nc-pbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.nc-pbar-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(148, 163, 184, 0.55);
}
html:not(.dark) .nc-pbar-label {
  color: rgba(100, 116, 139, 0.6);
}
.nc-pbar-pct {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}
.nc-pct-emerald { color: #34d399; }
.nc-pct-brand   { color: #22d3ee; }
.nc-pct-amber   { color: #f59e0b; }
.nc-pct-red     { color: #f87171; }
html:not(.dark) .nc-pct-emerald { color: #059669; }
html:not(.dark) .nc-pct-brand   { color: #0284c7; }
html:not(.dark) .nc-pct-amber   { color: #d97706; }
html:not(.dark) .nc-pct-red     { color: #dc2626; }

.nc-pbar-track {
  width: 100%;
  height: 5px;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(30, 41, 59, 0.5);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
  position: relative;
}
html:not(.dark) .nc-pbar-track {
  background: rgba(226, 232, 240, 0.9);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
/* Shimmer animation for efficiency bar while shift data loads */
.nc-eff-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,0.12), transparent);
  animation: effShimmer 1.8s ease-in-out infinite;
  border-radius: inherit;
}
@keyframes effShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}
html:not(.dark) .nc-eff-shimmer::after {
  background: linear-gradient(90deg, transparent, rgba(8,145,178,0.1), transparent);
}
.nc-pct-muted { color: #475569 !important; font-style: italic; }
.nc-pbar-fill {
  height: 100%;
  border-radius: 9px;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.nc-pbar-emerald { background: linear-gradient(90deg, #10b981, #34d399); }
.nc-pbar-brand   { background: linear-gradient(90deg, #0891b2, #22d3ee); }
.nc-pbar-amber   { background: linear-gradient(90deg, #d97706, #f59e0b); }
.nc-pbar-red     { background: linear-gradient(90deg, #dc2626, #f87171); }

.nc-pbar-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 9px;
  color: rgba(148, 163, 184, 0.4);
  font-variant-numeric: tabular-nums;
}
html:not(.dark) .nc-pbar-sub {
  color: rgba(100, 116, 139, 0.5);
}

html:not(.dark) .nc-progress {
  border-top-color: rgba(2, 132, 199, 0.1);
}

/* ── MACHINE NODE CARD — light mode uplift ── */
html:not(.dark) .node-card {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(2,132,199,0.16) !important;
  box-shadow: 0 4px 24px rgba(15,23,42,0.08), 0 1px 4px rgba(15,23,42,0.04) !important;
}
html:not(.dark) .node-card .nc-name {
  color: #0369a1 !important;
}
html:not(.dark) .node-card .nc-ts {
  border-top-color: rgba(2,132,199,0.12) !important;
  color: #64748b !important;
}

/* ══════════════════════════════════════════════════════════
   MACHINE DETAILS PAGE — Old tile styles (SUPERSEDED by v3.0 below)
   ══════════════════════════════════════════════════════════ */

/* ── Gateway info cells (same tile style) ── */
.gw-info-cell {
  border-radius: 10px !important;
  transition: border-color 180ms ease !important;
}
html.dark .gw-info-cell {
  background: linear-gradient(155deg, rgba(10,22,38,0.92) 0%, rgba(8,17,30,0.80) 100%) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
}
html:not(.dark) .gw-info-cell {
  background: linear-gradient(155deg, #ffffff 0%, #f0f7ff 100%) !important;
  border: 1px solid rgba(2,132,199,0.16) !important;
}
html:not(.dark) .gw-info-cell .text-gray-500 { color: #475569 !important; }
html:not(.dark) .gw-info-val { color: #0f172a !important; }

/* ══════════════════════════════════════════════════════════
   MACHINE DETAILS PAGE — section panels
   Copy the exact same style as Analytics page cards
   (bg-surface-800/60 card-hover)
   ══════════════════════════════════════════════════════════ */
html.dark #nodeDetailPanel .rounded-2xl {
  background: linear-gradient(150deg, rgba(16, 26, 38, 0.84), rgba(13, 21, 31, 0.74)) !important;
  background-image: none; /* kill Tailwind gradient */
  border-color: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:not(.dark) #nodeDetailPanel .rounded-2xl {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(0,0,0,0.07) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 20px rgba(15,23,42,0.08) !important;
}

/* ── BUTTONS: clean, no colored glow ── */
button[class*="from-brand-"],
button[class*="from-brand"],
button[class*="from-orange-"],
button[class*="bg-red-6"],
button[class*="bg-red-7"] {
  box-shadow: 0 1px 4px rgba(15,23,42,0.14) !important;
  transition: filter 140ms ease, transform 160ms cubic-bezier(0.22,1,0.36,1), box-shadow 160ms ease !important;
}
button[class*="from-brand-"]:hover,
button[class*="from-brand"]:hover,
button[class*="from-orange-"]:hover,
button[class*="bg-red-6"]:hover,
button[class*="bg-red-7"]:hover {
  filter: brightness(1.04) !important;
  box-shadow: 0 3px 10px rgba(15,23,42,0.18) !important;
  transform: translateY(-1px) !important;
}
/* Sign Out / neutral surface buttons in light mode */
html:not(.dark) a[class*="bg-surface-900"],
html:not(.dark) button[class*="bg-surface-900"] {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  color: #334155 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07) !important;
}
html:not(.dark) a[class*="bg-surface-900"]:hover,
html:not(.dark) button[class*="bg-surface-900"]:hover {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.22) !important;
  color: #0f172a !important;
}

/* luxuryFloat animation removed */

/* Page-enter transition */
@keyframes pageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: pageEnter var(--lux-page, 280ms) var(--lux-ease, cubic-bezier(.22,1,.36,1)) both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .page {
    transform: none !important;
    filter: none !important;
  }

  .chart-shell.is-loading canvas {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PREMIUM FOOTER — High-End Industrial
   ══════════════════════════════════════════════════════════ */

/* Glow accent */
.pf-glow {
  height: 2px;
  background: linear-gradient(90deg,
    transparent 2%, #0ea5e9 25%, #38bdf8 50%, #0ea5e9 75%, transparent 98%);
  box-shadow: 0 0 12px rgba(14,165,233,0.5), 0 0 30px rgba(14,165,233,0.15);
}

/* Footer body — visually elevated from page */
.pf-body {
  background: linear-gradient(180deg, #0c1322 0%, #080e1a 100%);
  border-top: 1px solid rgba(148,163,184,0.08);
}

/* Pulse animation */
.pf-pulse {
  animation: pfPulse 2.5s ease-in-out infinite;
}
@keyframes pfPulse {
  0%,100% { opacity:0.5; }
  50% { opacity:1; box-shadow: 0 0 8px #22c55e, 0 0 18px rgba(34,197,94,0.35) !important; }
}

/* ── Light Mode ── */
html:not(.dark) .pf-glow {
  opacity: 0.45;
  box-shadow: none;
}
html:not(.dark) .pf-body {
  background: linear-gradient(180deg, #f1f5f9 0%, #e8ecf1 100%) !important;
  border-top: 1px solid rgba(0,0,0,0.07) !important;
}
html:not(.dark) .pf-monogram {
  border-color: rgba(2,132,199,0.3) !important;
  background: rgba(2,132,199,0.07) !important;
  color: #0284c7 !important;
}
html:not(.dark) .premium-footer .pf-brand {
  color: #0f172a !important;
}
html:not(.dark) .premium-footer .pf-product {
  color: rgba(15,23,42,0.4) !important;
}
html:not(.dark) .premium-footer .pf-tagline {
  color: #64748b !important;
}
html:not(.dark) .premium-footer .pf-status-text {
  color: #16a34a !important;
}
html:not(.dark) .premium-footer .pf-status-pill {
  border-color: rgba(22,163,74,0.2) !important;
  background: rgba(22,163,74,0.05) !important;
}
html:not(.dark) .premium-footer .pf-pulse {
  background: #16a34a !important;
  box-shadow: 0 0 5px #16a34a !important;
}
html:not(.dark) .premium-footer .pf-dot {
  background: rgba(0,0,0,0.15) !important;
}
html:not(.dark) .premium-footer .pf-legal {
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════
   MOBILE PREMIUM POLISH
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Softer grid overlay on mobile */
  body::before {
    background-size: 30px 30px;
    opacity: 0.25;
  }

  /* Disable hover lift on touch — prevent sticky hover states */
  .card-hover:hover,
  .ota-target-item:hover,
  .wifi-net-item:hover {
    transform: none !important;
  }
  button:hover, a[href]:hover, .tab-btn:hover, .nav-btn:hover {
    transform: none !important;
  }

  /* Premium card radius consistency */
  .premium-card,
  [class*="bg-surface-800"],
  [class*="bg-surface-900"] {
    border-radius: 14px !important;
  }

  /* Tighter shadows on mobile (performance) */
  .glow {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  }

  /* Canvas chart: no heavy filter on mobile */
  canvas {
    filter: none !important;
  }

  /* Smoother focus rings on mobile */
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.3) !important;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  body::before {
    background-size: 36px 36px;
  }
  .premium-card, [class*="bg-surface-800"], [class*="bg-surface-900"] {
    border-radius: 14px !important;
  }
}

/* TV mode: hide footer */
.tv-mode .premium-footer { display: none !important; }

/* =========================================================
   Live KPI Tiles — 2-2-1 Card Layout + Bubble Panel
   Matched to screenshot: flat slate cards, white labels,
   skeleton block + "Awaiting data", icon badge top-right
   ========================================================= */

/* — Search field: handled by .live-search-form in cockpit redesign — */
#searchWrap { width: auto; }
@media (min-width: 768px) {
  #searchWrap { max-width: none; }
}

/* — KPI Rail: all 5 tiles in one row on desktop — */
.kpi-rail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
/* Bubble always spans full grid width */
.kpi-bubble {
  grid-column: 1 / -1;
}

/* — Tile base — */
.live-kpi-card {
  position: relative;
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 14px;
  min-height: 110px;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  text-align: left;
  cursor: pointer;
  background: rgba(24, 38, 56, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform 220ms cubic-bezier(.4,0,.2,1),
              border-color 250ms ease,
              box-shadow 250ms ease,
              opacity 180ms ease;
}
.live-kpi-card:hover {
  transform: translateY(-2px) scale(1.012);
  border-color: rgba(148, 163, 184, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 20px rgba(0, 0, 0, 0.25);
}
.live-kpi-card:active { transform: scale(0.985); }
.live-kpi-card:focus-visible {
  outline: none;
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.22);
}

/* — Active tile — highlighted outline — */
.kpi-active-tile {
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(24, 38, 56, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(56, 189, 248, 0.15),
    0 2px 10px rgba(0, 0, 0, 0.22);
}
.kpi-active-tile:hover {
  border-color: rgba(56, 189, 248, 0.45);
  transform: translateY(-2px) scale(1.012);
}

/* — Mobile/Tablet: active tile goes to 3rd row, full width — */
@media (max-width: 899px) {
  .kpi-active-tile {
    order: 10;
    grid-column: 1 / -1;
  }
  .kpi-bubble {
    order: 11;
  }
  /* Chevron indicator on active tile — removed */
  .kpi-active-tile::after { display: none; }
}

/* — Icon (absolute top-right badge) — */
.live-kpi-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid transparent;
  transition: transform 200ms ease;
}
.live-kpi-card:hover .live-kpi-icon { transform: scale(1.08); }
.live-kpi-icon svg { width: 16px; height: 16px; }

.live-kpi-icon-running { color: #34d399; background: rgba(16, 185, 129, 0.20); border-color: rgba(16, 185, 129, 0.30); }
.live-kpi-icon-stopped { color: #fbbf24; background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.28); }
.live-kpi-icon-offline { color: #f87171; background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.28); }
.live-kpi-icon-gw      { color: #00b4d8; background: rgba(0, 180, 216, 0.18); border-color: rgba(0, 180, 216, 0.28); }
.live-kpi-icon-all     { color: #38bdf8; background: rgba(56, 189, 248, 0.18); border-color: rgba(56, 189, 248, 0.28); }

/* — Label (top-left, white/light) — */
.live-kpi-label {
  color: #dfe8f0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 56px);
  margin-bottom: 14px;
}

/* — Value (bottom-left, large number) — */
.live-kpi-value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}

/* — Skeleton shimmer block (shown while kpi-skeleton class present) — */
.kpi-skeleton {
  position: relative;
  color: transparent !important;
}
.kpi-skeleton::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 28px;
  border-radius: 6px;
  background: rgba(51, 65, 85, 0.7);
  animation: kpiShimmer 1.8s ease-in-out infinite;
}
@keyframes kpiShimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

/* — "Awaiting data" text (hidden once value loads) — */
.kpi-awaiting {
  color: #8b9bb0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  margin-top: 8px;
  transition: opacity 200ms ease;
}
/* Hide awaiting text when skeleton is removed (value is loaded) */
.live-kpi-card:not(:has(.kpi-skeleton)) .kpi-awaiting {
  display: none;
}

/* — Swap animations — */
@keyframes kpiTileExit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.92); }
}
@keyframes kpiTileEnter {
  from { opacity: 0; transform: scale(0.92) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.kpi-tile-exit  { animation: kpiTileExit 180ms ease forwards; }
.kpi-tile-enter { animation: kpiTileEnter 300ms cubic-bezier(.4,0,.2,1) forwards; }

/* — Machine name in KPI panel (read-only) — */
.kpi-machine-name {
  cursor: default;
  border-radius: 6px;
  padding: 1px 5px;
  margin: -1px -5px;
  display: inline-block;
  max-width: 100%;
  position: relative;
}

/* — Inline rename editing state — */
.kpi-rename-active {
  display: flex;
  align-items: center;
  gap: 6px;
  animation: kpiRenameIn 200ms cubic-bezier(.4,0,.2,1);
}
@keyframes kpiRenameIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kpi-rename-input {
  flex: 1;
  min-width: 0;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  font-family: inherit;
}
.kpi-rename-input:focus {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}
html:not(.dark) .kpi-rename-input {
  background: #fff;
  border-color: rgba(14, 165, 233, 0.35);
  color: #0f172a;
}
html:not(.dark) .kpi-rename-input:focus {
  border-color: rgba(14, 165, 233, 0.6);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.10);
}
.kpi-rename-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 120ms ease;
  flex-shrink: 0;
}
.kpi-rename-btn:active { transform: scale(0.9); }
.kpi-rename-btn-save {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.30);
  color: #34d399;
}
.kpi-rename-btn-save:hover { background: rgba(16, 185, 129, 0.28); }
.kpi-rename-btn-cancel {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.25);
  color: #f87171;
}
.kpi-rename-btn-cancel:hover { background: rgba(239, 68, 68, 0.24); }
.kpi-rename-btn-reset {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.20);
  color: #94a3b8;
}
.kpi-rename-btn-reset:hover { background: rgba(148, 163, 184, 0.22); }

/* — Bubble Panel — */
.kpi-bubble {
  position: relative;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 400ms cubic-bezier(.4,0,.2,1),
              opacity 300ms ease,
              margin-top 300ms ease;
}
.kpi-bubble-open {
  max-height: 70vh;
  opacity: 1;
  margin-top: 10px;
  overflow: visible;
}
.kpi-bubble-closed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
}

/* Arrow pointing up toward active tile */
.kpi-bubble-arrow {
  position: absolute;
  top: -7px;
  width: 14px;
  height: 14px;
  z-index: 2;
  pointer-events: none;
  transform: translateX(-50%);
  transition: left 300ms cubic-bezier(.4,0,.2,1), opacity 200ms ease;
}
.kpi-bubble-arrow::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, rgba(15, 32, 50, 0.95), rgba(12, 26, 42, 0.95));
  border-top: 1px solid rgba(56, 189, 248, 0.18);
  border-left: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 2px 0 0 0;
  transform: rotate(45deg);
}

.kpi-bubble-inner {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 140, 200, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(15, 32, 50, 0.92), rgba(12, 26, 42, 0.95));
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.kpi-bubble-header {
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.kpi-bubble.kpi-theme-all .kpi-bubble-inner { border-color: rgba(56, 189, 248, 0.16); }
.kpi-bubble.kpi-theme-all .kpi-bubble-arrow::before { border-color: rgba(56, 189, 248, 0.18); }
.kpi-bubble.kpi-theme-all .kpi-bubble-header { border-color: rgba(56, 189, 248, 0.14); }

.kpi-bubble.kpi-theme-running .kpi-bubble-inner {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(16, 185, 129, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(15, 32, 50, 0.92), rgba(12, 26, 42, 0.95));
  border-color: rgba(52, 211, 153, 0.20);
}
.kpi-bubble.kpi-theme-running .kpi-bubble-arrow::before { border-color: rgba(52, 211, 153, 0.24); }
.kpi-bubble.kpi-theme-running .kpi-bubble-header { border-color: rgba(52, 211, 153, 0.16); }

.kpi-bubble.kpi-theme-stopped .kpi-bubble-inner {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(245, 158, 11, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(15, 32, 50, 0.92), rgba(12, 26, 42, 0.95));
  border-color: rgba(245, 158, 11, 0.22);
}
.kpi-bubble.kpi-theme-stopped .kpi-bubble-arrow::before { border-color: rgba(245, 158, 11, 0.24); }
.kpi-bubble.kpi-theme-stopped .kpi-bubble-header { border-color: rgba(245, 158, 11, 0.18); }

.kpi-bubble.kpi-theme-offline .kpi-bubble-inner {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(239, 68, 68, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(15, 32, 50, 0.92), rgba(12, 26, 42, 0.95));
  border-color: rgba(248, 113, 113, 0.24);
}
.kpi-bubble.kpi-theme-offline .kpi-bubble-arrow::before { border-color: rgba(248, 113, 113, 0.26); }
.kpi-bubble.kpi-theme-offline .kpi-bubble-header { border-color: rgba(248, 113, 113, 0.18); }

.kpi-bubble.kpi-theme-gateways .kpi-bubble-inner {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 180, 216, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(15, 32, 50, 0.92), rgba(12, 26, 42, 0.95));
  border-color: rgba(0, 180, 216, 0.20);
}
.kpi-bubble.kpi-theme-gateways .kpi-bubble-arrow::before { border-color: rgba(0, 180, 216, 0.24); }
.kpi-bubble.kpi-theme-gateways .kpi-bubble-header { border-color: rgba(0, 180, 216, 0.16); }

.kpi-bubble-body {
  padding: 12px 14px 14px;
  max-height: 52vh;
  overflow-y: auto;
}

/* — Phone responsive — */
@media (max-width: 640px), (pointer: coarse) and (max-width: 932px) {
  .kpi-rail { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .live-kpi-card { min-height: 100px; padding: 14px 14px 16px; border-radius: 13px; }
  .kpi-active-tile { padding-bottom: 28px; } /* room for chevron */
  .live-kpi-icon { width: 34px; height: 34px; border-radius: 9px; top: 14px; right: 14px; }
  .live-kpi-label { font-size: 10.5px; margin-bottom: 12px; }
  .live-kpi-value { font-size: 1.75rem; }
  .kpi-skeleton::before { width: 50px; height: 24px; }
  .kpi-awaiting { font-size: 10.5px; }
  .kpi-bubble-body { max-height: 45vh; }
}

/* — Tablet: still 2 columns, bubble spans full — */
@media (min-width: 768px) and (max-width: 899px) {
  .kpi-rail {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .kpi-bubble {
    grid-column: 1 / -1;
  }
  .live-kpi-card {
    min-height: 108px;
    padding: 16px 16px 18px;
    border-radius: 14px;
  }
  .live-kpi-icon {
    width: 36px;
    height: 36px;
    top: 15px;
    right: 15px;
    border-radius: 10px;
  }
  .live-kpi-icon svg { width: 15px; height: 15px; }
  .live-kpi-label { font-size: 10.5px; margin-bottom: 12px; }
  .live-kpi-value { font-size: 1.8rem; }
  .kpi-skeleton::before { width: 50px; height: 24px; }
  .kpi-awaiting { font-size: 10px; }
}

/* — Desktop: 5 tiles in one row — */
@media (min-width: 900px) {
  .kpi-rail {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }
  .kpi-bubble {
    grid-column: 1 / -1;
  }
  .live-kpi-card {
    min-height: 112px;
    padding: 18px 18px 20px;
    border-radius: 15px;
  }
  .live-kpi-icon {
    width: 38px;
    height: 38px;
    top: 16px;
    right: 16px;
    border-radius: 10px;
  }
  .live-kpi-icon svg { width: 16px; height: 16px; }
  .live-kpi-label { font-size: 11px; margin-bottom: 14px; }
  .live-kpi-value { font-size: 1.9rem; }
  .kpi-skeleton::before { width: 52px; height: 26px; }
  .kpi-awaiting { font-size: 10px; }
}

/* — Light mode — */
html:not(.dark) .live-kpi-card {
  background: rgba(241, 245, 249, 0.8);
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 4px rgba(15, 23, 42, 0.06);
}
html:not(.dark) .live-kpi-card:hover {
  border-color: rgba(100, 116, 139, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 6px 18px rgba(15, 23, 42, 0.1);
}
html:not(.dark) .kpi-active-tile {
  border-color: rgba(100, 116, 139, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 2px 8px rgba(15, 23, 42, 0.08);
}
html:not(.dark) .live-kpi-label { color: #334155; }
html:not(.dark) .kpi-awaiting { color: #94a3b8; }
html:not(.dark) .kpi-skeleton::before { background: rgba(203, 213, 225, 0.6); }
html:not(.dark) .kpi-bubble-inner {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.97));
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}
html:not(.dark) .kpi-bubble-arrow::before {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(148, 163, 184, 0.25);
}
html:not(.dark) .kpi-bubble-header { border-color: rgba(148, 163, 184, 0.15); }

/* ══════════════════════════════════════════════════════════
   CSS TOOLTIP SYSTEM — Use data-tooltip attribute
   ══════════════════════════════════════════════════════════ */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 12px;
  border-radius: var(--radius-sm, 8px);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--lux-fast, 180ms), transform var(--lux-fast, 180ms);
  z-index: var(--z-toast, 400);
}
html.dark [data-tooltip]::after {
  background: rgba(15, 25, 35, 0.95);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
html:not(.dark) [data-tooltip]::after {
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tv-mode .mobile-bottom-nav { display: none !important; }

/* =========================================================
   Light Mode Readability + Consistency Hotfix Pack
   ========================================================= */
html:not(.dark) #page-nodes .text-emerald-400\/70,
html:not(.dark) #page-nodes .text-amber-400\/60 {
  color: #334155 !important;
  font-weight: 700 !important;
}

html:not(.dark) .nc-status,
html:not(.dark) .nc-badge-run,
html:not(.dark) .nc-badge-rfid {
  font-weight: 700 !important;
}

html:not(.dark) .nc-op-line {
  color: #0369a1 !important;
  text-shadow: none !important;
}

/* Reduce unnecessary glow on primary action buttons called out by user */
#page-operators button[onclick*="openOperatorModal"],
#page-compare button[onclick*="runCompare"],
#page-settings button[onclick*="saveAdminFeatureFlags"],
#page-settings #claimGwBtn,
#page-settings button[onclick*="saveAccountEmails"],
#page-settings button[onclick*="changeFactoryPassword"],
#page-ai button[onclick*="sendChat"] {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14) !important;
  filter: none !important;
}

#page-operators button[onclick*="openOperatorModal"]:hover,
#page-compare button[onclick*="runCompare"]:hover,
#page-settings button[onclick*="saveAdminFeatureFlags"]:hover,
#page-settings #claimGwBtn:hover,
#page-settings button[onclick*="saveAccountEmails"]:hover,
#page-settings button[onclick*="changeFactoryPassword"]:hover,
#page-ai button[onclick*="sendChat"]:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18) !important;
  transform: translateY(-1px);
}

html:not(.dark) #page-compare button[onclick*="runCompare"] {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(3, 105, 161, 0.45) !important;
}

/* Sign-out should not look blank in light mode */
html:not(.dark) #authSignOutBtn {
  background: rgba(254, 242, 242, 0.9) !important;
  border-color: rgba(220, 38, 38, 0.28) !important;
  color: #b91c1c !important;
}

html:not(.dark) #authSignOutBtn:hover {
  background: rgba(254, 226, 226, 0.96) !important;
  border-color: rgba(185, 28, 28, 0.4) !important;
  color: #991b1b !important;
}

/* Demo mode Enable/Disable button styling */
html:not(.dark) #demoModeOnBtn {
  background: #059669 !important;
  color: #ffffff !important;
  border: 1px solid rgba(5, 150, 105, 0.5) !important;
  box-shadow: none !important;
}

html:not(.dark) #demoModeOffBtn {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(220, 38, 38, 0.35) !important;
  box-shadow: none !important;
}

/* Shift events cards and controls in light mode */
html:not(.dark) #shiftRfidEvents [data-shift-id] {
  background: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.32) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="color:#f1f5f9"],
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="color:#e2e8f0"],
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="color:#cbd5e1"] {
  color: #0f172a !important;
}

html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="color:#64748b"],
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="color:#475569"] {
  color: #475569 !important;
}

html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="background:rgba(30,41,59,0.6)"],
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="background:rgba(30, 41, 59, 0.6)"] {
  background: #ffffff !important;
}

html:not(.dark) #shiftRfidEvents button {
  box-shadow: none !important;
}

html:not(.dark) #shiftRfidEvents button[onclick*="clearShiftSelection"] {
  background: rgba(148, 163, 184, 0.12) !important;
  color: #334155 !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
}

html:not(.dark) #shiftRfidEvents button[onclick*="applyShiftBulkAction('archive"],
html:not(.dark) #shiftRfidEvents button[onclick*="openShiftReportModal"] {
  background: rgba(2, 132, 199, 0.12) !important;
  color: #0c4a6e !important;
  border-color: rgba(2, 132, 199, 0.34) !important;
}

html:not(.dark) #shiftRfidEvents button[onclick*="applyShiftBulkAction('delete"],
html:not(.dark) #shiftRfidEvents button[onclick*="endShiftFromCard"] {
  background: rgba(220, 38, 38, 0.1) !important;
  color: #991b1b !important;
  border-color: rgba(220, 38, 38, 0.34) !important;
}

html:not(.dark) #shiftRfidEvents button[onclick*="applyShiftBulkAction"]:hover,
html:not(.dark) #shiftRfidEvents button[onclick*="openShiftReportModal"]:hover,
html:not(.dark) #shiftRfidEvents button[onclick*="endShiftFromCard"]:hover {
  filter: brightness(0.98);
}

/* Shift history readability */
html:not(.dark) #shiftTimeline .bg-surface-800\/60,
html:not(.dark) #shiftTimeline .bg-surface-900,
html:not(.dark) #shiftTimeline .bg-surface-900\/40 {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}

html:not(.dark) #shiftTimeline .text-gray-400,
html:not(.dark) #shiftTimeline .text-gray-500,
html:not(.dark) #shiftTimeline .text-white {
  color: #334155 !important;
}

html:not(.dark) #shiftTimeline .relative.h-6 {
  background: #e2e8f0 !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
}

html:not(.dark) #shiftTimeline span[style*="background:"][style*="33;color:"] {
  color: #0f172a !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
}

/* Reset renamable fields should be clearly destructive and readable */
html:not(.dark) #page-settings button[onclick*="resetRenamableFields"] {
  background: rgba(220, 38, 38, 0.12) !important;
  color: #991b1b !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
  box-shadow: none !important;
}

html:not(.dark) #page-settings button[onclick*="resetRenamableFields"]:hover {
  background: rgba(220, 38, 38, 0.2) !important;
  color: #7f1d1d !important;
}

/* AI bubbles, table numbers, and send controls */
html:not(.dark) #page-ai .chat-msg .bg-brand-600\/30,
html:not(.dark) #page-ai .chat-msg .bg-brand-500\/30 {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html:not(.dark) #page-ai .chat-msg .bg-surface-700\/50 {
  background: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: #1e293b !important;
  box-shadow: none !important;
}

html:not(.dark) #page-ai .ai-table {
  border-color: rgba(148, 163, 184, 0.28) !important;
}

html:not(.dark) #page-ai .ai-table th {
  background: #0f172a !important;
  color: #7dd3fc !important;
}

html:not(.dark) #page-ai .ai-table td,
html:not(.dark) #page-ai .ai-table td.ai-num,
html:not(.dark) #page-ai .unit-suffix {
  color: #0f172a !important;
  font-weight: 600;
}

html:not(.dark) #page-ai .ai-table td {
  background: #f8fafc !important;
  border-bottom-color: rgba(148, 163, 184, 0.28) !important;
}

/* Copy buttons (IDs/log copy) */
html:not(.dark) .copy-id-btn,
html:not(.dark) button[onclick*="copy"] {
  background: rgba(2, 132, 199, 0.08) !important;
  color: #0369a1 !important;
  border-color: rgba(2, 132, 199, 0.26) !important;
  box-shadow: none !important;
}

html:not(.dark) .copy-id-btn:hover,
html:not(.dark) button[onclick*="copy"]:hover {
  background: rgba(2, 132, 199, 0.16) !important;
  color: #0c4a6e !important;
}

/* ══════════════════════════════════════════════════════════════════
   SHELL REDESIGN v3.0 — Premium Global UI Overhaul
   Topbar, Nav, Page Frame, Cards, Controls, Dark/Light, Motion
   ══════════════════════════════════════════════════════════════════ */

/* ── TOPBAR: Header logo sizing ── */
.topbar.premium-header #headerLogo {
  height: 28px !important;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 180, 216, 0.12));
  transition: filter 200ms ease;
}
.topbar.premium-header:hover #headerLogo {
  filter: drop-shadow(0 2px 12px rgba(0, 180, 216, 0.2));
}

/* Topbar title refinement */
.topbar.premium-header #pageTitle {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
.topbar.premium-header #pageSubtitle {
  font-size: 10px !important;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

/* Topbar action buttons — refined pill shape */
.topbar.premium-header .flex.items-center.justify-end button,
.topbar.premium-header .flex.items-center.justify-end a {
  border-radius: 10px !important;
  padding: 6px !important;
  background: rgba(148, 163, 184, 0.06) !important;
  border: 1px solid rgba(148, 163, 184, 0.14);
  transition: all 180ms var(--lux-ease) !important;
}
.topbar.premium-header .flex.items-center.justify-end button:hover,
.topbar.premium-header .flex.items-center.justify-end a:hover {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.16);
  transform: translateY(-1px) !important;
}
html:not(.dark) .topbar.premium-header .flex.items-center.justify-end button,
html:not(.dark) .topbar.premium-header .flex.items-center.justify-end a {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.08);
  color: #475569 !important;
}
html:not(.dark) .topbar.premium-header .flex.items-center.justify-end button:hover,
html:not(.dark) .topbar.premium-header .flex.items-center.justify-end a:hover {
  background: rgba(15, 23, 42, 0.08) !important;
  border-color: rgba(15, 23, 42, 0.14);
  color: #0f172a !important;
}

/* Live pulse indicator refinement */
.live-pulse {
  padding: 4px 10px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  background: rgba(16, 185, 129, 0.06) !important;
  border: 1px solid rgba(16, 185, 129, 0.12) !important;
}

/* ── DESKTOP NAV: Light mode refinement ── */
html:not(.dark) #desktopNav {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) #desktopNav .nav-btn {
  color: #475569 !important;
}
html:not(.dark) #desktopNav .nav-btn:hover {
  color: #0f172a !important;
  background: rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) #desktopNav .nav-btn.active {
  color: #0284c7 !important;
  background: rgba(57, 200, 255, 0.08) !important;
  border-color: transparent !important;
}
html:not(.dark) #desktopNav .nav-btn.active::before {
  background: linear-gradient(90deg, #0284c7, var(--acxa-cyan, #39c8ff)) !important;
}

/* ── SIDEBAR: Refined proportions ── */
.sidebar {
  border-right-color: rgba(148, 163, 184, 0.06) !important;
}
.sidebar .nav-btn {
  border-radius: 12px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  transition: all 200ms var(--lux-ease) !important;
}
.sidebar .nav-btn:hover {
  background: rgba(148, 163, 184, 0.14) !important;
  transform: none !important;
}
.sidebar .nav-btn.active {
  background: rgba(14, 165, 233, 0.10) !important;
  color: #e2e8f0 !important;
}
.sidebar .nav-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #0ea5e9, #38bdf8);
}

/* ── PAGE FRAME: Consistent spacing rhythm ── */
.page {
  padding: 20px 16px !important;
}
@media (min-width: 768px) {
  .page {
    padding: 24px !important;
  }
}
@media (min-width: 1280px) {
  .page {
    padding: 28px 32px !important;
  }
}

/* Section spacing within pages */
.page > .mb-6,
.page > .mb-8 {
  margin-bottom: 20px !important;
}
@media (min-width: 768px) {
  .page > .mb-6,
  .page > .mb-8 {
    margin-bottom: 24px !important;
  }
}

/* ── CARDS & SURFACES: Refined hierarchy ── */
/* Primary card — elevated, interactive panels */
.premium-card {
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, 0.07) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: all 220ms var(--lux-ease) !important;
}
.premium-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark) .premium-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}
html:not(.dark) .premium-card:hover {
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

/* Surface cards (bg-surface-800 containers) */
html.dark [class*="bg-surface-800"] {
  background: rgba(13, 20, 30, 0.65) !important;
  border-color: rgba(148, 163, 184, 0.06) !important;
}

/* Rounded surface containers — tighter radius */
.premium-card,
[class*="bg-surface-800"],
[class*="bg-surface-900"] {
  border-radius: 14px !important;
}

/* Card inner glow on hover */
.card-hover:hover,
.ota-target-item:hover,
.wifi-net-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ── SHARED CONTROLS: Buttons ── */
/* Primary action buttons — refined radius + shadows */
button[class*="from-brand-"],
button[class*="from-brand"],
button[class*="from-emerald"],
button[class*="from-green"] {
  border-radius: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}
button[class*="from-brand-"]:active,
button[class*="from-brand"]:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.12) !important;
}

/* Secondary/neutral buttons */
button[class*="bg-surface-700"],
button[class*="bg-surface-800"] {
  border-radius: 10px !important;
  font-weight: 500 !important;
}

/* Small / icon buttons */
button[class*="rounded-lg"] {
  border-radius: 10px !important;
}

/* ── SHARED CONTROLS: Inputs ── */
.input-field,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  border-radius: 12px !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
}

/* Refined focus ring — thinner, more precise */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25), 0 0 0 4px rgba(14, 165, 233, 0.10) !important;
}
html:not(.dark) button:focus-visible,
html:not(.dark) a:focus-visible,
html:not(.dark) input:focus-visible,
html:not(.dark) select:focus-visible,
html:not(.dark) textarea:focus-visible {
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.20), 0 0 0 4px rgba(2, 132, 199, 0.08) !important;
}

/* ── SHARED CONTROLS: Badges ── */
.alert-badge,
[data-alert-badge] {
  border-radius: 6px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
}

/* Advanced feature tag */
.adv-tag {
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  padding: 1px 5px !important;
  border-radius: 4px !important;
}

/* ── SHARED CONTROLS: Modals — refined backdrop + container ── */
#setupModal,
.export-modal-overlay,
.kbd-modal-overlay,
.onboard-overlay,
#faultDetailModal,
#adminBootLogModal,
#signalChartModal,
#bootHistoryModal,
#adminLoginOverlay {
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
}

#setupModal > div,
.export-modal,
.kbd-modal,
.onboard-card,
#faultDetailModal > div,
#signalChartModal > div,
#bootHistoryModal > div,
#adminBootLogModal > div > div,
#adminLoginOverlay > div {
  border-radius: 22px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Modal inputs and buttons — consistent radius */
#setupModal input,
#setupModal select,
.export-modal input,
.export-modal select,
.onboard-card input {
  border-radius: 12px !important;
}
#setupModal button,
.export-modal button,
.onboard-card button {
  border-radius: 12px !important;
}

/* ── TOOLTIPS: Refined ── */
[data-tooltip]::after {
  border-radius: 8px !important;
  padding: 5px 10px !important;
  font-size: 10.5px !important;
  font-weight: 500;
  letter-spacing: 0.01em;
}
html.dark [data-tooltip]::after {
  background: rgba(10, 18, 28, 0.96) !important;
  border-color: rgba(148, 163, 184, 0.10) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4) !important;
}
html:not(.dark) [data-tooltip]::after {
  background: #1e293b !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18) !important;
}

/* ── TABLES: Refined styling ── */
#faultEventTable,
#page-auth table,
.inspector-table,
.ai-table {
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
}
#faultEventTable th,
#page-auth th,
.inspector-table th,
.ai-table th {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  padding: 10px 14px !important;
}
#faultEventTable td,
#page-auth td,
.inspector-table td,
.ai-table td {
  font-size: 12.5px !important;
  padding: 10px 14px !important;
}

/* ── MOBILE BOTTOM NAV: Refined ── */
.mobile-bottom-nav .mob-nav-inner {
  border-radius: 20px !important;
  padding: 6px !important;
  gap: 4px !important;
  border-color: var(--acxa-line) !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.14), 0 -1px 3px rgba(0, 0, 0, 0.06) !important;
}

#mobileMoreMenu:not(.hidden) {
  max-height: calc(100svh - env(safe-area-inset-bottom, 0px) - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

#mobileMoreMenu:not(.hidden)::-webkit-scrollbar {
  display: none;
}

.mob-nav-btn {
  border-radius: var(--radius-md, 14px) !important;
  min-height: 48px !important;
  font-size: var(--fs-data-label, 10px) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600;
}
.mob-nav-btn svg {
  width: 17px !important;
  height: 17px !important;
}
.mob-nav-btn.active {
  transform: translateY(0) !important;
  background: var(--acxa-cyan-muted, rgba(57,200,255,0.12)) !important;
  color: var(--acxa-cyan, #39c8ff) !important;
}

/* ── FOOTER: Thinner, more refined ── */
.premium-footer .pf-body {
  padding: 0 !important;
}
.premium-footer .pf-body > div {
  padding: 18px 20px 16px !important;
  gap: 10px !important;
}
.premium-footer {
  background:
    linear-gradient(180deg, rgba(5, 11, 20, 0.32), rgba(3, 8, 16, 0.72)),
    radial-gradient(circle at top center, rgba(56, 189, 248, 0.08), transparent 48%) !important;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
.pf-glow {
  height: 1px !important;
  opacity: 0.6 !important;
}
.premium-footer .pf-brand {
  color: rgba(248, 250, 252, 0.96) !important;
  text-shadow: 0 4px 18px rgba(56, 189, 248, 0.08);
}
.premium-footer .pf-tagline {
  color: rgba(191, 219, 254, 0.62) !important;
  letter-spacing: 0.31em !important;
}
.premium-footer .pf-version {
  color: rgba(148, 163, 184, 0.58) !important;
}
.premium-footer .pf-legal {
  color: rgba(148, 163, 184, 0.56) !important;
}
.premium-footer .pf-status-pill {
  border-color: rgba(34, 197, 94, 0.24) !important;
  background: linear-gradient(180deg, rgba(12, 26, 18, 0.58), rgba(9, 19, 14, 0.38)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}
.premium-footer .pf-status-text {
  color: rgba(220, 252, 231, 0.84) !important;
}
.premium-footer .pf-pulse {
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.4), 0 0 10px rgba(34, 197, 94, 0.16) !important;
}

@media (max-width: 768px) {
  :root {
    --mobile-nav-gap: 10px;
    --mobile-nav-reserve: calc(env(safe-area-inset-bottom, 0px) + 76px);
  }

  .mobile-bottom-nav {
    background: var(--acxa-mobile-footer-underlay) !important;
  }

  html,
  body {
    min-height: 100svh !important;
  }

  body {
    display: block !important;
  }

  body.acxa-command-shell .main-content,
  body.acxa-command-shell #mainContent,
  body.nodes-page-active .main-content,
  body.live-page-active .main-content,
  body.alerts-page-active .main-content,
  body.subscription-page-active .main-content {
    box-sizing: border-box !important;
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }

  #mobileMoreMenu:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 4px;
    bottom: calc(var(--mobile-nav-reserve, calc(env(safe-area-inset-bottom, 0px) + 76px)) + 12px) !important;
    max-height: calc(100svh - env(safe-area-inset-bottom, 0px) - 150px) !important;
  }

  .premium-footer {
    position: relative !important;
    bottom: auto !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  .premium-footer .pf-body {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important;
    min-height: 0 !important;
    display: block !important;
  }

  .premium-footer .pf-body > div {
    margin-top: 0 !important;
    padding: 18px 20px 14px !important;
  }

  body.live-page-active .premium-footer,
  body.nodes-page-active .premium-footer,
  body.alerts-page-active .premium-footer,
  body.subscription-page-active .premium-footer,
  body.reports-page-active .premium-footer,
  body.stats-page-active .premium-footer,
  body.ai-page-active .premium-footer,
  body.operators-page-active .premium-footer,
  body.shifts-page-active .premium-footer,
  body.settings-page-active .premium-footer,
  body.account-page-active .premium-footer {
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }

  body.live-page-active .premium-footer .pf-body > div,
  body.nodes-page-active .premium-footer .pf-body > div,
  body.alerts-page-active .premium-footer .pf-body > div,
  body.subscription-page-active .premium-footer .pf-body > div,
  body.reports-page-active .premium-footer .pf-body > div,
  body.stats-page-active .premium-footer .pf-body > div,
  body.ai-page-active .premium-footer .pf-body > div,
  body.operators-page-active .premium-footer .pf-body > div,
  body.shifts-page-active .premium-footer .pf-body > div,
  body.settings-page-active .premium-footer .pf-body > div,
  body.account-page-active .premium-footer .pf-body > div {
    padding-bottom: 14px !important;
  }
}

/* ── DARK MODE: Command-room depth ── */
html.dark {
  --acxa-mobile-footer-underlay: linear-gradient(180deg, #0c1322 0%, #080e1a 100%);
}

html.dark body {
  position: relative;
  background:
    radial-gradient(ellipse 68% 54% at 50% -8%, rgba(56, 189, 248, 0.08), transparent 52%),
    radial-gradient(ellipse 60% 50% at 8% 6%, rgba(57,200,255,0.06), transparent 42%),
    radial-gradient(ellipse 50% 45% at 92% 4%, rgba(30,64,175,0.07), transparent 40%),
    radial-gradient(ellipse 46% 38% at 50% 100%, rgba(15, 23, 42, 0.36), transparent 70%),
    linear-gradient(168deg, var(--acxa-bg-0,#060c14) 0%, var(--acxa-bg-1,#0a1320) 40%, var(--acxa-bg-2,#0e1926) 100%) !important;
  background-attachment: fixed !important;
}

html.dark body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 42% 32% at 14% 84%, rgba(14, 165, 233, 0.05), transparent 68%),
    radial-gradient(ellipse 36% 28% at 84% 78%, rgba(59, 130, 246, 0.05), transparent 70%),
    radial-gradient(ellipse 50% 34% at 50% 24%, rgba(56, 189, 248, 0.04), transparent 72%),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.016) 0, rgba(148, 163, 184, 0.016) 1px, transparent 1px, transparent 178px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 18%, transparent 78%, rgba(2, 8, 20, 0.12));
  opacity: 0.92;
}

/* ── LIGHT MODE: Cleaner whites ── */
html:not(.dark) body {
  background: linear-gradient(180deg, #f5f8fb 0%, #edf2f7 50%, #e8eef5 100%) !important;
}

/* Light mode sidebar */
html:not(.dark) .sidebar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-right-color: rgba(0, 0, 0, 0.06) !important;
}
html:not(.dark) .sidebar .nav-btn {
  color: #475569 !important;
}
html:not(.dark) .sidebar .nav-btn:hover {
  color: #0f172a !important;
  background: rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) .sidebar .nav-btn.active {
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.08) !important;
}
html:not(.dark) .sidebar .nav-btn.active::before {
  background: linear-gradient(180deg, #0284c7, #0ea5e9) !important;
}

/* Light mode mobile bottom nav */
html:not(.dark) .mobile-bottom-nav .mob-nav-inner {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08), 0 -1px 3px rgba(15, 23, 42, 0.04) !important;
}

/* ── LIGHT MODE: readability + lifted cards ───────────────────────── */
html:not(.dark) {
  --lux-light-page: #edf3f8;
  --lux-light-card: #ffffff;
  --lux-light-card-soft: #fbfdff;
  --lux-light-inner: #f7fafc;
  --acxa-mobile-footer-underlay: linear-gradient(180deg, #f1f5f9 0%, #e8ecf1 100%);
  --lux-light-border: rgba(148, 163, 184, 0.20);
  --lux-light-border-soft: rgba(148, 163, 184, 0.14);
  --lux-light-shadow-card: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --lux-light-shadow-card-hover: 0 8px 20px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
  --lux-light-shadow-inner: 0 1px 4px rgba(15, 23, 42, 0.04);
}

html:not(.dark) body {
  background:
    radial-gradient(ellipse 60% 50% at 85% 6%, rgba(57, 200, 255, 0.05), transparent 36%),
    linear-gradient(180deg, #f8fbfe 0%, var(--lux-light-page) 100%) !important;
}

html:not(.dark) .text-gray-300,
html:not(.dark) .text-gray-400,
html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400 {
  color: #334155 !important;
}

html:not(.dark) .text-gray-500,
html:not(.dark) .text-gray-600,
html:not(.dark) .text-slate-500,
html:not(.dark) .text-slate-600,
html:not(.dark) .unit-suffix,
html:not(.dark) .nc-data-label,
html:not(.dark) .empty-state-sub,
html:not(.dark) #factoryDisplayId,
html:not(.dark) .mob-nav-btn,
html:not(.dark) .search-input-icon {
  color: #475569 !important;
}

html:not(.dark) .topbar.premium-header {
  background: rgba(255,255,255,0.96) !important;
  border-bottom-color: rgba(148, 163, 184, 0.20) !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark) .topbar.premium-header .flex.items-center.justify-end button,
html:not(.dark) .topbar.premium-header .flex.items-center.justify-end a {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #334155 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark) .topbar.premium-header .flex.items-center.justify-end button:hover,
html:not(.dark) .topbar.premium-header .flex.items-center.justify-end a:hover {
  color: #0f172a !important;
  border-color: rgba(57, 200, 255, 0.28) !important;
  box-shadow: 0 2px 8px rgba(57, 200, 255, 0.10) !important;
}

html:not(.dark) .mobile-bottom-nav .mob-nav-inner {
  background: rgba(255,255,255,0.95) !important;
  border-color: var(--lux-light-border) !important;
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark) .mob-nav-btn.active {
  color: #0284c7 !important;
  background: rgba(57, 200, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(14, 116, 144, 0.06) !important;
}

html:not(.dark) [class*="bg-surface-800"]:not(button):not(a):not(summary):not(.topbar):not(.mob-nav-inner):not(.rename-popover-shell),
html:not(.dark) .premium-card,
html:not(.dark) .node-card,
html:not(.dark) .gateway-health-card,
html:not(.dark) .settings-shift-card,
html:not(.dark) #gatewayPanel details,
html:not(.dark) #nodeDetailPanel .rounded-2xl,
html:not(.dark) #page-settings .rounded-2xl,
html:not(.dark) #page-stats .rounded-2xl,
html:not(.dark) #page-compare .rounded-2xl,
html:not(.dark) #page-account .rounded-2xl,
html:not(.dark) #page-alerts .rounded-xl {
  background: linear-gradient(180deg, var(--lux-light-card) 0%, var(--lux-light-card-soft) 100%) !important;
  border-color: var(--lux-light-border) !important;
  box-shadow: var(--lux-light-shadow-card) !important;
}

html:not(.dark) [class*="bg-surface-900"]:not(button):not(a):not(input):not(select):not(textarea):not(summary),
html:not(.dark) .gw-info-cell,
html:not(.dark) .export-format-btn,
html:not(.dark) .gw-node-row,
html:not(.dark) .chart-shell,
html:not(.dark) .quick-hint-chip {
  background: linear-gradient(180deg, #ffffff 0%, var(--lux-light-inner) 100%) !important;
  border-color: var(--lux-light-border-soft) !important;
  box-shadow: var(--lux-light-shadow-inner) !important;
}

html:not(.dark) .card-hover:hover,
html:not(.dark) .premium-card:hover,
html:not(.dark) .node-card:hover,
html:not(.dark) #gatewayPanel details:hover,
html:not(.dark) .gw-node-row:hover,
html:not(.dark) .gw-info-cell:hover {
  box-shadow: var(--lux-light-shadow-card-hover) !important;
  border-color: rgba(57, 200, 255, 0.20) !important;
}

html:not(.dark) .chart-shell .text-gray-400,
html:not(.dark) .chart-shell .text-gray-500,
html:not(.dark) #page-alerts .text-xs.text-gray-400,
html:not(.dark) #page-alerts .text-gray-500,
html:not(.dark) .gw-info-cell .text-gray-500,
html:not(.dark) #operatorsGrid .text-\[10px\].text-gray-400,
html:not(.dark) #operatorsGrid .text-\[10px\].text-gray-500 {
  color: #475569 !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #64748b !important;
}

/* ── MOTION: Refined micro-interactions ── */
/* Smoother, less aggressive hover lifts */
.card-hover:hover {
  transform: translateY(-1px) !important;
}
.card-hover:active {
  transform: translateY(0) scale(0.995) !important;
}

/* Page transitions — smoother */
.page {
  transition: opacity 160ms ease !important;
}

/* Scroll-aware topbar shadow boost */
.topbar.premium-header {
  transition: box-shadow 200ms ease, background 200ms ease !important;
}

/* Touch device adjustments — remove hover lifts that cause sticky states */
@media (hover: none) {
  .card-hover:hover,
  .premium-card:hover,
  .live-kpi-card:hover,
  .ota-target-item:hover,
  .wifi-net-item:hover,
  button:hover,
  a[href]:hover,
  .tab-btn:hover,
  .nav-btn:hover {
    transform: none !important;
  }
}

/* Animation for content sections entering the viewport */
@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Search dropdown refinement */
#searchDropdown {
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}
#searchDropdown > div {
  border-radius: 10px !important;
  padding: 8px 10px !important;
  transition: all 150ms ease !important;
}
#searchDropdown > div:hover {
  transform: none !important;
  background: rgba(14, 165, 233, 0.08) !important;
}

/* User avatar in topbar — refined circle */
.user-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(14, 165, 233, 0.10);
  border: 1px solid rgba(14, 165, 233, 0.15);
  transition: all 180ms ease;
}
.user-avatar:hover {
  background: rgba(14, 165, 233, 0.18);
  border-color: rgba(14, 165, 233, 0.25);
}
html:not(.dark) .user-avatar {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.14);
}
html:not(.dark) .user-avatar:hover {
  background: rgba(2, 132, 199, 0.14);
}

/* ── SCROLLBAR: Custom premium scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.15);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.28);
}
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.12);
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.22);
}

/* ── SELECTION: Brand-colored text selection ── */
::selection {
  background: rgba(14, 165, 233, 0.25);
  color: inherit;
}
html:not(.dark) ::selection {
  background: rgba(2, 132, 199, 0.18);
}


/* =============================================================
   LIVE PAGE COCKPIT REDESIGN v3.0
   Elite factory monitoring command center
   ============================================================= */

/* ── COCKPIT HEADER: Combined banner + search zone ── */
.live-cockpit-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  margin-bottom: 18px;
  padding: 0;
  min-height: 40px;
}
.live-factory-banner {
  flex: 1;
  min-width: 0;
  text-align: left !important;
  margin-bottom: 0 !important;
}
.live-cockpit-header #factoryBanner {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: start;
  align-self: end;
}
.live-factory-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-cockpit-header #factoryDisplayName {
  font-size: clamp(1.85rem, 2.75vw, 2.45rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 8px 18px rgba(2, 8, 20, 0.18);
}
.live-factory-id {
  font-family: var(--font-ui);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.68);
  margin-top: 6px;
  line-height: 1;
}
html:not(.dark) .live-cockpit-header #factoryDisplayName {
  text-shadow: none;
}
html:not(.dark) .live-factory-id {
  color: rgba(71, 85, 105, 0.45);
}

@media (min-width: 1025px) {
  .live-cockpit-header {
    grid-template-columns: minmax(240px, 1fr) auto minmax(260px, 1fr);
    align-items: center;
    gap: 28px;
    margin-bottom: 26px;
    min-height: 120px;
  }

  .live-factory-banner {
    text-align: center !important;
  }

  .live-cockpit-header #factoryBanner {
    grid-column: 2;
    justify-self: center;
    align-self: center;
    text-align: center !important;
  }

  .live-factory-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .live-cockpit-header #factoryDisplayName {
    font-size: clamp(3rem, 4.8vw, 4.65rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em !important;
    padding-inline: 0.12em;
    text-wrap: balance;
  }

  .live-factory-id {
    margin-top: 10px;
    font-size: 11.5px;
    letter-spacing: 0.34em;
    color: rgba(186, 230, 253, 0.68);
  }

  .live-search-form {
    grid-column: 3;
    justify-self: end;
    align-self: center;
    width: min(320px, 100%);
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .live-factory-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .live-cockpit-header #factoryDisplayName {
    line-height: 1.04 !important;
    letter-spacing: -0.035em !important;
    padding-inline: 0.12em;
    text-wrap: balance;
  }
}

/* ── SEARCH: Premium instrumentation bar ── */
.live-search-form {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 260px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(180deg, rgba(14, 24, 39, 0.72), rgba(10, 18, 30, 0.58));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 20px rgba(2, 8, 20, 0.12);
  transition: border-color 280ms ease, box-shadow 280ms ease, background 280ms ease;
  position: relative;
  overflow: hidden;
  justify-self: end;
  align-self: end;
}
.live-search-form.focused {
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.08), 0 10px 28px rgba(2, 8, 20, 0.18);
  background: linear-gradient(180deg, rgba(16, 27, 44, 0.82), rgba(11, 20, 33, 0.72));
}
.live-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(148, 163, 184, 0.65);
  pointer-events: none;
  transition: color 250ms ease;
  width: 14px !important;
  height: 14px !important;
}
.live-search-form.focused .live-search-icon {
  color: rgba(56, 189, 248, 0.7);
}
.live-search-input {
  flex: 1;
  min-width: 0;
  padding: 0 10px 0 42px !important;
  font-size: 13px !important;
  font-weight: 500;
  color: #e2e8f0 !important;
  outline: none !important;
  letter-spacing: 0.01em;
  height: 100%;
  font-family: inherit;
}
/* High specificity to beat html.dark input[type="text"] global rules */
html.dark .live-search-form .live-search-input,
html:not(.dark) .live-search-form .live-search-input,
.live-search-form .live-search-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 10px 0 36px !important;
  border-radius: 0 !important;
}
.live-search-form .live-search-input:focus,
.live-search-form .live-search-input:focus-visible {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.live-search-input::placeholder {
  color: rgba(148, 163, 184, 0.4);
  font-weight: 400;
}
.live-search-clear {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.14);
  border: none;
  border-radius: 8px;
  color: rgba(148, 163, 184, 0.5);
  cursor: pointer;
  margin-right: 3px;
  transition: background 180ms ease, color 180ms ease;
}
.live-search-clear:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}
/* Search go button */
.live-search-go {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 165, 233, 0.10);
  border: none;
  border-radius: 8px;
  color: rgba(56, 189, 248, 0.7);
  cursor: pointer;
  margin-right: 1px;
  transition: background 180ms ease, color 180ms ease, transform 120ms ease;
}
.live-search-go:hover {
  background: rgba(14, 165, 233, 0.18);
  color: #38bdf8;
  transform: scale(1.06);
}
.live-search-go:active {
  transform: scale(0.95);
}
html:not(.dark) .live-search-go {
  background: rgba(14, 165, 233, 0.08);
  color: rgba(2, 132, 199, 0.6);
}
html:not(.dark) .live-search-go:hover {
  background: rgba(14, 165, 233, 0.14);
  color: #0284c7;
}

/* KPI item enter/exit animations */
.kpi-item-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .kpi-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .kpi-item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kpi-item-enter {
  animation: kpiItemEnter 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.kpi-item-exit {
  animation: kpiItemExit 0.2s ease both;
  pointer-events: none;
}
@keyframes kpiItemEnter {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kpiItemExit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.94); }
}

/* Light mode search */
html:not(.dark) .live-search-form {
  background: rgba(241, 245, 249, 0.7);
  border-color: rgba(148, 163, 184, 0.2);
}
html:not(.dark) .live-search-form.focused {
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.06), 0 2px 8px rgba(15, 23, 42, 0.04);
  background: rgba(255, 255, 255, 0.9);
}
html:not(.dark) .live-search-icon {
  color: rgba(100, 116, 139, 0.58);
}
html:not(.dark) .live-search-form.focused .live-search-icon {
  color: rgba(14, 165, 233, 0.6);
}
html:not(.dark) .live-search-input {
  color: #1e293b !important;
}
html:not(.dark) .live-search-input::placeholder {
  color: rgba(100, 116, 139, 0.5);
}
html:not(.dark) .live-search-clear {
  background: rgba(148, 163, 184, 0.1);
  color: rgba(100, 116, 139, 0.5);
}
html:not(.dark) .live-search-clear:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Mobile: stack header vertically */
@media (max-width: 640px) {
  .live-cockpit-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 36px;
    margin-top: 30px;
    margin-bottom: 14px;
  }
  .live-factory-banner {
    text-align: center !important;
  }
  .live-cockpit-header #factoryBanner {
    justify-self: stretch;
  }
  .live-search-form {
    width: 100% !important;
    justify-self: stretch;
    margin-top: 0;
  }
  .live-factory-name {
    font-size: 15px !important;
    text-align: center;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .live-cockpit-header #factoryDisplayName {
    font-size: clamp(2.35rem, 10.2vw, 3.35rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.04em !important;
    padding-inline: 0.12em;
    text-wrap: balance;
  }
  .live-factory-id {
    text-align: center;
    margin-top: 8px;
    font-size: 10px;
    letter-spacing: 0.28em;
  }
}

/* ── KPI STRIP OVERRIDES: Stronger number hierarchy, quieter labels ── */
#page-live .live-kpi-card {
  min-height: 96px;
  padding: 14px 14px 16px;
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.06), transparent 34%),
    linear-gradient(180deg, rgba(19, 28, 44, 0.62), rgba(11, 18, 31, 0.56));
  border-color: rgba(148, 163, 184, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -1px 0 rgba(15, 23, 42, 0.18),
    0 12px 28px rgba(2, 8, 20, 0.14),
    0 2px 6px rgba(2, 8, 20, 0.08);
  transition: transform 200ms cubic-bezier(.4,0,.2,1),
              border-color 200ms ease,
              box-shadow 200ms ease,
              background 200ms ease;
}
#page-live .live-kpi-card:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(21, 31, 48, 0.66), rgba(12, 20, 34, 0.58));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(15, 23, 42, 0.2),
    0 14px 28px rgba(2, 8, 20, 0.16),
    0 4px 10px rgba(2, 8, 20, 0.1);
}
#page-live .live-kpi-card:active {
  transform: scale(0.98);
}

/* Active tile — subtle accent, not loud glow */
#page-live .kpi-active-tile {
  border-color: rgba(56, 189, 248, 0.22);
  background: linear-gradient(180deg, rgba(22, 33, 50, 0.68), rgba(13, 21, 36, 0.6));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(56, 189, 248, 0.07),
    0 12px 26px rgba(2, 8, 20, 0.14),
    0 3px 8px rgba(2, 8, 20, 0.08);
}
#page-live .kpi-active-tile::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5), transparent);
  opacity: 0.8;
}
#page-live [data-kpi="running"].kpi-active-tile::before {
  background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.5), transparent);
}
#page-live [data-kpi="stopped"].kpi-active-tile::before {
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.5), transparent);
}
#page-live [data-kpi="offline"].kpi-active-tile::before {
  background: linear-gradient(90deg, transparent, rgba(248, 113, 113, 0.5), transparent);
}
#page-live [data-kpi="gateways"].kpi-active-tile::before {
  background: linear-gradient(90deg, transparent, rgba(0, 180, 216, 0.5), transparent);
}
#page-live .kpi-active-tile:hover {
  border-color: rgba(56, 189, 248, 0.3);
  transform: translateY(-1px);
}

/* Label: quieter, more refined */
#page-live .live-kpi-label {
  color: rgba(148, 163, 184, 0.7);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  max-width: calc(100% - 44px);
}

/* Value: dominant number — bigger, crisper */
#page-live .live-kpi-value {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: auto;
  transition: color 300ms ease;
}

/* Icon badges: smaller, tighter, more refined */
#page-live .live-kpi-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  top: 13px;
  right: 13px;
  border: none;
  opacity: 0.85;
  transition: transform 200ms ease, opacity 200ms ease;
}
#page-live .live-kpi-card:hover .live-kpi-icon {
  transform: scale(1.06);
  opacity: 1;
}
#page-live .live-kpi-icon svg {
  width: 14px;
  height: 14px;
}

/* Awaiting text */
#page-live .kpi-awaiting {
  font-size: 10px;
  color: rgba(100, 116, 139, 0.5);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* Skeleton pulse refinement */
#page-live .kpi-skeleton::before {
  width: 48px;
  height: 24px;
  border-radius: 6px;
  background: rgba(51, 65, 85, 0.5);
}

/* ── KPI STRIP RESPONSIVE OVERRIDES ── */
@media (max-width: 640px), (pointer: coarse) and (max-width: 932px) {
  #page-live .live-kpi-card {
    min-height: 86px;
    padding: 12px 12px 14px;
    border-radius: 12px;
  }
  #page-live .kpi-active-tile { padding-bottom: 24px; }
  #page-live .live-kpi-icon { width: 28px; height: 28px; border-radius: 8px; top: 11px; right: 11px; }
  #page-live .live-kpi-icon svg { width: 12px; height: 12px; }
  #page-live .live-kpi-label { font-size: 9.5px; margin-bottom: 8px; }
  #page-live .live-kpi-value { font-size: 1.65rem; }
  #page-live .kpi-skeleton::before { width: 42px; height: 20px; }
  #page-live .kpi-awaiting { font-size: 9.5px; }
  #page-live .kpi-active-tile::before { left: 12px; right: 12px; }
}

@media (min-width: 768px) and (max-width: 899px) {
  #page-live .live-kpi-card {
    min-height: 94px;
    padding: 14px 14px 16px;
    border-radius: 13px;
  }
  #page-live .live-kpi-icon { width: 30px; height: 30px; top: 13px; right: 13px; border-radius: 8px; }
  #page-live .live-kpi-icon svg { width: 13px; height: 13px; }
  #page-live .live-kpi-label { font-size: 9.5px; margin-bottom: 9px; }
  #page-live .live-kpi-value { font-size: 1.75rem; }
}

@media (min-width: 900px) {
  #page-live .live-kpi-card {
    min-height: 100px;
    padding: 16px 16px 18px;
    border-radius: 14px;
  }
  #page-live .live-kpi-icon { width: 34px; height: 34px; top: 14px; right: 14px; border-radius: 9px; }
  #page-live .live-kpi-icon svg { width: 15px; height: 15px; }
  #page-live .live-kpi-label { font-size: 10px; margin-bottom: 10px; }
  #page-live .live-kpi-value { font-size: 2rem; }
  #page-live .kpi-active-tile::before { left: 18px; right: 18px; }
}

/* ── KPI STRIP LIGHT MODE ── */
html:not(.dark) #page-live .live-kpi-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(248, 250, 252, 0.78));
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(226, 232, 240, 0.46),
    0 10px 22px rgba(15, 23, 42, 0.05),
    0 2px 6px rgba(15, 23, 42, 0.04);
}
html:not(.dark) #page-live .live-kpi-card:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.84));
  border-color: rgba(100, 116, 139, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.97),
    inset 0 -1px 0 rgba(226, 232, 240, 0.52),
    0 14px 26px rgba(15, 23, 42, 0.08),
    0 4px 10px rgba(15, 23, 42, 0.05);
}
html:not(.dark) #page-live .kpi-active-tile {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.88));
  border-color: rgba(14, 165, 233, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.97),
    inset 0 -1px 0 rgba(226, 232, 240, 0.52),
    0 0 0 1px rgba(14, 165, 233, 0.05),
    0 12px 24px rgba(15, 23, 42, 0.07),
    0 3px 8px rgba(15, 23, 42, 0.05);
}
html:not(.dark) #page-live .kpi-active-tile::before {
  background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.4), transparent);
}
html:not(.dark) #page-live [data-kpi="running"].kpi-active-tile::before {
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.4), transparent);
}
html:not(.dark) #page-live [data-kpi="stopped"].kpi-active-tile::before {
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.4), transparent);
}
html:not(.dark) #page-live [data-kpi="offline"].kpi-active-tile::before {
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.4), transparent);
}
html:not(.dark) #page-live [data-kpi="gateways"].kpi-active-tile::before {
  background: linear-gradient(90deg, transparent, rgba(2, 132, 199, 0.4), transparent);
}
html:not(.dark) #page-live .live-kpi-label {
  color: rgba(71, 85, 105, 0.65);
}
html:not(.dark) #page-live .kpi-awaiting {
  color: rgba(148, 163, 184, 0.6);
}
html:not(.dark) #page-live .kpi-skeleton::before {
  background: rgba(203, 213, 225, 0.5);
}

/* ── BUBBLE PANEL OVERRIDES: Refined, thinner, enterprise feel ── */
#page-live .kpi-bubble-inner {
  border-radius: 14px;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
#page-live .kpi-bubble-header {
  padding: 10px 14px 8px;
}
#page-live .kpi-bubble-body {
  padding: 8px 10px 12px;
}

/* ── KPI LIST ITEMS: Enterprise machine rows ── */
#page-live .kpi-list-item,
.kpi-bubble-body .kpi-list-item {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(148px, 176px) !important;
  align-items: flex-start !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  padding: 10px 14px !important;
  padding-bottom: 18px !important;
  border-radius: 10px !important;
  margin-bottom: 4px !important;
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(51, 65, 85, 0.46) !important;
  transition: background 180ms ease, transform 120ms ease !important;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
}
#page-live .kpi-list-item > .w-2 {
  margin-top: 6px;
}
.kpi-bubble-body .kpi-list-item > .w-2 {
  margin-top: 6px;
}

#page-live .kpi-machine-main,
.kpi-bubble-body .kpi-machine-main {
  min-width: 0 !important;
}

#page-live .kpi-last-seen,
.kpi-bubble-body .kpi-last-seen {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
  pointer-events: none;
}

#page-live .kpi-last-seen.is-dark,
.kpi-bubble-body .kpi-last-seen.is-dark {
  color: rgba(148, 163, 184, 0.7);
}

#page-live .kpi-last-seen.is-light,
.kpi-bubble-body .kpi-last-seen.is-light {
  color: rgba(100, 116, 139, 0.82);
}

#page-live .kpi-machine-meta,
.kpi-bubble-body .kpi-machine-meta {
  width: 100% !important;
  min-width: 148px !important;
  align-self: start !important;
  justify-content: flex-end !important;
  align-content: flex-start !important;
}

@media (max-width: 640px) {
  #page-live .kpi-list-item,
  .kpi-bubble-body .kpi-list-item {
    grid-template-columns: auto minmax(0, 1fr) minmax(128px, 150px) !important;
    column-gap: 10px !important;
  }

  #page-live .kpi-machine-meta,
  .kpi-bubble-body .kpi-machine-meta {
    min-width: 128px !important;
  }

  #page-live .kpi-last-seen,
  .kpi-bubble-body .kpi-last-seen {
    font-size: 9px;
    right: 12px;
    bottom: 8px;
  }
}
#page-live .kpi-list-item:hover,
.kpi-bubble-body .kpi-list-item:hover {
  background: rgba(56, 189, 248, 0.06) !important;
  border-color: rgba(56, 189, 248, 0.08);
}
#page-live .kpi-list-item:active,
.kpi-bubble-body .kpi-list-item:active {
  transform: scale(0.99);
}

/* Status dot — crisp, small */
#page-live .kpi-list-item > div:first-child,
.kpi-bubble-body .kpi-list-item > div:first-child {
  flex-shrink: 0;
}

/* Machine name — stronger */
#page-live .kpi-machine-name,
.kpi-bubble-body .kpi-machine-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  letter-spacing: -0.01em;
}
html:not(.dark) #page-live .kpi-machine-name,
html:not(.dark) .kpi-bubble-body .kpi-machine-name {
  color: #1e293b !important;
}

/* Node ID text — secondary */
#page-live .kpi-list-item .text-\[10px\],
.kpi-bubble-body .kpi-list-item .text-\[10px\] {
  font-size: 9.5px !important;
  color: rgba(148, 163, 184, 0.5) !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em;
}
html:not(.dark) #page-live .kpi-list-item .text-\[10px\],
html:not(.dark) .kpi-bubble-body .kpi-list-item .text-\[10px\] {
  color: rgba(100, 116, 139, 0.55) !important;
}

html:not(.dark) #page-live .kpi-list-item,
html:not(.dark) .kpi-bubble-body .kpi-list-item {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(203, 213, 225, 0.92) !important;
}

/* Status badge in list — smaller, pill-shaped */
#page-live .kpi-list-item .kpi-machine-badge,
.kpi-bubble-body .kpi-list-item .kpi-machine-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  text-transform: uppercase;
}

#page-live .kpi-machine-dot,
.kpi-bubble-body .kpi-machine-dot {
  width: 14px !important;
  height: 8px !important;
  min-width: 14px;
  border-radius: 999px !important;
  padding: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 3px rgba(15, 23, 42, 0.12);
}

#page-live .kpi-machine-dot.is-running,
.kpi-bubble-body .kpi-machine-dot.is-running {
  background: linear-gradient(90deg, #059669, #34d399) !important;
}

#page-live .kpi-machine-dot.is-stopped,
.kpi-bubble-body .kpi-machine-dot.is-stopped {
  background: linear-gradient(90deg, #ca8a04, #fde047) !important;
}

#page-live .kpi-machine-dot.is-faulted,
.kpi-bubble-body .kpi-machine-dot.is-faulted {
  background: linear-gradient(90deg, #d97706, #fbbf24) !important;
}

#page-live .kpi-machine-dot.is-offline,
.kpi-bubble-body .kpi-machine-dot.is-offline {
  background: linear-gradient(90deg, #dc2626, #f87171) !important;
}

#page-live .kpi-machine-dot.is-disconnected,
.kpi-bubble-body .kpi-machine-dot.is-disconnected {
  background: linear-gradient(90deg, #64748b, #cbd5e1) !important;
  border: 1px solid rgba(100, 116, 139, 0.34);
}

html:not(.dark) #page-live .kpi-machine-dot,
html:not(.dark) .kpi-bubble-body .kpi-machine-dot {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 1px 4px rgba(15, 23, 42, 0.08);
}

html:not(.dark) #page-live .kpi-machine-dot.is-running,
html:not(.dark) .kpi-bubble-body .kpi-machine-dot.is-running {
  background: linear-gradient(90deg, #059669, #10b981) !important;
}

html:not(.dark) #page-live .kpi-machine-dot.is-stopped,
html:not(.dark) .kpi-bubble-body .kpi-machine-dot.is-stopped {
  background: linear-gradient(90deg, #ca8a04, #facc15) !important;
}

html:not(.dark) #page-live .kpi-machine-dot.is-faulted,
html:not(.dark) .kpi-bubble-body .kpi-machine-dot.is-faulted {
  background: linear-gradient(90deg, #d97706, #f59e0b) !important;
}

html:not(.dark) #page-live .kpi-machine-dot.is-offline,
html:not(.dark) .kpi-bubble-body .kpi-machine-dot.is-offline {
  background: linear-gradient(90deg, #dc2626, #f87171) !important;
}

html:not(.dark) #page-live .kpi-machine-dot.is-disconnected,
html:not(.dark) .kpi-bubble-body .kpi-machine-dot.is-disconnected {
  background: linear-gradient(90deg, #94a3b8, #e2e8f0) !important;
  border: 1px solid rgba(100, 116, 139, 0.28);
}

#page-live .kpi-machine-badge,
.kpi-bubble-body .kpi-machine-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px !important;
  border: 1px solid transparent;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  line-height: 1 !important;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(2, 8, 20, 0.16);
}
#page-live .kpi-machine-badge.is-running,
.kpi-bubble-body .kpi-machine-badge.is-running {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(52, 211, 153, 0.34) !important;
  color: #d1fae5 !important;
}
#page-live .kpi-machine-badge.is-stopped,
.kpi-bubble-body .kpi-machine-badge.is-stopped {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(251, 191, 36, 0.34) !important;
  color: #fef3c7 !important;
}
#page-live .kpi-machine-badge.is-faulted,
.kpi-bubble-body .kpi-machine-badge.is-faulted {
  background: rgba(244, 63, 94, 0.16) !important;
  border-color: rgba(251, 113, 133, 0.36) !important;
  color: #ffe4e6 !important;
}
#page-live .kpi-machine-badge.is-offline,
.kpi-bubble-body .kpi-machine-badge.is-offline {
  background: rgba(249, 115, 22, 0.18) !important;
  border-color: rgba(251, 146, 60, 0.38) !important;
  color: #fed7aa !important;
}
#page-live .kpi-machine-badge.is-disconnected,
.kpi-bubble-body .kpi-machine-badge.is-disconnected {
  background: rgba(100, 116, 139, 0.22) !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  color: #e2e8f0 !important;
}
html:not(.dark) #page-live .kpi-machine-badge,
html:not(.dark) .kpi-bubble-body .kpi-machine-badge {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 6px 14px rgba(15, 23, 42, 0.06);
}
html:not(.dark) #page-live .kpi-machine-badge.is-running,
html:not(.dark) .kpi-bubble-body .kpi-machine-badge.is-running {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(5, 150, 105, 0.22) !important;
  color: #166534 !important;
}
html:not(.dark) #page-live .kpi-machine-badge.is-stopped,
html:not(.dark) .kpi-bubble-body .kpi-machine-badge.is-stopped {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(217, 119, 6, 0.22) !important;
  color: #92400e !important;
}
html:not(.dark) #page-live .kpi-machine-badge.is-faulted,
html:not(.dark) .kpi-bubble-body .kpi-machine-badge.is-faulted {
  background: rgba(244, 63, 94, 0.1) !important;
  border-color: rgba(225, 29, 72, 0.2) !important;
  color: #9f1239 !important;
}
html:not(.dark) #page-live .kpi-machine-badge.is-offline,
html:not(.dark) .kpi-bubble-body .kpi-machine-badge.is-offline {
  background: rgba(249, 115, 22, 0.12) !important;
  border-color: rgba(234, 88, 12, 0.24) !important;
  color: #9a3412 !important;
}
html:not(.dark) #page-live .kpi-machine-badge.is-disconnected,
html:not(.dark) .kpi-bubble-body .kpi-machine-badge.is-disconnected {
  background: rgba(148, 163, 184, 0.14) !important;
  border-color: rgba(100, 116, 139, 0.22) !important;
  color: #334155 !important;
}

/* RPM value in list — tabular */
#page-live .kpi-list-item .tabular-nums,
.kpi-bubble-body .kpi-list-item .tabular-nums {
  font-variant-numeric: tabular-nums;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: -0.02em;
}

/* ── NODE CARDS OVERRIDES: If nodeGrid displayed ── */
#page-live .node-card {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(20, 32, 48, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 200ms cubic-bezier(.4,0,.2,1),
              border-color 200ms ease,
              box-shadow 200ms ease;
  overflow: hidden;
}
#page-live .node-card:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
html:not(.dark) #page-live .node-card {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(148, 163, 184, 0.15);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
html:not(.dark) #page-live .node-card:hover {
  border-color: rgba(100, 116, 139, 0.25);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}

/* Node card name */
#page-live .nc-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Node card meta badges */
#page-live .nc-meta > span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 6px;
  padding: 2px 7px;
}

/* Node card data tiles */
#page-live .nc-data > div > div {
  border-radius: 10px;
  padding: 8px 10px;
}
#page-live .nc-data-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.82);
}
html:not(.dark) #page-live .nc-data-label {
  color: rgba(100, 116, 139, 0.6);
}
#page-live .nc-data-value {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* Node card timestamp */
#page-live .nc-ts {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── OPERATIONAL CLARITY: Breathe animation refined ── */
#page-live .breathe-online {
  animation: cockpitBreathe 3s ease-in-out infinite;
}
@keyframes cockpitBreathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ── MOTION: Entrance stagger for KPI tiles ── */
#page-live .kpi-rail {
  animation: cockpitFadeIn 400ms cubic-bezier(.4,0,.2,1) both;
  margin-top: 8px !important;
}
@keyframes cockpitFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger individual tiles */
#page-live .live-kpi-card:nth-child(1) { animation: cockpitTileIn 350ms cubic-bezier(.4,0,.2,1) 50ms both; }
#page-live .live-kpi-card:nth-child(2) { animation: cockpitTileIn 350ms cubic-bezier(.4,0,.2,1) 100ms both; }
#page-live .live-kpi-card:nth-child(3) { animation: cockpitTileIn 350ms cubic-bezier(.4,0,.2,1) 150ms both; }
#page-live .live-kpi-card:nth-child(4) { animation: cockpitTileIn 350ms cubic-bezier(.4,0,.2,1) 200ms both; }
#page-live .live-kpi-card:nth-child(5) { animation: cockpitTileIn 350ms cubic-bezier(.4,0,.2,1) 250ms both; }
@keyframes cockpitTileIn {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Search bar entrance */
.live-search-form {
  animation: cockpitSearchIn 300ms cubic-bezier(.4,0,.2,1) 80ms both;
}
@keyframes cockpitSearchIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Bubble panel entrance refinement */
#page-live .kpi-bubble-open {
  animation: cockpitBubbleIn 350ms cubic-bezier(.4,0,.2,1) both;
}
@keyframes cockpitBubbleIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* KPI list item stagger animation */
#page-live .kpi-list-item,
.kpi-bubble-body .kpi-list-item {
  animation: cockpitListItemIn 250ms cubic-bezier(.4,0,.2,1) both;
}
@keyframes cockpitListItemIn {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── VALUE CHANGE TRANSITIONS: Number pulse on update ── */
#page-live .live-kpi-value {
  transition: color 350ms ease, transform 120ms ease;
}
.kpi-value-flash {
  animation: cockpitValueFlash 500ms ease;
}
@keyframes cockpitValueFlash {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ── TOUCH DEVICE: No hover transforms ── */
@media (pointer: coarse) {
  #page-live .live-kpi-card:hover {
    transform: none;
  }
  #page-live .kpi-active-tile:hover {
    transform: none;
  }
  #page-live .node-card:hover {
    transform: none;
  }
}

/* ── EMPTY STATE: When no machines found ── */
#page-live .kpi-bubble-body:empty::after {
  content: 'No machines found';
  display: block;
  text-align: center;
  padding: 24px 16px;
  color: rgba(148, 163, 184, 0.4);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
html:not(.dark) #page-live .kpi-bubble-body:empty::after {
  color: rgba(100, 116, 139, 0.4);
}

/* ── LIVE MACHINE GRID: premium command surface ── */
#page-live .live-machine-grid-shell {
  position: relative;
  margin-top: 22px;
  padding: 4px 0 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

#page-live .live-machine-grid-shell::before {
  display: none;
}

#page-live .live-machine-grid-header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 16px;
}

#page-live #gatewayPanel {
  margin: 0 0 28px !important;
}

#page-live .live-machine-grid-kicker,
#page-live .live-machine-grid-sub {
  display: none !important;
}

#page-live .live-machine-grid-title {
  margin: 0;
  font-size: clamp(1.12rem, 1.3vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #f8fbff;
  opacity: 0.94;
}

#page-live #nodeGrid {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

#page-live #nodeGrid > .node-card.live-machine-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  justify-self: stretch !important;
  align-self: start !important;
}

@media (min-width: 820px) {
  #page-live #nodeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1320px) {
  #page-live #nodeGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#page-live #nodeGrid > div:not(.node-card) {
  grid-column: 1 / -1;
}

#page-live .kpi-bubble {
  display: none !important;
}

#page-live .live-machine-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 28%),
    radial-gradient(circle at bottom left, rgba(15, 23, 42, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(9, 17, 30, 0.84), rgba(5, 12, 23, 0.8)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -1px 0 rgba(15, 23, 42, 0.22),
    0 14px 34px rgba(2, 8, 20, 0.18) !important;
}

#page-live .live-machine-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(125, 211, 252, 0.035), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 42%);
  pointer-events: none;
}

#page-live .live-machine-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

#page-live .node-card.live-machine-card {
  padding: 16px !important;
  min-height: 0;
}

#page-live .node-card.live-machine-card > .node-card-shell {
  padding: 0 !important;
}

#page-live .node-card.live-machine-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(56, 189, 248, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 34px rgba(2, 8, 20, 0.24) !important;
}

#page-live .node-card-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: auto;
  padding-bottom: 0;
}

#page-live .live-machine-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#page-live .live-machine-card-identity {
  min-width: 0;
  padding-right: 8px;
}

#page-live .live-machine-card-title-row,
#page-live .live-machine-card-id-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#page-live .live-machine-card-id-row {
  margin-top: 4px;
  padding-left: 20px;
}

#page-live .live-machine-status-dot {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  border-radius: 999px !important;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.18), 0 0 8px rgba(148, 163, 184, 0.08);
}

#page-live .live-machine-status-dot.is-running {
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.18), 0 0 8px rgba(16, 185, 129, 0.14);
}

#page-live .live-machine-status-dot.is-stopped {
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.18), 0 0 8px rgba(250, 204, 21, 0.12);
}

#page-live .live-machine-status-dot.is-faulted {
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.18), 0 0 8px rgba(245, 158, 11, 0.12);
}

#page-live .live-machine-status-dot.is-offline {
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.18), 0 0 8px rgba(239, 68, 68, 0.14);
}

#page-live .live-machine-status-dot.is-disconnected {
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.18), 0 0 6px rgba(148, 163, 184, 0.1);
}

#page-live .live-machine-card-id {
  font-size: 10px;
  line-height: 1;
  color: #8b9bb0;
}

#page-live .live-machine-card-titlecluster {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

#page-live .live-machine-card-actions-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
  margin-left: auto;
}

#page-live .live-machine-card-badges {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-content: flex-start;
  row-gap: 6px;
  column-gap: 6px;
  max-width: min(100%, 248px);
  margin-left: auto;
  flex: 0 1 auto;
}

#page-live .live-machine-card-primary-badge:empty {
  display: none;
}

#page-live .live-machine-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#page-live .live-machine-card-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}

#page-live .live-machine-card .kpi-machine-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#page-live .live-machine-card-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.52);
}

#page-live .live-machine-card .kpi-machine-name {
  font-size: 20px !important;
  line-height: 1.02;
  font-weight: 800 !important;
  letter-spacing: -0.035em;
  color: #f8fbff !important;
}

#page-live .live-machine-card .text-\[10px\] {
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.5) !important;
}

#page-live .live-machine-card .kpi-machine-meta {
  width: auto !important;
  min-width: 0 !important;
  max-width: 48%;
  justify-content: flex-end !important;
  align-self: flex-start !important;
}

#page-live .live-machine-card .kpi-machine-badge {
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px !important;
  font-size: 9px !important;
  letter-spacing: 0.11em !important;
}

#page-live .live-machine-card .nc-error.live-machine-card-faults {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-content: flex-start;
  row-gap: 6px;
  column-gap: 6px;
  max-width: min(100%, 248px);
  opacity: 1 !important;
  filter: none !important;
}

#page-live .live-machine-card .live-machine-card-faults-only {
  margin-left: auto;
}

#page-live .live-machine-card .nc-error.live-machine-card-faults .nc-fault-badge {
  min-height: 26px;
  padding: 0 11px !important;
  max-width: 100%;
  background: rgba(245, 158, 11, 0.24) !important;
  border-color: rgba(251, 191, 36, 0.42) !important;
  color: #fef3c7 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(120, 53, 15, 0.24) !important;
  animation: none !important;
}

#page-live .live-machine-card .nc-error.live-machine-card-faults.is-compact {
  row-gap: 4px;
  column-gap: 4px;
  max-width: min(100%, 220px);
}

#page-live .live-machine-card .nc-error.live-machine-card-faults.is-compact .nc-fault-badge {
  min-height: 22px;
  padding: 0 8px !important;
  font-size: 9px !important;
  letter-spacing: 0.05em !important;
}

#page-live .live-machine-card .nc-error.live-machine-card-faults.is-ultra-compact {
  max-width: min(100%, 194px);
}

#page-live .live-machine-card .nc-error.live-machine-card-faults.is-ultra-compact .nc-fault-badge {
  min-height: 20px;
  padding: 0 7px !important;
  font-size: 8px !important;
  letter-spacing: 0.04em !important;
}

#page-live .live-machine-card .nc-error.live-machine-card-faults .nc-fault-badge::before {
  content: none !important;
  animation: none !important;
}

html:not(.dark) #page-live .live-machine-card .nc-error.live-machine-card-faults .nc-fault-badge {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(217, 119, 6, 0.28) !important;
  color: #92400e !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 8px 18px rgba(217, 119, 6, 0.08) !important;
}

#page-live .live-machine-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#page-live .live-machine-stat {
  min-width: 0;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: linear-gradient(180deg, rgba(12, 20, 33, 0.82), rgba(6, 12, 22, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#page-live .live-machine-stat-label {
  margin-bottom: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.52);
}

#page-live .live-machine-stat-value {
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #f8fbff;
  font-variant-numeric: tabular-nums;
}

#page-live .live-machine-stat-unit {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(125, 211, 252, 0.78);
}

#page-live .live-machine-card .kpi-eff-mini {
  margin-top: 0 !important;
  padding: 12px 14px 13px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: linear-gradient(180deg, rgba(12, 20, 33, 0.76), rgba(7, 13, 24, 0.68));
}

#page-live .live-machine-card .nc-progress {
  margin-top: 2px;
}

#page-live .live-machine-card .nc-roll-row {
  margin-bottom: 10px;
}

#page-live .live-machine-card .kpi-eff-track {
  height: 6px !important;
}

#page-live .live-machine-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 2px;
}

#page-live .live-machine-card-footer-left {
  min-width: 0;
  flex: 1 1 auto;
}

#page-live .live-machine-card-footer-operator {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.3;
}

#page-live .live-machine-card-footer-label {
  color: rgba(148, 163, 184, 0.66);
  white-space: nowrap;
}

#page-live .live-machine-card-footer-name {
  color: rgba(226, 232, 240, 0.92);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-live .live-machine-card .nc-ts {
  margin-top: 0 !important;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  align-self: flex-end;
  width: auto;
  font-size: 11px !important;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

#page-live .live-machine-card .nc-ts svg {
  flex-shrink: 0;
}

#page-live .live-machine-card .nc-ts-text {
  text-transform: none;
}


html:not(.dark) #page-live .live-machine-grid-shell {
  background: transparent;
  border: none;
  box-shadow: none;
}

html:not(.dark) #page-live .live-machine-grid-title {
  color: #0f172a;
}

html:not(.dark) #page-live .live-machine-grid-sub {
  color: rgba(71, 85, 105, 0.72);
}

html:not(.dark) #page-live .live-machine-card {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.06), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.94)) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

html:not(.dark) #page-live .live-machine-card .kpi-machine-name {
  color: #0f172a !important;
}

html:not(.dark) #page-live .live-machine-card .text-\[10px\] {
  color: rgba(100, 116, 139, 0.58) !important;
}

html:not(.dark) #page-live .live-machine-card-id {
  color: rgba(100, 116, 139, 0.74);
}

html:not(.dark) #page-live .live-machine-stat {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.9));
  border-color: rgba(148, 163, 184, 0.18);
}

html:not(.dark) #page-live .live-machine-stat-label {
  color: rgba(100, 116, 139, 0.66);
}

html:not(.dark) #page-live .live-machine-stat-value {
  color: #0f172a;
}

html:not(.dark) #page-live .live-machine-card .kpi-eff-mini {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.92));
  border-color: rgba(148, 163, 184, 0.18);
}

html:not(.dark) #page-live .live-machine-card-footer-label {
  color: rgba(100, 116, 139, 0.78);
}

html:not(.dark) #page-live .live-machine-card-footer-name {
  color: #0f172a;
}

@media (max-width: 1024px) {
  #page-live .live-machine-grid-shell {
    padding: 4px 0 0;
    border-radius: 0;
  }

  #page-live .live-machine-card .kpi-machine-meta {
    max-width: none;
  }
}

@media (max-width: 640px) {
  #page-live .live-machine-grid-header {
    gap: 6px;
  }

  #page-live .live-machine-grid-title {
    font-size: 1.08rem;
  }

  #page-live .node-card.live-machine-card {
    min-height: auto;
  }

  #page-live .node-card.live-machine-card {
    padding: 15px !important;
  }

  #page-live .live-machine-card-head {
    flex-direction: row;
    align-items: flex-start;
  }

  #page-live .live-machine-card-actions-row {
    width: auto;
    justify-content: flex-end;
    align-self: flex-start;
    gap: 8px;
  }

  #page-live .live-machine-card-badges,
  #page-live .live-machine-card .nc-error.live-machine-card-faults {
    max-width: min(100%, 184px);
  }

  #page-live .live-machine-card .nc-error.live-machine-card-faults.is-compact {
    max-width: min(100%, 164px);
  }

  #page-live .live-machine-card .nc-error.live-machine-card-faults.is-ultra-compact {
    max-width: min(100%, 152px);
  }

  #page-live .live-machine-card .kpi-machine-meta {
    justify-content: flex-start !important;
  }

  #page-live .live-machine-card .kpi-machine-name {
    font-size: 18px !important;
  }

  #page-live .live-machine-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  #page-live .live-machine-stat {
    padding: 10px 8px;
    border-radius: 12px;
  }

  #page-live .live-machine-stat-label {
    margin-bottom: 5px;
    font-size: 8px;
    letter-spacing: 0.12em;
  }

  #page-live .live-machine-stat-value {
    font-size: 14px;
  }

  #page-live .live-machine-card .nc-ts {
    margin-top: 4px !important;
    justify-content: flex-end;
  }

  #page-live .live-machine-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #page-live .live-machine-card-footer-left {
    order: 2;
  }

  #page-live .live-machine-card .nc-ts {
    order: 1;
    align-self: flex-end;
  }

  }
}


/* =============================================================
   MACHINE DETAILS PAGE REDESIGN v3.0
   Elite diagnostic workspace — precision instrumentation
   ============================================================= */

/* ── PAGE HEADER: Title + Machine Selector ── */
#page-nodes > div:first-child {
  margin-bottom: 20px !important;
  padding-bottom: 0;
  overflow-x: hidden;
}
#page-nodes {
  overflow-x: hidden;
}
#page-nodes > div:first-child h2 {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #e2e8f0 !important;
  margin-bottom: 2px !important;
}
#page-nodes > div:first-child p {
  font-size: 10px !important;
  color: rgba(148, 163, 184, 0.5) !important;
  letter-spacing: 0.02em;
}

#nodeDetailPanel {
  position: relative;
  overflow-x: hidden;
}

  color: rgba(226, 232, 240, 0.88);
}
html:not(.dark) #page-nodes > div:first-child h2 {
  color: #1e293b !important;
}
html:not(.dark) #page-nodes > div:first-child p {
  color: rgba(100, 116, 139, 0.55) !important;
}

/* Machine selector dropdown */
#nodeSelect {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 42px 10px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(71, 85, 105, 0.48) !important;
  background-color: rgba(10, 18, 28, 0.92) !important;
  color: #e2e8f0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(2, 8, 20, 0.24),
    0 0 0 1px rgba(34, 211, 238, 0.05) !important;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#nodeSelect:focus {
  border-color: rgba(34, 211, 238, 0.42) !important;
  background-color: rgba(12, 22, 34, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 3px rgba(34, 211, 238, 0.14),
    0 16px 32px rgba(2, 8, 20, 0.3) !important;
}
#nodeSelect:hover {
  border-color: rgba(56, 189, 248, 0.34) !important;
  background-color: rgba(12, 22, 34, 0.96) !important;
}
html:not(.dark) #nodeSelect {
  background-color: rgba(10, 18, 28, 0.92) !important;
  border-color: rgba(56, 189, 248, 0.24) !important;
  color: #e2e8f0 !important;
}
html:not(.dark) #nodeSelect:focus {
  border-color: rgba(34, 211, 238, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 3px rgba(34, 211, 238, 0.14),
    0 16px 32px rgba(2, 8, 20, 0.3) !important;
}

/* ── EMPTY STATE ── */
#nodeDetailEmpty {
  padding: 60px 24px !important;
}
#nodeDetailEmpty svg {
  width: 40px !important;
  height: 40px !important;
  stroke: rgba(148, 163, 184, 0.2) !important;
  margin-bottom: 16px;
}
#nodeDetailEmpty .empty-state-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(148, 163, 184, 0.5) !important;
  margin-bottom: 6px;
}
#nodeDetailEmpty .empty-state-sub {
  font-size: 12px !important;
  color: rgba(148, 163, 184, 0.35) !important;
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.5;
}

html:not(.dark) #page-nodes > .mb-5 h2 {
  color: #0f172a !important;
}

html:not(.dark) #page-nodes > .mb-5 p {
  color: #64748b !important;
}

html:not(.dark) #nodeSelect {
  background-color: rgba(10, 18, 28, 0.92) !important;
  color: #e2e8f0 !important;
  border-color: rgba(56, 189, 248, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(2, 8, 20, 0.24),
    0 0 0 1px rgba(34, 211, 238, 0.05) !important;
}

html:not(.dark) #nodeSelect:hover {
  border-color: rgba(14, 165, 233, 0.34) !important;
}

html:not(.dark) #nodeDetailEmpty svg {
  stroke: rgba(2, 132, 199, 0.28) !important;
  opacity: 0.92 !important;
}

html:not(.dark) #nodeDetailEmpty .empty-state-title {
  color: #334155 !important;
}

html:not(.dark) #nodeDetailEmpty .empty-state-sub {
  color: #64748b !important;
}

/* ── SECTION CARDS: Shared base for all detail sections ── */
#nodeDetailPanel .rounded-2xl {
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  background: rgba(15, 23, 42, 0.4) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}
#nodeDetailPanel .rounded-2xl:hover {
  border-color: rgba(148, 163, 184, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  transform: none !important;
}
html:not(.dark) #nodeDetailPanel .rounded-2xl {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}
html:not(.dark) #nodeDetailPanel .rounded-2xl:hover {
  border-color: rgba(100, 116, 139, 0.26) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

/* Section titles */
#nodeDetailPanel h4 {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(148, 163, 184, 0.6) !important;
}
#nodeDetailPanel h4 svg {
  opacity: 0.7;
}
html:not(.dark) #nodeDetailPanel h4 {
  color: #64748b !important;
}

html:not(.dark) #page-nodes > div:first-child h2 {
  color: #0f172a !important;
}

html:not(.dark) #page-nodes > div:first-child p {
  color: #64748b !important;
}

html:not(.dark) #page-nodes .text-gray-500 {
  color: #64748b !important;
}

html:not(.dark) #page-nodes .text-gray-400 {
  color: #475569 !important;
}

html:not(.dark) #page-nodes .text-gray-300 {
  color: #334155 !important;
}

/* Section spacing rhythm */
#nodeDetailPanel > .mb-5 {
  margin-bottom: 16px !important;
}
#nodeDetailPanel > .grid.gap-5 {
  gap: 16px !important;
  margin-bottom: 16px !important;
}

/* ── 1. HERO: Machine Identity Section ── */
#nodeInfoGrid {
  display: grid !important;
  gap: 0 !important;
}
#nodeInfoGrid > div {
  display: grid !important;
}
/* Info tiles inside the grid */
#nodeInfoGrid .bg-surface-900\/60 {
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  background: rgba(16, 26, 40, 0.55) !important;
  padding: 10px 12px !important;
  transition: border-color 180ms ease !important;
}
#nodeInfoGrid .bg-surface-900\/60:hover {
  border-color: rgba(148, 163, 184, 0.18) !important;
}
html:not(.dark) #nodeInfoGrid .bg-surface-900\/60 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.94)) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) #nodeInfoGrid .bg-surface-900\/60:hover {
  border-color: rgba(100, 116, 139, 0.24) !important;
}

/* Info tile labels */
#nodeInfoGrid .text-\[10px\].text-gray-500 {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(148, 163, 184, 0.68) !important;
  margin-bottom: 4px !important;
}
html:not(.dark) #nodeInfoGrid .text-\[10px\].text-gray-500 {
  color: #94a3b8 !important;
}

/* Info tile values */
#nodeInfoGrid .text-sm.font-semibold {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Machine name value (clickable) */
#nodeInfoGrid .text-sm.font-semibold.text-white {
  color: #f1f5f9 !important;
}
html:not(.dark) #nodeInfoGrid .text-sm.font-semibold.text-white {
  color: #0f172a !important;
}

html:not(.dark) #nodeInfoGrid .text-brand-400 {
  color: #0369a1 !important;
}

/* Machine ID (mono) */
#nodeInfoGrid .text-\[10px\].text-gray-600.font-mono {
  font-size: 9px !important;
  color: rgba(148, 163, 184, 0.35) !important;
  letter-spacing: 0.02em;
}

html:not(.dark) #nodeInfoGrid .text-\[10px\].text-gray-600.font-mono {
  color: #94a3b8 !important;
}

/* Firmware value */
#nodeInfoGrid .text-cyan-400 {
  color: #22d3ee !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

html:not(.dark) #nodeInfoGrid .text-cyan-400 {
  color: #0284c7 !important;
}

/* Status & Machine State badges */
#nodeInfoGrid .inline-flex.rounded-full {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
}

/* Timestamp value */
#nodeInfoGrid .nc-detail-ts {
  font-size: 12px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  color: rgba(203, 213, 225, 0.8) !important;
}
html:not(.dark) #nodeInfoGrid .nc-detail-ts {
  color: #334155 !important;
}

/* Inspector button */
#detailInspectorBtn {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  letter-spacing: 0.02em;
  background: rgba(0, 180, 216, 0.08) !important;
  border-color: rgba(0, 180, 216, 0.2) !important;
}
#detailInspectorBtn:hover {
  background: rgba(0, 180, 216, 0.15) !important;
  border-color: rgba(0, 180, 216, 0.35) !important;
}

/* ── 2. WORKFORCE: RFID & Operator Panel ── */
#nodeRfidPanel .grid {
  gap: 10px !important;
}
#nodeRfidPanel .bg-surface-900\/60 {
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  background: rgba(16, 26, 40, 0.55) !important;
  padding: 10px 14px !important;
  transition: border-color 180ms ease !important;
}
#nodeRfidPanel .bg-surface-900\/60:hover {
  border-color: rgba(148, 163, 184, 0.18) !important;
}
html:not(.dark) #nodeRfidPanel .bg-surface-900\/60 {
  background: rgba(248, 250, 252, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
}

/* Active operator highlight border */
#nodeRfidPanel .border-emerald-500\/20 {
  border-color: rgba(16, 185, 129, 0.15) !important;
}
#nodeRfidPanel .border-emerald-500\/20:hover {
  border-color: rgba(16, 185, 129, 0.25) !important;
}

/* RFID status icon container */
#nodeRfidPanel .w-9.h-9 {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
}

/* Operator avatar */
#nodeRfidPanel .w-8.h-8 {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}

/* Previous operator avatar (smaller) */
#nodeRfidPanel .w-7.h-7 {
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
}

/* Workforce panel labels */
#nodeRfidPanel .text-gray-500.uppercase {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: rgba(148, 163, 184, 0.68) !important;
}
html:not(.dark) #nodeRfidPanel .text-gray-500.uppercase {
  color: rgba(100, 116, 139, 0.5) !important;
}

/* Workforce panel values */
#nodeRfidPanel .text-sm.font-bold {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Shift elapsed value */
#nodeRfidPanel .tabular-nums {
  font-variant-numeric: tabular-nums !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

/* Secondary info text */
#nodeRfidPanel .text-gray-500:not(.uppercase) {
  font-size: 9.5px !important;
  color: rgba(148, 163, 184, 0.4) !important;
}

/* Empty/awaiting states */
#nodeRfidPanel .italic {
  font-style: normal !important;
  font-size: 11px !important;
  color: rgba(148, 163, 184, 0.3) !important;
}

/* ── 3. OPERATIONAL SIGNAL MATRIX ── */
/* Live Data indicator */
#page-nodes .text-emerald-400\/70,
#page-nodes p[class*="text-emerald-400"] {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 10px !important;
}

/* Metric tiles */
#nodeVarGrid > div {
  border-radius: 10px !important;
  padding: 10px 8px 8px !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.10) !important;
  background: rgba(16, 26, 40, 0.55) !important;
  box-shadow: none !important;
  transition: border-color 180ms ease, box-shadow 200ms ease, transform 180ms ease !important;
}
#nodeVarGrid > div:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
html:not(.dark) #nodeVarGrid > div {
  background: rgba(248, 250, 252, 0.65) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}
html:not(.dark) #nodeVarGrid > div:hover {
  border-color: rgba(100, 116, 139, 0.2) !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06) !important;
}

/* Metric tile labels */
#nodeVarGrid > div > div:first-child {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(148, 163, 184, 0.68) !important;
  margin-bottom: 5px !important;
  line-height: 1.2 !important;
}
html:not(.dark) #nodeVarGrid > div > div:first-child {
  color: rgba(100, 116, 139, 0.55) !important;
}

/* Metric tile values */
#nodeVarGrid > div .text-xl {
  font-size: 16px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--font-data) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: #f0f4f8 !important;
}
html:not(.dark) #nodeVarGrid > div .text-xl {
  color: #0f172a !important;
}

/* Shift data divider */
#nodeVarGrid > .col-span-full {
  margin-top: 14px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
#nodeVarGrid > .col-span-full:hover {
  transform: none !important;
  box-shadow: none !important;
}

#shiftRollProgressWrap,
#efficiencyBarWrap {
  border-radius: 0 !important;
  overflow: visible !important;
}
#nodeVarGrid > .col-span-full .text-xs.font-semibold {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(56, 189, 248, 0.6) !important;
}

#page-nodes .node-section-heading {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(56, 189, 248, 0.68) !important;
  white-space: nowrap;
}

#page-nodes .node-shift-section-heading {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: #38bdf8 !important;
}

#nodeVarGrid > .col-span-full .h-px {
  background: rgba(56, 189, 248, 0.1) !important;
}

html:not(.dark) #nodeVarGrid > .col-span-full .text-xs.font-semibold {
  color: #0369a1 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.72);
}

html:not(.dark) #page-nodes .node-section-heading {
  color: #0369a1 !important;
}

html:not(.dark) #page-nodes .node-shift-section-heading {
  color: #0284c7 !important;
}

html:not(.dark) #nodeVarGrid > .col-span-full .h-px {
  background: rgba(3, 105, 161, 0.18) !important;
}

/* Progress bars — slimmer, sharper */
#shiftRollProgressWrap,
#efficiencyBarWrap {
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 4px !important;
  margin-bottom: 6px !important;
}
#shiftRollProgressWrap:hover,
#efficiencyBarWrap:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* Progress bar track */
#shiftRollProgressWrap .bg-surface-900\/95,
#efficiencyBarWrap .bg-surface-900\/95 {
  height: 6px !important;
  border-radius: 3px !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  box-shadow: none !important;
}
html:not(.dark) #shiftRollProgressWrap .bg-surface-900\/95,
html:not(.dark) #efficiencyBarWrap .bg-surface-900\/95 {
  background: rgba(226, 232, 240, 0.5) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
}
/* Progress bar fill */
#shiftRollFill,
#effBarFill {
  height: 100% !important;
  border-radius: 3px !important;
  transition: width 700ms cubic-bezier(.4,0,.2,1), background 500ms ease !important;
}
/* Progress bar labels */
#shiftRollProgressWrap .text-\[10px\],
#efficiencyBarWrap .text-\[10px\],
#page-nodes [data-roll-progress-text],
#page-nodes #effBarPct {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

#page-nodes .node-shift-tile-title,
#page-nodes .node-shift-bar-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: rgba(226, 232, 240, 0.9) !important;
}

#page-nodes .node-shift-bar-title {
  color: rgba(226, 232, 240, 0.88) !important;
}

#shiftRollProgressWrap .text-\[9px\],
#efficiencyBarWrap .text-\[9px\],
#shiftRollLeft,
#shiftRollRight,
#effBarLeft,
#effBarRight {
  font-size: 9px !important;
  color: rgba(148, 163, 184, 0.4) !important;
  font-variant-numeric: tabular-nums;
}

html:not(.dark) #page-nodes .node-shift-tile-title,
html:not(.dark) #page-nodes .node-shift-bar-title {
  color: #1e293b !important;
}
html:not(.dark) #shiftRollLeft,
html:not(.dark) #shiftRollRight,
html:not(.dark) #effBarLeft,
html:not(.dark) #effBarRight {
  color: rgba(100, 116, 139, 0.58) !important;
}

/* ── 4. EVENT INTELLIGENCE MATRIX ── */
/* Event subtitle */
#eventMatrixSubtitle {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 10px !important;
}

/* Fault tiles */
#faultGrid > div {
  border-radius: 10px !important;
  padding: 10px 10px 8px !important;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.10) !important;
  background: rgba(16, 26, 40, 0.55) !important;
  box-shadow: none !important;
  transition: border-color 180ms ease, box-shadow 200ms ease, transform 180ms ease !important;
}
#faultGrid > div:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
}
html:not(.dark) #faultGrid > div {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.92)) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) #faultGrid > div:hover {
  border-color: rgba(100, 116, 139, 0.24) !important;
}

/* Active fault tile — restrained red indicator */
html.dark #faultGrid > div[class*="border-red"] {
  border-color: rgba(239, 68, 68, 0.3) !important;
  background: rgba(239, 68, 68, 0.04) !important;
}
html.dark #faultGrid > div[class*="ring-red"] {
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.12) !important;
}
html:not(.dark) #faultGrid > div[class*="border-red"] {
  border-color: rgba(239, 68, 68, 0.3) !important;
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(255, 241, 242, 0.92)) !important;
}

html:not(.dark) #faultGrid .text-xs.font-medium {
  color: #334155 !important;
}

html:not(.dark) #faultGrid .text-\[10px\].text-gray-500 {
  color: #94a3b8 !important;
}

html:not(.dark) #faultGrid .fault-active-badge {
  color: #dc2626 !important;
}

/* Fault status dot */
#faultGrid .w-2.h-2 {
  width: 6px !important;
  height: 6px !important;
  border-radius: 3px !important;
}

/* Fault label text */
#faultGrid .text-xs.font-medium {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* Fault count value */
#faultGrid .text-lg.font-bold {
  font-size: 18px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.03em;
}

/* Fault "events" sub-label */
#faultGrid .text-\[10px\].text-gray-500 {
  font-size: 9px !important;
  color: rgba(148, 163, 184, 0.4) !important;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

/* ACTIVE badge */
#faultGrid .fault-active-badge {
  font-size: 7px !important;
  letter-spacing: 0.1em !important;
  color: rgba(248, 113, 113, 0.8) !important;
}

/* Fault dividers */
#faultGrid > .col-span-full {
  margin-top: 14px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
#faultGrid > .col-span-full:hover {
  transform: none !important;
  box-shadow: none !important;
}
#faultGrid > .col-span-full .text-xs.font-semibold {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(56, 189, 248, 0.6) !important;
}

/* ── 5. HISTORY CHART ── */

/* History section card — override Tailwind border/bg classes */
#nodeDetailPanel > div:last-of-type.rounded-2xl,
#nodeDetailPanel > .mb-5:last-of-type {
  background: rgba(12, 20, 32, 0.35) !important;
  border: 1px solid rgba(148, 163, 184, 0.10) !important;
  padding: 18px 20px !important;
}
html:not(.dark) #nodeDetailPanel > div:last-of-type.rounded-2xl,
html:not(.dark) #nodeDetailPanel > .mb-5:last-of-type {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.93)) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark) #nodeDetailPanel > div:last-of-type h4 {
  color: #64748b !important;
}

@media (max-width: 768px) {
  body.nodes-page-active .premium-footer .pf-body > div {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px) + 16px) !important;
    gap: 6px !important;
  }

  html:not(.dark) body.nodes-page-active .premium-footer .pf-tagline {
    color: #546579 !important;
  }

  html:not(.dark) body.nodes-page-active .premium-footer .pf-legal {
    color: #7f93aa !important;
  }
}

/* History title */
#nodeDetailPanel > div:last-of-type h4 {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(148, 163, 184, 0.5) !important;
}
#nodeDetailPanel > div:last-of-type h4 svg {
  width: 13px !important;
  height: 13px !important;
  opacity: 0.6;
}

/* Chart section card */
#page-nodes .chart-nav-wrap {
  margin-top: 4px;
}

/* Quick range buttons */
#page-nodes .chart-range-btn {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  letter-spacing: 0.04em !important;
  color: rgba(148, 163, 184, 0.55) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all 180ms ease !important;
}
#page-nodes .chart-range-btn:hover {
  color: #e2e8f0 !important;
  background: rgba(148, 163, 184, 0.06) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
}
#page-nodes .chart-range-btn.active {
  color: #22d3ee !important;
  background: rgba(0, 180, 216, 0.08) !important;
  border-color: rgba(0, 180, 216, 0.18) !important;
  box-shadow: none !important;
}
html:not(.dark) #page-nodes .chart-range-btn {
  color: #64748b !important;
}
html:not(.dark) #page-nodes .chart-range-btn:hover {
  color: #1e293b !important;
  background: rgba(148, 163, 184, 0.18) !important;
}
html:not(.dark) #page-nodes .chart-range-btn.active {
  color: #0284c7 !important;
  background: rgba(14, 165, 233, 0.08) !important;
  border-color: rgba(14, 165, 233, 0.18) !important;
}

/* Zoom controls */
#page-nodes .node-history-zoom {
  border-radius: 8px !important;
  padding: 2px 6px !important;
  background: rgba(15, 23, 42, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
}
#page-nodes .node-history-zoom button {
  border-radius: 6px !important;
  padding: 3px !important;
}
#page-nodes .node-history-zoom button:hover {
  background: rgba(148, 163, 184, 0.1) !important;
}
#page-nodes #chartZoomLevel {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: rgba(148, 163, 184, 0.4) !important;
  min-width: 24px !important;
}
html:not(.dark) #page-nodes .node-history-zoom {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html:not(.dark) #page-nodes #chartZoomLevel {
  color: #64748b !important;
}

/* Export button */
#page-nodes .node-history-export {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  background: rgba(15, 23, 42, 0.4) !important;
  color: rgba(148, 163, 184, 0.55) !important;
  transition: all 200ms ease !important;
}
#page-nodes .node-history-export:hover {
  border-color: rgba(0, 180, 216, 0.25) !important;
  color: #22d3ee !important;
  background: rgba(0, 180, 216, 0.06) !important;
}
html:not(.dark) #page-nodes .node-history-export {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #64748b !important;
}
html:not(.dark) #page-nodes .node-history-export:hover {
  border-color: rgba(14, 165, 233, 0.25) !important;
  color: #0284c7 !important;
}

/* Date range picker bar — seamless, no border */
#page-nodes .hist-date-row {
  border-radius: 10px !important;
  background: rgba(10, 18, 30, 0.25) !important;
  border: none !important;
  padding: 8px 12px !important;
  gap: 10px !important;
}
html:not(.dark) #page-nodes .hist-date-row {
  background: rgba(226, 232, 240, 0.42) !important;
  border: none !important;
}

/* Date inputs — clean, no inner border */
#page-nodes .hist-date-input {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  background: rgba(20, 32, 48, 0.55) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  color: #e2e8f0 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
#page-nodes .hist-date-input:focus {
  border-color: rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.06) !important;
}
#page-nodes .hist-date-input:hover {
  border-color: rgba(148, 163, 184, 0.12) !important;
}
html:not(.dark) #page-nodes .hist-date-input {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #334155 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}
/* Calendar picker icon styling */
#page-nodes .hist-date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.7) brightness(1.5) !important;
  opacity: 0.5 !important;
  cursor: pointer;
  transition: opacity 200ms ease;
}
#page-nodes .hist-date-input::-webkit-calendar-picker-indicator:hover {
  opacity: 0.8 !important;
}
html:not(.dark) #page-nodes .hist-date-input::-webkit-calendar-picker-indicator {
  filter: none !important;
  opacity: 0.4 !important;
}

/* Date labels */
#page-nodes .hist-date-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(148, 163, 184, 0.4) !important;
}
html:not(.dark) #page-nodes .hist-date-label {
  color: #94a3b8 !important;
}

/* Date icon */
#page-nodes .hist-date-icon {
  color: rgba(148, 163, 184, 0.25) !important;
  width: 15px !important;
  height: 15px !important;
}

/* Date arrow */
#page-nodes .hist-date-arrow {
  color: rgba(148, 163, 184, 0.2) !important;
}
#page-nodes .hist-date-arrow svg {
  width: 14px !important;
  height: 14px !important;
}

/* Apply & Reset buttons */
#page-nodes .hist-date-btn {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 7px !important;
  letter-spacing: 0.04em !important;
}
#page-nodes .hist-date-btn-go {
  background: rgba(0, 180, 216, 0.1) !important;
  color: #22d3ee !important;
  border: 1px solid rgba(0, 180, 216, 0.18) !important;
}
#page-nodes .hist-date-btn-go:hover {
  background: rgba(0, 180, 216, 0.16) !important;
  border-color: rgba(0, 180, 216, 0.3) !important;
  box-shadow: none !important;
}
#page-nodes .hist-date-btn-reset {
  background: rgba(148, 163, 184, 0.10) !important;
  color: rgba(148, 163, 184, 0.68) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
}
#page-nodes .hist-date-btn-reset:hover {
  color: rgba(203, 213, 225, 0.6) !important;
  background: rgba(148, 163, 184, 0.14) !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
}
html:not(.dark) #page-nodes .hist-date-btn-go {
  background: rgba(14, 165, 233, 0.08) !important;
  color: #0284c7 !important;
  border-color: rgba(14, 165, 233, 0.2) !important;
}
html:not(.dark) #page-nodes .hist-date-btn-reset {
  background: rgba(148, 163, 184, 0.06) !important;
  color: #64748b !important;
}

@media (min-width: 641px) {
  #page-nodes .hist-date-row {
    align-items: flex-start !important;
  }

  #page-nodes .hist-date-icon,
  #page-nodes .hist-date-arrow,
  #page-nodes .hist-date-actions {
    align-self: flex-end !important;
    margin-bottom: 1px !important;
  }

  #page-nodes .hist-date-icon,
  #page-nodes .hist-date-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
  }

  #page-nodes .hist-date-actions {
    display: flex !important;
    align-items: center !important;
  }

  #page-nodes .hist-date-btn {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Chart container — completely borderless */
#page-nodes .chart-shell {
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:not(.dark) #page-nodes .chart-shell {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Chart canvas area */
#page-nodes .chart-shell canvas {
  transition: opacity 200ms ease, filter 200ms ease !important;
}

/* Chart scroll outer — remove left border */
#page-nodes .chart-scroll-outer {
  border-left: none !important;
}

/* Chart navigation arrows */
#page-nodes .chart-nav-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: rgba(20, 32, 48, 0.55) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  color: rgba(148, 163, 184, 0.5) !important;
  opacity: 1 !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  transition: all 180ms ease !important;
}
#page-nodes .chart-nav-btn:hover {
  border-color: rgba(0, 180, 216, 0.2) !important;
  color: #22d3ee !important;
  background: rgba(0, 180, 216, 0.06) !important;
  transform: none !important;
}
#page-nodes .chart-nav-btn:active {
  transform: scale(0.94) !important;
}
html:not(.dark) #page-nodes .chart-nav-btn {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #64748b !important;
}

/* Y-axis panel */
#page-nodes .chart-yaxis-panel {
  background: transparent !important;
}
#page-nodes .chart-yaxis-panel span,
#page-nodes .chart-yaxis-panel div {
  font-size: 10px !important;
  color: rgba(148, 163, 184, 0.4) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
}

html:not(.dark) #page-nodes .chart-yaxis-panel span,
html:not(.dark) #page-nodes .chart-yaxis-panel div {
  color: #94a3b8 !important;
}

/* Legend bar */
#page-nodes .chart-legend-bar {
  padding: 2px 0 6px !important;
  margin-bottom: 2px;
  border: none !important;
  background: transparent !important;
}
#page-nodes .chart-legend-item {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  background: rgba(15, 23, 42, 0.3) !important;
  letter-spacing: 0.04em !important;
  transition: opacity 200ms ease, border-color 200ms ease !important;
}
#page-nodes .chart-legend-item:hover {
  border-color: rgba(148, 163, 184, 0.12) !important;
}
#page-nodes .chart-legend-item[data-hidden="true"] {
  opacity: 0.3 !important;
}
html:not(.dark) #page-nodes .chart-legend-item {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #475569 !important;
}

/* Scroll hint */
#page-nodes .chart-scroll-hint {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: rgba(148, 163, 184, 0.3) !important;
}

/* Range button group — tighter layout */
#page-nodes .node-history-ranges {
  gap: 2px !important;
  width: fit-content !important;
  max-width: calc(100% - 8px) !important;
  margin: 0 auto !important;
  padding: 4px 6px !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, 0.25) !important;
  border: 1px solid rgba(148, 163, 184, 0.04) !important;
  box-sizing: border-box !important;
}
html:not(.dark) #page-nodes .node-history-ranges {
  background: rgba(241, 245, 249, 0.88) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html:not(.dark) #page-nodes .chart-scroll-hint {
  color: #94a3b8 !important;
}

/* Chart header layout tightening */
#nodeDetailPanel > div:last-of-type .flex.flex-col.gap-3 {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

/* Zoom controls refined */
#page-nodes .node-history-zoom button svg {
  width: 13px !important;
  height: 13px !important;
  stroke-width: 2 !important;
}

/* Export button icon */
#page-nodes .node-history-export svg {
  width: 12px !important;
  height: 12px !important;
}

/* ── 6. SECTION RHYTHM: Entrance animations ── */
#nodeDetailPanel {
  animation: machDetailFadeIn 350ms cubic-bezier(.4,0,.2,1) both;
}
@keyframes machDetailFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger reveal for sections */
#nodeDetailPanel > .mb-5:nth-child(1),
#nodeDetailPanel > div:nth-child(1) {
  animation: machSectionIn 300ms cubic-bezier(.4,0,.2,1) 50ms both;
}
#nodeDetailPanel > .mb-5:nth-child(2),
#nodeDetailPanel > div:nth-child(2) {
  animation: machSectionIn 300ms cubic-bezier(.4,0,.2,1) 100ms both;
}
#nodeDetailPanel > .grid:nth-child(3),
#nodeDetailPanel > div:nth-child(3) {
  animation: machSectionIn 300ms cubic-bezier(.4,0,.2,1) 150ms both;
}
#nodeDetailPanel > div:nth-child(4) {
  animation: machSectionIn 300ms cubic-bezier(.4,0,.2,1) 200ms both;
}
@keyframes machSectionIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Metric tile value transitions */
#nodeVarGrid > div .text-xl,
#faultGrid .text-lg.font-bold {
  transition: color 300ms ease, transform 120ms ease !important;
}

/* Subtle hover lift refinement */
#nodeVarGrid > div:active,
#faultGrid > div:active {
  transform: scale(0.98) !important;
}

/* Chart range button press */
#page-nodes .chart-range-btn:active {
  transform: scale(0.95) !important;
}

/* ── 7. TOUCH DEVICE: Disable hover transforms ── */
@media (pointer: coarse) {
  #nodeVarGrid > div:hover,
  #faultGrid > div:hover,
  #nodeDetailPanel .rounded-2xl:hover {
    transform: none !important;
  }
  #page-nodes .chart-nav-btn:hover {
    transform: none !important;
  }
}

/* ── 8. RESPONSIVE: Mobile tightening ── */
@media (max-width: 640px) {
  /* ── Page-level padding ── */
  #page-nodes {
    padding: 12px !important;
  }

  #nodeDetailPanel .rounded-2xl {
    border-radius: 12px !important;
    padding: 14px !important;
  }

  /* ── Machine Info grid: stack to single column ── */
  #nodeInfoGrid > div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #nodeInfoGrid > div > div {
    grid-column: 1 / -1 !important;  /* override span 2 */
  }

  /* ── Shift Tracking: single column ── */
  #nodeRfidPanel .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #nodeRfidPanel .grid > div {
    padding: 10px 12px !important;
  }

  /* ── Machine Data / Fault tiles ── */
  #nodeVarGrid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #nodeVarGrid > div {
    border-radius: 8px !important;
    padding: 8px 6px 6px !important;
  }
  #faultGrid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #faultGrid > div {
    border-radius: 8px !important;
    padding: 8px !important;
  }
  #nodeVarGrid > div > div:first-child {
    font-size: 8px !important;
  }
  #nodeVarGrid > div .text-xl {
    font-size: 14px !important;
  }
  #faultGrid .text-lg.font-bold {
    font-size: 16px !important;
  }

  /* ── History chart controls: wrap onto separate lines ── */
  #page-nodes .chart-range-btn {
    font-size: 9px !important;
    padding: 3px 7px !important;
  }
  #page-nodes .node-history-zoom {
    order: 2;
  }
  #page-nodes .node-history-export {
    order: 3;
  }

  /* ── Date range picker: wrap to stacked layout ── */
  #page-nodes .hist-date-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  #page-nodes .hist-date-icon {
    display: none !important;
  }
  #page-nodes .hist-date-arrow {
    display: none !important;
  }
  #page-nodes .hist-date-field {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 120px !important;
  }
  #page-nodes .hist-date-actions {
    flex: 1 1 100% !important;
    justify-content: center !important;
  }

  /* ── Machine picker full width ── */
  .machine-picker-wrap {
    max-width: 100% !important;
  }

  /* ── Two-column grid (Machine Data + Faults): stack ── */
  #nodeDetailPanel > .grid.grid-cols-1 {
    grid-template-columns: 1fr !important;
  }

  /* ── Chart container: reduce height on mobile ── */
  #nodeChartInner {
    height: 240px !important;
  }

  /* ── Live Inspector button: compact on mobile ── */
  #detailInspectorBtn {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
}

/* ── Extra-small screens (< 400px) ── */
@media (max-width: 400px) {
  #page-nodes {
    padding: 8px !important;
  }
  #nodeDetailPanel .rounded-2xl {
    padding: 10px !important;
    border-radius: 10px !important;
  }
  #nodeVarGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  #faultGrid {
    grid-template-columns: 1fr !important;
  }
  #page-nodes .chart-range-btn {
    font-size: 8px !important;
    padding: 2px 5px !important;
  }
  #nodeRfidPanel .grid > div {
    padding: 8px 10px !important;
  }
  #page-nodes .hist-date-field {
    flex: 1 1 100% !important;
  }
}

/* ── 9. PRINT OPTIMIZATION ── */
@media print {
  #nodeDetailPanel .rounded-2xl {
    break-inside: avoid;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   ALERTS — INCIDENT COMMAND CENTER v3.0
   Premium operational monitoring & incident diagnostics UI
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. PAGE FRAME ── */
#page-alerts {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* Override old broad #alertsList > div rules for this page */
#page-alerts #alertsList > div {
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#page-alerts #alertsList > div:hover {
  background-color: transparent !important;
  transform: none !important;
}
#page-alerts #alertsList > div::before {
  display: none !important;
}

/* ── 1. COMMAND TOOLBAR ── */
#page-alerts #alertsList > div:first-child {
  background: rgba(8, 15, 28, 0.55) !important;
  border: 1px solid rgba(148, 163, 184, 0.07) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin-bottom: 16px !important;
  overflow: visible !important;
}

/* ── 1a. VIEW TOGGLE (segmented control) ── */
#page-alerts #alertsList > div:first-child > .flex > div[style*="inline-flex"] {
  border-radius: 8px !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
  background: rgba(15, 23, 42, 0.55) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
}
#page-alerts #alertsList > div:first-child > .flex > div[style*="inline-flex"] button {
  font-size: 11px !important;
  padding: 5px 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.015em !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(148, 163, 184, 0.6) !important;
  border-color: transparent !important;
}
/* Active view toggle button (has gradient inline) */
#page-alerts #alertsList > div:first-child > .flex > div[style*="inline-flex"] button[style*="gradient"] {
  background: rgba(14, 165, 233, 0.12) !important;
  color: rgba(186, 230, 253, 0.9) !important;
}

/* ── 1b. BULK ACTION ROW ── */
/* Select-all label */
#page-alerts #alertsList > div:first-child > .flex > label {
  font-size: 11px !important;
  color: rgba(148, 163, 184, 0.6) !important;
  gap: 5px !important;
}
#page-alerts #alertsList > div:first-child > .flex > label input[type="checkbox"] {
  width: 13px !important;
  height: 13px !important;
  border-radius: 3px !important;
}

/* Bulk action buttons — muted ghost style */
#page-alerts #alertsList > div:first-child > .flex > button {
  font-size: 10.5px !important;
  padding: 5px 10px !important;
  border-radius: 7px !important;
  font-weight: 550 !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
}
/* Clear button */
#page-alerts button[onclick*="clearAlertSelection"] {
  background: rgba(100, 116, 139, 0.1) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  color: rgba(226, 232, 240, 0.85) !important;
}
#page-alerts button[onclick*="clearAlertSelection"]:hover {
  background: rgba(100, 116, 139, 0.15) !important;
}
/* Archive buttons (bulk & visible) */
#page-alerts button[onclick*="applyAlertBulkAction('archive')"],
#page-alerts button[onclick*="applyAlertBulkAction('archive', true)"] {
  background: rgba(14, 165, 233, 0.1) !important;
  border: 1px solid rgba(14, 165, 233, 0.22) !important;
  color: rgba(125, 211, 252, 0.9) !important;
}
#page-alerts button[onclick*="applyAlertBulkAction('archive')"]:hover,
#page-alerts button[onclick*="applyAlertBulkAction('archive', true)"]:hover {
  background: rgba(14, 165, 233, 0.14) !important;
}
/* Delete buttons (bulk & visible) */
#page-alerts button[onclick*="applyAlertBulkAction('delete')"],
#page-alerts button[onclick*="applyAlertBulkAction('delete', true)"] {
  background: rgba(244, 63, 94, 0.08) !important;
  border: 1px solid rgba(244, 63, 94, 0.2) !important;
  color: rgba(253, 164, 175, 0.85) !important;
}
#page-alerts button[onclick*="applyAlertBulkAction('delete')"]:hover,
#page-alerts button[onclick*="applyAlertBulkAction('delete', true)"]:hover {
  background: rgba(244, 63, 94, 0.12) !important;
}

/* Selection counter */
#page-alerts #alertsList > div:first-child > .flex > span {
  font-size: 10px !important;
  color: rgba(148, 163, 184, 0.4) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.02em !important;
}

/* ── 2. FILTER BAR ── */
#page-alerts #alertsList > div:first-child > .grid {
  gap: 8px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.10);
}

/* All filter inputs/selects */
#page-alerts #alertsList > div:first-child input,
#page-alerts #alertsList > div:first-child select {
  background: rgba(8, 15, 28, 0.55) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  font-size: 11px !important;
  color: rgba(226, 232, 240, 0.82) !important;
  transition: all 0.2s ease !important;
  -webkit-appearance: none;
  appearance: none;
}
#page-alerts #alertsList > div:first-child input:focus,
#page-alerts #alertsList > div:first-child select:focus {
  outline: none !important;
  border-color: rgba(14, 165, 233, 0.25) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.06) !important;
  background: rgba(8, 15, 28, 0.7) !important;
}
#page-alerts #alertsList > div:first-child input::placeholder {
  color: rgba(148, 163, 184, 0.35) !important;
  font-weight: 400 !important;
}
#page-alerts #alertsList > div:first-child select option {
  background: #0c1525 !important;
  color: #cbd5e1 !important;
}

/* ── 3. DATE GROUP SECTIONS ── */
/* Groups wrapper — strip old styles */
#page-alerts #alertsList > .space-y-3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
#page-alerts #alertsList > .space-y-3 > * + * {
  margin-top: 0 !important;
}

/* Date group container */
#page-alerts .space-y-3 > div[class*="rounded-xl"] {
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  background: rgba(8, 15, 28, 0.3) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
}
#page-alerts .space-y-3 > div[class*="rounded-xl"]::before {
  display: none !important;
}

/* Date header button */
#page-alerts .space-y-3 > div[class*="rounded-xl"] > button {
  padding: 12px 18px !important;
  background: rgba(15, 23, 42, 0.35) !important;
  transition: background 0.2s ease !important;
  border: none !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.04) !important;
}
#page-alerts .space-y-3 > div[class*="rounded-xl"] > button:hover {
  background: rgba(15, 23, 42, 0.5) !important;
  transform: none !important;
}

/* Date label */
#page-alerts .space-y-3 > div > button .text-sm.font-semibold {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: rgba(241, 245, 249, 0.92) !important;
}

/* Record count */
#page-alerts .space-y-3 > div > button .text-\[11px\] {
  font-size: 10px !important;
  color: rgba(148, 163, 184, 0.68) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

/* Expand / Collapse label */
#page-alerts .space-y-3 > div > button > span.text-gray-500 {
  font-size: 9.5px !important;
  color: rgba(148, 163, 184, 0.35) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Cards container inside a date group */
#page-alerts .space-y-3 > div > div.p-3 {
  padding: 8px 12px 12px !important;
  animation: alertSectionExpand 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes alertSectionExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 4. INCIDENT / ALERT CARDS ── */
#page-alerts .card-hover {
  border-radius: 12px !important;
  padding: 14px 16px !important;
  background: rgba(20, 32, 48, 0.55) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(148, 163, 184, 0.06) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  transition:
    background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: visible !important;
}

/* Left severity accent bar */
#page-alerts .card-hover::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 8px !important;
  left: 0 !important;
  bottom: 8px !important;
  width: 3px !important;
  height: auto !important;
  border-radius: 0 3px 3px 0 !important;
  background: rgba(14, 165, 233, 0.3) !important;
  opacity: 0.7 !important;
  transition: opacity 0.25s ease, background 0.25s ease !important;
  pointer-events: none !important;
  inset: auto !important;
  top: 8px !important;
  left: 0 !important;
  bottom: 8px !important;
}

/* Severity-specific accent bars */
#page-alerts .card-hover.border-red-500\/20::before,
#page-alerts .card-hover.border-red-500\/25::before,
#page-alerts .card-hover[class*="border-red"]::before {
  background: rgba(244, 63, 94, 0.55) !important;
}
#page-alerts .card-hover.border-amber-500\/20::before,
#page-alerts .card-hover.border-amber-500\/25::before,
#page-alerts .card-hover[class*="border-amber"]::before {
  background: rgba(245, 158, 11, 0.5) !important;
}
#page-alerts .card-hover.border-emerald-500\/20::before,
#page-alerts .card-hover[class*="border-emerald"]::before {
  background: rgba(16, 185, 129, 0.5) !important;
}
#page-alerts .card-hover.border-slate-500\/20::before,
#page-alerts .card-hover[class*="border-slate"]::before {
  background: rgba(148, 163, 184, 0.35) !important;
}
#page-alerts .card-hover.border-cyan-500\/25::before,
#page-alerts .card-hover[class*="border-cyan"]::before {
  background: rgba(6, 182, 212, 0.45) !important;
}

/* Card hover */
#page-alerts .card-hover:hover {
  background: rgba(15, 23, 42, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16) !important;
  transform: translateY(-1px) !important;
}
#page-alerts .card-hover:hover::before {
  opacity: 1 !important;
}

/* Archived card dimming */
#page-alerts .card-hover.opacity-70 {
  opacity: 0.55 !important;
  filter: saturate(0.7) !important;
}
#page-alerts .card-hover.opacity-70:hover {
  opacity: 0.72 !important;
}

/* ── 4a. CARD CONTENT HIERARCHY ── */
/* Checkbox */
#page-alerts .card-hover > .flex > input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  border-radius: 4px !important;
  margin-top: 3px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

/* Badge row */
#page-alerts .card-hover .flex.items-center.gap-2.flex-wrap {
  gap: 6px !important;
  margin-bottom: 6px !important;
}

/* Machine name label */
#page-alerts .card-hover .text-sm.font-semibold.text-white {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(241, 245, 249, 0.95) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.35 !important;
}

/* Event message */
#page-alerts .card-hover .text-xs.text-gray-400 {
  font-size: 11.5px !important;
  color: rgba(148, 163, 184, 0.55) !important;
  line-height: 1.5 !important;
  margin-top: 3px !important;
}

/* Device ID / Gateway ID metadata row */
#page-alerts .card-hover .flex.items-center.gap-3.font-mono {
  font-size: 10px !important;
  color: rgba(148, 163, 184, 0.38) !important;
  letter-spacing: 0.02em !important;
  margin-top: 8px !important;
  gap: 8px !important;
}
#page-alerts .card-hover .flex.items-center.gap-3.font-mono span {
  padding: 2px 6px !important;
  background: rgba(15, 23, 42, 0.4) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
}

/* ── 4b. RIGHT COLUMN — TIME & STATE ── */
#page-alerts .card-hover .text-right {
  min-width: 72px !important;
}

/* Time display */
#page-alerts .card-hover .text-right > .text-\[11px\] {
  font-size: 11px !important;
  color: rgba(148, 163, 184, 0.6) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Time ago */
#page-alerts .card-hover .text-right > .text-\[10px\].text-gray-600 {
  font-size: 9.5px !important;
  color: rgba(148, 163, 184, 0.68) !important;
  margin-top: 2px !important;
}

/* Open / Closed status — muted colors */
#page-alerts .card-hover .text-right > .text-\[10px\].text-amber-400 {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
  color: rgba(251, 191, 36, 0.85) !important;
}
#page-alerts .card-hover .text-right > .text-\[10px\].text-emerald-400 {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
  color: rgba(52, 211, 153, 0.85) !important;
}

/* ── 4c. ACTION BUTTONS (Archive/Delete/Restore) on cards ── */
#page-alerts .card-hover .text-right .flex-col {
  gap: 3px !important;
  margin-top: 8px !important;
}
#page-alerts .card-hover .text-right .flex-col button {
  font-size: 9.5px !important;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
/* Card archive/restore button */
#page-alerts .card-hover button[style*="rgba(0,180,216"] {
  background: rgba(14, 165, 233, 0.08) !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
  color: rgba(125, 211, 252, 0.88) !important;
}
#page-alerts .card-hover button[style*="rgba(0,180,216"]:hover {
  background: rgba(14, 165, 233, 0.16) !important;
}
/* Card delete button */
#page-alerts .card-hover button[style*="rgba(244,63,94"] {
  background: rgba(244, 63, 94, 0.06) !important;
  border: 1px solid rgba(244, 63, 94, 0.18) !important;
  color: rgba(253, 164, 175, 0.8) !important;
}
#page-alerts .card-hover button[style*="rgba(244,63,94"]:hover {
  background: rgba(244, 63, 94, 0.14) !important;
}

/* ── 5. SEVERITY / STATUS BADGES (color overrides for inline styles) ── */
/* Event badges (pill shape) — restrained colors */
#page-alerts .card-hover span[style*="border-radius:999px"] {
  font-size: 9px !important;
  padding: 2.5px 8px !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
/* Critical/Fault badge — rose */
#page-alerts .card-hover span[style*="rgba(244,63,94"] {
  background: rgba(244, 63, 94, 0.1) !important;
  border-color: rgba(244, 63, 94, 0.25) !important;
  color: #fb7185 !important;
}
/* Connectivity/Offline badge — warm amber */
#page-alerts .card-hover span[style*="rgba(250,204,21"] {
  background: rgba(250, 204, 21, 0.08) !important;
  border-color: rgba(250, 204, 21, 0.22) !important;
  color: #fde047 !important;
}
/* Operational badge — cool cyan */
#page-alerts .card-hover span[style*="rgba(34,211,238"][style*="border-radius:999px"] {
  background: rgba(34, 211, 238, 0.08) !important;
  border-color: rgba(34, 211, 238, 0.2) !important;
  color: #67e8f9 !important;
}
/* Online/Recovery badge — emerald */
#page-alerts .card-hover span[style*="rgba(16,185,129"] {
  background: rgba(16, 185, 129, 0.09) !important;
  border-color: rgba(16, 185, 129, 0.22) !important;
  color: #6ee7b7 !important;
}
/* Disconnected badge — slate */
#page-alerts .card-hover span[style*="rgba(148,163,184"][style*="border-radius:999px"] {
  background: rgba(148, 163, 184, 0.14) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #cbd5e1 !important;
}
/* Inner dot */
#page-alerts .card-hover span[style*="border-radius:999px"] span[style*="border-radius:50%"] {
  width: 5px !important;
  height: 5px !important;
  opacity: 0.85 !important;
}

/* Device badges (GATEWAY/SLAVE) — muted */
#page-alerts .card-hover span[style*="border-radius:6px"] {
  font-size: 8.5px !important;
  padding: 2px 6px !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}
/* Gateway device badge */
#page-alerts .card-hover span[style*="border-radius:6px"][style*="rgba(6,182,212"] {
  background: rgba(6, 182, 212, 0.08) !important;
  border-color: rgba(6, 182, 212, 0.2) !important;
  color: rgba(103, 232, 249, 0.85) !important;
}
/* Slave device badge */
#page-alerts .card-hover span[style*="border-radius:6px"][style*="rgba(245,158,11"] {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
  color: rgba(252, 211, 77, 0.85) !important;
}
/* Archived badge */
#page-alerts .card-hover span[style*="border-radius:6px"][style*="rgba(34,211,238"] {
  background: rgba(34, 211, 238, 0.07) !important;
  border-color: rgba(34, 211, 238, 0.18) !important;
  color: rgba(103, 232, 249, 0.8) !important;
}

/* Event count label */
#page-alerts .card-hover .text-\[9px\].text-gray-500 {
  font-size: 9px !important;
  color: rgba(148, 163, 184, 0.5) !important;
  font-weight: 500 !important;
}

/* ── 6. INCIDENT TIMELINE BLOCKS (Offline At / Online At) ── */
#page-alerts .card-hover .grid.gap-2 {
  gap: 6px !important;
  margin-top: 10px !important;
}

#page-alerts .card-hover .grid .rounded-lg {
  border-radius: 8px !important;
  padding: 8px 10px !important;
  transition: border-color 0.2s ease !important;
}

/* "Offline At" / "Online At" labels — muted */
#page-alerts .card-hover .grid .rounded-lg .text-\[10px\].font-semibold {
  font-size: 8.5px !important;
  letter-spacing: 0.07em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
#page-alerts .card-hover .grid .rounded-lg .text-amber-300 {
  color: rgba(251, 191, 36, 0.8) !important;
}
#page-alerts .card-hover .grid .rounded-lg .text-emerald-300 {
  color: rgba(52, 211, 153, 0.8) !important;
}
#page-alerts .card-hover .grid .rounded-lg .text-gray-400 {
  color: rgba(148, 163, 184, 0.6) !important;
}
/* Timeline blocks */
#page-alerts .card-hover .grid .rounded-lg[class*="border-amber"] {
  border-color: rgba(245, 158, 11, 0.16) !important;
  background: rgba(245, 158, 11, 0.05) !important;
}
#page-alerts .card-hover .grid .rounded-lg[class*="border-emerald"] {
  border-color: rgba(16, 185, 129, 0.16) !important;
  background: rgba(16, 185, 129, 0.05) !important;
}
#page-alerts .card-hover .grid .rounded-lg[class*="border-surface"] {
  border-color: rgba(148, 163, 184, 0.06) !important;
  background: rgba(15, 23, 42, 0.2) !important;
}

/* Timestamp value inside blocks */
#page-alerts .card-hover .grid .rounded-lg .font-mono {
  font-size: 11px !important;
  letter-spacing: 0.005em !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── 7. EMPTY STATE ── */
#page-alerts #alertsList > div:only-child:not(:has(> .flex)) {
  border-radius: 14px !important;
  background: rgba(8, 15, 28, 0.25) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  padding: 48px 24px !important;
  text-align: center !important;
}
#page-alerts #alertsList > div:only-child p {
  color: rgba(148, 163, 184, 0.68) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
/* Clear filters button inside empty state */
#page-alerts #alertsList > div:only-child button[onclick*="resetAlertFilters"] {
  font-size: 11px !important;
  padding: 6px 14px !important;
  border-radius: 7px !important;
  margin-top: 12px !important;
  font-weight: 550 !important;
}

/* ── 8. MOTION ── */
/* Override old alertIn animation from dashboard.css */
#page-alerts #alertsList > div {
  animation: alertCommandIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes alertCommandIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Staggered date group entrance */
#page-alerts .space-y-3 > div:nth-child(1) { animation-delay: 0s !important; }
#page-alerts .space-y-3 > div:nth-child(2) { animation-delay: 0.04s !important; }
#page-alerts .space-y-3 > div:nth-child(3) { animation-delay: 0.08s !important; }
#page-alerts .space-y-3 > div:nth-child(4) { animation-delay: 0.12s !important; }
#page-alerts .space-y-3 > div:nth-child(5) { animation-delay: 0.16s !important; }
#page-alerts .space-y-3 > div:nth-child(6) { animation-delay: 0.20s !important; }
#page-alerts .space-y-3 > div:nth-child(7) { animation-delay: 0.24s !important; }
#page-alerts .space-y-3 > div:nth-child(n+8) { animation-delay: 0.28s !important; }

/* Staggered card entrance inside groups */
#page-alerts .card-hover {
  animation: alertCardReveal 0.28s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
#page-alerts .space-y-3 .card-hover:nth-child(1) { animation-delay: 0.02s; }
#page-alerts .space-y-3 .card-hover:nth-child(2) { animation-delay: 0.05s; }
#page-alerts .space-y-3 .card-hover:nth-child(3) { animation-delay: 0.08s; }
#page-alerts .space-y-3 .card-hover:nth-child(4) { animation-delay: 0.11s; }
#page-alerts .space-y-3 .card-hover:nth-child(5) { animation-delay: 0.14s; }
#page-alerts .space-y-3 .card-hover:nth-child(n+6) { animation-delay: 0.17s; }

@keyframes alertCardReveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  #page-alerts .card-hover,
  #page-alerts #alertsList > div,
  #page-alerts .space-y-3 > div > div.p-3 {
    animation: none !important;
    transition-duration: 0.01s !important;
  }
}

/* ── 9. LIGHT MODE ── */
html:not(.dark) #page-alerts #alertsList > div:first-child {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Light: view toggle */
html:not(.dark) #page-alerts #alertsList > div:first-child > .flex > div[style*="inline-flex"] {
  background: rgba(241, 245, 249, 0.7) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

/* Light: filters */
html:not(.dark) #page-alerts #alertsList > div:first-child input,
html:not(.dark) #page-alerts #alertsList > div:first-child select {
  background: rgba(248, 250, 252, 0.9) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: rgba(15, 23, 42, 0.75) !important;
}
html:not(.dark) #page-alerts #alertsList > div:first-child input:focus,
html:not(.dark) #page-alerts #alertsList > div:first-child select:focus {
  border-color: rgba(14, 165, 233, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.08) !important;
  background: #fff !important;
}
html:not(.dark) #page-alerts #alertsList > div:first-child input::placeholder {
  color: rgba(100, 116, 139, 0.5) !important;
}
html:not(.dark) #page-alerts #alertsList > div:first-child select option {
  background: #fff !important;
  color: #334155 !important;
}

/* Light: filter divider */
html:not(.dark) #page-alerts #alertsList > div:first-child > .grid {
  border-top-color: rgba(15, 23, 42, 0.05) !important;
}

/* Light: bulk labels & counter */
html:not(.dark) #page-alerts #alertsList > div:first-child > .flex > label {
  color: rgba(71, 85, 105, 0.7) !important;
}
html:not(.dark) #page-alerts #alertsList > div:first-child > .flex > span {
  color: rgba(100, 116, 139, 0.5) !important;
}

/* Light: date group containers */
html:not(.dark) #page-alerts .space-y-3 > div[class*="rounded-xl"] {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
  box-shadow: 0 1px 8px rgba(15, 23, 42, 0.04) !important;
}

/* Light: date header */
html:not(.dark) #page-alerts .space-y-3 > div[class*="rounded-xl"] > button {
  background: rgba(248, 250, 252, 0.6) !important;
  border-bottom-color: rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) #page-alerts .space-y-3 > div[class*="rounded-xl"] > button:hover {
  background: rgba(241, 245, 249, 0.8) !important;
}
html:not(.dark) #page-alerts .space-y-3 > div > button .text-sm.font-semibold {
  color: rgba(15, 23, 42, 0.88) !important;
}
html:not(.dark) #page-alerts .space-y-3 > div > button .text-\[11px\] {
  color: rgba(100, 116, 139, 0.6) !important;
}
html:not(.dark) #page-alerts .space-y-3 > div > button > span.text-gray-500 {
  color: rgba(100, 116, 139, 0.4) !important;
}

/* Light: alert cards */
html:not(.dark) #page-alerts .card-hover {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) #page-alerts .card-hover:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07) !important;
}

/* Light: card text */
html:not(.dark) #page-alerts .card-hover .text-sm.font-semibold.text-white {
  color: rgba(15, 23, 42, 0.9) !important;
}
html:not(.dark) #page-alerts .card-hover .text-xs.text-gray-400 {
  color: rgba(71, 85, 105, 0.6) !important;
}
html:not(.dark) #page-alerts .card-hover .flex.items-center.gap-3.font-mono {
  color: rgba(100, 116, 139, 0.5) !important;
}
html:not(.dark) #page-alerts .card-hover .flex.items-center.gap-3.font-mono span {
  background: rgba(241, 245, 249, 0.6) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) #page-alerts .card-hover .text-right > .text-\[11px\] {
  color: rgba(71, 85, 105, 0.6) !important;
}
html:not(.dark) #page-alerts .card-hover .text-right > .text-\[10px\].text-gray-600 {
  color: rgba(100, 116, 139, 0.4) !important;
}

/* Light: incident timeline blocks */
html:not(.dark) #page-alerts .card-hover .grid .rounded-lg .font-mono {
  color: rgba(15, 23, 42, 0.75) !important;
}

/* Light: accent bar opacity */
html:not(.dark) #page-alerts .card-hover::before {
  opacity: 0.5 !important;
}
html:not(.dark) #page-alerts .card-hover:hover::before {
  opacity: 0.8 !important;
}

/* Light: empty state */
html:not(.dark) #page-alerts #alertsList > div:only-child:not(:has(> .flex)) {
  background: rgba(248, 250, 252, 0.7) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) #page-alerts #alertsList > div:only-child p {
  color: rgba(71, 85, 105, 0.55) !important;
}

/* ── 10. RESPONSIVE ── */
@media (max-width: 768px) {
  #page-alerts {
    padding: 8px !important;
  }
  #page-alerts #alertsList > div:first-child {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  #page-alerts #alertsList > div:first-child > .grid {
    grid-template-columns: 1fr 1fr !important;
  }
  #page-alerts .card-hover {
    padding: 12px !important;
    border-radius: 10px !important;
  }
  #page-alerts .card-hover .text-sm.font-semibold.text-white {
    font-size: 12px !important;
  }
  #page-alerts .card-hover .grid.gap-2 {
    grid-template-columns: 1fr !important;
  }
  /* Stack right column below on small screens */
  #page-alerts .card-hover .flex.items-start.justify-between {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #page-alerts .card-hover .text-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    text-align: left !important;
  }
  #page-alerts .card-hover .text-right .flex-col {
    flex-direction: row !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 480px) {
  #page-alerts #alertsList > div:first-child > .grid {
    grid-template-columns: 1fr !important;
  }
  #page-alerts #alertsList > div:first-child > .flex {
    gap: 6px !important;
  }
  #page-alerts #alertsList > div:first-child > .flex > button {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
}

/* ── 11. TOUCH DEVICE REFINEMENT ── */
@media (hover: none) {
  #page-alerts .card-hover:hover {
    transform: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  }
  #page-alerts .space-y-3 > div[class*="rounded-xl"] > button:hover {
    background: rgba(15, 23, 42, 0.35) !important;
  }
}

/* ── 12. PRINT ── */
@media print {
  #page-alerts .card-hover {
    break-inside: avoid !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  #page-alerts .card-hover::before {
    display: none !important;
  }
  #page-alerts #alertsList > div:first-child {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   OPERATORS — WORKFORCE INTELLIGENCE v3.0
   Premium operator management & assignment dashboard
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. PAGE FRAME ── */
#page-operators > .max-w-6xl {
  max-width: 1080px !important;
}

/* ── 1. PAGE HEADER ── */
#page-operators > .max-w-6xl > .flex:first-child {
  margin-bottom: 20px !important;
  gap: 12px !important;
  align-items: flex-end !important;
}

/* Title */
#page-operators h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: rgba(241, 245, 249, 0.95) !important;
}

/* Subtitle */
#page-operators h2 + p {
  font-size: 12px !important;
  color: rgba(148, 163, 184, 0.5) !important;
  margin-top: 2px !important;
  font-weight: 400 !important;
}

/* ── 2. SEARCH & ACTION ROW ── */
/* Search input */
#page-operators #operatorSearch {
  background: rgba(8, 15, 28, 0.5) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 10px !important;
  padding: 8px 12px 8px 34px !important;
  font-size: 12px !important;
  color: rgba(226, 232, 240, 0.85) !important;
  width: 220px !important;
  transition: all 0.25s ease !important;
}
#page-operators #operatorSearch:focus {
  border-color: rgba(14, 165, 233, 0.25) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.06) !important;
  background: rgba(8, 15, 28, 0.7) !important;
  width: 260px !important;
}
#page-operators #operatorSearch::placeholder {
  color: rgba(148, 163, 184, 0.35) !important;
}
/* Search icon */
#page-operators .search-input-icon {
  color: rgba(148, 163, 184, 0.35) !important;
  width: 13px !important;
  height: 13px !important;
}

/* Add Operator button */
#page-operators button[onclick*="openOperatorModal"] {
  background: rgba(14, 165, 233, 0.12) !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
  color: rgba(125, 211, 252, 0.92) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  gap: 6px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  filter: none !important;
}
#page-operators button[onclick*="openOperatorModal"]:hover {
  background: rgba(14, 165, 233, 0.18) !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.1) !important;
  transform: translateY(-1px) !important;
}
#page-operators button[onclick*="openOperatorModal"]:active {
  transform: scale(0.97) !important;
}
#page-operators button[onclick*="openOperatorModal"] svg {
  opacity: 0.7 !important;
  width: 14px !important;
  height: 14px !important;
}

/* ── 3. KPI STATS ROW ── */
#operatorStats {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}

#operatorStats > div {
  background: rgba(8, 15, 28, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  border-radius: 12px !important;
  padding: 12px 10px 10px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
#operatorStats > div:hover {
  border-color: rgba(148, 163, 184, 0.1) !important;
  background: rgba(8, 15, 28, 0.5) !important;
}

/* KPI numbers */
#operatorStats .text-2xl {
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  font-variant-numeric: tabular-nums !important;
}

/* Stat: Total — neutral white */
#opStatTotal {
  color: rgba(241, 245, 249, 0.9) !important;
}
/* Stat: Active — emerald */
#opStatActive {
  color: #6ee7b7 !important;
}
#operatorStats > div:nth-child(2) {
  border-color: rgba(16, 185, 129, 0.12) !important;
}
/* Stat: On Shift — sky */
#opStatOnShift {
  color: #7dd3fc !important;
}
#operatorStats > div:nth-child(3) {
  border-color: rgba(14, 165, 233, 0.12) !important;
}
/* Stat: Inactive — muted */
#opStatInactive {
  color: rgba(148, 163, 184, 0.5) !important;
}

/* KPI labels */
#operatorStats .text-\[10px\] {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: rgba(148, 163, 184, 0.4) !important;
  margin-top: 4px !important;
}

/* ── 4. OPERATORS GRID ── */
#operatorsGrid {
  gap: 10px !important;
}

/* ── 4a. OPERATOR CARDS ── */
#operatorsGrid > div:not(.col-span-full) {
  background: rgba(10, 18, 32, 0.45) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  transition:
    background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

/* Card hover */
#operatorsGrid > div:not(.col-span-full):hover {
  background: rgba(15, 23, 42, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16) !important;
  transform: translateY(-2px) !important;
}

/* On-shift card accent border */
#operatorsGrid > div.border-emerald-500\/20 {
  border-color: rgba(16, 185, 129, 0.14) !important;
}
#operatorsGrid > div.border-emerald-500\/20:hover {
  border-color: rgba(16, 185, 129, 0.22) !important;
}

/* ── 4b. AVATAR ── */
#operatorsGrid .w-11.h-11 {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

/* ── 4c. OPERATOR NAME ── */
#operatorsGrid h4 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(241, 245, 249, 0.95) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.3 !important;
}

/* ── 4d. STATUS INDICATOR ── */
/* Status dot */
#operatorsGrid .w-2.h-2.rounded-full {
  width: 7px !important;
  height: 7px !important;
}
/* Status text */
#operatorsGrid span > .text-\[10px\].text-gray-400,
#operatorsGrid .text-\[10px\].text-gray-400 {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

/* ── 4e. OPERATOR METADATA (ID, Card, Phone) ── */
#operatorsGrid .text-\[10px\].text-gray-500 {
  font-size: 10px !important;
  color: rgba(148, 163, 184, 0.4) !important;
  letter-spacing: 0.01em !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── 4f. ASSIGNMENT BLOCK ── */
/* Active shift assignment */
#operatorsGrid .bg-emerald-500\/10 {
  background: rgba(16, 185, 129, 0.06) !important;
  border-color: rgba(16, 185, 129, 0.12) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  margin-top: 10px !important;
}
#operatorsGrid .bg-emerald-500\/10 .text-emerald-400 {
  color: rgba(110, 231, 183, 0.9) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
}
#operatorsGrid .bg-emerald-500\/10 .text-emerald-300\/70 {
  color: rgba(110, 231, 183, 0.55) !important;
  font-size: 10px !important;
  font-variant-numeric: tabular-nums !important;
}

/* No assignment fallback */
#operatorsGrid .bg-surface-900\/40 {
  background: rgba(8, 15, 28, 0.25) !important;
  border-color: rgba(148, 163, 184, 0.04) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  margin-top: 10px !important;
}
#operatorsGrid .bg-surface-900\/40 .text-gray-600 {
  color: rgba(148, 163, 184, 0.3) !important;
  font-style: italic !important;
  font-size: 10.5px !important;
}

/* ── 4g. EDIT/REMOVE ACTIONS ── */
#operatorsGrid .opacity-0.group-hover\:opacity-100 {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.04) !important;
  gap: 6px !important;
}
#operatorsGrid .opacity-0 .text-brand-400 {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: rgba(56, 189, 248, 0.7) !important;
}
#operatorsGrid .opacity-0 .text-brand-400:hover {
  color: rgba(56, 189, 248, 0.95) !important;
}
#operatorsGrid .opacity-0 .text-red-400 {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: rgba(251, 113, 133, 0.55) !important;
}
#operatorsGrid .opacity-0 .text-red-400:hover {
  color: rgba(251, 113, 133, 0.85) !important;
}
#operatorsGrid .opacity-0 .text-gray-700 {
  color: rgba(148, 163, 184, 0.15) !important;
}

/* ── 5. EMPTY STATE ── */
#operatorsGrid > .col-span-full {
  padding: 48px 24px !important;
  color: rgba(148, 163, 184, 0.68) !important;
}
#operatorsGrid > .col-span-full svg {
  opacity: 0.2 !important;
  margin-bottom: 12px !important;
}
#operatorsGrid > .col-span-full p {
  font-size: 13px !important;
  font-weight: 500 !important;
}
#operatorsGrid > .col-span-full .text-xs {
  color: rgba(148, 163, 184, 0.3) !important;
  font-size: 11px !important;
}

/* ── 6. MODAL ── */
#operatorModal > div {
  background: rgba(8, 15, 28, 0.95) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(148, 163, 184, 0.04) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 24px !important;
}

/* Modal title */
#operatorModalTitle {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Modal close button */
#operatorModal button[onclick*="closeOperatorModal"]:first-of-type {
  border-radius: 8px !important;
  padding: 6px !important;
}

/* Modal labels */
#operatorModal label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(148, 163, 184, 0.5) !important;
}

/* Modal inputs */
#operatorModal input[type="number"],
#operatorModal input[type="text"],
#operatorModal input[type="tel"] {
  background: rgba(8, 15, 28, 0.5) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: rgba(226, 232, 240, 0.9) !important;
  transition: all 0.2s ease !important;
}
#operatorModal input:focus {
  border-color: rgba(14, 165, 233, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.06) !important;
  background: rgba(8, 15, 28, 0.7) !important;
}
#operatorModal input::placeholder {
  color: rgba(148, 163, 184, 0.3) !important;
}

/* Modal hint text */
#operatorModal .text-xs.text-gray-500 {
  color: rgba(148, 163, 184, 0.35) !important;
  font-size: 10px !important;
}

/* Modal actions */
#operatorModal .flex.gap-3 button {
  border-radius: 10px !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
}
/* Cancel button */
#operatorModal button[onclick*="closeOperatorModal"]:last-of-type,
#operatorModal .flex.gap-3 button:first-child {
  background: rgba(30, 41, 59, 0.5) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  color: rgba(203, 213, 225, 0.7) !important;
}
/* Save button */
#opModalSaveBtn {
  background: rgba(14, 165, 233, 0.15) !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
  color: rgba(125, 211, 252, 0.95) !important;
  box-shadow: none !important;
}
#opModalSaveBtn:hover {
  background: rgba(14, 165, 233, 0.22) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.1) !important;
}

/* ── 7. MOTION ── */
/* Card entrance */
#operatorsGrid > div {
  animation: opCardReveal 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#operatorsGrid > div:nth-child(1) { animation-delay: 0s; }
#operatorsGrid > div:nth-child(2) { animation-delay: 0.03s; }
#operatorsGrid > div:nth-child(3) { animation-delay: 0.06s; }
#operatorsGrid > div:nth-child(4) { animation-delay: 0.09s; }
#operatorsGrid > div:nth-child(5) { animation-delay: 0.12s; }
#operatorsGrid > div:nth-child(6) { animation-delay: 0.15s; }
#operatorsGrid > div:nth-child(7) { animation-delay: 0.18s; }
#operatorsGrid > div:nth-child(8) { animation-delay: 0.21s; }
#operatorsGrid > div:nth-child(n+9) { animation-delay: 0.24s; }

@keyframes opCardReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal entrance */
#operatorModal > div {
  animation: opModalIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes opModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #operatorsGrid > div,
  #operatorModal > div {
    animation: none !important;
  }
}

/* ── 8. LIGHT MODE ── */
/* Page header */
html:not(.dark) #page-operators h2 {
  color: rgba(15, 23, 42, 0.9) !important;
}
html:not(.dark) #page-operators h2 + p {
  color: rgba(100, 116, 139, 0.6) !important;
}

/* Search */
html:not(.dark) #page-operators #operatorSearch {
  background: rgba(248, 250, 252, 0.9) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: rgba(15, 23, 42, 0.8) !important;
}
html:not(.dark) #page-operators #operatorSearch:focus {
  background: #fff !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.08) !important;
}
html:not(.dark) #page-operators #operatorSearch::placeholder {
  color: rgba(100, 116, 139, 0.5) !important;
}
html:not(.dark) #page-operators .search-input-icon {
  color: rgba(100, 116, 139, 0.4) !important;
}

/* Add Operator button */
html:not(.dark) #page-operators button[onclick*="openOperatorModal"] {
  background: rgba(14, 165, 233, 0.08) !important;
  border-color: rgba(14, 165, 233, 0.18) !important;
  color: #0284c7 !important;
}
html:not(.dark) #page-operators button[onclick*="openOperatorModal"]:hover {
  background: rgba(14, 165, 233, 0.14) !important;
}

/* KPI cards */
html:not(.dark) #operatorStats > div {
  background: rgba(255, 255, 255, 0.65) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) #opStatTotal {
  color: rgba(15, 23, 42, 0.85) !important;
}
html:not(.dark) #opStatActive {
  color: #059669 !important;
}
html:not(.dark) #operatorStats > div:nth-child(2) {
  border-color: rgba(16, 185, 129, 0.15) !important;
}
html:not(.dark) #opStatOnShift {
  color: #0284c7 !important;
}
html:not(.dark) #operatorStats > div:nth-child(3) {
  border-color: rgba(14, 165, 233, 0.15) !important;
}
html:not(.dark) #opStatInactive {
  color: rgba(100, 116, 139, 0.5) !important;
}
html:not(.dark) #operatorStats .text-\[10px\] {
  color: rgba(100, 116, 139, 0.5) !important;
}

/* Operator cards */
html:not(.dark) #operatorsGrid > div:not(.col-span-full) {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) #operatorsGrid > div:not(.col-span-full):hover {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06) !important;
}
html:not(.dark) #operatorsGrid h4 {
  color: rgba(15, 23, 42, 0.9) !important;
}
html:not(.dark) #operatorsGrid .text-\[10px\].text-gray-500 {
  color: rgba(100, 116, 139, 0.55) !important;
}
html:not(.dark) #operatorsGrid .text-\[10px\].text-gray-400 {
  color: rgba(71, 85, 105, 0.6) !important;
}

/* Assignment blocks */
html:not(.dark) #operatorsGrid .bg-emerald-500\/10 {
  background: rgba(16, 185, 129, 0.05) !important;
  border-color: rgba(16, 185, 129, 0.12) !important;
}
html:not(.dark) #operatorsGrid .bg-emerald-500\/10 .text-emerald-400 {
  color: #059669 !important;
}
html:not(.dark) #operatorsGrid .bg-surface-900\/40 {
  background: rgba(248, 250, 252, 0.6) !important;
  border-color: rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) #operatorsGrid .bg-surface-900\/40 .text-gray-600 {
  color: rgba(100, 116, 139, 0.4) !important;
}

/* Edit/Remove */
html:not(.dark) #operatorsGrid .opacity-0 {
  border-top-color: rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) #operatorsGrid .opacity-0 .text-brand-400 {
  color: rgba(2, 132, 199, 0.65) !important;
}
html:not(.dark) #operatorsGrid .opacity-0 .text-red-400 {
  color: rgba(225, 29, 72, 0.45) !important;
}

/* Modal */
html:not(.dark) #operatorModal > div {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) #operatorModalTitle {
  color: rgba(15, 23, 42, 0.9) !important;
}
html:not(.dark) #operatorModal label {
  color: rgba(71, 85, 105, 0.6) !important;
}
html:not(.dark) #operatorModal input {
  background: rgba(248, 250, 252, 0.9) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: rgba(15, 23, 42, 0.85) !important;
}
html:not(.dark) #operatorModal input:focus {
  background: #fff !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.08) !important;
}
html:not(.dark) #opModalSaveBtn {
  background: rgba(14, 165, 233, 0.1) !important;
  border-color: rgba(14, 165, 233, 0.2) !important;
  color: #0284c7 !important;
}

/* ── 9. RESPONSIVE ── */
@media (max-width: 768px) {
  #page-operators {
    padding: 8px !important;
  }
  #operatorStats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  #operatorStats .text-2xl {
    font-size: 18px !important;
  }
  #operatorsGrid {
    gap: 8px !important;
  }
  #operatorsGrid > div:not(.col-span-full) {
    padding: 12px !important;
    border-radius: 12px !important;
  }
  #page-operators #operatorSearch {
    width: 160px !important;
  }
}

@media (max-width: 480px) {
  #operatorStats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #page-operators > .max-w-6xl > .flex:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #page-operators #operatorSearch {
    width: 100% !important;
  }
}

/* ── 10. TOUCH / PRINT ── */
@media (hover: none) {
  #operatorsGrid > div:not(.col-span-full):hover {
    transform: none !important;
    box-shadow: none !important;
  }
  /* Always show edit/remove on touch */
  #operatorsGrid .opacity-0.group-hover\:opacity-100 {
    opacity: 1 !important;
  }
}

@media print {
  #operatorsGrid > div:not(.col-span-full) {
    break-inside: avoid !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SHIFT TRACKING — OPERATIONAL TIMELINE v3.0
   Premium shift records, RFID events, operator-machine assignments
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. PAGE FRAME ── */
#page-shifts > .max-w-6xl {
  max-width: 1120px !important;
}

/* ── 1. PAGE HEADER ── */
#page-shifts > .max-w-6xl > .flex:first-child {
  margin-bottom: 16px !important;
  gap: 10px !important;
  align-items: flex-end !important;
}
#page-shifts h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: rgba(241, 245, 249, 0.95) !important;
}
#page-shifts h2 + p {
  font-size: 12px !important;
  color: rgba(148, 163, 184, 0.68) !important;
  margin-top: 2px !important;
  font-weight: 400 !important;
}

/* View mode selector */
#shiftViewMode {
  background: rgba(8, 15, 28, 0.5) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 10px !important;
  padding: 7px 28px 7px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(226, 232, 240, 0.85) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}
#shiftViewMode:focus {
  border-color: rgba(14, 165, 233, 0.25) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.06) !important;
  outline: none !important;
}

/* Manual Assign button */
#page-shifts button[onclick*="openManualAssignModal"] {
  background: rgba(14, 165, 233, 0.1) !important;
  border: 1px solid rgba(14, 165, 233, 0.18) !important;
  color: rgba(125, 211, 252, 0.9) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  border-radius: 10px !important;
  gap: 6px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  filter: none !important;
}
#page-shifts button[onclick*="openManualAssignModal"]:hover {
  background: rgba(14, 165, 233, 0.16) !important;
  border-color: rgba(14, 165, 233, 0.28) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.08) !important;
  transform: translateY(-1px) !important;
}
#page-shifts button[onclick*="openManualAssignModal"]:active {
  transform: scale(0.97) !important;
}
#page-shifts button[onclick*="openManualAssignModal"] svg {
  opacity: 0.65 !important;
  width: 13px !important;
  height: 13px !important;
}

/* ── 2. FILTER TOOLBAR ── */
#shiftRfidEvents > .bg-surface-800\/60 {
  background: rgba(8, 15, 28, 0.35) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin-bottom: 12px !important;
}

/* 2a. Bulk actions row */
#shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child {
  gap: 5px !important;
  align-items: center !important;
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.04) !important;
}

/* Select-all label */
#shiftRfidEvents > .bg-surface-800\/60 label {
  font-size: 11px !important;
  color: rgba(203, 213, 225, 0.6) !important;
  gap: 6px !important;
}
#shiftRfidEvents > .bg-surface-800\/60 label input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  border-radius: 4px !important;
}

/* Bulk action buttons — override all inline styles */
#shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child button {
  font-size: 10px !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
}
/* Clear button */
#shiftRfidEvents button[onclick*="clearShiftSelection"] {
  background: rgba(148, 163, 184, 0.06) !important;
  border: 1px solid rgba(148, 163, 184, 0.1) !important;
  color: rgba(203, 213, 225, 0.6) !important;
}
#shiftRfidEvents button[onclick*="clearShiftSelection"]:hover {
  background: rgba(148, 163, 184, 0.12) !important;
  color: rgba(203, 213, 225, 0.85) !important;
  transform: translateY(0) !important;
}
/* Archive buttons */
#shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child button[onclick*="'archive'"] {
  background: rgba(14, 165, 233, 0.06) !important;
  border: 1px solid rgba(14, 165, 233, 0.15) !important;
  color: rgba(125, 211, 252, 0.75) !important;
}
#shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child button[onclick*="'archive'"]:hover {
  background: rgba(14, 165, 233, 0.12) !important;
  color: rgba(125, 211, 252, 0.95) !important;
  transform: translateY(0) !important;
}
/* Delete buttons */
#shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child button[onclick*="'delete'"] {
  background: rgba(244, 63, 94, 0.05) !important;
  border: 1px solid rgba(244, 63, 94, 0.12) !important;
  color: rgba(251, 113, 133, 0.6) !important;
}
#shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child button[onclick*="'delete'"]:hover {
  background: rgba(244, 63, 94, 0.1) !important;
  color: rgba(251, 113, 133, 0.85) !important;
  transform: translateY(0) !important;
}
/* Selected/Visible counter */
#shiftRfidEvents > .bg-surface-800\/60 .text-\[11px\].text-gray-500 {
  font-size: 10px !important;
  color: rgba(148, 163, 184, 0.35) !important;
  font-variant-numeric: tabular-nums !important;
}

/* 2b. Filter grid */
#shiftRfidEvents .grid.xl\:grid-cols-7 {
  gap: 6px !important;
  margin-top: 0 !important;
}

/* All filter selects + search input */
#shiftRfidEvents .grid select,
#shiftRfidEvents .grid input {
  background: rgba(8, 15, 28, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(203, 213, 225, 0.7) !important;
  transition: all 0.15s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#shiftRfidEvents .grid select {
  padding-right: 24px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%2394a3b8' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
}
#shiftRfidEvents .grid select:focus,
#shiftRfidEvents .grid input:focus {
  border-color: rgba(14, 165, 233, 0.2) !important;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.05) !important;
  outline: none !important;
  color: rgba(226, 232, 240, 0.9) !important;
}
#shiftRfidEvents .grid input::placeholder {
  color: rgba(148, 163, 184, 0.3) !important;
}

/* ── 3. DATE GROUP HEADERS ── */
#shiftRfidEvents > .bg-surface-900\/40 {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin-bottom: 4px !important;
}

/* Day header button */
#shiftRfidEvents > .bg-surface-900\/40 > button {
  background: rgba(8, 15, 28, 0.3) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
#shiftRfidEvents > .bg-surface-900\/40 > button:hover {
  background: rgba(8, 15, 28, 0.45) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
}

/* Day title */
#shiftRfidEvents > .bg-surface-900\/40 .text-sm.font-semibold {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(241, 245, 249, 0.9) !important;
  letter-spacing: -0.01em !important;
}

/* Record count */
#shiftRfidEvents > .bg-surface-900\/40 .text-\[11px\].text-gray-500 {
  font-size: 10px !important;
  color: rgba(148, 163, 184, 0.4) !important;
  font-weight: 500 !important;
  margin-top: 1px !important;
}

/* Collapse/Expand label */
#shiftRfidEvents > .bg-surface-900\/40 > button > span.text-gray-500 {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(148, 163, 184, 0.35) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Records container inside group */
#shiftRfidEvents > .bg-surface-900\/40 > .p-3 {
  padding: 6px 0 0 !important;
}
#shiftRfidEvents > .bg-surface-900\/40 > .p-3 > .space-y-3 > * + * {
  margin-top: 6px !important;
}

/* ── 4. SHIFT RECORD CARDS ── */
/* Card container — override inline background/border/border-radius/padding */
#shiftRfidEvents [data-shift-id] {
  background: rgba(10, 18, 32, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  margin-bottom: 0 !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#shiftRfidEvents [data-shift-id]:hover {
  background: rgba(15, 23, 42, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
}

/* Archived card fade */
#shiftRfidEvents [data-shift-id][style*="opacity:.72"] {
  opacity: 0.55 !important;
}
#shiftRfidEvents [data-shift-id][style*="opacity:.72"]:hover {
  opacity: 0.72 !important;
}

/* 4a. Checkbox */
#shiftRfidEvents [data-shift-id] input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  border-radius: 4px !important;
  margin-top: 6px !important;
  flex-shrink: 0 !important;
}

/* 4b. Operator Avatar */
#shiftRfidEvents [data-shift-id] [style*="width:44px"][style*="height:44px"] {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(34, 211, 238, 0.06)) !important;
  color: rgba(125, 211, 252, 0.85) !important;
  border: 1px solid rgba(14, 165, 233, 0.12) !important;
}

/* 4c. Operator Name */
#shiftRfidEvents [data-shift-id] [style*="font-size:15px"][style*="font-weight:700"] {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: rgba(241, 245, 249, 0.95) !important;
  letter-spacing: -0.005em !important;
}

/* 4d. Worker Code */
#shiftRfidEvents [data-shift-id] [style*="font-family:monospace"][style*="font-size:11px"] {
  font-size: 10px !important;
  color: rgba(148, 163, 184, 0.68) !important;
  font-weight: 500 !important;
}

/* 4e. Status Badge (Active / Completed) */
#shiftRfidEvents [data-shift-id] [style*="border-radius:9999px"][style*="font-size:11px"] {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  letter-spacing: 0.02em !important;
}
/* Active badge — calm emerald */
#shiftRfidEvents [data-shift-id] [style*="border-radius:9999px"][style*="background:rgba(16,185,129"] {
  background: rgba(16, 185, 129, 0.08) !important;
  color: rgba(110, 231, 183, 0.88) !important;
  border-color: rgba(16, 185, 129, 0.16) !important;
}
/* Active pulse dot */
#shiftRfidEvents [data-shift-id] [style*="animation:pulse"][style*="border-radius:50%"] {
  width: 5px !important;
  height: 5px !important;
  background: #34d399 !important;
}
/* Completed badge — muted neutral */
#shiftRfidEvents [data-shift-id] [style*="border-radius:9999px"][style*="background:rgba(107,114,128"] {
  background: rgba(148, 163, 184, 0.06) !important;
  color: rgba(148, 163, 184, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
}
/* Archived badge */
#shiftRfidEvents [data-shift-id] [style*="border-radius:9999px"][style*="background:rgba(34,211,238"] {
  background: rgba(14, 165, 233, 0.06) !important;
  color: rgba(125, 211, 252, 0.6) !important;
  border-color: rgba(14, 165, 233, 0.12) !important;
}

/* Source badge (RFID / Manual) — smaller, subtler */
#shiftRfidEvents [data-shift-id] [style*="border-radius:9999px"][style*="font-size:10px"] {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  letter-spacing: 0.04em !important;
}
/* RFID source */
#shiftRfidEvents [data-shift-id] [style*="border-radius:9999px"][style*="color:#22d3ee"][style*="font-size:10px"] {
  background: rgba(14, 165, 233, 0.06) !important;
  color: rgba(125, 211, 252, 0.7) !important;
  border-color: rgba(14, 165, 233, 0.12) !important;
}
/* Manual source */
#shiftRfidEvents [data-shift-id] [style*="border-radius:9999px"][style*="color:#a78bfa"][style*="font-size:10px"] {
  background: rgba(139, 92, 246, 0.06) !important;
  color: rgba(167, 139, 250, 0.7) !important;
  border-color: rgba(139, 92, 246, 0.12) !important;
}

/* 4f. Machine row */
#shiftRfidEvents [data-shift-id] [style*="font-size:13px"][style*="font-weight:600"] {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(203, 213, 225, 0.8) !important;
}
/* Machine ID (monospace) */
#shiftRfidEvents [data-shift-id] [style*="font-size:10px"][style*="font-family:monospace"][style*="margin-left"] {
  font-size: 9.5px !important;
  color: rgba(148, 163, 184, 0.35) !important;
}
/* Machine icon */
#shiftRfidEvents [data-shift-id] [style*="display:flex"][style*="margin-top:6px"] svg {
  opacity: 0.4 !important;
}

/* 4g. Time/Duration Grid */
#shiftRfidEvents [data-shift-id] [style*="grid-template-columns"] {
  gap: 6px 14px !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.10) !important;
}
/* Metadata labels (Started, Ended, Duration, Source) */
#shiftRfidEvents [data-shift-id] [style*="font-size:10px"][style*="text-transform:uppercase"][style*="color:#64748b"] {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(148, 163, 184, 0.35) !important;
  margin-bottom: 3px !important;
}
/* Time values */
#shiftRfidEvents [data-shift-id] [style*="font-size:12px"][style*="font-weight:600"] {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(226, 232, 240, 0.85) !important;
  font-variant-numeric: tabular-nums !important;
}
/* Duration value (bolder) */
#shiftRfidEvents [data-shift-id] [style*="font-size:12px"][style*="font-weight:700"] {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(241, 245, 249, 0.92) !important;
  font-variant-numeric: tabular-nums !important;
}
/* "Still working" text */
#shiftRfidEvents [data-shift-id] [style*="font-weight:700"][style*="color:#6ee7b7"],
#shiftRfidEvents [data-shift-id] span[style*="color:#6ee7b7"] {
  color: rgba(110, 231, 183, 0.8) !important;
}

/* 4h. Card Action Buttons Row */
#shiftRfidEvents [data-shift-id] > div > div > [style*="border-top:1px solid rgba(71,85,105,0.18)"] {
  border-top-color: rgba(148, 163, 184, 0.04) !important;
  padding-top: 10px !important;
  margin-top: 10px !important;
  gap: 6px !important;
}

/* All in-card action buttons */
#shiftRfidEvents [data-shift-id] button {
  font-size: 10px !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
}

/* Archive/Restore card button */
#shiftRfidEvents [data-shift-id] button[onclick*="applyShiftBulkAction"] {
  letter-spacing: 0.01em !important;
}
/* Archive button (cyan) */
#shiftRfidEvents [data-shift-id] button[onclick*="'archive'"],
#shiftRfidEvents [data-shift-id] button[onclick*="'restore'"] {
  background: rgba(14, 165, 233, 0.06) !important;
  border: 1px solid rgba(14, 165, 233, 0.12) !important;
  color: rgba(125, 211, 252, 0.65) !important;
}
#shiftRfidEvents [data-shift-id] button[onclick*="'archive'"]:hover,
#shiftRfidEvents [data-shift-id] button[onclick*="'restore'"]:hover {
  background: rgba(14, 165, 233, 0.12) !important;
  color: rgba(125, 211, 252, 0.9) !important;
}
/* Delete card button */
#shiftRfidEvents [data-shift-id] button[onclick*="'delete'"] {
  background: rgba(244, 63, 94, 0.04) !important;
  border: 1px solid rgba(244, 63, 94, 0.1) !important;
  color: rgba(251, 113, 133, 0.5) !important;
}
#shiftRfidEvents [data-shift-id] button[onclick*="'delete'"]:hover {
  background: rgba(244, 63, 94, 0.1) !important;
  color: rgba(251, 113, 133, 0.8) !important;
}
/* End Shift button */
#shiftRfidEvents [data-shift-id] button[onclick*="endShiftFromCard"] {
  background: rgba(239, 68, 68, 0.06) !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
  color: rgba(248, 113, 113, 0.7) !important;
}
#shiftRfidEvents [data-shift-id] button[onclick*="endShiftFromCard"]:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: rgba(248, 113, 113, 0.95) !important;
}

/* 5. SHIFT REPORT BUTTON — premium integration */
#shiftRfidEvents [data-shift-id] button[onclick*="openShiftReportModal"] {
  background: rgba(14, 165, 233, 0.08) !important;
  border: 1px solid rgba(14, 165, 233, 0.18) !important;
  color: rgba(125, 211, 252, 0.85) !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  gap: 5px !important;
}
#shiftRfidEvents [data-shift-id] button[onclick*="openShiftReportModal"]:hover {
  background: rgba(14, 165, 233, 0.15) !important;
  border-color: rgba(14, 165, 233, 0.28) !important;
  color: rgba(125, 211, 252, 1) !important;
  box-shadow: 0 2px 12px rgba(14, 165, 233, 0.08) !important;
}
#shiftRfidEvents [data-shift-id] button[onclick*="openShiftReportModal"] svg {
  opacity: 0.6 !important;
}

/* ── 6. LIVE VIEW (Machine Grid) ── */
#shiftsLiveView .shift-machine-card {
  background: rgba(10, 18, 32, 0.45) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}
#shiftsLiveView .shift-machine-card:hover {
  background: rgba(15, 23, 42, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-1px) !important;
}

/* Live view KPI row */
#shiftsLiveView > .grid.grid-cols-2.sm\:grid-cols-4 > div {
  background: rgba(8, 15, 28, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  border-radius: 10px !important;
}
#shiftsLiveView .text-2xl {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  font-variant-numeric: tabular-nums !important;
}
#shiftsLiveView .text-\[9px\] {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(148, 163, 184, 0.4) !important;
}

/* Live view production metric boxes */
#shiftsLiveView .shift-machine-card [style*="background"] .text-xs.font-bold {
  font-variant-numeric: tabular-nums !important;
}

/* ── 7. HISTORY VIEW ── */
#shiftsHistoryView input[type="date"],
#shiftsHistoryView select {
  background: rgba(8, 15, 28, 0.5) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 10px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  color: rgba(226, 232, 240, 0.85) !important;
}
#shiftsHistoryView input[type="date"]:focus,
#shiftsHistoryView select:focus {
  border-color: rgba(14, 165, 233, 0.25) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.06) !important;
  outline: none !important;
}

/* ── 8. MANUAL ASSIGN MODAL ── */
#manualAssignModal > div {
  background: rgba(8, 15, 28, 0.95) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(148, 163, 184, 0.04) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 24px !important;
}
#manualAssignModal h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
#manualAssignModal label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(148, 163, 184, 0.5) !important;
}
#manualAssignModal select,
#manualAssignModal input[type="datetime-local"] {
  background: rgba(8, 15, 28, 0.5) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  color: rgba(226, 232, 240, 0.9) !important;
  transition: all 0.2s ease !important;
}
#manualAssignModal select:focus,
#manualAssignModal input:focus {
  border-color: rgba(14, 165, 233, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.06) !important;
  outline: none !important;
}
/* Modal hint text */
#manualAssignModal .text-xs.text-gray-500 {
  color: rgba(148, 163, 184, 0.35) !important;
  font-size: 10.5px !important;
}
/* Modal error */
#manualAssignError {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
  border-radius: 8px !important;
  color: rgba(248, 113, 113, 0.85) !important;
}
/* Modal cancel button */
#manualAssignModal .flex.gap-3 button:first-child {
  background: rgba(30, 41, 59, 0.5) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  color: rgba(203, 213, 225, 0.7) !important;
  border-radius: 10px !important;
}
/* Modal assign button */
#manualAssignBtn {
  background: rgba(14, 165, 233, 0.15) !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
  color: rgba(125, 211, 252, 0.95) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
#manualAssignBtn:hover {
  background: rgba(14, 165, 233, 0.22) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.1) !important;
}

/* ── 9. MOTION ── */
/* Date group entrance */
#shiftRfidEvents > .bg-surface-900\/40 {
  animation: shiftGroupReveal 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#shiftRfidEvents > .bg-surface-900\/40:nth-child(1) { animation-delay: 0s; }
#shiftRfidEvents > .bg-surface-900\/40:nth-child(2) { animation-delay: 0.04s; }
#shiftRfidEvents > .bg-surface-900\/40:nth-child(3) { animation-delay: 0.08s; }
#shiftRfidEvents > .bg-surface-900\/40:nth-child(4) { animation-delay: 0.12s; }
#shiftRfidEvents > .bg-surface-900\/40:nth-child(n+5) { animation-delay: 0.16s; }

@keyframes shiftGroupReveal {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Record card entrance inside groups */
#shiftRfidEvents [data-shift-id] {
  animation: shiftCardIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes shiftCardIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal entrance */
#manualAssignModal > div {
  animation: shiftModalIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes shiftModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #shiftRfidEvents > .bg-surface-900\/40,
  #shiftRfidEvents [data-shift-id],
  #manualAssignModal > div {
    animation: none !important;
  }
}

/* ── 10. LIGHT MODE ── */
/* Page header */
html:not(.dark) #page-shifts h2 {
  color: rgba(15, 23, 42, 0.9) !important;
}
html:not(.dark) #page-shifts h2 + p {
  color: rgba(100, 116, 139, 0.55) !important;
}

/* View mode select */
html:not(.dark) #shiftViewMode {
  background: rgba(248, 250, 252, 0.9) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: rgba(15, 23, 42, 0.75) !important;
}
html:not(.dark) #shiftViewMode:focus {
  background: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.08) !important;
}

/* Manual assign button */
html:not(.dark) #page-shifts button[onclick*="openManualAssignModal"] {
  background: rgba(14, 165, 233, 0.06) !important;
  border-color: rgba(14, 165, 233, 0.15) !important;
  color: #0284c7 !important;
}

/* Filter toolbar */
html:not(.dark) #shiftRfidEvents > .bg-surface-800\/60 {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) #shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child {
  border-bottom-color: rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) #shiftRfidEvents > .bg-surface-800\/60 label {
  color: rgba(71, 85, 105, 0.6) !important;
}
/* Light bulk action buttons */
html:not(.dark) #shiftRfidEvents button[onclick*="clearShiftSelection"] {
  background: rgba(148, 163, 184, 0.14) !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
  color: rgba(71, 85, 105, 0.6) !important;
}
html:not(.dark) #shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child button[onclick*="'archive'"] {
  background: rgba(2, 132, 199, 0.06) !important;
  border-color: rgba(2, 132, 199, 0.18) !important;
  color: #0284c7 !important;
}
html:not(.dark) #shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child button[onclick*="'delete'"] {
  background: rgba(225, 29, 72, 0.04) !important;
  border-color: rgba(225, 29, 72, 0.12) !important;
  color: rgba(225, 29, 72, 0.6) !important;
}
html:not(.dark) #shiftRfidEvents > .bg-surface-800\/60 .text-\[11px\].text-gray-500 {
  color: rgba(100, 116, 139, 0.4) !important;
}

/* Light filter inputs/selects */
html:not(.dark) #shiftRfidEvents .grid select,
html:not(.dark) #shiftRfidEvents .grid input {
  background: rgba(248, 250, 252, 0.9) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  color: rgba(15, 23, 42, 0.7) !important;
}
html:not(.dark) #shiftRfidEvents .grid select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%2364748b' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
}
html:not(.dark) #shiftRfidEvents .grid select:focus,
html:not(.dark) #shiftRfidEvents .grid input:focus {
  background: #fff !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.08) !important;
  color: rgba(15, 23, 42, 0.85) !important;
}
html:not(.dark) #shiftRfidEvents .grid input::placeholder {
  color: rgba(100, 116, 139, 0.4) !important;
}

/* Light date group headers */
html:not(.dark) #shiftRfidEvents > .bg-surface-900\/40 > button {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) #shiftRfidEvents > .bg-surface-900\/40 > button:hover {
  background: rgba(255, 255, 255, 0.7) !important;
}
html:not(.dark) #shiftRfidEvents > .bg-surface-900\/40 .text-sm.font-semibold {
  color: rgba(15, 23, 42, 0.85) !important;
}
html:not(.dark) #shiftRfidEvents > .bg-surface-900\/40 .text-\[11px\].text-gray-500 {
  color: rgba(100, 116, 139, 0.5) !important;
}
html:not(.dark) #shiftRfidEvents > .bg-surface-900\/40 > button > span.text-gray-500 {
  color: rgba(100, 116, 139, 0.4) !important;
}

/* Light record cards */
html:not(.dark) #shiftRfidEvents [data-shift-id] {
  background: rgba(255, 255, 255, 0.65) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
  box-shadow: none !important;
}
html:not(.dark) #shiftRfidEvents [data-shift-id]:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

/* Light avatar */
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="width:44px"][style*="height:44px"] {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(34, 211, 238, 0.04)) !important;
  color: #0284c7 !important;
  border-color: rgba(14, 165, 233, 0.12) !important;
}

/* Light operator name */
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="font-size:15px"][style*="font-weight:700"],
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="color:#0f172a"][style*="font-weight:700"] {
  color: rgba(15, 23, 42, 0.9) !important;
}

/* Light worker code */
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="font-family:monospace"][style*="font-size:11px"] {
  color: rgba(100, 116, 139, 0.5) !important;
}

/* Light status badges */
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="border-radius:9999px"][style*="background:rgba(16,185,129,0.16)"] {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="animation:pulse"][style*="border-radius:50%"] {
  background: #059669 !important;
}
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="border-radius:9999px"][style*="background:rgba(100,116,139"] {
  background: rgba(100, 116, 139, 0.06) !important;
  color: rgba(71, 85, 105, 0.6) !important;
  border-color: rgba(100, 116, 139, 0.12) !important;
}
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="border-radius:9999px"][style*="background:rgba(34,211,238,0.16)"] {
  background: rgba(14, 165, 233, 0.06) !important;
  color: #0284c7 !important;
  border-color: rgba(14, 165, 233, 0.15) !important;
}

/* Light source badges */
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="border-radius:9999px"][style*="color:#0c4a6e"] {
  background: rgba(14, 165, 233, 0.06) !important;
  color: #0284c7 !important;
  border-color: rgba(14, 165, 233, 0.15) !important;
}
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="border-radius:9999px"][style*="color:#5b21b6"] {
  background: rgba(139, 92, 246, 0.06) !important;
  color: #6d28d9 !important;
  border-color: rgba(139, 92, 246, 0.15) !important;
}

/* Light machine text */
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="font-size:13px"][style*="font-weight:600"],
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="color:#1e293b"][style*="font-weight:600"] {
  color: rgba(15, 23, 42, 0.75) !important;
}
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="font-size:10px"][style*="font-family:monospace"][style*="margin-left"] {
  color: rgba(100, 116, 139, 0.58) !important;
}

/* Light time labels */
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="font-size:10px"][style*="text-transform:uppercase"][style*="color:#64748b"] {
  color: rgba(100, 116, 139, 0.58) !important;
}
/* Light time values */
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="font-size:12px"][style*="font-weight:600"],
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="color:#1e293b"][style*="font-size:12px"] {
  color: rgba(15, 23, 42, 0.8) !important;
}
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="font-size:12px"][style*="font-weight:700"],
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="color:#0f172a"][style*="font-weight:700"] {
  color: rgba(15, 23, 42, 0.85) !important;
}
/* Light "still working" */
html:not(.dark) #shiftRfidEvents [data-shift-id] span[style*="color:#047857"] {
  color: #047857 !important;
}

/* Light grid separator */
html:not(.dark) #shiftRfidEvents [data-shift-id] [style*="grid-template-columns"] {
  border-top-color: rgba(15, 23, 42, 0.04) !important;
}

/* Light card action row separator */
html:not(.dark) #shiftRfidEvents [data-shift-id] > div > div > [style*="border-top:1px solid rgba(71,85,105,0.18)"] {
  border-top-color: rgba(15, 23, 42, 0.04) !important;
}

/* Light card action buttons */
html:not(.dark) #shiftRfidEvents [data-shift-id] button[onclick*="'archive'"],
html:not(.dark) #shiftRfidEvents [data-shift-id] button[onclick*="'restore'"] {
  background: rgba(2, 132, 199, 0.05) !important;
  border-color: rgba(2, 132, 199, 0.15) !important;
  color: #0284c7 !important;
}
html:not(.dark) #shiftRfidEvents [data-shift-id] button[onclick*="'delete'"] {
  background: rgba(225, 29, 72, 0.04) !important;
  border-color: rgba(225, 29, 72, 0.1) !important;
  color: rgba(225, 29, 72, 0.55) !important;
}
html:not(.dark) #shiftRfidEvents [data-shift-id] button[onclick*="endShiftFromCard"] {
  background: rgba(220, 38, 38, 0.05) !important;
  border-color: rgba(220, 38, 38, 0.15) !important;
  color: #b91c1c !important;
}
html:not(.dark) #shiftRfidEvents [data-shift-id] button[onclick*="openShiftReportModal"] {
  background: rgba(2, 132, 199, 0.06) !important;
  border-color: rgba(2, 132, 199, 0.18) !important;
  color: #0369a1 !important;
}

/* Light modal */
html:not(.dark) #manualAssignModal > div {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) #manualAssignModal h3 {
  color: rgba(15, 23, 42, 0.9) !important;
}
html:not(.dark) #manualAssignModal label {
  color: rgba(71, 85, 105, 0.6) !important;
}
html:not(.dark) #manualAssignModal select,
html:not(.dark) #manualAssignModal input[type="datetime-local"] {
  background: rgba(248, 250, 252, 0.9) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  color: rgba(15, 23, 42, 0.85) !important;
}
html:not(.dark) #manualAssignModal select:focus,
html:not(.dark) #manualAssignModal input:focus {
  background: #fff !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.08) !important;
}
html:not(.dark) #manualAssignBtn {
  background: rgba(14, 165, 233, 0.1) !important;
  border-color: rgba(14, 165, 233, 0.2) !important;
  color: #0284c7 !important;
}

/* Light live view KPIs */
html:not(.dark) #shiftsLiveView > .grid > div {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) #shiftsLiveView .text-\[9px\] {
  color: rgba(100, 116, 139, 0.5) !important;
}

/* Light live machine cards */
html:not(.dark) .shift-machine-card {
  background: rgba(255, 255, 255, 0.65) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
  box-shadow: none !important;
}
html:not(.dark) .shift-machine-card:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

/* Light history */
html:not(.dark) #shiftsHistoryView input[type="date"],
html:not(.dark) #shiftsHistoryView select {
  background: rgba(248, 250, 252, 0.9) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: rgba(15, 23, 42, 0.8) !important;
}

/* ── 11. RESPONSIVE ── */
@media (max-width: 768px) {
  #page-shifts {
    padding: 8px !important;
  }
  #shiftRfidEvents > .bg-surface-800\/60 {
    padding: 8px 10px !important;
  }
  #shiftRfidEvents .grid.xl\:grid-cols-7 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #shiftRfidEvents [data-shift-id] {
    padding: 12px !important;
    border-radius: 10px !important;
  }
  #shiftRfidEvents [data-shift-id] [style*="width:44px"][style*="height:44px"] {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
  }
  #shiftRfidEvents [data-shift-id] [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  #page-shifts > .max-w-6xl > .flex:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #shiftRfidEvents .grid.xl\:grid-cols-7 {
    grid-template-columns: 1fr !important;
  }
}

/* ── 12. TOUCH / PRINT ── */
@media (hover: none) {
  #shiftRfidEvents [data-shift-id]:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  #shiftsLiveView .shift-machine-card:hover {
    transform: none !important;
  }
}

@media print {
  #shiftRfidEvents > .bg-surface-800\/60 {
    display: none !important;
  }
  #shiftRfidEvents [data-shift-id] {
    break-inside: avoid !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
}



#page-settings #shiftTimelinePreview .shift-preview-segment {
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  min-width: 2px !important;
  border-radius: 999px !important;
  background: var(--shift-preview-color, #6366f1) !important;
  opacity: 0.94 !important;
  z-index: 1 !important;
}

html:not(.dark) #page-settings #shiftTimelinePreview .shift-preview-segment {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 6px 14px rgba(15, 23, 42, 0.08) !important;
}

html.dark #page-settings #shiftTimelinePreview .shift-preview-segment {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(2, 8, 20, 0.24) !important;
}

html:not(.dark) #page-settings #shiftTimelinePreview .shift-preview-divider {
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  width: 1.5px !important;
  margin-left: -0.75px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.1) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  opacity: 0.92 !important;
}

html.dark #page-settings #shiftTimelinePreview .shift-preview-divider,
html:not(.dark) #page-settings #shiftTimelinePreview .shift-preview-divider {
  z-index: 2 !important;
}

@media (max-width: 768px) {
  .page,
  .page.page-visible {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  .page > .max-w-7xl,
  .page > .max-w-6xl,
  .page > .max-w-5xl,
  .page > .max-w-4xl,
  .page.page-visible > .max-w-7xl,
  .page.page-visible > .max-w-6xl,
  .page.page-visible > .max-w-5xl,
  .page.page-visible > .max-w-4xl {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }


  #page-operators,
  #page-shifts {
    padding: 12px !important;
  }

  #page-operators > .max-w-6xl,
  #page-shifts > .max-w-6xl {
    max-width: 100% !important;
  }

  #page-operators > .max-w-6xl > .flex:first-child,
  #page-shifts > .max-w-6xl > .flex:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin-bottom: 18px !important;
  }

  #page-operators > .max-w-6xl > .flex:first-child > div:first-child,
  #page-shifts > .max-w-6xl > .flex:first-child > div:first-child,
  #page-nodes > .mb-5 > div:first-child,
  #page-stats > .mb-5 > div:first-child {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  #page-nodes > .mb-5 > div > h2,
  #page-stats > .mb-5 > div > h2,
  #page-operators h2,
  #page-shifts h2 {
    font-size: clamp(1.24rem, 5.6vw, 1.6rem) !important;
    line-height: 1.07 !important;
    letter-spacing: -0.03em !important;
    text-align: center !important;
    text-wrap: balance !important;
  }

  #page-nodes > .mb-5 > div > h2,
  #page-stats > .mb-5 > div > h2 {
    margin-bottom: 4px !important;
  }

  #page-operators > .max-w-6xl > .flex:first-child > div:last-child {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  #page-shifts > .max-w-6xl > .flex:first-child > div:last-child {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  #page-operators > .max-w-6xl > .flex:first-child .relative {
    width: 100% !important;
  }

  #page-operators #operatorSearch,
  #page-operators #operatorSearch:focus {
    width: 100% !important;
  }

  #page-operators button[onclick*="openOperatorModal"],
  #page-shifts button[onclick*="openManualAssignModal"],
  #shiftViewMode {
    width: 100% !important;
    min-height: 50px !important;
    justify-content: center !important;
    font-size: 1rem !important;
  }

  #page-nodes > .mb-5 > div > p,
  #page-stats > .mb-5 > div > p,
  #page-shifts h2 + p,
  #page-operators h2 + p {
    max-width: 28rem !important;
    font-size: 0.92rem !important;
    line-height: 1.42 !important;
    text-align: center !important;
    margin-inline: auto !important;
    text-wrap: balance !important;
  }

  #shiftRfidEvents > .bg-surface-800\/60 {
    padding: 14px !important;
    border-radius: 20px !important;
  }

  #shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  #shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child > label {
    grid-column: 1 / -1 !important;
  }

  #shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child > button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child > span.text-\[11px\].text-gray-500 {
    grid-column: 1 / -1 !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  #shiftRfidEvents .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-7 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 420px) {
  #page-operators > .max-w-6xl > .flex:first-child > div:last-child,
  #page-shifts > .max-w-6xl > .flex:first-child > div:last-child,
  #shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child {
    grid-template-columns: 1fr !important;
  }
}

/* ── ACCOUNT: keep forms comfortably readable on desktop ── */
@media (min-width: 1025px) {
  #page-account > .max-w-lg.mx-auto.space-y-6 {
    width: 100% !important;
    max-width: clamp(760px, 62vw, 980px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   REPORTS — EXECUTIVE REPORT STUDIO v3.0
   Premium report center with curated product cards & filter modal
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. PAGE FRAME ── */
#page-reports {
  padding: 20px 24px !important;
}
#reportsPageContent {
  max-width: 1100px !important;
}

/* ── 0b. DESKTOP PAGE WIDTH RESTORATION ── */
@media (min-width: 1025px) {
  .page,
  .page.page-visible {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(28px, 2.6vw, 44px) !important;
    padding-right: clamp(28px, 2.6vw, 44px) !important;
  }

  #page-live > div,
  #page-nodes > div,
  #page-stats > div,
  #page-ai > div,
  #page-reports > div,
  #page-settings > div,
  #page-operators > div,
  #page-shifts > div,
  #page-account > div,
  #page-subscription > div,
  #page-alerts,
  #reportsPageContent {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ── 0c. MOBILE HEADER RECENTERING ── */
@media (max-width: 768px) {
  #page-operators,
  #page-shifts {
    padding: 12px !important;
  }

  #page-operators > div,
  #page-shifts > div {
    width: 100% !important;
    max-width: none !important;
  }

  #page-operators > div > .flex:first-child,
  #page-shifts > div > .flex:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin-bottom: 18px !important;
  }

  #page-operators > div > .flex:first-child > div:first-child,
  #page-shifts > div > .flex:first-child > div:first-child {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  #page-operators h2,
  #page-shifts h2 {
    font-size: clamp(1.24rem, 5.6vw, 1.6rem) !important;
    line-height: 1.07 !important;
    letter-spacing: -0.03em !important;
    text-align: center !important;
    text-wrap: balance !important;
  }

  #page-operators > div > .flex:first-child > div:last-child {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  #page-shifts > div > .flex:first-child > div:last-child {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  #page-operators > div > .flex:first-child .relative {
    width: 100% !important;
  }

  #page-operators #operatorSearch,
  #page-operators #operatorSearch:focus {
    width: 100% !important;
  }

  #page-operators button[onclick*="openOperatorModal"],
  #page-shifts button[onclick*="openManualAssignModal"],
  #shiftViewMode {
    width: 100% !important;
    min-height: 50px !important;
    justify-content: center !important;
    font-size: 1rem !important;
  }

  #page-shifts h2 + p,
  #page-operators h2 + p {
    max-width: 28rem !important;
    font-size: 0.92rem !important;
    line-height: 1.42 !important;
    text-align: center !important;
    margin-inline: auto !important;
    text-wrap: balance !important;
  }
}

@media (max-width: 420px) {
  #page-operators > div > .flex:first-child > div:last-child,
  #page-shifts > div > .flex:first-child > div:last-child,
  #shiftRfidEvents > .bg-surface-800\/60 > .flex:first-child {
    grid-template-columns: 1fr !important;
  }
}

/* ── 1. REPORT GRID ── */
.rpt-grid {
  gap: 10px !important;
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (min-width: 768px) {
  .rpt-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 1100px) {
  .rpt-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media (min-width: 1400px) {
  .rpt-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* ── 2. REPORT CARDS ── */
.rpt-card {
  background: rgba(10, 18, 32, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  transition:
    background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease,
    box-shadow 0.3s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

/* Card hover */
.rpt-card:hover {
  background: rgba(15, 23, 42, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14) !important;
  transform: translateY(-2px) !important;
}

/* Active/pressed */
.rpt-card:active {
  transform: translateY(0) scale(0.985) !important;
  transition-duration: 0.1s !important;
}

/* ── 2a. ICON ── */
.rpt-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: none !important;
  transition: opacity 0.25s ease !important;
  position: relative !important;
  margin-top: 1px !important;
}
.rpt-icon::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: currentColor !important;
  opacity: 0.12 !important;
}
html:not(.dark) .rpt-icon::before {
  opacity: 0.10 !important;
}
.rpt-icon svg {
  position: relative !important;
  z-index: 1 !important;
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}
.rpt-card:hover .rpt-icon {
  opacity: 1 !important;
}

/* ── 2b. CATEGORY BADGE ── */
.rpt-card span[style*="tracking-widest"],
.rpt-card .tracking-widest {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  opacity: 0.8 !important;
  margin-bottom: 5px !important;
}

/* Mute category badge backgrounds — override inline color18 to softer */
.rpt-card span[style*="background:#00b4d818"] { background: rgba(0, 180, 216, 0.07) !important; color: rgba(125, 211, 252, 0.8) !important; }
.rpt-card span[style*="background:#22c55e18"] { background: rgba(34, 197, 94, 0.07) !important; color: rgba(110, 231, 183, 0.8) !important; }
.rpt-card span[style*="background:#f59e0b18"] { background: rgba(245, 158, 11, 0.07) !important; color: rgba(253, 224, 71, 0.75) !important; }
.rpt-card span[style*="background:#ef444418"] { background: rgba(239, 68, 68, 0.06) !important; color: rgba(251, 113, 133, 0.75) !important; }
.rpt-card span[style*="background:#8b5cf618"] { background: rgba(139, 92, 246, 0.07) !important; color: rgba(167, 139, 250, 0.75) !important; }
.rpt-card span[style*="background:#ec489918"] { background: rgba(236, 72, 153, 0.06) !important; color: rgba(244, 114, 182, 0.75) !important; }
.rpt-card span[style*="background:#0ea5e918"] { background: rgba(14, 165, 233, 0.07) !important; color: rgba(125, 211, 252, 0.8) !important; }
.rpt-card span[style*="background:#14b8a618"] { background: rgba(20, 184, 166, 0.07) !important; color: rgba(94, 234, 212, 0.75) !important; }
.rpt-card span[style*="background:#6366f118"] { background: rgba(99, 102, 241, 0.07) !important; color: rgba(165, 180, 252, 0.75) !important; }
.rpt-card span[style*="background:#64748b18"] { background: rgba(100, 116, 139, 0.06) !important; color: rgba(148, 163, 184, 0.65) !important; }

/* ── 2c. TITLE ── */
.rpt-card h3 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(241, 245, 249, 0.92) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
}
.rpt-card:hover h3 {
  color: rgba(255, 255, 255, 1) !important;
}

/* ── 2d. DESCRIPTION ── */
.rpt-card p {
  font-size: 10.5px !important;
  color: rgba(148, 163, 184, 0.68) !important;
  line-height: 1.55 !important;
}
.rpt-card:hover p {
  color: rgba(148, 163, 184, 0.6) !important;
}

/* ── 2e. CTA ROW ── */
.rpt-card .text-brand-400.opacity-0 {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(125, 211, 252, 0.7) !important;
  margin-top: 10px !important;
  gap: 4px !important;
}
.rpt-card:hover .opacity-0.group-hover\:opacity-100 {
  opacity: 1 !important;
}
.rpt-card .text-brand-400 svg {
  width: 10px !important;
  height: 10px !important;
  opacity: 0.7 !important;
}

/* ── 3. CARD ENTRANCE ANIMATION ── */
.rpt-card {
  animation: rptCardReveal 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.rpt-card:nth-child(1) { animation-delay: 0s; }
.rpt-card:nth-child(2) { animation-delay: 0.03s; }
.rpt-card:nth-child(3) { animation-delay: 0.04s; }
.rpt-card:nth-child(4) { animation-delay: 0.06s; }
.rpt-card:nth-child(5) { animation-delay: 0.08s; }
.rpt-card:nth-child(6) { animation-delay: 0.10s; }
.rpt-card:nth-child(7) { animation-delay: 0.12s; }
.rpt-card:nth-child(8) { animation-delay: 0.14s; }
.rpt-card:nth-child(9) { animation-delay: 0.16s; }
.rpt-card:nth-child(10) { animation-delay: 0.18s; }

@keyframes rptCardReveal {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .rpt-card { animation: none !important; }
}

/* ── 4. FILTER MODAL ── */
#rptFilterModal {
  background: rgba(2, 6, 16, 0.8) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Modal card */
#rptFilterModal .bg-surface-800 {
  background: rgba(8, 15, 28, 0.96) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.04) !important;
}

/* Modal sticky header */
#rptFilterModal .sticky {
  background: rgba(8, 15, 28, 0.95) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 16px 20px !important;
}

/* Modal icon */
#rptFilterModal #rptModalIcon {
  font-size: 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  background: rgba(14, 165, 233, 0.08) !important;
  color: rgba(125, 211, 252, 0.7) !important;
}
#rptFilterModal #rptModalIcon svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
}

/* Modal title */
#rptFilterModal #rptModalTitle {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: rgba(241, 245, 249, 0.95) !important;
}

/* Modal description */
#rptFilterModal #rptModalDesc {
  font-size: 10px !important;
  color: rgba(148, 163, 184, 0.68) !important;
}

/* Modal close button */
#rptFilterModal button[onclick*="closeRptModal"] {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(148, 163, 184, 0.10) !important;
  color: rgba(148, 163, 184, 0.4) !important;
  font-size: 16px !important;
}
#rptFilterModal button[onclick*="closeRptModal"]:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: rgba(248, 113, 113, 0.8) !important;
}

/* Modal body */
#rptFilterModal .p-5.space-y-5 {
  padding: 20px !important;
  gap: 16px !important;
}

/* All modal labels */
#rptFilterModal label {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(148, 163, 184, 0.68) !important;
}
/* Sub-labels */
#rptFilterModal .text-\[9px\].text-gray-600 {
  font-size: 9px !important;
  color: rgba(148, 163, 184, 0.3) !important;
}

/* Section label icons */
#rptFilterModal label svg {
  opacity: 0.4 !important;
}

/* All modal selects & inputs */
#rptFilterModal select,
#rptFilterModal input[type="date"],
#rptFilterModal input[type="time"],
#rptFilterModal input[type="number"] {
  background: rgba(8, 15, 28, 0.5) !important;
  border: 1px solid rgba(148, 163, 184, 0.07) !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  color: rgba(226, 232, 240, 0.85) !important;
  padding: 8px 12px !important;
  transition: all 0.2s ease !important;
}
#rptFilterModal select:focus,
#rptFilterModal input:focus {
  border-color: rgba(14, 165, 233, 0.25) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.06) !important;
  outline: none !important;
  background: rgba(8, 15, 28, 0.7) !important;
}

/* Preset date buttons */
#rptFilterModal button[onclick*="rptMSetRange"] {
  background: rgba(148, 163, 184, 0.04) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 7px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(148, 163, 184, 0.5) !important;
  transition: all 0.15s ease !important;
}
#rptFilterModal button[onclick*="rptMSetRange"]:hover {
  border-color: rgba(14, 165, 233, 0.2) !important;
  color: rgba(125, 211, 252, 0.8) !important;
  background: rgba(14, 165, 233, 0.06) !important;
}
/* Active preset — the one with bg-brand-500/8 */
#rptFilterModal button.bg-brand-500\/8,
#rptFilterModal button[class*="border-brand-500"] {
  background: rgba(14, 165, 233, 0.08) !important;
  border-color: rgba(14, 165, 233, 0.18) !important;
  color: rgba(125, 211, 252, 0.9) !important;
}

/* Export format buttons */
#rptFilterModal #rptMBtnPdf,
#rptFilterModal #rptMBtnExcel,
#rptFilterModal #rptMBtnCsv {
  background: rgba(8, 15, 28, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  border-radius: 12px !important;
  padding: 14px 10px !important;
  transition: all 0.2s ease !important;
}

/* PDF */
#rptFilterModal #rptMBtnPdf:hover {
  border-color: rgba(239, 68, 68, 0.2) !important;
  background: rgba(239, 68, 68, 0.04) !important;
}
#rptFilterModal #rptMBtnPdf .w-9 {
  background: rgba(239, 68, 68, 0.08) !important;
  border-radius: 8px !important;
}
#rptFilterModal #rptMBtnPdf span {
  color: rgba(203, 213, 225, 0.6) !important;
  font-size: 10px !important;
}
#rptFilterModal #rptMBtnPdf:hover span {
  color: rgba(248, 113, 113, 0.9) !important;
}

/* Excel */
#rptFilterModal #rptMBtnExcel:hover {
  border-color: rgba(52, 211, 153, 0.2) !important;
  background: rgba(52, 211, 153, 0.04) !important;
}
#rptFilterModal #rptMBtnExcel .w-9 {
  background: rgba(52, 211, 153, 0.08) !important;
  border-radius: 8px !important;
}
#rptFilterModal #rptMBtnExcel span {
  color: rgba(203, 213, 225, 0.6) !important;
  font-size: 10px !important;
}
#rptFilterModal #rptMBtnExcel:hover span {
  color: rgba(110, 231, 183, 0.9) !important;
}

/* CSV */
#rptFilterModal #rptMBtnCsv:hover {
  border-color: rgba(14, 165, 233, 0.2) !important;
  background: rgba(14, 165, 233, 0.04) !important;
}
#rptFilterModal #rptMBtnCsv .w-9 {
  background: rgba(14, 165, 233, 0.08) !important;
  border-radius: 8px !important;
}
#rptFilterModal #rptMBtnCsv span {
  color: rgba(203, 213, 225, 0.6) !important;
  font-size: 10px !important;
}
#rptFilterModal #rptMBtnCsv:hover span {
  color: rgba(125, 211, 252, 0.9) !important;
}

/* Export icon containers */
#rptFilterModal .w-9.h-9 {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
}

/* Status message */
#rptFilterModal #rptMStatus {
  font-size: 11px !important;
  color: rgba(148, 163, 184, 0.6) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}

/* Modal entrance */
#rptFilterModal .bg-surface-800 {
  animation: rptModalIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rptModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #rptFilterModal .bg-surface-800 {
    animation: none !important;
  }
}

/* ── 5. LIGHT MODE ── */
/* Report cards */
html:not(.dark) .rpt-card {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) .rpt-card:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07) !important;
}

/* Title */
html:not(.dark) .rpt-card h3 {
  color: rgba(15, 23, 42, 0.88) !important;
}
html:not(.dark) .rpt-card:hover h3 {
  color: rgba(15, 23, 42, 1) !important;
}

/* Description */
html:not(.dark) .rpt-card p {
  color: rgba(100, 116, 139, 0.55) !important;
}
html:not(.dark) .rpt-card:hover p {
  color: rgba(100, 116, 139, 0.7) !important;
}

/* CTA */
html:not(.dark) .rpt-card .text-brand-400.opacity-0 {
  color: #0284c7 !important;
}

/* Category badges — light */
html:not(.dark) .rpt-card span[style*="background:#00b4d818"] { background: rgba(0, 180, 216, 0.06) !important; color: #0284c7 !important; }
html:not(.dark) .rpt-card span[style*="background:#22c55e18"] { background: rgba(34, 197, 94, 0.06) !important; color: #059669 !important; }
html:not(.dark) .rpt-card span[style*="background:#f59e0b18"] { background: rgba(245, 158, 11, 0.06) !important; color: #b45309 !important; }
html:not(.dark) .rpt-card span[style*="background:#ef444418"] { background: rgba(239, 68, 68, 0.05) !important; color: #dc2626 !important; }
html:not(.dark) .rpt-card span[style*="background:#8b5cf618"] { background: rgba(139, 92, 246, 0.06) !important; color: #7c3aed !important; }
html:not(.dark) .rpt-card span[style*="background:#ec489918"] { background: rgba(236, 72, 153, 0.05) !important; color: #db2777 !important; }
html:not(.dark) .rpt-card span[style*="background:#0ea5e918"] { background: rgba(14, 165, 233, 0.06) !important; color: #0284c7 !important; }
html:not(.dark) .rpt-card span[style*="background:#14b8a618"] { background: rgba(20, 184, 166, 0.06) !important; color: #0d9488 !important; }
html:not(.dark) .rpt-card span[style*="background:#6366f118"] { background: rgba(99, 102, 241, 0.06) !important; color: #4f46e5 !important; }
html:not(.dark) .rpt-card span[style*="background:#64748b18"] { background: rgba(100, 116, 139, 0.05) !important; color: #475569 !important; }

/* Modal — light */
html:not(.dark) #rptFilterModal {
  background: rgba(15, 23, 42, 0.3) !important;
}
html:not(.dark) #rptFilterModal .bg-surface-800 {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) #rptFilterModal .sticky {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) #rptFilterModal #rptModalTitle {
  color: rgba(15, 23, 42, 0.9) !important;
}
html:not(.dark) #rptFilterModal #rptModalIcon {
  background: rgba(14, 165, 233, 0.06) !important;
  color: #0284c7 !important;
}
html:not(.dark) #rptFilterModal #rptModalDesc {
  color: rgba(100, 116, 139, 0.55) !important;
}
html:not(.dark) #rptFilterModal button[onclick*="closeRptModal"] {
  background: rgba(15, 23, 42, 0.03) !important;
  color: rgba(100, 116, 139, 0.4) !important;
}
html:not(.dark) #rptFilterModal button[onclick*="closeRptModal"]:hover {
  background: rgba(239, 68, 68, 0.06) !important;
  color: rgba(220, 38, 38, 0.7) !important;
}
html:not(.dark) #rptFilterModal label {
  color: rgba(71, 85, 105, 0.55) !important;
}
html:not(.dark) #rptFilterModal .text-\[9px\].text-gray-600 {
  color: rgba(100, 116, 139, 0.4) !important;
}
html:not(.dark) #rptFilterModal select,
html:not(.dark) #rptFilterModal input[type="date"],
html:not(.dark) #rptFilterModal input[type="time"],
html:not(.dark) #rptFilterModal input[type="number"] {
  background: rgba(248, 250, 252, 0.9) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  color: rgba(15, 23, 42, 0.8) !important;
}
html:not(.dark) #rptFilterModal select:focus,
html:not(.dark) #rptFilterModal input:focus {
  background: #fff !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.08) !important;
}
html:not(.dark) #rptFilterModal button[onclick*="rptMSetRange"] {
  background: rgba(15, 23, 42, 0.02) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  color: rgba(71, 85, 105, 0.5) !important;
}
html:not(.dark) #rptFilterModal button[onclick*="rptMSetRange"]:hover {
  border-color: rgba(14, 165, 233, 0.25) !important;
  color: #0284c7 !important;
  background: rgba(14, 165, 233, 0.04) !important;
}
html:not(.dark) #rptFilterModal button.bg-brand-500\/8,
html:not(.dark) #rptFilterModal button[class*="border-brand-500"] {
  background: rgba(14, 165, 233, 0.06) !important;
  border-color: rgba(14, 165, 233, 0.2) !important;
  color: #0284c7 !important;
}

/* Light export buttons */
html:not(.dark) #rptFilterModal #rptMBtnPdf,
html:not(.dark) #rptFilterModal #rptMBtnExcel,
html:not(.dark) #rptFilterModal #rptMBtnCsv {
  background: rgba(248, 250, 252, 0.7) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) #rptFilterModal #rptMBtnPdf:hover {
  border-color: rgba(220, 38, 38, 0.18) !important;
  background: rgba(239, 68, 68, 0.03) !important;
}
html:not(.dark) #rptFilterModal #rptMBtnPdf .w-9 { background: rgba(239, 68, 68, 0.06) !important; }
html:not(.dark) #rptFilterModal #rptMBtnPdf span { color: rgba(71, 85, 105, 0.6) !important; }
html:not(.dark) #rptFilterModal #rptMBtnPdf:hover span { color: #dc2626 !important; }

html:not(.dark) #rptFilterModal #rptMBtnExcel:hover {
  border-color: rgba(16, 185, 129, 0.2) !important;
  background: rgba(52, 211, 153, 0.03) !important;
}
html:not(.dark) #rptFilterModal #rptMBtnExcel .w-9 { background: rgba(52, 211, 153, 0.06) !important; }
html:not(.dark) #rptFilterModal #rptMBtnExcel span { color: rgba(71, 85, 105, 0.6) !important; }
html:not(.dark) #rptFilterModal #rptMBtnExcel:hover span { color: #059669 !important; }

html:not(.dark) #rptFilterModal #rptMBtnCsv:hover {
  border-color: rgba(14, 165, 233, 0.2) !important;
  background: rgba(14, 165, 233, 0.03) !important;
}
html:not(.dark) #rptFilterModal #rptMBtnCsv .w-9 { background: rgba(14, 165, 233, 0.06) !important; }
html:not(.dark) #rptFilterModal #rptMBtnCsv span { color: rgba(71, 85, 105, 0.6) !important; }
html:not(.dark) #rptFilterModal #rptMBtnCsv:hover span { color: #0284c7 !important; }

/* ── 6. RESPONSIVE ── */
@media (max-width: 480px) {
  #page-reports {
    padding: 12px !important;
  }
  .rpt-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .rpt-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }
  #rptFilterModal .bg-surface-800 {
    border-radius: 12px !important;
    margin: 8px !important;
  }
  #rptFilterModal .p-5.space-y-5 {
    padding: 16px !important;
  }
}

/* ── 7. TOUCH / PRINT ── */
@media (hover: none) {
  .rpt-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  /* Show CTA on touch */
  .rpt-card .opacity-0.group-hover\:opacity-100 {
    opacity: 0.6 !important;
  }
}

@media print {
  .rpt-card {
    break-inside: avoid !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  #rptFilterModal {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   AI ASSISTANT — ELITE INTELLIGENCE WORKSPACE v3.0
   Premium embedded analyst workspace for industrial operations
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. PAGE FRAME ── */
#page-ai {
  padding: 16px 20px !important;
}
#page-ai > .grid {
  max-width: none !important;
  gap: 12px !important;
}

/* ── 1. LEFT SIDEBAR ── */
#page-ai > .grid > .space-y-4 {
  gap: 10px !important;
}
#page-ai > .grid > .space-y-4 > * + * {
  margin-top: 0 !important;
}

/* ── 1a. AUTO INSIGHTS CARD ── */
#page-ai .bg-gradient-to-br.from-surface-800\/80:first-child {
  background: rgba(10, 18, 32, 0.35) !important;
  border: 1px solid rgba(148, 163, 184, 0.04) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  backdrop-filter: none !important;
}

/* Insights header */
#page-ai .bg-gradient-to-br:first-child h4 {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: rgba(148, 163, 184, 0.35) !important;
}
#page-ai .bg-gradient-to-br:first-child h4 svg {
  width: 12px !important;
  height: 12px !important;
  opacity: 0.45 !important;
}

/* Refresh button */
#page-ai button[onclick*="generateAutoInsights"] {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: rgba(125, 211, 252, 0.5) !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  transition: all 0.15s ease !important;
}
#page-ai button[onclick*="generateAutoInsights"]:hover {
  color: rgba(125, 211, 252, 0.8) !important;
  background: rgba(14, 165, 233, 0.06) !important;
}

/* Insights content */
#aiAutoInsights {
  gap: 6px !important;
}
#aiAutoInsights > div {
  background: rgba(8, 15, 28, 0.3) !important;
  border: 1px solid rgba(148, 163, 184, 0.03) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: rgba(203, 213, 225, 0.7) !important;
}
#aiAutoInsights .text-gray-500.italic {
  color: rgba(148, 163, 184, 0.3) !important;
  font-style: normal !important;
  font-size: 10.5px !important;
}

/* ── 1b. ANALYSIS MODES CARD ── */
#aiAnalysisModes {
  gap: 4px !important;
}
/* Target the analysis modes parent card */
#aiAnalysisModes ~ h4,
#page-ai .space-y-4 > div:nth-child(2) {
  background: rgba(10, 18, 32, 0.35) !important;
  border: 1px solid rgba(148, 163, 184, 0.04) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  backdrop-filter: none !important;
}

/* Analysis header */
#page-ai .space-y-4 > div:nth-child(2) > h4 {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: rgba(148, 163, 184, 0.35) !important;
  margin-bottom: 10px !important;
}
#page-ai .space-y-4 > div:nth-child(2) > h4 svg {
  width: 12px !important;
  height: 12px !important;
  opacity: 0.4 !important;
}

/* Mode buttons */
#aiAnalysisModes button {
  background: rgba(8, 15, 28, 0.25) !important;
  border: 1px solid rgba(148, 163, 184, 0.03) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(203, 213, 225, 0.6) !important;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
  gap: 7px !important;
}
#aiAnalysisModes button:hover {
  background: rgba(14, 165, 233, 0.04) !important;
  border-color: rgba(148, 163, 184, 0.06) !important;
  color: rgba(226, 232, 240, 0.85) !important;
  transform: translateX(2px) !important;
}
#aiAnalysisModes button:active {
  transform: translateX(1px) scale(0.99) !important;
  transition-duration: 0.1s !important;
}

/* Mode button icons */
#aiAnalysisModes button span:first-child {
  font-size: 12px !important;
  opacity: 0.6 !important;
  transition: opacity 0.15s ease !important;
}
#aiAnalysisModes button:hover span:first-child {
  opacity: 0.85 !important;
}

/* ── 1c. SESSION QUERIES COUNTER ── */
#page-ai .space-y-4 > div:last-child {
  background: rgba(10, 18, 32, 0.2) !important;
  border: 1px solid rgba(148, 163, 184, 0.03) !important;
  border-radius: 10px !important;
  padding: 10px !important;
}
#page-ai .space-y-4 > div:last-child .text-\[10px\] {
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: rgba(148, 163, 184, 0.2) !important;
}
#aiQueryCount {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: rgba(125, 211, 252, 0.6) !important;
  letter-spacing: -0.02em !important;
}

/* ── 2. CHAT PANEL ── */
#page-ai > .grid > .lg\:col-span-3 {
  background: rgba(10, 18, 32, 0.3) !important;
  border: 1px solid rgba(148, 163, 184, 0.04) !important;
  border-radius: 14px !important;
  backdrop-filter: none !important;
  max-height: calc(100vh - 130px) !important;
}

/* ── 2a. CHAT HEADER ── */
#page-ai > .grid > .lg\:col-span-3 > .p-4.border-b {
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.04) !important;
  gap: 10px !important;
}

/* AI avatar */
#page-ai > .grid > .lg\:col-span-3 .w-9.h-9 {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(14, 165, 233, 0.06) !important;
}
#page-ai > .grid > .lg\:col-span-3 .w-9.h-9 svg {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.6 !important;
}

/* AI name */
#page-ai > .grid > .lg\:col-span-3 h4 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(241, 245, 249, 0.9) !important;
  letter-spacing: -0.01em !important;
}

/* AI subtitle */
#page-ai > .grid > .lg\:col-span-3 .text-\[10px\].text-gray-500 {
  font-size: 10px !important;
  color: rgba(148, 163, 184, 0.35) !important;
}

/* Clear chat button */
#page-ai button[onclick*="clearChatHistory"] {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: rgba(148, 163, 184, 0.3) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
}
#page-ai button[onclick*="clearChatHistory"]:hover {
  color: rgba(248, 113, 113, 0.7) !important;
  background: rgba(239, 68, 68, 0.04) !important;
}

/* ── 2b. CHAT MESSAGES ── */
.chat-messages {
  padding: 16px !important;
}

/* Message wrapper */
.chat-msg {
  gap: 8px !important;
  margin-bottom: 14px !important;
  animation: chatMsgReveal 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes chatMsgReveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* AI message avatar */
.chat-msg .w-7.h-7 {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  margin-top: 2px !important;
}
.chat-msg .bg-brand-500\/20 {
  background: rgba(14, 165, 233, 0.06) !important;
}
.chat-msg .bg-brand-500\/20 svg,
.chat-msg .bg-brand-500\/30 svg {
  width: 12px !important;
  height: 12px !important;
  opacity: 0.5 !important;
}

/* AI message bubble */
.chat-msg .bg-surface-700\/50 {
  background: rgba(15, 23, 42, 0.25) !important;
  border: 1px solid rgba(148, 163, 184, 0.03) !important;
  border-radius: 12px !important;
  border-top-left-radius: 3px !important;
  padding: 12px 14px !important;
  font-size: 12.5px !important;
  line-height: 1.65 !important;
  color: rgba(203, 213, 225, 0.75) !important;
}
.chat-msg .bg-surface-700\/50 strong {
  color: rgba(241, 245, 249, 0.92) !important;
  font-weight: 700 !important;
}
.chat-msg .bg-surface-700\/50 .text-gray-400 {
  color: rgba(148, 163, 184, 0.5) !important;
}
.chat-msg .bg-surface-700\/50 .text-gray-500 {
  color: rgba(148, 163, 184, 0.35) !important;
  font-size: 10.5px !important;
}

/* User message bubble */
.chat-msg .bg-brand-600\/30 {
  background: rgba(14, 165, 233, 0.08) !important;
  border: 1px solid rgba(14, 165, 233, 0.08) !important;
  border-radius: 12px !important;
  border-top-right-radius: 3px !important;
  padding: 10px 14px !important;
  font-size: 12.5px !important;
  color: rgba(226, 232, 240, 0.85) !important;
}

/* User avatar */
.chat-msg .bg-brand-500\/30 {
  background: rgba(14, 165, 233, 0.06) !important;
}

/* Pulsing / thinking state */
.chat-msg .pulsing {
  color: rgba(148, 163, 184, 0.3) !important;
}

/* ── 2c. AI RESPONSE FORMATTING ── */
.chat-msg .bg-surface-700\/50 .text-white {
  color: rgba(241, 245, 249, 0.92) !important;
}
.chat-msg .bg-surface-700\/50 .text-brand-400 {
  color: rgba(125, 211, 252, 0.7) !important;
}
.chat-msg .bg-surface-700\/50 code {
  background: rgba(8, 15, 28, 0.4) !important;
  border-radius: 4px !important;
  font-size: 11px !important;
}

/* ── 2d. AI TABLE REFINEMENT ── */
#page-ai .ai-table {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  font-size: 11px !important;
  border: 1px solid rgba(148, 163, 184, 0.04) !important;
}
#page-ai .ai-table th {
  background: rgba(8, 15, 28, 0.6) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: rgba(148, 163, 184, 0.55) !important;
  padding: 8px 10px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06) !important;
}
#page-ai .ai-table td {
  padding: 7px 10px !important;
  color: rgba(203, 213, 225, 0.7) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.03) !important;
}
#page-ai .ai-table td.ai-num {
  color: rgba(241, 245, 249, 0.85) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}
#page-ai .ai-table tr:hover td {
  background: rgba(14, 165, 233, 0.03) !important;
}
#page-ai .unit-suffix {
  font-size: 0.8em !important;
  opacity: 0.5 !important;
  color: rgba(148, 163, 184, 0.5) !important;
}

/* ── 3. INPUT AREA ── */
#page-ai .chat-container > .p-4.border-t {
  padding: 12px 16px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.04) !important;
  background: rgba(8, 15, 28, 0.2) !important;
}

/* Input field */
#chatInput {
  background: rgba(8, 15, 28, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 12.5px !important;
  color: rgba(226, 232, 240, 0.85) !important;
  transition: all 0.2s ease !important;
}
#chatInput::placeholder {
  color: rgba(148, 163, 184, 0.25) !important;
  font-size: 12px !important;
}
#chatInput:focus {
  border-color: rgba(14, 165, 233, 0.2) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.04) !important;
  outline: none !important;
  background: rgba(8, 15, 28, 0.55) !important;
}

/* Send button */
#page-ai button[onclick*="sendChat"] {
  background: rgba(14, 165, 233, 0.12) !important;
  border: 1px solid rgba(14, 165, 233, 0.1) !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(125, 211, 252, 0.85) !important;
  box-shadow: none !important;
  filter: none !important;
  transition: all 0.2s ease !important;
}
#page-ai button[onclick*="sendChat"]:hover {
  background: rgba(14, 165, 233, 0.18) !important;
  border-color: rgba(14, 165, 233, 0.18) !important;
  color: rgba(125, 211, 252, 1) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.08) !important;
  transform: translateY(-1px) !important;
}
#page-ai button[onclick*="sendChat"]:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 0.1s !important;
}

/* ── 3a. QUICK ACTION CHIPS ── */
#aiQuickActions {
  gap: 5px !important;
  margin-top: 8px !important;
}
#aiQuickActions button {
  background: rgba(148, 163, 184, 0.03) !important;
  border: 1px solid rgba(148, 163, 184, 0.04) !important;
  border-radius: 7px !important;
  padding: 5px 10px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(148, 163, 184, 0.4) !important;
  transition: all 0.15s ease !important;
}
#aiQuickActions button:hover {
  background: rgba(14, 165, 233, 0.04) !important;
  border-color: rgba(14, 165, 233, 0.1) !important;
  color: rgba(125, 211, 252, 0.7) !important;
}
#aiQuickActions button:active {
  transform: scale(0.97) !important;
  transition-duration: 0.08s !important;
}

/* ── 4. ENTRANCE ANIMATIONS ── */
/* Sidebar panels */
#page-ai > .grid > .space-y-4 > div {
  animation: aiPanelReveal 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#page-ai > .grid > .space-y-4 > div:nth-child(1) { animation-delay: 0s; }
#page-ai > .grid > .space-y-4 > div:nth-child(2) { animation-delay: 0.04s; }
#page-ai > .grid > .space-y-4 > div:nth-child(3) { animation-delay: 0.07s; }

@keyframes aiPanelReveal {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Chat panel */
#page-ai > .grid > .lg\:col-span-3 {
  animation: aiChatReveal 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}
@keyframes aiChatReveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #page-ai > .grid > .space-y-4 > div,
  #page-ai > .grid > .lg\:col-span-3,
  .chat-msg {
    animation: none !important;
  }
}

/* ── 5. LIGHT MODE ── */
/* Page */
html:not(.dark) #page-ai .bg-gradient-to-br.from-surface-800\/80:first-child,
html:not(.dark) #page-ai .space-y-4 > div:nth-child(2) {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(15, 23, 42, 0.04) !important;
}

/* Sidebar labels */
html:not(.dark) #page-ai .bg-gradient-to-br:first-child h4,
html:not(.dark) #page-ai .space-y-4 > div:nth-child(2) > h4 {
  color: rgba(71, 85, 105, 0.45) !important;
}

/* Insights content */
html:not(.dark) #aiAutoInsights > div {
  background: rgba(248, 250, 252, 0.7) !important;
  border-color: rgba(15, 23, 42, 0.03) !important;
  color: rgba(51, 65, 85, 0.7) !important;
}
html:not(.dark) #aiAutoInsights .text-gray-500.italic {
  color: rgba(100, 116, 139, 0.4) !important;
}

/* Mode buttons — light */
html:not(.dark) #aiAnalysisModes button {
  background: rgba(248, 250, 252, 0.6) !important;
  border-color: rgba(15, 23, 42, 0.03) !important;
  color: rgba(51, 65, 85, 0.65) !important;
}
html:not(.dark) #aiAnalysisModes button:hover {
  background: rgba(14, 165, 233, 0.04) !important;
  border-color: rgba(14, 165, 233, 0.12) !important;
  color: #0284c7 !important;
}

/* Session counter — light */
html:not(.dark) #page-ai .space-y-4 > div:last-child {
  background: rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(15, 23, 42, 0.03) !important;
}
html:not(.dark) #page-ai .space-y-4 > div:last-child .text-\[10px\] {
  color: rgba(100, 116, 139, 0.35) !important;
}
html:not(.dark) #aiQueryCount {
  color: #0284c7 !important;
}

/* Chat panel — light */
html:not(.dark) #page-ai > .grid > .lg\:col-span-3 {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(15, 23, 42, 0.04) !important;
}

/* Chat header — light */
html:not(.dark) #page-ai > .grid > .lg\:col-span-3 > .p-4.border-b {
  border-bottom-color: rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) #page-ai > .grid > .lg\:col-span-3 .w-9.h-9 {
  background: rgba(14, 165, 233, 0.06) !important;
}
html:not(.dark) #page-ai > .grid > .lg\:col-span-3 h4 {
  color: rgba(15, 23, 42, 0.88) !important;
}
html:not(.dark) #page-ai > .grid > .lg\:col-span-3 .text-\[10px\].text-gray-500 {
  color: rgba(100, 116, 139, 0.58) !important;
}
html:not(.dark) #page-ai button[onclick*="clearChatHistory"] {
  color: rgba(100, 116, 139, 0.35) !important;
}
html:not(.dark) #page-ai button[onclick*="clearChatHistory"]:hover {
  color: rgba(220, 38, 38, 0.65) !important;
  background: rgba(239, 68, 68, 0.04) !important;
}

/* AI bubble — light */
html:not(.dark) .chat-msg .bg-surface-700\/50 {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
  color: rgba(30, 41, 59, 0.8) !important;
}
html:not(.dark) .chat-msg .bg-surface-700\/50 strong,
html:not(.dark) .chat-msg .bg-surface-700\/50 .text-white {
  color: rgba(15, 23, 42, 0.9) !important;
}
html:not(.dark) .chat-msg .bg-surface-700\/50 .text-gray-400 {
  color: rgba(71, 85, 105, 0.55) !important;
}
html:not(.dark) .chat-msg .bg-surface-700\/50 .text-gray-500 {
  color: rgba(100, 116, 139, 0.58) !important;
}

/* User bubble — light */
html:not(.dark) .chat-msg .bg-brand-600\/30 {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
html:not(.dark) .chat-msg .bg-brand-500\/30,
html:not(.dark) .chat-msg .bg-brand-500\/20 {
  background: rgba(14, 165, 233, 0.06) !important;
}

/* AI table — light */
html:not(.dark) #page-ai .ai-table {
  border-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}
html:not(.dark) #page-ai .ai-table th {
  background: #0f172a !important;
  color: rgba(125, 211, 252, 0.9) !important;
}
html:not(.dark) #page-ai .ai-table td {
  background: #fafbfc !important;
  color: rgba(15, 23, 42, 0.75) !important;
  border-bottom-color: rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) #page-ai .ai-table td.ai-num {
  color: rgba(15, 23, 42, 0.9) !important;
  font-weight: 700 !important;
}
html:not(.dark) #page-ai .unit-suffix {
  color: rgba(100, 116, 139, 0.5) !important;
}
html:not(.dark) #page-ai .ai-table tr:hover td {
  background: rgba(14, 165, 233, 0.03) !important;
}

/* Input — light */
html:not(.dark) #page-ai .chat-container > .p-4.border-t {
  border-top-color: rgba(15, 23, 42, 0.04) !important;
  background: rgba(248, 250, 252, 0.4) !important;
}
html:not(.dark) #chatInput {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  color: rgba(15, 23, 42, 0.85) !important;
}
html:not(.dark) #chatInput::placeholder {
  color: rgba(100, 116, 139, 0.35) !important;
}
html:not(.dark) #chatInput:focus {
  background: #fff !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.06) !important;
}

/* Send — light */
html:not(.dark) #page-ai button[onclick*="sendChat"] {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  border: none !important;
  color: #ffffff !important;
}
html:not(.dark) #page-ai button[onclick*="sendChat"]:hover {
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2) !important;
}

/* Quick chips — light */
html:not(.dark) #aiQuickActions button {
  background: rgba(15, 23, 42, 0.02) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
  color: rgba(71, 85, 105, 0.45) !important;
}
html:not(.dark) #aiQuickActions button:hover {
  background: rgba(14, 165, 233, 0.04) !important;
  border-color: rgba(14, 165, 233, 0.15) !important;
  color: #0284c7 !important;
}

/* Refresh button — light */
html:not(.dark) #page-ai button[onclick*="generateAutoInsights"] {
  color: #0284c7 !important;
}
html:not(.dark) #page-ai button[onclick*="generateAutoInsights"]:hover {
  background: rgba(14, 165, 233, 0.04) !important;
}

/* ── 6. RESPONSIVE ── */
@media (max-width: 1024px) {
  /* Stack to single column */
  #page-ai > .grid > .space-y-4 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #page-ai > .grid > .space-y-4 > div:last-child {
    grid-column: span 2 !important;
  }
}

@media (max-width: 480px) {
  #page-ai {
    padding: 10px !important;
  }
  #page-ai > .grid {
    gap: 8px !important;
  }
  #page-ai > .grid > .space-y-4 {
    grid-template-columns: 1fr !important;
  }
  #page-ai > .grid > .space-y-4 > div:last-child {
    grid-column: span 1 !important;
  }
  #page-ai > .grid > .lg\:col-span-3 {
    max-height: calc(100vh - 200px) !important;
    border-radius: 12px !important;
  }
  .chat-messages {
    padding: 12px !important;
  }
  .chat-msg .bg-surface-700\/50,
  .chat-msg .bg-brand-600\/30 {
    max-width: 92% !important;
  }
  #aiQuickActions {
    gap: 4px !important;
  }
  #aiQuickActions button {
    font-size: 9px !important;
    padding: 4px 8px !important;
  }
}

/* ── 7. PRINT ── */
@media print {
  #page-ai > .grid > .space-y-4 {
    display: none !important;
  }
  #page-ai > .grid > .lg\:col-span-3 {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
  }
  .chat-msg .bg-surface-700\/50 {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
  }
  .chat-msg .bg-brand-600\/30 {
    background: #dbeafe !important;
    color: #1e3a5f !important;
  }
  #page-ai .chat-container > .p-4.border-t {
    display: none !important;
  }
}

/* ── Exact Machine Details panel tone parity (AI + Operators) ── */
html.dark #operatorStats > div,
html.dark #operatorsGrid > div:not(.col-span-full),
html.dark #operatorsGrid .bg-surface-900\/40,
html.dark #page-ai > .grid > .space-y-4 > div,
html.dark #page-ai > .grid > .lg\:col-span-3,
html.dark #aiAutoInsights > div,
html.dark #aiAnalysisModes button,
html.dark #page-ai .chat-container > .p-4.border-t {
  background: rgba(16, 26, 40, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

html.dark #operatorStats > div:hover,
html.dark #operatorsGrid > div:not(.col-span-full):hover,
html.dark #aiAnalysisModes button:hover {
  background: rgba(16, 26, 40, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}
   Premium industrial analytics with restrained, data-rich composition
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. PAGE FRAME ── */
#page-stats {
  padding: 20px 24px !important;
  max-width: none !important;
  margin: 0 auto !important;
}

/* ── 0a. PAGE HEADER ── */
#page-stats > .mb-5 {
  margin-bottom: 24px !important;
}
#page-stats > .mb-5 h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: rgba(241, 245, 249, 0.92) !important;
}
#page-stats > .mb-5 p {
  font-size: 10.5px !important;
  color: rgba(148, 163, 184, 0.4) !important;
  margin-top: 2px !important;
}

/* ── 1. INFO STRIP (Reporting Window / Freshness / Machines) ── */
#page-stats > .grid.md\:grid-cols-3.mb-5 {
  gap: 8px !important;
  margin-bottom: 18px !important;
}
#page-stats > .grid.md\:grid-cols-3.mb-5 > div {
  background: rgba(10, 18, 32, 0.3) !important;
  border: 1px solid rgba(148, 163, 184, 0.04) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}
/* Info strip labels */
#page-stats > .grid.md\:grid-cols-3.mb-5 .text-\[10px\] {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: rgba(148, 163, 184, 0.3) !important;
  margin-bottom: 4px !important;
}
/* Info strip values */
#page-stats > .grid.md\:grid-cols-3.mb-5 .text-sm {
  font-size: 12px !important;
  font-weight: 600 !important;
}
#statsWindowLabel {
  color: rgba(226, 232, 240, 0.75) !important;
}
#statsFreshness {
  font-size: 12px !important;
}
#statsMachineCount {
  font-size: 12px !important;
}

/* ── 2. KPI METRIC CARDS ── */
#page-stats > .grid.lg\:grid-cols-3.mb-6 {
  gap: 10px !important;
  margin-bottom: 20px !important;
}
#page-stats > .grid.lg\:grid-cols-3.mb-6 > div {
  background: rgba(10, 18, 32, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.10) !important;
  border-radius: 14px !important;
  padding: 18px 18px 16px !important;
  transition:
    background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease,
    box-shadow 0.3s ease !important;
}
#page-stats > .grid.lg\:grid-cols-3.mb-6 > div:hover {
  background: rgba(15, 23, 42, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1) !important;
}

/* KPI label row */
#page-stats > .grid.lg\:grid-cols-3 .text-xs.font-medium.text-gray-400 {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(148, 163, 184, 0.38) !important;
}

/* KPI icon containers */
#page-stats > .grid.lg\:grid-cols-3 .w-8.h-8 {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  opacity: 0.8 !important;
}

/* KPI big values */
#page-stats .kpi-value {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: rgba(241, 245, 249, 0.95) !important;
}

/* KPI delta row */
#page-stats [id$="Delta"] {
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
}
#page-stats [id$="Delta"] .text-emerald-400 {
  color: rgba(52, 211, 153, 0.75) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
#page-stats [id$="Delta"] .text-red-400 {
  color: rgba(248, 113, 113, 0.7) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* KPI skeleton override */
#page-stats .kpi-skeleton {
  color: transparent !important;
}
#page-stats .kpi-skeleton::before {
  width: 52px !important;
  height: 26px !important;
  border-radius: 6px !important;
  background: rgba(51, 65, 85, 0.25) !important;
}

/* ── 3. CHART CONTAINER ── */
#page-stats > .bg-surface-800\/60:last-child {
  background: rgba(10, 18, 32, 0.3) !important;
  border: 1px solid rgba(148, 163, 184, 0.04) !important;
  border-radius: 14px !important;
  padding: 20px !important;
}
#page-stats > .bg-surface-800\/60:last-child:hover {
  border-color: rgba(148, 163, 184, 0.06) !important;
}

/* Chart header */
#page-stats > .bg-surface-800\/60:last-child h4 {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(226, 232, 240, 0.8) !important;
  letter-spacing: -0.005em !important;
}
#page-stats > .bg-surface-800\/60:last-child h4 svg {
  opacity: 0.5 !important;
  width: 14px !important;
  height: 14px !important;
}
#statsChartSub {
  font-size: 10px !important;
  color: rgba(148, 163, 184, 0.3) !important;
}

/* Chart canvas wrapper */
#page-stats .chart-shell {
  height: 260px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* ── 4. CHART REVEAL ANIMATION ── */
#page-stats .chart-shell canvas {
  animation: statsChartReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
@keyframes statsChartReveal {
  from { opacity: 0; transform: translateY(4px) scaleY(0.97); }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}
#page-stats .chart-shell.is-loading canvas {
  animation: none !important;
}

/* ── 5. KPI CARD ENTRANCE ── */
#page-stats > .grid.lg\:grid-cols-3.mb-6 > div {
  animation: statsKpiReveal 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#page-stats > .grid.lg\:grid-cols-3.mb-6 > div:nth-child(1) { animation-delay: 0s; }
#page-stats > .grid.lg\:grid-cols-3.mb-6 > div:nth-child(2) { animation-delay: 0.04s; }
#page-stats > .grid.lg\:grid-cols-3.mb-6 > div:nth-child(3) { animation-delay: 0.08s; }

@keyframes statsKpiReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Info strip entrance */
#page-stats > .grid.md\:grid-cols-3.mb-5 > div {
  animation: statsInfoReveal 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#page-stats > .grid.md\:grid-cols-3.mb-5 > div:nth-child(1) { animation-delay: 0s; }
#page-stats > .grid.md\:grid-cols-3.mb-5 > div:nth-child(2) { animation-delay: 0.025s; }
#page-stats > .grid.md\:grid-cols-3.mb-5 > div:nth-child(3) { animation-delay: 0.05s; }

@keyframes statsInfoReveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #page-stats .chart-shell canvas,
  #page-stats > .grid.lg\:grid-cols-3.mb-6 > div,
  #page-stats > .grid.md\:grid-cols-3.mb-5 > div {
    animation: none !important;
  }
}

/* ── 6. EMPTY / LOW-DATA STATES ── */
/* KPI showing dash = no data */
#page-stats .kpi-value:not(.kpi-skeleton) {
  transition: color 0.2s ease !important;
}

/* Freshness error state */
#statsFreshness {
  transition: color 0.2s ease !important;
}

/* ── 7. LIGHT MODE ── */
html:not(.dark) #page-stats > .mb-5 h2 {
  color: rgba(15, 23, 42, 0.88) !important;
}
html:not(.dark) #page-stats > .mb-5 p {
  color: rgba(100, 116, 139, 0.5) !important;
}

/* Info strip — light */
html:not(.dark) #page-stats > .grid.md\:grid-cols-3.mb-5 > div {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) #page-stats > .grid.md\:grid-cols-3.mb-5 .text-\[10px\] {
  color: rgba(71, 85, 105, 0.4) !important;
}
html:not(.dark) #statsWindowLabel {
  color: rgba(15, 23, 42, 0.7) !important;
}

/* KPI cards — light */
html:not(.dark) #page-stats > .grid.lg\:grid-cols-3.mb-6 > div {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) #page-stats > .grid.lg\:grid-cols-3.mb-6 > div:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(15, 23, 42, 0.07) !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06) !important;
}
html:not(.dark) #page-stats > .grid.lg\:grid-cols-3 .text-xs.font-medium.text-gray-400 {
  color: rgba(71, 85, 105, 0.45) !important;
}
html:not(.dark) #page-stats .kpi-value {
  color: rgba(15, 23, 42, 0.9) !important;
}
html:not(.dark) #page-stats [id$="Delta"] .text-emerald-400 {
  color: rgba(5, 150, 105, 0.8) !important;
}
html:not(.dark) #page-stats [id$="Delta"] .text-red-400 {
  color: rgba(220, 38, 38, 0.75) !important;
}
html:not(.dark) #page-stats .kpi-skeleton::before {
  background: rgba(203, 213, 225, 0.3) !important;
}

/* Chart — light */
html:not(.dark) #page-stats > .bg-surface-800\/60:last-child {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) #page-stats > .bg-surface-800\/60:last-child:hover {
  border-color: rgba(15, 23, 42, 0.06) !important;
}
html:not(.dark) #page-stats > .bg-surface-800\/60:last-child h4 {
  color: rgba(15, 23, 42, 0.8) !important;
}
html:not(.dark) #statsChartSub {
  color: rgba(100, 116, 139, 0.4) !important;
}

/* ── 8. RESPONSIVE ── */
@media (max-width: 480px) {
  #page-stats {
    padding: 12px !important;
  }
  #page-stats > .grid.md\:grid-cols-3.mb-5 {
    gap: 6px !important;
  }
  #page-stats > .grid.lg\:grid-cols-3.mb-6 {
    gap: 8px !important;
  }
  #page-stats > .grid.lg\:grid-cols-3.mb-6 > div {
    padding: 15px !important;
    border-radius: 12px !important;
  }
  #page-stats .kpi-value {
    font-size: 24px !important;
  }
  #page-stats .chart-shell {
    height: 220px !important;
  }
}

/* ── 9. PRINT ── */
@media print {
  #page-stats > .grid.lg\:grid-cols-3.mb-6 > div,
  #page-stats > .grid.md\:grid-cols-3.mb-5 > div,
  #page-stats > .bg-surface-800\/60:last-child {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    break-inside: avoid !important;
  }
  #page-stats .kpi-value {
    color: #0f172a !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   PREMIUM CHART DESIGN SYSTEM v3.0
   Diagnostic-grade, executive-quality chart visuals
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. CHART CONTAINER / FRAME ── */
.chart-shell {
  position: relative;
  overflow: hidden;
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, 0.10) !important;
  background: rgba(10, 18, 28, 0.28) !important;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  transition: border-color 280ms ease, box-shadow 280ms ease;
}
.chart-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 180, 216, 0.018) 0%,
    transparent 40%);
  z-index: 0;
}
.chart-shell:hover {
  border-color: rgba(0, 180, 216, 0.08) !important;
  box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.04) !important;
}

/* Canvas rendering */
.chart-shell canvas {
  position: relative;
  z-index: 1;
  transition: opacity 220ms ease, filter 160ms ease;
}

/* ── 2. CHART LOADING STATE ── */
.chart-shell.is-loading canvas {
  opacity: 0.12 !important;
  filter: saturate(0.6) blur(1.5px) !important;
}
.chart-shell.is-loading .chart-skeleton {
  opacity: 1 !important;
}
.chart-shell .chart-skeleton {
  transition: opacity 200ms ease;
}

/* Skeleton pulse */
@keyframes chartSkeletonPulse {
  0%, 100% { opacity: 0.14; }
  50% { opacity: 0.28; }
}
.chart-shell.is-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 180, 216, 0.03) 25%,
    rgba(0, 180, 216, 0.05) 50%,
    rgba(0, 180, 216, 0.03) 75%,
    transparent 100%);
  background-size: 200% 100%;
  animation: chartSkeletonPulse 1.8s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* ── 3. CHART EMPTY / NO-DATA STATE ── */
.chart-shell:has(canvas[style*="display: none"]),
.chart-shell:has(canvas[style*="display:none"]) {
  min-height: 180px;
}
.chart-shell .text-gray-500,
.chart-shell .text-gray-400 {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: rgba(148, 163, 184, 0.3) !important;
}

/* ── 4. EXTERNAL Y-AXIS PANEL ── */
.chart-yaxis-panel {
  background: transparent !important;
  border-right: none !important;
}
.chart-yaxis-panel span {
  font-family: var(--font-data) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  color: rgba(148, 178, 210, 0.38) !important;
  letter-spacing: 0.02em;
}

/* ── 5. CHART SCROLL CONTAINER ── */
.chart-scroll-outer {
  border-left: none !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 180, 216, 0.15) transparent;
}
.chart-scroll-outer::-webkit-scrollbar {
  height: 4px;
}
.chart-scroll-outer::-webkit-scrollbar-track {
  background: transparent;
}
.chart-scroll-outer::-webkit-scrollbar-thumb {
  background: rgba(0, 180, 216, 0.12);
  border-radius: 99px;
}
.chart-scroll-outer::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 180, 216, 0.22);
}

/* Scroll hint text */
#nodeChartScrollHint {
  font-size: 9px !important;
  font-weight: 500 !important;
  color: rgba(148, 178, 210, 0.25) !important;
  letter-spacing: 0.04em;
}

/* ── 6. CHART NAV BUTTONS (scroll arrows) ── */
.chart-nav-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  background: rgba(15, 23, 42, 0.3) !important;
  color: rgba(148, 178, 210, 0.4) !important;
  transition: all 180ms ease !important;
  backdrop-filter: blur(8px);
}
.chart-nav-btn:hover {
  background: rgba(0, 180, 216, 0.08) !important;
  border-color: rgba(0, 180, 216, 0.14) !important;
  color: rgba(0, 180, 216, 0.7) !important;
}
.chart-nav-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* ── 7. LEGEND — EXTERNAL BAR ── */
.chart-legend-bar {
  padding: 4px 0 0 0 !important;
  gap: 6px !important;
}
.chart-legend-item {
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  background: rgba(15, 23, 42, 0.22) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: all 180ms ease !important;
  cursor: pointer;
}
.chart-legend-item:hover {
  background: rgba(15, 23, 42, 0.36) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
}
.chart-legend-item[data-hidden="true"] {
  opacity: 0.3 !important;
  filter: grayscale(0.5);
}
.chart-legend-item .legend-color {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}

/* ── 8. RANGE BUTTONS (date quick-select) ── */
.chart-range-btn {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  letter-spacing: 0.03em !important;
  color: rgba(148, 163, 184, 0.4) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all 160ms ease !important;
}
.chart-range-btn:hover {
  color: rgba(198, 214, 232, 0.7) !important;
  background: rgba(148, 163, 184, 0.10) !important;
}
.chart-range-btn.active {
  color: rgba(0, 180, 216, 0.85) !important;
  background: rgba(0, 180, 216, 0.06) !important;
  border-color: rgba(0, 180, 216, 0.12) !important;
}

/* ── 9. ZOOM CONTROLS ── */
.node-history-zoom {
  border-radius: 7px !important;
  padding: 2px 5px !important;
  background: rgba(15, 23, 42, 0.3) !important;
  border: 1px solid rgba(148, 163, 184, 0.04) !important;
}
.node-history-zoom button {
  border-radius: 5px !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(148, 178, 210, 0.4) !important;
  transition: all 140ms ease !important;
}
.node-history-zoom button:hover {
  background: rgba(0, 180, 216, 0.08) !important;
  color: rgba(0, 180, 216, 0.7) !important;
}
.node-history-zoom .text-xs {
  font-family: var(--font-data) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  color: rgba(148, 178, 210, 0.35) !important;
  min-width: 30px !important;
  text-align: center !important;
}

/* ── 10. DATE RANGE INPUTS ── */
.chart-date-input,
input[type="date"].bg-surface-900 {
  font-family: var(--font-data) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(148, 163, 184, 0.06) !important;
  background: rgba(15, 23, 42, 0.35) !important;
  color: rgba(198, 214, 232, 0.6) !important;
  transition: all 160ms ease !important;
}
.chart-date-input:focus,
input[type="date"].bg-surface-900:focus {
  border-color: rgba(0, 180, 216, 0.18) !important;
  background: rgba(20, 32, 48, 0.55) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 180, 216, 0.06) !important;
}

/* ── 11. COMPARE CHART WRAPPER ── */
#compareChartWrap {
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, 0.04) !important;
  background: rgba(10, 18, 28, 0.22) !important;
  padding: 16px !important;
  margin-top: 12px !important;
}
#compareChartWrap .chart-shell {
  border: none !important;
  background: transparent !important;
}

/* ── 12. DOUGHNUT / PIE — fault chart ── */
#faultPieChart {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════
   CHART LIGHT MODE
   ══════════════════════════════════════════════════════════ */

html:not(.dark) .chart-shell {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: blur(10px) saturate(1.05);
}
html:not(.dark) .chart-shell::after {
  background: linear-gradient(180deg,
    rgba(2, 132, 199, 0.012) 0%,
    transparent 40%);
}
html:not(.dark) .chart-shell:hover {
  border-color: rgba(2, 132, 199, 0.08) !important;
  box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.03),
              0 4px 16px rgba(15, 23, 42, 0.03) !important;
}

html:not(.dark) .chart-shell canvas {
  filter: none !important;
}

html:not(.dark) .chart-yaxis-panel span {
  color: rgba(71, 85, 105, 0.36) !important;
}

html:not(.dark) .chart-scroll-outer {
  scrollbar-color: rgba(2, 132, 199, 0.12) transparent;
}
html:not(.dark) .chart-scroll-outer::-webkit-scrollbar-thumb {
  background: rgba(2, 132, 199, 0.1);
}

html:not(.dark) .chart-nav-btn {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(15, 23, 42, 0.04) !important;
  color: rgba(71, 85, 105, 0.4) !important;
}
html:not(.dark) .chart-nav-btn:hover {
  background: rgba(2, 132, 199, 0.06) !important;
  border-color: rgba(2, 132, 199, 0.12) !important;
  color: rgba(2, 132, 199, 0.65) !important;
}

html:not(.dark) .chart-legend-item {
  background: rgba(255, 255, 255, 0.65) !important;
  border-color: rgba(15, 23, 42, 0.04) !important;
  color: rgba(51, 65, 85, 0.65) !important;
}
html:not(.dark) .chart-legend-item:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark) .chart-range-btn {
  color: rgba(100, 116, 139, 0.4) !important;
}
html:not(.dark) .chart-range-btn:hover {
  color: rgba(51, 65, 85, 0.65) !important;
  background: rgba(15, 23, 42, 0.03) !important;
}
html:not(.dark) .chart-range-btn.active {
  color: rgba(2, 132, 199, 0.8) !important;
  background: rgba(2, 132, 199, 0.05) !important;
  border-color: rgba(2, 132, 199, 0.1) !important;
}

html:not(.dark) .node-history-zoom {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(15, 23, 42, 0.03) !important;
}
html:not(.dark) .node-history-zoom button {
  color: rgba(71, 85, 105, 0.4) !important;
}
html:not(.dark) .node-history-zoom button:hover {
  background: rgba(2, 132, 199, 0.06) !important;
  color: rgba(2, 132, 199, 0.65) !important;
}
html:not(.dark) .node-history-zoom .text-xs {
  color: rgba(71, 85, 105, 0.32) !important;
}

html:not(.dark) .chart-date-input,
html:not(.dark) input[type="date"].bg-surface-900 {
  background: rgba(255, 255, 255, 0.65) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
  color: rgba(51, 65, 85, 0.6) !important;
}
html:not(.dark) .chart-date-input:focus,
html:not(.dark) input[type="date"].bg-surface-900:focus {
  border-color: rgba(2, 132, 199, 0.14) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.05) !important;
}

html:not(.dark) #compareChartWrap {
  background: rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(15, 23, 42, 0.03) !important;
}

html:not(.dark) #nodeChartScrollHint {
  color: rgba(71, 85, 105, 0.22) !important;
}

html:not(.dark) .chart-shell .text-gray-500,
html:not(.dark) .chart-shell .text-gray-400 {
  color: rgba(71, 85, 105, 0.28) !important;
}

/* ══════════════════════════════════════════════════════════
   CHART RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .chart-shell {
    border-radius: 10px !important;
  }
  .chart-legend-bar {
    gap: 4px !important;
  }
  .chart-legend-item {
    padding: 3px 8px !important;
    font-size: 9px !important;
  }
  .chart-range-btn {
    padding: 3px 8px !important;
    font-size: 9px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   CHART PRINT
   ══════════════════════════════════════════════════════════ */
@media print {
  .chart-shell {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    break-inside: avoid !important;
  }
  .chart-shell::after {
    display: none !important;
  }
  .chart-legend-item {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
  }
  .chart-nav-btn,
  .node-history-zoom,
  .chart-scroll-outer::-webkit-scrollbar,
  #nodeChartScrollHint {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MICRO-DETAIL POLISH SYSTEM v1.0
   Comprehensive refinements: toasts, empty states, disabled states,
   status badges, tooltips, dividers, skeletons, motion, global harmony
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOAST REFINEMENT ── */
.toast-msg {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}
.toast-inner {
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  gap: 10px !important;
  min-width: 200px !important;
  line-height: 1.45;
}
/* Toast severity micro-polish — slightly muted backgrounds, refined borders */
.toast-msg[data-severity="success"] .toast-inner {
  background: rgba(6, 28, 22, 0.92) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
  color: #6ee7b7 !important;
}
.toast-msg[data-severity="info"] .toast-inner {
  background: rgba(7, 22, 34, 0.92) !important;
  border-color: rgba(14, 165, 233, 0.22) !important;
  color: #7dd3fc !important;
}
.toast-msg[data-severity="watch"] .toast-inner {
  background: rgba(35, 26, 9, 0.92) !important;
  border-color: rgba(245, 158, 11, 0.26) !important;
  color: #fcd34d !important;
}
.toast-msg[data-severity="critical"] .toast-inner {
  background: rgba(42, 13, 16, 0.92) !important;
  border-color: rgba(239, 68, 68, 0.28) !important;
  color: #fca5a5 !important;
}
/* Toast icon (first child if icon exists) */
.toast-inner i,
.toast-inner svg {
  font-size: 13px;
  opacity: 0.85;
  flex-shrink: 0;
}
/* Toast close button */
.toast-close {
  opacity: 0.35 !important;
  padding: 0 0 0 10px !important;
  font-size: 13px !important;
  transition: opacity 0.2s ease !important;
}
.toast-close:hover {
  opacity: 0.85 !important;
  transform: none !important;
}
/* Toast entrance animation */
.toast-msg.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
}
/* Light mode toasts */
html:not(.dark) .toast-inner {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #1e293b !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
html:not(.dark) .toast-msg[data-severity="success"] .toast-inner {
  background: rgba(240, 253, 244, 0.98) !important;
  color: #166534 !important;
  border-color: rgba(22, 163, 74, 0.22) !important;
}
html:not(.dark) .toast-msg[data-severity="info"] .toast-inner {
  background: rgba(240, 249, 255, 0.98) !important;
  color: #0c4a6e !important;
  border-color: rgba(14, 165, 233, 0.22) !important;
}
html:not(.dark) .toast-msg[data-severity="watch"] .toast-inner {
  background: rgba(255, 251, 235, 0.98) !important;
  color: #92400e !important;
  border-color: rgba(245, 158, 11, 0.22) !important;
}
html:not(.dark) .toast-msg[data-severity="critical"] .toast-inner {
  background: rgba(254, 242, 242, 0.98) !important;
  color: #991b1b !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
}

/* ── 2. EMPTY STATE REFINEMENT ── */
.empty-state {
  min-height: 180px !important;
  padding: 28px 24px !important;
  opacity: 0.85;
}
.empty-state svg {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 14px !important;
  opacity: 0.3 !important;
}
.empty-state-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}
.empty-state-sub {
  font-size: 11.5px !important;
  line-height: 1.55 !important;
  max-width: 240px !important;
  opacity: 0.7;
}
html.dark .empty-state-title {
  color: #cbd5e1 !important;
}
html.dark .empty-state-sub {
  color: #64748b !important;
}
html:not(.dark) .empty-state-title {
  color: #475569 !important;
}
html:not(.dark) .empty-state-sub {
  color: #94a3b8 !important;
}

/* Widget empty (dashed placeholder) */
.widget-empty {
  min-height: 100px !important;
  border-radius: 10px !important;
  font-size: 11.5px !important;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}
html.dark .widget-empty {
  border-color: rgba(148, 163, 184, 0.14) !important;
  background: rgba(15, 23, 42, 0.25) !important;
  color: #64748b !important;
}
html:not(.dark) .widget-empty {
  border-color: rgba(148, 163, 184, 0.25) !important;
  background: rgba(248, 250, 252, 0.6) !important;
  color: #94a3b8 !important;
}

/* ── 3. DISABLED STATE REFINEMENT ── */
button:disabled,
button[disabled],
.btn-busy {
  opacity: 0.42 !important;
  filter: saturate(0.5);
  cursor: not-allowed !important;
  pointer-events: none;
}
/* Give disabled inputs a muted look without losing readability */
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55 !important;
  filter: saturate(0.6);
  cursor: not-allowed !important;
}
/* Tailwind disabled:opacity-30 override — 30% is too harsh */
[class*="disabled:opacity-30"]:disabled {
  opacity: 0.42 !important;
  filter: saturate(0.5);
}

/* ── 4. STATUS BADGE / CHIP REFINEMENT ── */
.nc-status,
.nc-badge-run,
.nc-badge-rfid,
.nc-fault-badge {
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

#page-live .nc-chip,
#page-live .nc-fault-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 18px rgba(2, 8, 20, 0.16);
}
#page-live .nc-chip .nc-chip-label {
  display: inline-block;
}
#page-live .nc-chip.is-online {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(52, 211, 153, 0.34) !important;
  color: #d1fae5 !important;
}
#page-live .nc-chip.is-running,
#page-live .nc-chip.is-rfid-online {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(52, 211, 153, 0.34) !important;
  color: #d1fae5 !important;
}
#page-live .nc-chip.is-stopped,
#page-live .nc-chip.is-rfid-offline {
  background: rgba(250, 204, 21, 0.16) !important;
  border-color: rgba(250, 204, 21, 0.34) !important;
  color: #fef9c3 !important;
}
#page-live .nc-chip.is-offline {
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: rgba(248, 113, 113, 0.36) !important;
  color: #fee2e2 !important;
}
#page-live .nc-chip.is-faulted,
#page-live .nc-fault-badge {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(251, 191, 36, 0.34) !important;
  color: #fef3c7 !important;
}
#page-live .nc-chip.is-disconnected {
  background: rgba(100, 116, 139, 0.22) !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  color: #e2e8f0 !important;
}
html:not(.dark) #page-live .nc-chip,
html:not(.dark) #page-live .nc-fault-badge {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 6px 14px rgba(15, 23, 42, 0.05);
}
html:not(.dark) #page-live .nc-chip.is-online {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(5, 150, 105, 0.22) !important;
  color: #166534 !important;
}
html:not(.dark) #page-live .nc-chip.is-running,
html:not(.dark) #page-live .nc-chip.is-rfid-online {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(5, 150, 105, 0.22) !important;
  color: #166534 !important;
}
html:not(.dark) #page-live .nc-chip.is-stopped,
html:not(.dark) #page-live .nc-chip.is-rfid-offline {
  background: rgba(250, 204, 21, 0.12) !important;
  border-color: rgba(202, 138, 4, 0.22) !important;
  color: #854d0e !important;
}
html:not(.dark) #page-live .nc-chip.is-offline {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.24) !important;
  color: #991b1b !important;
}
html:not(.dark) #page-live .nc-chip.is-faulted,
html:not(.dark) #page-live .nc-fault-badge {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(217, 119, 6, 0.2) !important;
  color: #92400e !important;
}
html:not(.dark) #page-live .nc-chip.is-disconnected {
  background: rgba(148, 163, 184, 0.14) !important;
  border-color: rgba(100, 116, 139, 0.22) !important;
  color: #334155 !important;
}

/* ── 5. TOOLTIP (title attribute) CUSTOM STYLING ── */
/* Native tooltips can't be styled — instead we refine hover states
   for elements that have title attributes to give visual feedback */
[title]:not(input):not(select):not(textarea) {
  position: relative;
}
/* Topbar icon buttons — consistent pill shape + glass on hover */
.topbar.premium-header button[title],
.topbar.premium-header a[title] {
  border-radius: 8px !important;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}
.topbar.premium-header button[title]:hover,
.topbar.premium-header a[title]:hover {
  background-color: rgba(148, 163, 184, 0.12) !important;
}

/* ── 6. DIVIDER CONSISTENCY ── */
/* Normalization: all surface-700 borders to consistent opacity */
[class*="border-surface-700/50"],
[class*="border-surface-700/30"],
[class*="border-surface-700/40"] {
  border-color: rgba(148, 163, 184, 0.12) !important;
}
html:not(.dark) [class*="border-surface-700/50"],
html:not(.dark) [class*="border-surface-700/30"],
html:not(.dark) [class*="border-surface-700/40"] {
  border-color: rgba(148, 163, 184, 0.16) !important;
}

/* Section dividers — lighter, consistent */
hr,
[class*="divide-"] > * + * {
  border-color: rgba(148, 163, 184, 0.10) !important;
}
html:not(.dark) hr,
html:not(.dark) [class*="divide-"] > * + * {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

/* ── 7. TABLE ROW REFINEMENT ── */
/* Subtler hover — the 0.09 cyan was too aggressive, tone down + add transition */
table tbody tr,
.inspector-table tbody tr {
  transition: background-color 0.15s ease !important;
}
table tbody tr:hover,
.inspector-table tbody tr:hover {
  background-color: rgba(56, 189, 248, 0.05) !important;
}
html:not(.dark) table tbody tr:hover,
html:not(.dark) .inspector-table tbody tr:hover {
  background-color: rgba(14, 165, 233, 0.04) !important;
}
/* Alternating row stripes (very subtle in dark mode) */
table tbody tr:nth-child(even) {
  background-color: rgba(148, 163, 184, 0.025);
}
html:not(.dark) table tbody tr:nth-child(even) {
  background-color: rgba(148, 163, 184, 0.04);
}

/* ── 8. SKELETON / LOADING REFINEMENT ── */
.chart-skeleton,
.kpi-skeleton {
  border-radius: 8px !important;
  opacity: 0.7;
}
/* Slower shimmer for a calmer feel */
.chart-skeleton {
  animation-duration: 2s !important;
}
.kpi-skeleton {
  min-width: 48px !important;
  min-height: 24px !important;
  animation-duration: 2.2s !important;
}
/* Light mode skeletons */
html:not(.dark) .chart-skeleton {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.06) 20%, rgba(148, 163, 184, 0.12) 50%, rgba(148, 163, 184, 0.06) 80%) !important;
  background-size: 220% 100% !important;
}
html:not(.dark) .kpi-skeleton {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.14) 20%, rgba(148, 163, 184, 0.14) 50%, rgba(148, 163, 184, 0.14) 80%) !important;
  background-size: 220% 100% !important;
}

/* ── 9. SELECT / DROPDOWN REFINEMENT ── */
select {
  padding-right: 40px !important;
  background-color: rgba(10, 18, 28, 0.9) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237dd3fc' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;
  background-repeat: no-repeat !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border-color: rgba(71, 85, 105, 0.55) !important;
  color: #e2e8f0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(2, 8, 20, 0.22),
    0 0 0 1px rgba(34, 211, 238, 0.04) !important;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease !important;
}
/* Focus state for selects */
select:hover {
  background-color: rgba(12, 22, 34, 0.96) !important;
  border-color: rgba(56, 189, 248, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 28px rgba(2, 8, 20, 0.28),
    0 0 0 1px rgba(56, 189, 248, 0.08) !important;
}
select:focus {
  border-color: rgba(14, 165, 233, 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 3px rgba(14, 165, 233, 0.14),
    0 16px 30px rgba(2, 8, 20, 0.3) !important;
}
select option {
  background: #0b1220;
  color: #e2e8f0;
}
select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ── 10. MOTION / TRANSITION GLOBAL SMOOTHING ── */
/* Reduce card hover lift from -2px to -1px for subtlety */
.card-hover:hover,
.ota-target-item:hover,
.wifi-net-item:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}
html:not(.dark) .card-hover:hover,
html:not(.dark) .ota-target-item:hover,
html:not(.dark) .wifi-net-item:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Smooth page transitions — fade-in for page sections */
.page-section {
  animation: microFadeIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes microFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tab button active states – animated underline */
.tab-btn {
  position: relative;
}
.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--brand-500, #0ea5e9);
  border-radius: 1px;
  transition: width 0.2s ease, left 0.2s ease;
}
.tab-btn.active::after,
.tab-btn[aria-selected="true"]::after {
  width: 60%;
  left: 20%;
}

/* Breathe pulse — slightly slower, more elegant */
@keyframes breatheRefined {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.25); }
  50% { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}
.breathe-online {
  animation: breatheRefined 4.5s ease-in-out infinite !important;
}

/* ── 11. BUTTON HIERARCHY ── */
/* Primary action buttons (gradients like orange CTA, brand CTA) — clean press state */
button[class*="bg-gradient-to-r"]:active:not(:disabled) {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 0.08s !important;
}
/* Ghost / icon buttons — softer hover */
button[class*="bg-surface-800"]:hover,
button[class*="bg-surface-900"]:hover {
  background-color: rgba(148, 163, 184, 0.10) !important;
}
html:not(.dark) button[class*="bg-surface-800"]:hover,
html:not(.dark) button[class*="bg-surface-900"]:hover {
  background-color: rgba(148, 163, 184, 0.12) !important;
}

/* ── 12. SCROLLBAR REFINEMENT (global) ── */
/* Thinner scrollbar — 5px instead of 7px on non-chart containers */
::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
}
html.dark ::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.14) !important;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.28) !important;
}
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.16) !important;
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.3) !important;
}

/* ── 13. KPI VALUE / LABEL TYPOGRAPHY ── */
.kpi-value,
[class*="text-2xl"][class*="font-bold"],
[class*="text-3xl"][class*="font-bold"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.unit-suffix {
  font-size: 0.68em !important;
  opacity: 0.65;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}

/* ── 14. CARD PADDING / SPACING HARMONY ── */
/* Ensure premium cards have consistent inner padding */
.premium-card > div:first-child,
.node-card > div:first-child {
  padding: 16px 18px !important;
}
/* Card header — consistent gap */
.premium-card [class*="flex"][class*="items-center"][class*="justify-between"]:first-child {
  margin-bottom: 12px;
}

/* ── 15. FILTER PANEL DENSITY ── */
/* Tighter filter controls on cockpit / analytics filter bars */
.filter-bar,
[class*="flex"][class*="gap-3"][class*="flex-wrap"] select,
[class*="flex"][class*="gap-3"][class*="flex-wrap"] input {
  font-size: 12px;
}

/* ── 16. ALERT LIST ITEMS ── */
#alertsList > div {
  border-radius: 10px !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
}
#alertsList > div:hover {
  background-color: rgba(56, 189, 248, 0.04) !important;
  transform: translateY(-0.5px);
}
html:not(.dark) #alertsList > div:hover {
  background-color: rgba(14, 165, 233, 0.03) !important;
}

/* ── 17. IOS TOGGLE REFINEMENT ── */
.ios-toggle {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ios-toggle.active {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(52, 211, 153, 0.18), 0 2px 6px rgba(16, 185, 129, 0.2) !important;
}

/* ── 18. COPY-ID BUTTON ── */
.copy-id-btn {
  width: 20px !important;
  height: 20px !important;
  border-radius: 5px !important;
  font-size: 10px;
  transition: all 0.15s ease !important;
}
.copy-id-btn:hover {
  transform: none !important;
  border-color: rgba(14, 165, 233, 0.4) !important;
  background: rgba(14, 165, 233, 0.08) !important;
  color: #7dd3fc !important;
}

/* ── 19. QUICK HINT CHIPS (AI page) ── */
.quick-hint-chip {
  font-size: 10.5px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}
.quick-hint-chip:hover {
  border-color: rgba(14, 165, 233, 0.3) !important;
  background: rgba(14, 165, 233, 0.06) !important;
}
html:not(.dark) .quick-hint-chip {
  background: rgba(241, 245, 249, 0.8) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  color: #475569 !important;
}
html:not(.dark) .quick-hint-chip:hover {
  border-color: rgba(14, 165, 233, 0.25) !important;
  background: rgba(224, 242, 254, 0.6) !important;
}

/* ── 20. LIVE PULSE DOT REFINEMENT ── */
.live-pulse {
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
  gap: 4px !important;
}
.live-pulse-dot {
  width: 6px !important;
  height: 6px !important;
}
.live-pulse-dot.fresh {
  box-shadow: 0 0 4px #22c55e, 0 0 8px rgba(34, 197, 94, 0.25) !important;
}

/* ── 21. KEYBOARD SHORTCUT MODAL ── */
.kbd-key {
  font-size: 10px !important;
  padding: 1px 7px !important;
  border-radius: 5px !important;
  background: rgba(148, 163, 184, 0.14) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}
html:not(.dark) .kbd-key {
  background: rgba(241, 245, 249, 0.8) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #334155 !important;
}

/* ── 22. GLOBAL MICRO ANIMATIONS ── */
/* Counter animation — refined timing */
.count-anim {
  animation: countUpRefined 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
@keyframes countUpRefined {
  from { opacity: 0; transform: scale(0.85) translateY(2px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── 23. REDUCE MOTION PREFERENCES ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .chart-skeleton,
  .kpi-skeleton,
  .shimmer {
    animation: none !important;
    background-size: 100% 100% !important;
  }
  .card-hover:hover,
  .ota-target-item:hover,
  .wifi-net-item:hover,
  button:hover,
  a[href]:hover {
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MICRO-DETAIL POLISH — LIGHT MODE HARMONIZATION
   ══════════════════════════════════════════════════════════════════════════ */

/* Light mode scrollbar track */
html:not(.dark) ::-webkit-scrollbar-track {
  background: transparent;
}

/* Light mode modal overlays */
html:not(.dark) #setupModal,
html:not(.dark) .export-modal-overlay,
html:not(.dark) .kbd-modal-overlay,
html:not(.dark) .onboard-overlay,
html:not(.dark) #faultDetailModal,
html:not(.dark) #adminBootLogModal,
html:not(.dark) #signalChartModal,
html:not(.dark) #bootHistoryModal,
html:not(.dark) #adminLoginOverlay {
  backdrop-filter: blur(8px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
  background: rgba(241, 245, 249, 0.5) !important;
}

/* Light mode card hover shadow */
html:not(.dark) .premium-card:hover,
html:not(.dark) .node-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Light mode alert list dividers */
html:not(.dark) #alertsList > div {
  border-color: rgba(148, 163, 184, 0.14) !important;
}

/* Light mode widget empty */
html:not(.dark) .widget-empty {
  border-style: dashed !important;
}

/* Light mode iOS toggle */
html:not(.dark) .ios-toggle {
  background: rgba(148, 163, 184, 0.25) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}
html:not(.dark) .ios-toggle.active {
  background: linear-gradient(90deg, #22c55e, #34d399) !important;
  border-color: rgba(52, 211, 153, 0.8) !important;
}

/* Light mode live pulse */
html:not(.dark) .live-pulse {
  color: #64748b !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   END MICRO-DETAIL POLISH SYSTEM v1.0
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE SURFACE SYSTEM v2.0
   Dedicated page-level overrides so light mode uses premium frosted
   ivory/slate surfaces instead of inheriting dark workspace shells.
   ══════════════════════════════════════════════════════════════════════════ */

html:not(.dark) #page-reports .bg-surface-900\/60,
html:not(.dark) #page-reports .bg-surface-900\/80 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(248, 250, 252, 0.82)) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 30px rgba(15, 23, 42, 0.05) !important;
}

html:not(.dark) #page-reports .rpt-card:hover,
html:not(.dark) #page-reports .bg-surface-800\/60:hover,
html:not(.dark) #page-reports .bg-surface-900\/60:hover,
html:not(.dark) #page-reports .bg-surface-900\/80:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.9)) !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08) !important;
}

html:not(.dark) #page-reports .rpt-card h3,
html:not(.dark) #page-reports .text-white {
  color: #0f172a !important;
}

html:not(.dark) #page-reports .rpt-card p,
html:not(.dark) #page-reports .text-gray-500,
html:not(.dark) #page-reports .text-gray-400 {
  color: rgba(71, 85, 105, 0.76) !important;
}

html:not(.dark) #page-ai .bg-gradient-to-br.from-surface-800\/80,
html:not(.dark) #page-ai .bg-surface-800\/60,
html:not(.dark) #page-ai .bg-surface-900\/60,
html:not(.dark) #page-ai .bg-surface-900\/80 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(248, 250, 252, 0.82)) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 30px rgba(15, 23, 42, 0.05) !important;
}

html:not(.dark) #page-ai > .grid > .lg\:col-span-3,
html:not(.dark) #page-ai > .grid > .space-y-4 > div {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 34px rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark) #page-ai .bg-gradient-to-br:first-child h4,
html:not(.dark) #page-ai .space-y-4 > div:nth-child(2) > h4,
html:not(.dark) #page-ai > .grid > .lg\:col-span-3 h4 {
  color: #0f172a !important;
}

html:not(.dark) #page-ai .text-gray-500,
html:not(.dark) #page-ai .text-gray-400 {
  color: rgba(71, 85, 105, 0.76) !important;
}

html:not(.dark) #page-ai .bg-surface-700\/50,
html:not(.dark) #page-ai .bg-surface-900\/60 {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html:not(.dark) #page-operators .bg-surface-800\/60,
html:not(.dark) #page-operators .bg-surface-900\/60,
html:not(.dark) #page-operators .bg-surface-900\/80,
html:not(.dark) #page-shifts .bg-surface-800\/60,
html:not(.dark) #page-shifts .bg-surface-900\/80,
html:not(.dark) #page-shifts .bg-surface-900\/40,
html:not(.dark) #page-account .bg-surface-800\/60,
html:not(.dark) #page-account .bg-surface-900,
html:not(.dark) #page-settings .bg-surface-800\/60,
html:not(.dark) #page-settings .bg-surface-900 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.8)) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 28px rgba(15, 23, 42, 0.05) !important;
}

html:not(.dark) #page-account .bg-surface-700,
html:not(.dark) #page-settings .bg-surface-700,
html:not(.dark) #page-account button.bg-surface-700,
html:not(.dark) #page-settings button.bg-surface-700 {
  background: rgba(241, 245, 249, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  color: #334155 !important;
}

html:not(.dark) #page-account :is(h1, h2, h3, h4, h5, h6, p, span, div, label, small, strong).text-white,
html:not(.dark) #page-settings :is(h1, h2, h3, h4, h5, h6, p, span, div, label, small, strong).text-white,
html:not(.dark) #page-shifts :is(h1, h2, h3, h4, h5, h6, p, span, div, label, small, strong).text-white {
  color: #0f172a !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE SURFACE SYSTEM v2.0
   Refined graphite-glass treatment across secondary workspaces so dark
   mode reads as one premium industrial system instead of generic dark boxes.
   ══════════════════════════════════════════════════════════════════════════ */

html.dark #page-reports .rpt-card {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.05), transparent 32%),
    linear-gradient(180deg, rgba(8, 13, 24, 0.82), rgba(4, 8, 16, 0.84)) !important;
  border-color: rgba(100, 116, 139, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 16px 32px rgba(2, 8, 20, 0.22) !important;
}

html.dark #page-reports .rpt-card:hover {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.9), rgba(5, 10, 20, 0.88)) !important;
  border-color: rgba(125, 211, 252, 0.16) !important;
  box-shadow: 0 22px 40px rgba(2, 8, 20, 0.28) !important;
}

html.dark #page-reports .rpt-card h3 {
  color: rgba(248, 250, 252, 0.94) !important;
}

html.dark #page-reports .rpt-card p {
  color: rgba(148, 163, 184, 0.72) !important;
}

html.dark #rptFilterModal .bg-surface-800 {
  background:
    radial-gradient(circle at top, rgba(14, 165, 233, 0.06), transparent 30%),
    linear-gradient(180deg, rgba(8, 13, 24, 0.97), rgba(4, 8, 16, 0.96)) !important;
}

html.dark #page-ai > .grid > .lg\:col-span-3,
html.dark #page-ai > .grid > .space-y-4 > div {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 16px 34px rgba(2, 8, 20, 0.24) !important;
}

html.dark #page-ai > .grid > .lg\:col-span-3 {
  background: rgba(16, 26, 40, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

html.dark #page-ai .bg-gradient-to-br.from-surface-800\/80:first-child,
html.dark #page-ai .space-y-4 > div:nth-child(2),
html.dark #page-ai .space-y-4 > div:last-child {
  background: rgba(16, 26, 40, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

html.dark #page-ai .bg-gradient-to-br:first-child h4,
html.dark #page-ai .space-y-4 > div:nth-child(2) > h4,
html.dark #page-ai > .grid > .lg\:col-span-3 h4 {
  color: rgba(248, 250, 252, 0.92) !important;
}

html.dark #page-ai .text-gray-500,
html.dark #page-ai .text-gray-400,
html.dark #page-ai .text-\[10px\].text-gray-500 {
  color: rgba(148, 163, 184, 0.62) !important;
}

html.dark #page-ai .chat-msg .bg-surface-700\/50 {
  background: rgba(16, 26, 40, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

html.dark #page-ai .chat-container > .p-4.border-t {
  background: rgba(16, 26, 40, 0.55) !important;
}

html.dark #page-shifts #shiftRfidEvents > .bg-surface-800\/60,
html.dark #page-shifts #shiftRfidEvents > .bg-surface-900\/40 > button,
html.dark #page-shifts [data-shift-id],
html.dark #shiftsLiveView .shift-machine-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 14px 30px rgba(2, 8, 20, 0.22) !important;
}

html.dark #page-shifts #shiftRfidEvents > .bg-surface-800\/60 {
  background:
    linear-gradient(180deg, rgba(8, 13, 24, 0.78), rgba(5, 10, 20, 0.76)) !important;
  border-color: rgba(100, 116, 139, 0.16) !important;
}

html.dark #page-shifts [data-shift-id],
html.dark #shiftsLiveView .shift-machine-card {
  border-color: rgba(100, 116, 139, 0.16) !important;
}

html.dark #page-shifts [data-shift-id]:hover,
html.dark #shiftsLiveView .shift-machine-card:hover {
  border-color: rgba(125, 211, 252, 0.16) !important;
  box-shadow: 0 18px 36px rgba(2, 8, 20, 0.26) !important;
}

html.dark #page-operators #operatorStats > div,
html.dark #operatorsGrid > div:not(.col-span-full) {
  background: rgba(16, 26, 40, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 14px 30px rgba(2, 8, 20, 0.22) !important;
}

html.dark #operatorsGrid > div:not(.col-span-full):hover {
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 18px 38px rgba(2, 8, 20, 0.28) !important;
}

html.dark #page-settings .bg-surface-800\/60,
html.dark #page-account .bg-surface-800\/60,
html.dark #page-settings .bg-surface-900,
html.dark #page-account .bg-surface-900,
html.dark #page-stats > .grid.md\:grid-cols-3.mb-5 > div,
html.dark #page-stats > .grid.lg\:grid-cols-3.mb-6 > div,
html.dark #page-stats > .bg-surface-800\/60:last-child {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 14px 30px rgba(2, 8, 20, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MACHINE DETAILS — MOBILE WIDTH + LIGHT MODE REFINEMENT v2.1
   ═══════════════════════════════════════════════════════════════════════ */


html:not(.dark) #page-nodes .bg-surface-800\/60,
html:not(.dark) #page-nodes .bg-surface-900\/60,
html:not(.dark) #page-nodes .bg-surface-900\/95 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 248, 252, 0.93)) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html:not(.dark) #nodeSelect {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.95)) !important;
  color: #0f172a !important;
  border-color: rgba(125, 211, 252, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 14px 30px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(56, 189, 248, 0.04) !important;
}

html:not(.dark) #nodeSelect:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.98)) !important;
  border-color: rgba(14, 165, 233, 0.36) !important;
}

html:not(.dark) #nodeSelect:focus {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(14, 165, 233, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 0 0 4px rgba(56, 189, 248, 0.12),
    0 18px 34px rgba(15, 23, 42, 0.1) !important;
}

html:not(.dark) #detailInspectorBtn,
html:not(.dark) #page-nodes .chart-range-btn,
html:not(.dark) #page-nodes .node-history-export,
html:not(.dark) #page-nodes .node-history-zoom button,
html:not(.dark) #page-nodes #varSelectorWrap > button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.94)) !important;
  color: #0f172a !important;
  border-color: rgba(125, 211, 252, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 22px rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark) #detailInspectorBtn {
  color: #0369a1 !important;
}

html:not(.dark) #detailInspectorBtn:hover,
html:not(.dark) #page-nodes .chart-range-btn:hover,
html:not(.dark) #page-nodes .node-history-export:hover,
html:not(.dark) #page-nodes .node-history-zoom button:hover,
html:not(.dark) #page-nodes #varSelectorWrap > button:hover {
  color: #0369a1 !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 14px 28px rgba(15, 23, 42, 0.08) !important;
}

@media (max-width: 768px) {
  body.nodes-page-active #page-nodes,
  #page-nodes {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.nodes-page-active #page-nodes.page-visible,
  #page-nodes.page-visible {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-inline: clamp(18px, 4.8vw, 22px) !important;
    padding-left: clamp(18px, 4.8vw, 22px) !important;
    padding-right: clamp(18px, 4.8vw, 22px) !important;
  }

  #page-nodes > .mb-5.flex.flex-col.sm\:flex-row.sm\:items-center.sm\:justify-between,
  #page-nodes #nodeDetailEmpty,
  #page-nodes #nodeDetailPanel .node-detail-sub-overlay {
    padding-inline: 0 !important;
  }

  #page-nodes #nodeDetailPanel {
    width: 100% !important;
  }

  #page-nodes #nodeDetailPanel > .mb-5,
  #page-nodes #nodeDetailPanel > .grid.gap-5,
  #page-nodes #nodeDetailPanel > div:last-of-type.rounded-2xl {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #page-nodes #nodeDetailPanel .rounded-2xl {
    border-radius: 18px !important;
    padding: 16px !important;
  }

  #page-nodes > .mb-5.flex.flex-col.sm\:flex-row.sm\:items-center.sm\:justify-between {
    gap: 12px !important;
    align-items: stretch !important;
  }

  #page-nodes #nodeSelect {
    width: 100% !important;
    min-width: 0 !important;
  }

  #page-nodes #nodeDetailPanel .flex.items-center.justify-between.mb-3 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  #page-nodes #detailInspectorBtn {
    align-self: flex-start !important;
  }
}

/* ── GLOBAL TAB PADDING CONSISTENCY (final override) ───────────────── */
:root {
  --acxa-tab-pad-x-mobile: 16px;
  --acxa-tab-pad-y-mobile: 14px;
  --acxa-tab-pad-x-tablet: 30px;
  --acxa-tab-pad-y-tablet: 18px;
  --acxa-tab-pad-x-desktop: clamp(44px, 4.2vw, 76px);
  --acxa-tab-pad-y-desktop: clamp(20px, 1.8vw, 30px);
}

#page-live,
#page-nodes,
#page-alerts,
#page-operators,
#page-shifts,
#page-reports,
#page-stats,
#page-ai,
#page-settings,
#page-subscription,
#page-account {
  box-sizing: border-box !important;
  padding-top: var(--acxa-tab-pad-y-mobile) !important;
  padding-right: var(--acxa-tab-pad-x-mobile) !important;
  padding-bottom: calc(var(--acxa-tab-pad-y-mobile) + 8px) !important;
  padding-left: var(--acxa-tab-pad-x-mobile) !important;
}

@media (min-width: 769px) {
  #page-live,
  #page-nodes,
  #page-alerts,
  #page-operators,
  #page-shifts,
  #page-reports,
  #page-stats,
  #page-ai,
  #page-settings,
  #page-subscription,
  #page-account {
    padding-top: var(--acxa-tab-pad-y-tablet) !important;
    padding-right: var(--acxa-tab-pad-x-tablet) !important;
    padding-bottom: calc(var(--acxa-tab-pad-y-tablet) + 10px) !important;
    padding-left: var(--acxa-tab-pad-x-tablet) !important;
  }
}

@media (min-width: 1200px) {
  #page-live,
  #page-nodes,
  #page-alerts,
  #page-operators,
  #page-shifts,
  #page-reports,
  #page-stats,
  #page-ai,
  #page-settings,
  #page-subscription,
  #page-account {
    padding-top: var(--acxa-tab-pad-y-desktop) !important;
    padding-right: var(--acxa-tab-pad-x-desktop) !important;
    padding-bottom: calc(var(--acxa-tab-pad-y-desktop) + 10px) !important;
    padding-left: var(--acxa-tab-pad-x-desktop) !important;
  }
}

@media (max-width: 768px) {
  body.nodes-page-active #page-nodes.page-visible,
  #page-nodes.page-visible {
    padding-inline: clamp(18px, 4.8vw, 22px) !important;
    padding-left: clamp(18px, 4.8vw, 22px) !important;
    padding-right: clamp(18px, 4.8vw, 22px) !important;
  }
}

/* ── PAGE HEADER TYPOGRAPHY PARITY (match Reports) ──────────────────── */
:root {
  --acxa-reports-title-size: 1.25rem;
  --acxa-reports-subtitle-size: 0.875rem;
  --acxa-reports-title-line: 1.2;
  --acxa-reports-subtitle-line: 1.4;
}

#reportsPageContent > .mb-6 > h2,
#page-nodes > .mb-5 > div > h2,
#page-alerts > .mb-6 > h2,
#page-operators > div > .flex:first-child > div:first-child > h2,
#page-shifts > div > .flex:first-child > div:first-child > h2,
#page-stats > .mb-5 > div > h2,
#page-settings > .max-w-6xl > .mb-6 > h2,
#subscriptionPageContent .sub-page-header > div > h2 {
  line-height: var(--acxa-reports-title-line) !important;
}

#reportsPageContent > .mb-6 > p,
#page-nodes > .mb-5 > div > p,
#page-alerts > .mb-6 > p,
#page-operators > div > .flex:first-child > div:first-child > h2 + p,
#page-shifts > div > .flex:first-child > div:first-child > h2 + p,
#page-stats > .mb-5 > div > p,
#page-settings > .max-w-6xl > .mb-6 > p,
#subscriptionPageContent .sub-page-header > div > h2 + p {
  line-height: var(--acxa-reports-subtitle-line) !important;
}

@media (min-width: 769px) {
  #reportsPageContent > .mb-6 > h2,
  #page-nodes > .mb-5 > div > h2,
  #page-alerts > .mb-6 > h2,
  #page-operators > div > .flex:first-child > div:first-child > h2,
  #page-shifts > div > .flex:first-child > div:first-child > h2,
  #page-stats > .mb-5 > div > h2,
  #page-settings > .max-w-6xl > .mb-6 > h2,
  #subscriptionPageContent .sub-page-header > div > h2 {
    font-size: var(--acxa-reports-title-size) !important;
  }

  #reportsPageContent > .mb-6 > p,
  #page-nodes > .mb-5 > div > p,
  #page-alerts > .mb-6 > p,
  #page-operators > div > .flex:first-child > div:first-child > h2 + p,
  #page-shifts > div > .flex:first-child > div:first-child > h2 + p,
  #page-stats > .mb-5 > div > p,
  #page-settings > .max-w-6xl > .mb-6 > p,
  #subscriptionPageContent .sub-page-header > div > h2 + p {
    font-size: var(--acxa-reports-subtitle-size) !important;
  }
}

@media (max-width: 768px) {
  #reportsPageContent > .mb-6 > h2,
  #page-nodes > .mb-5 > div > h2,
  #page-alerts > .mb-6 > h2,
  #page-operators > div > .flex:first-child > div:first-child > h2,
  #page-shifts > div > .flex:first-child > div:first-child > h2,
  #page-stats > .mb-5 > div > h2,
  #page-settings > .max-w-6xl > .mb-6 > h2,
  #subscriptionPageContent .sub-page-header > div > h2 {
    font-size: clamp(1.24rem, 5.6vw, 1.6rem) !important;
  }

  #reportsPageContent > .mb-6 > p,
  #page-nodes > .mb-5 > div > p,
  #page-alerts > .mb-6 > p,
  #page-operators > div > .flex:first-child > div:first-child > h2 + p,
  #page-shifts > div > .flex:first-child > div:first-child > h2 + p,
  #page-stats > .mb-5 > div > p,
  #page-settings > .max-w-6xl > .mb-6 > p,
  #subscriptionPageContent .sub-page-header > div > h2 + p {
    font-size: 0.92rem !important;
  }
}