/* ══════════════════════════════════════════════════════════════════
   chazerai-newui-skin.css
   ══════════════════════════════════════════════════════════════════
   Lovable-inspired dark violet theme applied to the existing dashboard.

   Loaded via <link> injected into DASHBOARD_HTML — no HTML changes
   needed. All 18 sections keep their features; only visual styling
   changes.

   Load order: this file is loaded AFTER the dashboard's own <style>
   block, so all rules here override the defaults.
   ══════════════════════════════════════════════════════════════════ */

/* ─── 1. CSS variable overrides ───────────────────────────────────
   Redefine the existing dashboard's palette using Lovable's colors.
   Every :root variable used elsewhere in the dashboard gets remapped. */
:root {
  /* Backgrounds — deeper black with violet undertone */
  --bg:            #07060d !important;   /* page bg */
  --bg-alt:        #141122 !important;   /* sidebar */
  --bg-card:       #141122 !important;   /* card surface */
  --bg-hover:      #1b1730 !important;   /* hover */

  /* Borders — Lovable's subtle violet-tinted borders */
  --border:        #1d1830 !important;
  --border-strong: #2d2547 !important;

  /* Text — high contrast */
  --text:          #ffffff !important;
  --text-muted:    #b0a9c6 !important;
  --text-subtle:   #756e8f !important;

  /* Accents — Lovable violet */
  --accent:        #7c5cff !important;
  --accent-blue:        #7c5cff !important;
  --accent-blue-soft:   rgba(124,92,255,0.12) !important;
  --accent-green:       #4ba86b !important;
  --accent-green-soft:  rgba(75,168,107,0.12) !important;
  --accent-red:         #f04452 !important;
  --accent-red-soft:    rgba(240,68,82,0.12) !important;
  --accent-yellow:      #f0b23c !important;
  --accent-yellow-soft: rgba(240,178,60,0.12) !important;
  --accent-purple:      #7c5cff !important;

  /* Glass / shadows */
  --glass-bg:      rgba(20,17,34,0.72) !important;
  --glass-border:  rgba(124,92,255,0.10) !important;
  --glow-blue:     0 0 0 1px rgba(124,92,255,0.25), 0 8px 30px rgba(124,92,255,0.10) !important;

  /* Elevation */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.5) !important;
  --shadow-md:     0 2px 10px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.5) !important;
  --shadow-lg:     0 20px 50px rgba(0,0,0,0.55) !important;

  /* Radii — Lovable uses smaller, sharper radii */
  --r-sm: 6px !important;
  --r-md: 8px !important;
  --r-lg: 10px !important;
  --r-xl: 12px !important;
}

/* Light theme override */
[data-theme="light"] {
  --bg:            #ffffff !important;
  --bg-alt:        #f7f8fa !important;
  --bg-card:       #ffffff !important;
  --bg-hover:      #f1f3f6 !important;
  --border:        #e7eaf0 !important;
  --border-strong: #d6dbe4 !important;
  --text:          #0b1220 !important;
  --text-muted:    #3f4859 !important;
  --text-subtle:   #6b7592 !important;
  --accent:        #3b6ef5 !important;
  --accent-blue:   #3b6ef5 !important;
  --accent-blue-soft: rgba(59,110,245,0.10) !important;
  --accent-purple: #3b6ef5 !important;
}

/* Blue theme — Lovable's "Signal blue" palette */
[data-theme="blue"] {
  --bg:            #05070d !important;
  --bg-alt:        #0a0e1a !important;
  --bg-card:       #0f1523 !important;
  --bg-hover:      #161d2e !important;
  --border:        #1a2138 !important;
  --border-strong: #2a3352 !important;
  --text:          #ffffff !important;
  --text-muted:    #a8b1c6 !important;
  --text-subtle:   #6b7592 !important;
  --accent:        #4d7cfe !important;
  --accent-blue:   #4d7cfe !important;
  --accent-blue-soft: rgba(77,124,254,0.12) !important;
  --accent-green:  #4ba86b !important;
  --accent-red:    #f04452 !important;
  --accent-yellow: #f0b23c !important;
  --accent-purple: #4d7cfe !important;
  --glass-bg:      rgba(15,21,35,0.72) !important;
  --glass-border:  rgba(77,124,254,0.10) !important;
}

/* ─── 2. Fonts (already Inter + JetBrains Mono — Lovable match) ─── */
body {
  font-feature-settings: "cv02","cv03","cv04","cv11" !important;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: -0.005em !important;
}

/* ─── 3. Sidebar — cleaner, more Lovable-like ───────────────────── */
.sidebar,
aside.sidebar,
nav.sidebar {
  background: var(--bg-alt) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.sidebar-header,
.brand,
.logo-wrap {
  height: 56px !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 20px !important;
}

.brand-logo,
.logo-mark {
  background: var(--accent) !important;
  color: #ffffff !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
}

.brand-text,
.brand-name,
.logo-text {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  font-size: 16px !important;
}

.nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
}
.nav-item:hover {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}
.nav-item.active,
.nav-item.is-active {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
  border-left-color: var(--accent) !important;
  box-shadow: none !important;
}

.nav-icon {
  width: 18px !important;
  height: 18px !important;
  color: currentColor !important;
  flex-shrink: 0 !important;
}
.nav-icon svg { width: 100% !important; height: 100% !important; }

.nav-label {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.nav-section-label,
.nav-section-title,
.sidebar-section-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: var(--text-subtle) !important;
  text-transform: uppercase !important;
  padding: 14px 20px 6px !important;
  margin: 0 !important;
}

.sidebar-footer {
  border-top: 1px solid var(--border) !important;
  padding: 10px !important;
  background: transparent !important;
}

.sidebar-status {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  color: var(--accent-green) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.status-dot-anim,
.status-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--accent-green) !important;
  animation: cz-pulse-newui 2s ease-in-out infinite !important;
}

.sidebar-user,
.user-pill {
  background: transparent !important;
  border: none !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 6px !important;
}

.user-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
  background: var(--bg-hover) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.user-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
.user-role {
  font-size: 11px !important;
  color: var(--text-subtle) !important;
}

.sidebar-logout {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-muted) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: Inter, sans-serif !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.sidebar-logout:hover {
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
  background: var(--bg-hover) !important;
}

.sidebar-theme {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-muted) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.sidebar-theme:hover {
  color: var(--text) !important;
  background: var(--bg-hover) !important;
}

/* ─── 4. Main content area ─────────────────────────────────────── */
.main-content,
main.main-content {
  background: var(--bg) !important;
}

.page-header {
  border-bottom: 1px solid var(--border) !important;
  padding: 24px 32px !important;
  background: var(--bg) !important;
}

.page-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

#page-title,
.page-title-row h1 {
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
  margin: 0 !important;
}

.page-sub,
#page-sub {
  font-size: 14px !important;
  color: var(--text-subtle) !important;
  margin-top: 6px !important;
}

.live-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  background: rgba(75,168,107,0.12) !important;
  color: var(--accent-green) !important;
  border-radius: 4px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
.live-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--accent-green) !important;
  animation: cz-pulse-newui 2s ease-in-out infinite !important;
}

/* ─── 5. Panels (cards) ────────────────────────────────────────── */
.panel {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
}

.panel h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.panel h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  margin: 0 0 10px !important;
}

.panel p {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
}

/* Panel accent bars — respect them but use Lovable colors */
.panel[style*="border-left:4px solid #ef4444"] { border-left: 3px solid var(--accent-red) !important; }
.panel[style*="border-left:4px solid #f59e0b"] { border-left: 3px solid var(--accent-yellow) !important; }
.panel[style*="border-left:4px solid #10b981"] { border-left: 3px solid var(--accent-green) !important; }
.panel[style*="border-left:4px solid #3b82f6"] { border-left: 3px solid var(--accent-blue) !important; }
.panel[style*="border-left:4px solid #a855f7"] { border-left: 3px solid var(--accent-purple) !important; }
.panel[style*="border-left:4px solid #8b5cf6"] { border-left: 3px solid var(--accent-purple) !important; }

/* ─── 6. KPI cards (home dashboard) ────────────────────────────── */
.home-kpi {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow: none !important;
  transition: transform 0.2s, border-color 0.2s !important;
}
.home-kpi:hover {
  border-color: var(--border-strong) !important;
  transform: translateY(-3px) !important;
}

.kpi-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: var(--text-subtle) !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

.kpi-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.kpi-val {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

.kpi-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.kpi-icon svg { width: 16px !important; height: 16px !important; }

.kpi-sub {
  font-size: 12px !important;
  color: var(--text-subtle) !important;
  margin-top: 8px !important;
}

/* Home-module cards (Detector / Scanner tiles) */
.home-module {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 24px !important;
  transition: transform 0.2s, border-color 0.2s !important;
}
.home-module:hover {
  border-color: var(--accent) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 40px -10px rgba(124,92,255,0.15) !important;
}

/* ─── 7. Buttons ──────────────────────────────────────────────── */
.btn,
button.btn {
  padding: 9px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  font-family: Inter, sans-serif !important;
  border: 1px solid var(--border-strong) !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.btn:hover {
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
  background: var(--bg-hover) !important;
}
.btn.primary,
.btn.btn-primary,
button.btn-primary {
  background: var(--accent) !important;
  color: #ffffff !important;
  border: none !important;
}
.btn.primary:hover,
.btn.btn-primary:hover {
  background: #6a45f5 !important;
  transform: none !important;
}
.btn.danger,
.btn.btn-danger {
  background: rgba(240,68,82,0.12) !important;
  border: 1px solid rgba(240,68,82,0.4) !important;
  color: var(--accent-red) !important;
}
.btn.danger:hover {
  background: rgba(240,68,82,0.18) !important;
}
.btn.small,
.btn-sm {
  padding: 6px 10px !important;
  font-size: 12px !important;
}

/* ─── 8. Badges & tags ─────────────────────────────────────────── */
.badge,
.tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  background: var(--bg-hover) !important;
  color: var(--text-muted) !important;
  font-family: Inter, sans-serif !important;
  border: none !important;
  width: fit-content !important;
}

.badge.critical, .tag.critical,
.badge[data-severity="critical"], .badge.severity-critical {
  background: rgba(240,68,82,0.16) !important;
  color: var(--accent-red) !important;
}
.badge.high, .tag.high,
.badge[data-severity="high"], .badge.severity-high {
  background: rgba(246,139,71,0.16) !important;
  color: #f68b47 !important;
}
.badge.medium, .tag.medium,
.badge[data-severity="medium"], .badge.severity-medium {
  background: rgba(240,178,60,0.16) !important;
  color: var(--accent-yellow) !important;
}
.badge.low, .tag.low,
.badge[data-severity="low"], .badge.severity-low {
  background: rgba(75,168,107,0.16) !important;
  color: var(--accent-green) !important;
}
.badge.success { background: rgba(75,168,107,0.16) !important; color: var(--accent-green) !important; }
.badge.warning { background: rgba(240,178,60,0.16) !important; color: var(--accent-yellow) !important; }
.badge.danger  { background: rgba(240,68,82,0.16) !important; color: var(--accent-red) !important; }
.badge.info    { background: var(--accent-blue-soft) !important; color: var(--accent-blue) !important; }

/* ─── 9. Tables ────────────────────────────────────────────────── */
table,
table.table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
}
th {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: var(--text-subtle) !important;
  text-transform: uppercase !important;
  text-align: left !important;
  padding: 12px 16px !important;
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}
td {
  padding: 14px 16px !important;
  font-size: 13px !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border) !important;
}
tr:hover td {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}

/* ─── 10. Inputs ──────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: var(--bg) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  font-family: Inter, sans-serif !important;
  outline: none !important;
  transition: border-color 0.15s !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent) !important;
}
textarea {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  resize: vertical !important;
}

label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  margin-bottom: 6px !important;
}

/* ─── 11. Sub-tabs (Detector/Scanner sub-navigation) ──────────── */
.subtab-bar {
  display: flex !important;
  gap: 4px !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 32px !important;
  margin-bottom: 24px !important;
  background: var(--bg) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;         /* Firefox */
  -ms-overflow-style: none !important;      /* IE / old Edge */
}
.subtab-bar::-webkit-scrollbar {
  display: none !important;                 /* Chrome / Safari / new Edge */
  height: 0 !important;
  width: 0 !important;
}

.subtab {
  padding: 12px 16px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--text-subtle) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: color 0.15s, border-color 0.15s !important;
  font-family: Inter, sans-serif !important;
  border-radius: 0 !important;
}
.subtab:hover {
  color: var(--text) !important;
  background: transparent !important;
}
.subtab.active {
  color: var(--text) !important;
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
}

/* ─── 12. Code blocks / textareas ────────────────────────────── */
pre, code {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 12px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  overflow-x: auto !important;
}
code {
  padding: 2px 6px !important;
  border-radius: 3px !important;
}

/* ─── 13. Modal overlay ──────────────────────────────────────── */
.modal-overlay,
.modal-backdrop {
  background: rgba(5,7,13,0.7) !important;
  backdrop-filter: blur(6px) !important;
}
.modal,
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 12px !important;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5) !important;
}
.modal h2,
.modal h3 {
  color: var(--text) !important;
}

/* ─── 14. Alerts / notifications ─────────────────────────────── */
.alert,
.notification {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  color: var(--text) !important;
}
.alert.success { border-left: 3px solid var(--accent-green) !important; }
.alert.danger, .alert.error { border-left: 3px solid var(--accent-red) !important; }
.alert.warning { border-left: 3px solid var(--accent-yellow) !important; }
.alert.info { border-left: 3px solid var(--accent) !important; }

/* ─── 15. Small text helpers ─────────────────────────────────── */
.text-muted { color: var(--text-muted) !important; }
.text-subtle { color: var(--text-subtle) !important; }
.text-mono { font-family: 'JetBrains Mono', monospace !important; }

/* ─── 16. Layout containers ──────────────────────────────────── */
.dashboard-container,
.app-container {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ─── 17. Chart colors (for any inline chart) ────────────────── */
:root {
  --chart-1: #7c5cff !important;
  --chart-2: #4ba86b !important;
  --chart-3: #f0b23c !important;
  --chart-4: #f04452 !important;
  --chart-5: #6a45f5 !important;
}

/* ─── 18. Loading spinners ───────────────────────────────────── */
.spinner,
.loading-spinner {
  border-color: var(--border-strong) !important;
  border-top-color: var(--accent) !important;
}

/* ─── 19. Fix any inline hardcoded colors that break the theme ─
   Existing dashboard has some inline styles like background:#3d2c0a;
   These are intentional (banner accents), so we leave them alone. */

/* ─── 20. Global scrollbar ───────────────────────────────────── */
::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}
::-webkit-scrollbar-track {
  background: var(--bg) !important;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong) !important;
  border-radius: 5px !important;
  border: 2px solid var(--bg) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #3d3358 !important;
}

/* ─── 21. Selection highlight ────────────────────────────────── */
::selection {
  background: rgba(124,92,255,0.25) !important;
  color: var(--text) !important;
}

/* ─── 22. Animations ─────────────────────────────────────────── */
@keyframes cz-pulse-newui {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}
@keyframes cz-fadein-newui {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── 23. Theme switcher pill (new addition at top-right of page-header) ─ */
.newui-theme-switch {
  position: fixed !important;
  top: 20px !important;
  right: 32px !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 7px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 20px !important;
  background: var(--bg-alt) !important;
}
.newui-theme-swatch {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 0 0 1px var(--border-strong) !important;
  transition: box-shadow 0.15s !important;
}
.newui-theme-swatch.active {
  box-shadow: 0 0 0 2px var(--bg-alt), 0 0 0 3px var(--accent) !important;
}
.newui-theme-swatch.violet { background: #7c5cff !important; }
.newui-theme-swatch.blue { background: #4d7cfe !important; }
.newui-theme-swatch.light { background: linear-gradient(135deg,#ffffff 50%,#c2c9d6 50%) !important; }

/* ─── 24. Brand banner in sidebar top ────────────────────────── */
.sidebar {
  width: 240px !important;
}

/* ─── 25. New-UI marker so we can tell we're on the new theme ── */
body::before {
  content: "" !important;
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: 2px !important;
  background: linear-gradient(90deg, var(--accent), var(--accent-blue), var(--accent-green)) !important;
  z-index: 999 !important;
  opacity: 0.4 !important;
  pointer-events: none !important;
}

/* ─── 26. Preserve semantic status colors even after override ─── */
.status-active { color: var(--accent-green) !important; }
.status-paused { color: var(--accent-yellow) !important; }
.status-error  { color: var(--accent-red) !important; }

/* ─── 27. FIX: Superadmin/admin/user role badge colors ────────── */
/* The dashboard's JavaScript sets inline background colors via
   element.style.background = '#da3633' for superadmin (red),
   '#f0883e' for admin (orange), '#1f6feb' for user (blue).
   We use a stronger selector + !important + attribute contains to override. */
#user-role-badge,
.user-role,
#user-pill .user-role {
  background: var(--accent) !important;
  color: #ffffff !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  box-shadow: none !important;
}

/* Even more forceful: use attribute selectors to catch the inline styles */
[style*="background: rgb(218, 54, 51)"],
[style*="background:#da3633"],
[style*="background: #da3633"] {
  background: var(--accent) !important;
  color: #ffffff !important;
}
[style*="background: rgb(240, 136, 62)"],
[style*="background:#f0883e"],
[style*="background: #f0883e"] {
  background: var(--accent-yellow) !important;
  color: #0b0716 !important;
}
[style*="background: rgb(31, 111, 235)"],
[style*="background:#1f6feb"],
[style*="background: #1f6feb"] {
  background: var(--accent) !important;
  color: #ffffff !important;
}

/* ─── 28. FIX: Alerts table inline "verify" tag backgrounds ───── */
/* Inline styles like background:#21262d (near-black) look bad on
   the new theme. Force them to blend with the dark violet palette. */
[style*="background:#21262d"],
[style*="background: #21262d"] {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-subtle) !important;
  border: 1px solid var(--border) !important;
}
[style*="background:#30363d"],
[style*="background: #30363d"] {
  background: rgba(124,92,255,0.10) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
}
[style*="background:#484f58"],
[style*="background: #484f58"] {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-muted) !important;
}
[style*="background:#3a0a0a"],
[style*="background: #3a0a0a"] {
  background: rgba(240,68,82,0.08) !important;
  border-color: rgba(240,68,82,0.4) !important;
}
[style*="background:#3d2c0a"],
[style*="background: #3d2c0a"] {
  background: rgba(240,178,60,0.08) !important;
  border-color: rgba(240,178,60,0.4) !important;
}
[style*="background:#0d2818"],
[style*="background: #0d2818"] {
  background: rgba(75,168,107,0.08) !important;
  border-color: rgba(75,168,107,0.4) !important;
}
[style*="background:#1c2128"],
[style*="background: #1c2128"] {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--border) !important;
}

/* ─── 29. FIX: Row .mono spans in alerts should not have dark bg ── */
.alert-row .mono,
tr.alert-row .mono,
tbody tr .mono {
  background: transparent !important;
  color: var(--accent) !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Except rule IDs specifically — give them a subtle violet chip */
.alert-row td:nth-child(3) > .mono:first-child,
tr.alert-row td .mono {
  background: rgba(124,92,255,0.10) !important;
  color: var(--accent) !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* ─── 30. FIX: Severity badges .sev in alerts table ─────────── */
.sev,
span.sev {
  padding: 2px 8px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-family: Inter, sans-serif !important;
  border: none !important;
}
.sev.CRITICAL, .sev.critical {
  background: rgba(240,68,82,0.16) !important;
  color: var(--accent-red) !important;
}
.sev.HIGH, .sev.high {
  background: rgba(246,139,71,0.16) !important;
  color: #f68b47 !important;
}
.sev.MEDIUM, .sev.medium {
  background: rgba(240,178,60,0.16) !important;
  color: var(--accent-yellow) !important;
}
.sev.LOW, .sev.low {
  background: rgba(75,168,107,0.16) !important;
  color: var(--accent-green) !important;
}

/* ─── 31. FIX: Action badges (BLOCK/WARN/ALLOW) ─────────────── */
.action,
span.action {
  padding: 2px 8px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  font-family: Inter, sans-serif !important;
}
.action.block {
  background: rgba(240,68,82,0.16) !important;
  color: var(--accent-red) !important;
}
.action.warn {
  background: rgba(240,178,60,0.16) !important;
  color: var(--accent-yellow) !important;
}
.action.allow {
  background: rgba(75,168,107,0.16) !important;
  color: var(--accent-green) !important;
}

/* ─── 32. FIX: user-avatar circle (was using --accent-blue) ── */
.user-avatar {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-radius: 6px !important;  /* Lovable uses squarish, not circle */
  width: 30px !important;
  height: 30px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* ─── 33. FIX: Light theme table row hover (was showing black) ── */
/* In light mode, tr:hover was inheriting dark backgrounds from inline
   or default styles. Force it to a light hover color. */
[data-theme="light"] tr:hover,
[data-theme="light"] tr:hover td,
[data-theme="light"] .alert-row:hover,
[data-theme="light"] .alert-row:hover td,
[data-theme="light"] tbody tr:hover,
[data-theme="light"] tbody tr:hover td {
  background: #f1f3f6 !important;
  color: #0b1220 !important;
}

/* Also make sure the mono/rule chip colors stay violet in light mode */
[data-theme="light"] .alert-row:hover .mono,
[data-theme="light"] tr:hover .mono {
  background: rgba(59,110,245,0.10) !important;
  color: #3b6ef5 !important;
}

/* And severity badges keep their colors on hover in light mode */
[data-theme="light"] tr:hover .sev,
[data-theme="light"] .alert-row:hover .sev {
  color: inherit !important;
}

/* ─── 34. Light theme: fix ALL inline dark backgrounds ────────── */
/* The dashboard has hardcoded dark hex colors in inline styles that
   look terrible in light mode. Convert them to light-friendly values. */
[data-theme="light"] [style*="background:#21262d"],
[data-theme="light"] [style*="background: #21262d"],
[data-theme="light"] [style*="background:#30363d"],
[data-theme="light"] [style*="background: #30363d"],
[data-theme="light"] [style*="background:#484f58"],
[data-theme="light"] [style*="background: #484f58"],
[data-theme="light"] [style*="background:#1c2128"],
[data-theme="light"] [style*="background: #1c2128"] {
  background: #eef1f5 !important;
  color: #3f4859 !important;
  border-color: #d6dbe4 !important;
}

/* Light theme severity/action tags */
[data-theme="light"] .sev.CRITICAL, [data-theme="light"] .sev.critical,
[data-theme="light"] .action.block {
  background: rgba(240,68,82,0.10) !important;
  color: #d63849 !important;
}
[data-theme="light"] .sev.HIGH, [data-theme="light"] .sev.high {
  background: rgba(246,139,71,0.10) !important;
  color: #d67238 !important;
}
[data-theme="light"] .sev.MEDIUM, [data-theme="light"] .sev.medium,
[data-theme="light"] .action.warn {
  background: rgba(240,178,60,0.12) !important;
  color: #b8891f !important;
}
[data-theme="light"] .sev.LOW, [data-theme="light"] .sev.low,
[data-theme="light"] .action.allow {
  background: rgba(75,168,107,0.10) !important;
  color: #2f7d4d !important;
}

/* Light theme panels/cards */
[data-theme="light"] .panel {
  background: #ffffff !important;
  border-color: #e7eaf0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* Light theme sidebar */
[data-theme="light"] .sidebar {
  background: #f7f8fa !important;
  border-right-color: #e7eaf0 !important;
}
[data-theme="light"] .nav-item {
  color: #3f4859 !important;
}
[data-theme="light"] .nav-item:hover {
  background: #eef1f5 !important;
  color: #0b1220 !important;
}
[data-theme="light"] .nav-item.active {
  background: #eef1f5 !important;
  color: #0b1220 !important;
}

/* Light theme main content */
[data-theme="light"] .main-content,
[data-theme="light"] main.main-content {
  background: #ffffff !important;
}
[data-theme="light"] .page-header {
  background: #ffffff !important;
  border-bottom-color: #e7eaf0 !important;
}
[data-theme="light"] #page-title,
[data-theme="light"] .page-title-row h1 {
  color: #0b1220 !important;
}

/* Light theme inputs */
[data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select {
  background: #ffffff !important;
  border-color: #d6dbe4 !important;
  color: #0b1220 !important;
}
[data-theme="light"] input:focus, [data-theme="light"] textarea:focus {
  border-color: #3b6ef5 !important;
  box-shadow: 0 0 0 1px #3b6ef5 !important;
}

/* Light theme buttons */
[data-theme="light"] .btn {
  background: #ffffff !important;
  border-color: #d6dbe4 !important;
  color: #3f4859 !important;
}
[data-theme="light"] .btn:hover {
  background: #f1f3f6 !important;
  color: #0b1220 !important;
}
[data-theme="light"] .btn.primary, [data-theme="light"] .btn.btn-primary {
  background: #3b6ef5 !important;
  color: #ffffff !important;
}

/* Light theme kpi cards */
[data-theme="light"] .home-kpi {
  background: #ffffff !important;
  border-color: #e7eaf0 !important;
}
[data-theme="light"] .kpi-val {
  color: #0b1220 !important;
}
[data-theme="light"] .kpi-label {
  color: #6b7592 !important;
}

/* Light theme table headers */
[data-theme="light"] th {
  background: #f7f8fa !important;
  color: #6b7592 !important;
  border-bottom-color: #e7eaf0 !important;
}
[data-theme="light"] td {
  color: #3f4859 !important;
  border-bottom-color: #e7eaf0 !important;
}

/* Light theme sub-tabs */
[data-theme="light"] .subtab {
  color: #6b7592 !important;
}
[data-theme="light"] .subtab:hover {
  color: #0b1220 !important;
}
[data-theme="light"] .subtab.active {
  color: #0b1220 !important;
  border-bottom-color: #3b6ef5 !important;
}

/* Light theme user pill */
[data-theme="light"] .user-name {
  color: #0b1220 !important;
}
[data-theme="light"] .user-role {
  color: #6b7592 !important;
}
[data-theme="light"] .sidebar-footer {
  border-top-color: #e7eaf0 !important;
}

/* Light theme scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f7f8fa !important;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #d6dbe4 !important;
  border-color: #f7f8fa !important;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #c2c9d6 !important;
}

/* ─── 35. HIDE the .cards stat strip on Detector view ────────── */
/* The dashboard's Detector view has a KPI strip at the top with:
   Total Requests, Blocked, Alerts, Critical (24h), High (24h),
   Medium (24h), Blocked IPs.
   User wants these ONLY on the Home dashboard, not on Detector tabs.
   Since Home view uses .home-kpi (different class), hiding .cards
   removes the strip only from Detector view. */
#view-detector > .cards,
.dash-view.dash-view > .cards {
  display: none !important;
}
/* Also hide the "cards" containers directly inside the detector view */
#view-detector > .cards {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* ─── 36. FIX: Softer row hover — no more "black box" on Time/Path ─
   The previous hover used --bg-hover (#1b1730 - very dark) which
   made mono cells (Time, IP, Path) look like black boxes. Use a
   subtle translucent overlay instead. */
tr:hover,
tr:hover td,
.alert-row:hover,
.alert-row:hover td,
tbody tr:hover,
tbody tr:hover td {
  background: rgba(124, 92, 255, 0.06) !important;
  color: var(--text) !important;
}

/* Keep the mono/rule ID chip visible against the subtle hover */
tr:hover .mono,
.alert-row:hover .mono,
tbody tr:hover .mono {
  color: var(--accent) !important;
}

/* Blue theme uses blue accent - subtle blue hover */
[style*="--accent: #4d7cfe"] tr:hover,
[style*="--accent:#4d7cfe"] tr:hover td {
  background: rgba(77, 124, 254, 0.06) !important;
}

/* Light theme (already had this in section 33, but make even more subtle) */
[data-theme="light"] tr:hover,
[data-theme="light"] tr:hover td,
[data-theme="light"] .alert-row:hover,
[data-theme="light"] .alert-row:hover td,
[data-theme="light"] tbody tr:hover,
[data-theme="light"] tbody tr:hover td {
  background: rgba(59, 110, 245, 0.05) !important;
  color: #0b1220 !important;
}

/* Also fix the .path cell hover specifically - the mono background
   was inheriting a hard dark color. Make sure it stays transparent. */
.path,
.path.mono,
td.path,
td.path.mono {
  background: transparent !important;
}
tr:hover .path,
tr:hover td.path,
tr:hover td.path.mono {
  background: transparent !important;
  color: var(--text) !important;
}

/* Same for time column (td.mono at first position) */
tr:hover td.mono,
tr:hover td:first-child.mono {
  background: transparent !important;
  color: var(--text) !important;
}

/* ─── 37. FIX: Always show the sidebar logout button ──────────
   The dashboard's HTML has <button ... style="display:none;">Sign out</button>
   which only becomes visible when JavaScript loads the user. If user
   data fails to load (e.g. fresh signup with pending status), the
   logout button stays hidden. Force it visible always. */
.sidebar-logout,
#logout-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 8px !important;
}

/* Also force the user pill to show, even if empty */
.sidebar-user,
#user-pill {
  display: flex !important;
}

/* ─── 38. Floating logout button in top-right (backup) ────────
   In case the sidebar breaks entirely, provide a floating logout
   button in the top-right corner (positioned next to theme switcher). */
.newui-floating-logout {
  position: fixed !important;
  top: 20px !important;
  right: 190px !important;  /* to the left of the theme switcher */
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 20px !important;
  background: var(--bg-alt) !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: Inter, sans-serif !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
}
.newui-floating-logout:hover {
  color: var(--accent-red) !important;
  border-color: var(--accent-red) !important;
}

/* ─── 39. HIDE the old sidebar theme toggle button ────────────
   User has the new top-right theme switcher pill, so the old
   sidebar theme toggle (near "WAF active") is redundant. */
.sidebar-theme,
#theme-toggle-btn,
button.sidebar-theme {
  display: none !important;
}

/* ─── 40. Style for "Verify user" button in Users tab ───────── */
.newui-verify-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  background: rgba(75, 168, 107, 0.15) !important;
  color: var(--accent-green) !important;
  border: 1px solid rgba(75, 168, 107, 0.4) !important;
  cursor: pointer !important;
  margin-right: 4px !important;
  font-family: Inter, sans-serif !important;
  transition: all 0.15s !important;
}
.newui-verify-btn:hover {
  background: rgba(75, 168, 107, 0.25) !important;
  border-color: var(--accent-green) !important;
}

/* Style for pending status badge in the Users table */
[style*="color:#8b949e"]:not(button):not(input) {
  color: var(--text-subtle) !important;
}

/* Pending verification badge in the table */
.newui-pending-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: rgba(240, 178, 60, 0.15) !important;
  color: var(--accent-yellow) !important;
  border: 1px solid rgba(240, 178, 60, 0.3) !important;
}
.newui-pending-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-yellow);
  animation: cz-pulse-newui 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   END chazerai-newui-skin.css
   ═══════════════════════════════════════════════════════════════ */