/* =============================================================================
   TrafficPulse - Light dashboard theme (clean cards, navy accent)
   Loaded after styles.css; overrides the design tokens and key components.
   ============================================================================= */

:root {
  --bg-base: #eceef3;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f7f8fb;
  --bg-glass-input: #ffffff;

  --border-glass: #e4e7ee;
  --border-glass-bright: #d3d8e2;
  --border-glass-glow: rgba(43, 42, 134, 0.25);

  --primary: #2b2a86;
  --primary-light: #4745b5;
  --primary-cyan: #4745b5;
  --primary-cyan-light: #6b69d6;
  --primary-gradient: #2b2a86;
  --primary-gradient-hover: #1f1e6b;

  --success: #16a34a;
  --success-bg: #e8f7ee;
  --success-border: #bde5cb;
  --warning: #d97706;
  --warning-bg: #fdf3e3;
  --warning-border: #f3d9a8;
  --danger: #dc2646;
  --danger-bg: #fdecef;
  --danger-border: #f5c3cc;

  --text-main: #14161f;
  --text-muted: #5f6577;
  --text-dim: #8a90a0;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --shadow-subtle: 0 1px 2px rgba(20, 22, 31, 0.05);
  --shadow-card: 0 1px 2px rgba(20, 22, 31, 0.04), 0 4px 14px rgba(20, 22, 31, 0.05);
  --shadow-glow: 0 6px 18px rgba(43, 42, 134, 0.22);
}

body {
  background: var(--bg-base);
  color: var(--text-main);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body::before, body::after { display: none !important; }

/* ---- Top bar ------------------------------------------------------------ */
.navbar {
  background: #ffffff;
  border-bottom: 1px solid var(--border-glass);
  box-shadow: none;
  backdrop-filter: none;
}
.brand-title { color: var(--text-main); font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.01em; }
.brand-accent { color: var(--primary); background: none; -webkit-text-fill-color: var(--primary); }
.brand-icon-wrap { background: var(--primary); color: #fff; box-shadow: none; border-radius: 10px; }
.version-badge { background: #eef0fb; color: var(--primary); border: 1px solid #d9dcf5; }
.live-status-chip { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }

.btn-logout {
  background: #fff; color: var(--text-muted); border: 1px solid var(--border-glass-bright);
}
.btn-logout:hover { background: #f7f8fb; color: var(--text-main); }

/* ---- Cards -------------------------------------------------------------- */
.glass-card {
  background: #ffffff;
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
  border-radius: var(--radius-lg);
  color: var(--text-main);
}
.glass-card::before { display: none; }
.glass-card:hover { background: #ffffff; border-color: var(--border-glass-bright); }

.stat-card { padding: 1.1rem 1.25rem; }
.stat-label { color: var(--text-muted); font-size: 0.8rem; font-weight: 500; }
.stat-value { color: var(--text-main); font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; }
.stat-sub { color: var(--text-dim); font-size: 0.85rem; font-weight: 500; }
.stat-footer-action, .stat-progress-sub { color: var(--text-muted); }
.stat-icon-wrap { background: #fff !important; border: 1px solid var(--border-glass); color: var(--text-main); box-shadow: none; }
.stat-mini-bar { background: #e9ecf3; }
#statMiniBarFill { background: var(--primary) !important; }

/* Inline colours that were tuned for a dark background */
[style*="color:#6ee7b7"], [style*="color: #6ee7b7"] { color: var(--success) !important; }
[style*="color:#facc15"], [style*="color: #facc15"] { color: var(--warning) !important; }
[style*="color:#67e8f9"], [style*="color: #67e8f9"] { color: var(--primary-light) !important; }
[style*="color:#a5b4fc"], [style*="color: #a5b4fc"] { color: var(--primary-light) !important; }
[style*="color:#fff"]:not(.btn):not(button), [style*="color: #fff"]:not(.btn):not(button), [style*="color:white"]:not(.btn):not(button), [style*="color: white"]:not(.btn):not(button) { color: var(--text-main) !important; }

/* ---- Buttons ------------------------------------------------------------ */
.btn-primary {
  background: var(--primary); color: #fff; border: 1px solid var(--primary);
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover { background: var(--primary-gradient-hover); }
.btn-secondary, .btn-outline {
  background: #fff; color: var(--text-main); border: 1px solid var(--border-glass-bright);
}
.btn-secondary:hover, .btn-outline:hover { background: #f7f8fb; }
.link-btn { color: var(--primary-light); }

/* ---- Forms -------------------------------------------------------------- */
.form-control, .form-select, input[type="text"], input[type="url"], input[type="number"],
input[type="password"], textarea, select {
  background: #fff; color: var(--text-main); border: 1px solid var(--border-glass-bright);
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(43, 42, 134, 0.12); outline: none;
}
.form-label { color: var(--text-main); }
.form-hint { color: var(--text-dim); }
::placeholder { color: #a3a9b8; }
code { background: #eef0fb; color: var(--primary); padding: 0.05rem 0.35rem; border-radius: 4px; }

.template-chip { background: #fff; color: var(--text-muted); border: 1px solid var(--border-glass-bright); }
.template-chip:hover { background: #eef0fb; color: var(--primary); border-color: #c9cdf0; }

/* ---- Tables / lists ----------------------------------------------------- */
table { color: var(--text-main); }
th { background: #f7f8fb; color: var(--text-muted); border-bottom: 1px solid var(--border-glass); }
td { border-bottom: 1px solid #eef0f4; }
tr:hover td { background: #fafbfd; }

/* ---- Modals ------------------------------------------------------------- */
.modal-overlay, .modal-backdrop { background: rgba(20, 22, 31, 0.45); backdrop-filter: blur(2px); }
.modal-content, .modal-card, .modal {
  background: #fff; color: var(--text-main); border: 1px solid var(--border-glass);
  box-shadow: 0 24px 60px rgba(20, 22, 31, 0.18);
}
.modal-header, .modal-footer { border-color: var(--border-glass); }

/* ---- Status chips ------------------------------------------------------- */
.badge-running, .status-running { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge-paused, .status-paused { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.badge-failed, .status-failed { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }

h1, h2, h3, h4 { color: var(--text-main); font-family: 'Inter', sans-serif; letter-spacing: -0.01em; }
a { color: var(--primary-light); }
::-webkit-scrollbar-thumb { background: #cfd4df; }
::-webkit-scrollbar-track { background: transparent; }

.btn-primary, .btn-primary * { color: #fff !important; }

/* Inline dark panels (chart wells, filter pills, hint boxes) */
[style*="rgba(15, 23, 42"], [style*="rgba(15,23,42"], [style*="rgba(8, 12, 22"], [style*="rgba(30, 41, 59"] {
  background: #f7f8fb !important;
  border-color: var(--border-glass) !important;
  color: var(--text-main);
}
.status-filter-pills { background: #f1f3f8 !important; }

/* Light-on-dark text leftovers */
.section-title, .modal-title, .campaign-name { color: var(--text-main) !important; }
.badge-chip { background: #eef0fb; color: var(--primary); border: 1px solid #d9dcf5; }
.filter-pill { color: var(--text-muted); }
.filter-pill.active { background: #fff; color: var(--primary); box-shadow: var(--shadow-subtle); }
[style*="color:#e2e8f0"], [style*="color: #e2e8f0"], [style*="color:#cbd5e1"], [style*="color: #cbd5e1"],
[style*="color:#f1f5f9"], [style*="color: #f1f5f9"], [style*="color:#f8fafc"], [style*="color: #f8fafc"],
[style*="color:#e0e7ff"], [style*="color: #e0e7ff"], [style*="color:#c7d2fe"], [style*="color: #c7d2fe"] {
  color: var(--text-main) !important;
}

/* Selected option buttons / cards in the campaign + settings modals */
.btn-secondary.active, .btn-secondary.btn-sm.active, .delivery-mode-btn.active {
  background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important;
}
.btn-secondary.active *, .delivery-mode-btn.active * { color: #fff !important; }
strong[style*="a7f3d0"], [style*="color:#a7f3d0"], [style*="color: #a7f3d0"] { color: var(--success) !important; }
#loginPassword, .login-card .form-control { background: #fff !important; color: var(--text-main) !important; }

/* Modals */
.modal-dialog { background: #fff !important; color: var(--text-main); border: 1px solid var(--border-glass); box-shadow: 0 24px 60px rgba(20, 22, 31, 0.18); }
.modal-header, .modal-footer { background: #fff !important; border-color: var(--border-glass) !important; }
.modal-header h2, .modal-header h3, .modal-header * { color: var(--text-main); }
.modal-header .modal-subtitle, .modal-header p { color: var(--text-muted); }
.modal-template-bar { background: #f7f8fb !important; border-color: var(--border-glass) !important; color: var(--text-muted); }
.modal-body label, .modal-body .form-label, .modal-body h4, .modal-body strong { color: var(--text-main); }
.engine-toggle-wrap { background: #f1f3f8 !important; border-color: var(--border-glass) !important; }
.engine-pill { color: var(--text-muted); }
.engine-pill.active { background: #fff !important; color: var(--primary) !important; box-shadow: var(--shadow-subtle); }
.engine-pill.active * { color: var(--primary) !important; }
.country-grid { background: #f7f8fb !important; border-color: var(--border-glass) !important; }
.modal-close, .btn-close { color: var(--text-muted); }

/* Table header (live stream / logs): readable on light cards */
.data-table thead th, .data-table th {
  background: #f1f3f8 !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border-glass) !important;
  backdrop-filter: none;
}