/* ═══════════════════════════════════════════════════════════════════════
   ZPL DESIGN SYSTEM v1.0 — Unified Terminal-Style Theme (2026-04-01)
   Based on Zerodha Connect terminal aesthetic
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  /* Backgrounds */
  --zpl-bg: #f8fafc;
  --zpl-bg2: #f0f4f8;
  --zpl-surface: #ffffff;
  --zpl-surface2: #f8fafc;

  /* Header / dark areas */
  --zpl-hdr: #1a2332;
  --zpl-hdr2: #1f2d40;

  /* Accent */
  --zpl-acc: #1d72e8;
  --zpl-acc-bg: rgba(29,114,232,.08);
  --zpl-acc-bdr: rgba(29,114,232,.18);

  /* Semantic */
  --zpl-good: #00a854;
  --zpl-good-bg: rgba(0,168,84,.10);
  --zpl-good-bdr: rgba(0,168,84,.20);
  --zpl-bad: #f5222d;
  --zpl-bad-bg: rgba(245,34,45,.08);
  --zpl-bad-bdr: rgba(245,34,45,.20);
  --zpl-warn: #ad6800;
  --zpl-warn-bg: rgba(173,104,0,.08);
  --zpl-warn-bdr: rgba(173,104,0,.20);

  /* Text */
  --zpl-ink: #1e293b;
  --zpl-mid: #475569;
  --zpl-muted: #94a3b8;

  /* Borders */
  --zpl-line: #e2e8f0;

  /* Sizing */
  --zpl-h: 30px;
  --zpl-r: 6px;
  --zpl-r-lg: 8px;
  --zpl-fs: 0.78rem;

  /* Fonts */
  --zpl-font: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --zpl-mono: 'SF Mono', 'Consolas', 'Fira Mono', 'JetBrains Mono', monospace;
}

[data-zpl-theme="light"] {
  color-scheme: light;
}

[data-zpl-theme="dark"] {
  color-scheme: dark;

  /* Backgrounds */
  --zpl-bg: #0f141c;
  --zpl-bg2: #151d28;
  --zpl-surface: #1a2431;
  --zpl-surface2: #202c3d;

  /* Header / dark areas */
  --zpl-hdr: #0b1018;
  --zpl-hdr2: #131c28;

  /* Accent */
  --zpl-acc: #2997ff;
  --zpl-acc-bg: rgba(41,151,255,.18);
  --zpl-acc-bdr: rgba(41,151,255,.35);

  /* Semantic */
  --zpl-good: #3ddc97;
  --zpl-good-bg: rgba(61,220,151,.14);
  --zpl-good-bdr: rgba(61,220,151,.35);
  --zpl-bad: #ff6b6b;
  --zpl-bad-bg: rgba(255,107,107,.15);
  --zpl-bad-bdr: rgba(255,107,107,.34);
  --zpl-warn: #ffbe55;
  --zpl-warn-bg: rgba(255,190,85,.15);
  --zpl-warn-bdr: rgba(255,190,85,.32);

  /* Text */
  --zpl-ink: #e5eef9;
  --zpl-mid: #b8c8dd;
  --zpl-muted: #8fa4bf;

  /* Borders */
  --zpl-line: #2e3d52;
}


/* ═══════════════════════════════════════════
   TOOLBAR — dark header bar
   ═══════════════════════════════════════════ */
.zpl-toolbar {
  background: var(--zpl-hdr);
  color: #c8d4e6;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--zpl-r-lg) var(--zpl-r-lg) 0 0;
  flex-wrap: wrap;
  font-size: 0.73rem;
}
.zpl-toolbar-flat {
  border-radius: 0;
}
.zpl-toolbar-brand {
  font-weight: 800;
  font-size: 0.72rem;
  color: #e8f0fe;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.zpl-toolbar-sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}
.zpl-toolbar .zpl-kv .k {
  color: rgba(200,212,230,.45);
}
.zpl-toolbar .zpl-kv .v {
  color: #e2ecff;
}


/* ═══════════════════════════════════════════
   TABS — underline-only active state
   ═══════════════════════════════════════════ */
.zpl-tabs {
  list-style: none;
  margin: 0;
  padding: 0 0.3rem;
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--zpl-line);
  background: var(--zpl-surface);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.zpl-tabs::-webkit-scrollbar { display: none; }
.zpl-tabs .nav-item { flex-shrink: 0; }
.zpl-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.45rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--zpl-muted);
  margin-bottom: -2px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  transition: color 0.15s, border-color 0.15s;
}
.zpl-tabs .nav-link:hover {
  color: var(--zpl-ink);
  background: none;
}
.zpl-tabs .nav-link.active {
  color: var(--zpl-acc);
  border-bottom-color: var(--zpl-acc);
  background: none;
}
/* Tab number badge */
.zpl-tab-num {
  font-family: var(--zpl-mono);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.04rem 0.26rem;
  border-radius: 3px;
  background: var(--zpl-bg2);
  color: var(--zpl-muted);
  flex-shrink: 0;
}
.zpl-tabs .nav-link.active .zpl-tab-num {
  background: var(--zpl-acc-bg);
  color: var(--zpl-acc);
}

/* Sub-tabs (pills-style with underline) */
.zpl-subtabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--zpl-line);
}
.zpl-subtabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--zpl-r) var(--zpl-r) 0 0;
  padding: 0.35rem 0.75rem;
  margin-bottom: -1px;
  font-size: 0.71rem;
  font-weight: 600;
  color: var(--zpl-muted);
  background: none;
  transition: color 0.15s, background 0.15s;
}
.zpl-subtabs .nav-link:hover {
  color: var(--zpl-ink);
  background: var(--zpl-acc-bg);
}
.zpl-subtabs .nav-link.active {
  color: var(--zpl-acc);
  border-bottom-color: var(--zpl-acc);
  background: var(--zpl-acc-bg);
}


/* ═══════════════════════════════════════════
   CARDS / PANELS
   ═══════════════════════════════════════════ */
.zpl-card {
  border: 1px solid var(--zpl-line);
  border-radius: var(--zpl-r);
  background: var(--zpl-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
}
.zpl-card-header {
  background: var(--zpl-surface2);
  border-bottom: 1px solid var(--zpl-line);
  padding: 0.5rem 0.85rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--zpl-mid);
}
.zpl-card-body {
  padding: 0.85rem;
}

/* Tab content wrapper */
.zpl-tab-content {
  border: 1px solid var(--zpl-line);
  border-top: none;
  border-radius: 0 0 var(--zpl-r) var(--zpl-r);
  padding: 0.85rem;
  background: var(--zpl-surface);
}
.zpl-pane {
  padding: 0.9rem;
  border: 1px solid var(--zpl-line);
  border-radius: var(--zpl-r-lg);
  background: var(--zpl-surface);
  box-shadow: 0 2px 10px rgba(12,26,53,.05);
}


/* ═══════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════ */
.zpl-table {
  width: 100%;
  font-size: 0.73rem;
  border-color: var(--zpl-line);
  border-collapse: collapse;
}
.zpl-table thead th {
  background: var(--zpl-surface2);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--zpl-mid);
  border-bottom: 1px solid var(--zpl-line);
  padding: 0.45rem 0.6rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.zpl-table td {
  padding: 0.38rem 0.6rem;
  vertical-align: middle;
  border-color: var(--zpl-line);
  border-bottom: 1px solid var(--zpl-line);
}
.zpl-table tbody tr:hover td {
  background: var(--zpl-acc-bg);
}
/* Table inside a shell wrapper */
.zpl-table-shell {
  border: 1px solid var(--zpl-line);
  border-radius: var(--zpl-r);
  overflow: hidden;
  background: var(--zpl-surface);
}
.zpl-table-shell .zpl-table { margin-bottom: 0; }
.zpl-table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 400px;
}
/* Monospace number cells */
.zpl-table .c-num {
  font-family: var(--zpl-mono);
  font-size: 0.73rem;
  text-align: right;
}
.zpl-table .c-sec {
  font-family: var(--zpl-mono);
  font-weight: 600;
  color: var(--zpl-ink);
  font-size: 0.71rem;
}


/* ═══════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════ */
.zpl-form .form-control,
.zpl-form .form-control-sm,
.zpl-form .form-select,
.zpl-form .form-select-sm,
.zpl-page .form-control,
.zpl-page .form-control-sm,
.zpl-page .form-select,
.zpl-page .form-select-sm {
  height: var(--zpl-h) !important;
  min-height: var(--zpl-h) !important;
  padding: 0.25rem 0.55rem !important;
  font-size: 0.75rem !important;
  border-radius: var(--zpl-r) !important;
  border-color: var(--zpl-line) !important;
  background-color: var(--zpl-surface) !important;
  color: var(--zpl-ink) !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}
.zpl-form .form-control:focus,
.zpl-form .form-select:focus,
.zpl-page .form-control:focus,
.zpl-page .form-select:focus {
  border-color: var(--zpl-acc) !important;
  box-shadow: 0 0 0 2px rgba(29,114,232,.15) !important;
}
textarea.form-control {
  height: auto !important;
  min-height: 60px !important;
}

/* Labels */
.zpl-form .form-label,
.zpl-form label.form-label,
.zpl-page .form-label,
.zpl-page label.form-label {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zpl-muted);
  margin-bottom: 0.25rem !important;
  display: block;
}
.zpl-form .form-check-label,
.zpl-page .form-check-label {
  font-size: 0.73rem !important;
  font-weight: 400 !important;
  text-transform: none;
  letter-spacing: 0;
  color: var(--zpl-mid);
}


/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.zpl-page .btn,
.zpl-page .btn-sm,
.zpl-form .btn,
.zpl-form .btn-sm {
  height: var(--zpl-h) !important;
  min-height: var(--zpl-h) !important;
  padding: 0 0.75rem !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  border-radius: var(--zpl-r) !important;
  line-height: 1 !important;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3rem;
  transition: filter 0.15s, opacity 0.15s;
}
.zpl-page .btn:hover,
.zpl-form .btn:hover {
  filter: brightness(.94);
}

/* Primary */
.zpl-btn-primary,
.zpl-page .btn-oracle-primary,
.zpl-page .btn-primary {
  background: var(--zpl-acc) !important;
  color: #fff !important;
  border-color: var(--zpl-acc) !important;
}
/* Secondary */
.zpl-btn-secondary,
.zpl-page .btn-oracle,
.zpl-page .btn-secondary {
  background: var(--zpl-surface2) !important;
  color: var(--zpl-ink) !important;
  border: 1px solid var(--zpl-line) !important;
}
/* Success */
.zpl-page .btn-success {
  background: var(--zpl-good) !important;
  color: #fff !important;
  border-color: var(--zpl-good) !important;
}
/* Danger */
.zpl-page .btn-danger {
  background: var(--zpl-bad) !important;
  color: #fff !important;
  border-color: var(--zpl-bad) !important;
}
/* Warning */
.zpl-page .btn-warning {
  background: #f59e0b !important;
  color: #fff !important;
  border-color: #f59e0b !important;
}
/* Outline variants */
.zpl-page .btn-outline-primary {
  background: transparent !important;
  color: var(--zpl-acc) !important;
  border: 1px solid var(--zpl-acc) !important;
}
.zpl-page .btn-outline-secondary {
  background: transparent !important;
  color: var(--zpl-mid) !important;
  border: 1px solid var(--zpl-line) !important;
}
.zpl-page .btn-outline-success {
  background: transparent !important;
  color: #0d7a43 !important;
  border: 1px solid #0d7a43 !important;
}
.zpl-page .btn-outline-danger {
  background: transparent !important;
  color: #dc2626 !important;
  border: 1px solid #dc2626 !important;
}
.zpl-page .btn-outline-dark {
  background: transparent !important;
  color: var(--zpl-ink) !important;
  border: 1px solid var(--zpl-mid) !important;
}
.zpl-page .btn-outline-warning {
  background: transparent !important;
  color: var(--zpl-warn) !important;
  border: 1px solid var(--zpl-warn) !important;
}


/* ═══════════════════════════════════════════
   BADGES / PILLS
   ═══════════════════════════════════════════ */
.zpl-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.zpl-badge-ok, .zpl-badge-on, .zpl-badge-success {
  background: var(--zpl-good-bg);
  color: #0d7a43;
}
.zpl-badge-err, .zpl-badge-off, .zpl-badge-danger {
  background: var(--zpl-bad-bg);
  color: #dc2626;
}
.zpl-badge-warn, .zpl-badge-warning {
  background: var(--zpl-warn-bg);
  color: var(--zpl-warn);
}
.zpl-badge-info, .zpl-badge-active {
  background: var(--zpl-acc-bg);
  color: var(--zpl-acc);
}
.zpl-badge-muted, .zpl-badge-idle {
  background: var(--zpl-surface2);
  color: var(--zpl-muted);
}
/* Chip — bordered pill */
.zpl-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border-radius: 20px;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.zpl-chip-primary {
  background: var(--zpl-acc-bg);
  color: var(--zpl-acc);
  border: 1px solid var(--zpl-acc-bdr);
}
.zpl-chip-success {
  background: var(--zpl-good-bg);
  color: #0d7a43;
  border: 1px solid var(--zpl-good-bdr);
}
.zpl-chip-danger {
  background: var(--zpl-bad-bg);
  color: #dc2626;
  border: 1px solid var(--zpl-bad-bdr);
}
.zpl-chip-warning {
  background: var(--zpl-warn-bg);
  color: var(--zpl-warn);
  border: 1px solid var(--zpl-warn-bdr);
}


/* ═══════════════════════════════════════════
   KEY-VALUE DISPLAY
   ═══════════════════════════════════════════ */
.zpl-kv .k {
  font-size: 0.58rem;
  color: var(--zpl-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.zpl-kv .v {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--zpl-ink);
  line-height: 1.3;
}
/* KPI grid */
.zpl-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
}
.zpl-kpi-card {
  border: 1px solid var(--zpl-line);
  border-radius: var(--zpl-r);
  background: var(--zpl-surface);
  padding: 0.7rem 0.8rem;
}
.zpl-kpi-card .k {
  font-size: 0.61rem;
  color: var(--zpl-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}
.zpl-kpi-card .v {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--zpl-ink);
  line-height: 1.3;
}


/* ═══════════════════════════════════════════
   LABELS / KICKERS
   ═══════════════════════════════════════════ */
.zpl-label {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-bottom: 0.32rem;
  padding: 0.17rem 0.55rem;
  border: 1px solid var(--zpl-acc-bdr);
  border-radius: 4px;
  background: var(--zpl-acc-bg);
  color: var(--zpl-acc);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* ═══════════════════════════════════════════
   SHELL — toolbar + content wrapper
   ═══════════════════════════════════════════ */
.zpl-shell {
  border: 1px solid var(--zpl-line);
  border-radius: var(--zpl-r-lg);
  overflow: hidden;
  background: var(--zpl-surface);
}
.zpl-shell > .zpl-toolbar {
  border-radius: 0;
}
.zpl-shell-body {
  padding: 1rem;
  background: var(--zpl-bg);
}


/* ═══════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════ */
.zpl-progress-track {
  height: 3px;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.zpl-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
  background: var(--zpl-acc);
}
.zpl-progress-fill.good { background: var(--zpl-good); }
.zpl-progress-fill.bad { background: var(--zpl-bad); }
.zpl-progress-fill.warn { background: #f59e0b; }


/* ═══════════════════════════════════════════
   MODAL ENHANCEMENTS
   ═══════════════════════════════════════════ */
.zpl-modal .modal-content {
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15,23,42,.25);
}
.zpl-modal .modal-header {
  background: var(--zpl-hdr);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 0.7rem 1rem;
  color: #e8f0fe;
}
.zpl-modal .modal-header .modal-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e8f0fe;
}
.zpl-modal .modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
.zpl-modal .modal-body {
  padding: 1rem;
}
.zpl-modal .modal-footer {
  background: var(--zpl-surface2);
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--zpl-line);
}


/* ═══════════════════════════════════════════
   IFRAME TABS
   ═══════════════════════════════════════════ */
.zpl-iframe-tab { position: relative; }
.zpl-iframe-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.85rem;
  background: var(--zpl-hdr);
  border-radius: var(--zpl-r-lg) var(--zpl-r-lg) 0 0;
}
.zpl-iframe-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #c8d4e6;
  letter-spacing: 0.06em;
}
.zpl-iframe-open {
  font-size: 0.66rem;
  font-weight: 600;
  color: rgba(200,212,230,.6);
  text-decoration: none;
}
.zpl-iframe-open:hover { color: #e8f0fe; }
.zpl-iframe-embed {
  width: 100%;
  height: calc(100vh - 220px);
  min-height: 500px;
  border: none;
  border-radius: 0 0 var(--zpl-r-lg) var(--zpl-r-lg);
  background: var(--zpl-bg);
}
.zpl-iframe-loading {
  position: absolute;
  top: 50px; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zpl-bg);
  z-index: 1;
  font-size: 0.78rem;
  color: var(--zpl-muted);
  gap: 0.5rem;
}
.zpl-iframe-loading::before {
  content: '';
  width: 20px; height: 20px;
  border: 2px solid var(--zpl-line);
  border-top-color: var(--zpl-acc);
  border-radius: 50%;
  animation: zpl-spin .7s linear infinite;
}
.zpl-iframe-embed.sa-loaded + .zpl-iframe-loading { display: none; }


/* ═══════════════════════════════════════════
   ALERTS (terminal-style flash messages)
   ═══════════════════════════════════════════ */
.zpl-page .alert {
  font-size: 0.78rem;
  border-radius: var(--zpl-r);
  padding: 0.55rem 0.85rem;
  border-width: 1px;
}
.zpl-page .alert-success {
  background: var(--zpl-good-bg);
  border-color: var(--zpl-good-bdr);
  color: #0d7a43;
}
.zpl-page .alert-danger {
  background: var(--zpl-bad-bg);
  border-color: var(--zpl-bad-bdr);
  color: #dc2626;
}
.zpl-page .alert-warning {
  background: var(--zpl-warn-bg);
  border-color: var(--zpl-warn-bdr);
  color: var(--zpl-warn);
}
.zpl-page .alert-info {
  background: var(--zpl-acc-bg);
  border-color: var(--zpl-acc-bdr);
  color: var(--zpl-acc);
}


/* ═══════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════ */
.zpl-mono { font-family: var(--zpl-mono); }
.zpl-text-good { color: var(--zpl-good) !important; }
.zpl-text-bad { color: var(--zpl-bad) !important; }
.zpl-text-warn { color: var(--zpl-warn) !important; }
.zpl-text-muted { color: var(--zpl-muted) !important; }
.zpl-text-acc { color: var(--zpl-acc) !important; }
.zpl-bg-good { background: var(--zpl-good-bg) !important; }
.zpl-bg-bad { background: var(--zpl-bad-bg) !important; }
.zpl-bg-warn { background: var(--zpl-warn-bg) !important; }

.zpl-divider {
  border-top: 1px solid var(--zpl-line);
  margin: 0.75rem 0 0.65rem;
}
.zpl-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--zpl-muted);
  font-size: 0.78rem;
}

/* Scrollable container */
.zpl-scroll { overflow-x: auto; overflow-y: auto; }
.zpl-scroll-sm { max-height: 300px; }
.zpl-scroll-md { max-height: 400px; }
.zpl-scroll-lg { max-height: 600px; }


/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */
@keyframes zpl-spin { to { transform: rotate(360deg); } }
@keyframes zpl-pulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes zpl-blink { 50% { opacity: .3; } }
@keyframes zpl-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.zpl-pulse { animation: zpl-pulse 1.5s ease-in-out infinite; }
.zpl-blink { animation: zpl-blink 0.85s step-end infinite; }
.zpl-slide-up { animation: zpl-slide-up 0.22s ease; }

/* Live indicator dot */
.zpl-live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--zpl-good);
  animation: zpl-pulse 1.5s ease-in-out infinite;
  margin-right: 0.3rem;
}


/* ═══════════════════════════════════════════
   PAGE-LEVEL — apply to body or main wrapper
   ═══════════════════════════════════════════ */
.zpl-page {
  color: var(--zpl-ink);
  font-size: var(--zpl-fs);
  line-height: 1.5;
  background: var(--zpl-bg);
}
.zpl-page h5 { display: none; }

/* Content area */
.zpl-page .tab-pane {
  padding: 0.9rem;
  border: 1px solid var(--zpl-line);
  border-radius: var(--zpl-r-lg);
  background: var(--zpl-surface);
  box-shadow: 0 2px 10px rgba(12,26,53,.05);
}


/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .zpl-toolbar { padding: 0.4rem 0.65rem; gap: 0.4rem; }
  .zpl-toolbar-brand { font-size: 0.65rem; }
  .zpl-tabs .nav-link { padding: 0.4rem 0.6rem; font-size: 0.68rem; }
  .zpl-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .zpl-page .btn, .zpl-page .btn-sm { font-size: 0.68rem !important; padding: 0 0.55rem !important; }
}
@media (max-width: 576px) {
  .zpl-kpi-grid { grid-template-columns: 1fr 1fr; }
  .zpl-tabs { flex-wrap: wrap; }
}


/* ═══════════════════════════════════════════
   DARK MODE OVERRIDES — selector level
   ═══════════════════════════════════════════ */
[data-zpl-theme="dark"] .zpl-card { box-shadow: 0 1px 3px rgba(0,0,0,.4); }
[data-zpl-theme="dark"] .zpl-pane { box-shadow: 0 2px 10px rgba(0,0,0,.4); }
[data-zpl-theme="dark"] .zpl-modal .modal-content { box-shadow: 0 20px 60px rgba(0,0,0,.55); }
[data-zpl-theme="dark"] .zpl-modal .modal-header { border-bottom-color: var(--zpl-line); }
[data-zpl-theme="dark"] .zpl-page .tab-pane { box-shadow: none; }
[data-zpl-theme="dark"] .zpl-subtabs .nav-link { color: var(--zpl-mid); border-bottom-color: transparent; }
[data-zpl-theme="dark"] .zpl-subtabs .nav-link.active { color: var(--zpl-acc); border-bottom-color: var(--zpl-acc); background: var(--zpl-acc-bg); }
[data-zpl-theme="dark"] .zpl-subtabs .nav-link:hover { color: var(--zpl-ink); background: var(--zpl-surface2); }
[data-zpl-theme="dark"] .form-control, [data-zpl-theme="dark"] .form-select { background-color: var(--zpl-surface2); color: var(--zpl-ink); border-color: var(--zpl-line); }
[data-zpl-theme="dark"] .form-control:focus, [data-zpl-theme="dark"] .form-select:focus { background-color: var(--zpl-surface2); color: var(--zpl-ink); border-color: var(--zpl-acc); box-shadow: 0 0 0 2px rgba(41,151,255,.25); }
[data-zpl-theme="dark"] .form-control::placeholder { color: var(--zpl-muted); }
[data-zpl-theme="dark"] .nav-tabs { border-bottom-color: var(--zpl-line); }
[data-zpl-theme="dark"] .nav-tabs .nav-link { color: var(--zpl-mid); border-color: transparent; }
[data-zpl-theme="dark"] .nav-tabs .nav-link.active { color: var(--zpl-acc); background: var(--zpl-surface); border-color: var(--zpl-line) var(--zpl-line) var(--zpl-surface); }
[data-zpl-theme="dark"] .nav-tabs .nav-link:hover { color: var(--zpl-ink); border-color: var(--zpl-line) var(--zpl-line) transparent; }
[data-zpl-theme="dark"] .tab-content { background: var(--zpl-surface); border-color: var(--zpl-line); }
[data-zpl-theme="dark"] .tab-pane { background: var(--zpl-surface); }
[data-zpl-theme="dark"] .card { background: var(--zpl-surface); border-color: var(--zpl-line); }
[data-zpl-theme="dark"] .card-header { background: var(--zpl-surface2); border-bottom-color: var(--zpl-line); color: var(--zpl-mid); }
[data-zpl-theme="dark"] .card-body { background: var(--zpl-surface); color: var(--zpl-ink); }
[data-zpl-theme="dark"] .card-footer { background: var(--zpl-surface2); border-top-color: var(--zpl-line); }
[data-zpl-theme="dark"] .modal-content { background: var(--zpl-surface); border-color: var(--zpl-line); }
[data-zpl-theme="dark"] .modal-header { background: var(--zpl-surface2); border-bottom-color: var(--zpl-line); color: var(--zpl-ink); }
[data-zpl-theme="dark"] .modal-footer { background: var(--zpl-surface2); border-top-color: var(--zpl-line); }
[data-zpl-theme="dark"] .modal-body { background: var(--zpl-surface); color: var(--zpl-ink); }
[data-zpl-theme="dark"] .modal-title { color: var(--zpl-ink); }
[data-zpl-theme="dark"] .table { color: var(--zpl-ink); border-color: var(--zpl-line); }
[data-zpl-theme="dark"] .table thead th { background: var(--zpl-surface2); color: var(--zpl-mid); border-color: var(--zpl-line); }
[data-zpl-theme="dark"] .table td, [data-zpl-theme="dark"] .table th { border-color: var(--zpl-line); color: var(--zpl-ink); }
[data-zpl-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td { background-color: rgba(255,255,255,.03); }
[data-zpl-theme="dark"] .table-hover tbody tr:hover td { background-color: var(--zpl-acc-bg); }
[data-zpl-theme="dark"] .table-bordered td, [data-zpl-theme="dark"] .table-bordered th { border-color: var(--zpl-line); }
[data-zpl-theme="dark"] .dropdown-menu { background: var(--zpl-surface); border-color: var(--zpl-line); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
[data-zpl-theme="dark"] .dropdown-item { color: var(--zpl-ink); }
[data-zpl-theme="dark"] .dropdown-item:hover, [data-zpl-theme="dark"] .dropdown-item:focus { background: var(--zpl-acc-bg); color: var(--zpl-acc); }
[data-zpl-theme="dark"] .dropdown-divider { border-color: var(--zpl-line); }
[data-zpl-theme="dark"] .list-group-item { background: var(--zpl-surface); border-color: var(--zpl-line); color: var(--zpl-ink); }
[data-zpl-theme="dark"] .list-group-item:hover { background: var(--zpl-surface2); }
[data-zpl-theme="dark"] .list-group-item.active { background: var(--zpl-acc-bg); border-color: var(--zpl-acc-bdr); color: var(--zpl-acc); }
[data-zpl-theme="dark"] .badge.bg-light { background-color: var(--zpl-surface2) !important; color: var(--zpl-ink) !important; }
[data-zpl-theme="dark"] .badge.bg-secondary { background-color: var(--zpl-surface2) !important; color: var(--zpl-mid) !important; }
[data-zpl-theme="dark"] .alert-info { background: rgba(41,151,255,.12); border-color: rgba(41,151,255,.3); color: var(--zpl-ink); }
[data-zpl-theme="dark"] .alert-warning { background: rgba(255,190,85,.12); border-color: rgba(255,190,85,.3); color: var(--zpl-ink); }
[data-zpl-theme="dark"] .alert-success { background: rgba(61,220,151,.12); border-color: rgba(61,220,151,.3); color: var(--zpl-ink); }
[data-zpl-theme="dark"] .alert-danger { background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.3); color: var(--zpl-ink); }
[data-zpl-theme="dark"] .progress { background: var(--zpl-surface2); }
[data-zpl-theme="dark"] hr { border-color: var(--zpl-line); }
[data-zpl-theme="dark"] .text-muted { color: var(--zpl-muted) !important; }
[data-zpl-theme="dark"] .text-dark { color: var(--zpl-ink) !important; }
[data-zpl-theme="dark"] .bg-white { background-color: var(--zpl-surface) !important; }
[data-zpl-theme="dark"] .bg-light { background-color: var(--zpl-surface2) !important; }
[data-zpl-theme="dark"] .border { border-color: var(--zpl-line) !important; }
[data-zpl-theme="dark"] .border-top, [data-zpl-theme="dark"] .border-bottom, [data-zpl-theme="dark"] .border-start, [data-zpl-theme="dark"] .border-end { border-color: var(--zpl-line) !important; }
[data-zpl-theme="dark"] input[type="text"], [data-zpl-theme="dark"] input[type="number"], [data-zpl-theme="dark"] input[type="email"], [data-zpl-theme="dark"] input[type="password"], [data-zpl-theme="dark"] input[type="search"], [data-zpl-theme="dark"] input[type="date"], [data-zpl-theme="dark"] textarea, [data-zpl-theme="dark"] select { background-color: var(--zpl-surface2); color: var(--zpl-ink); border-color: var(--zpl-line); }
[data-zpl-theme="dark"] input::placeholder, [data-zpl-theme="dark"] textarea::placeholder { color: var(--zpl-muted); }
[data-zpl-theme="dark"] .btn-light { background: var(--zpl-surface2); border-color: var(--zpl-line); color: var(--zpl-ink); }
[data-zpl-theme="dark"] .btn-outline-secondary { border-color: var(--zpl-line); color: var(--zpl-mid); }
[data-zpl-theme="dark"] .btn-outline-secondary:hover { background: var(--zpl-surface2); color: var(--zpl-ink); }
[data-zpl-theme="dark"] .btn-outline-dark { border-color: var(--zpl-mid); color: var(--zpl-mid); }
[data-zpl-theme="dark"] .btn-outline-dark:hover { background: var(--zpl-surface2); color: var(--zpl-ink); }