/* Nuvine CP theme override — loaded after the vendor Metronic stack in
   layouts/panel.blade.php. The CP always runs in [data-theme=dark] (no
   light-mode toggle exists), so every override below targets that
   selector only. Metronic exposes a real, consumed --kt-* CSS custom
   property layer (verified: .btn-primary, .menu-link.active, and most
   component rules reference var(--kt-*)) — redefining those covers most
   of the app in one pass. A few confirmed exceptions render via
   hardcoded hex or have no border/box-shadow variable at all; those get
   direct selector overrides below instead. */

:root {
  --body: #17181c;
  --paper: #1e1f24;
  --paper-2: #26272d;
  --border: #2e2f36;
  --text: #cfd0d4;
  --text-dim: #83858f;
  --text-bright: #ffffff;
  --blue: #3b6fea;
  --blue-dim: #3b6fea22;
  --blue-border: #3b6fea55;
  --green: #34c47a;
  --green-dim: #34c47a1f;
  --green-border: #34c47a4d;
  --red: #f2554a;
  --red-dim: #f2554a1f;
  --red-border: #f2554a4d;
  --amber: #e2a13a;
  --amber-dim: #e2a13a1f;
  --amber-border: #e2a13a4d;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Metronic variable overrides (dark mode only) ---------- */
[data-theme=dark] {
  --bs-body-bg: var(--body);
  --kt-body-bg: var(--body);
  --bs-body-color: var(--text);
  --kt-body-color: var(--text);
  --kt-card-bg: var(--paper);
  --kt-input-bg: var(--paper-2);
  --kt-input-border-color: var(--border);
  --kt-dropdown-bg: var(--paper);
  --kt-menu-dropdown-bg-color: var(--paper);
  --kt-modal-bg: var(--paper);
  --kt-modal-content-bg: var(--paper);
  --kt-primary: var(--blue);
  --kt-primary-active: var(--blue);
  --kt-primary-inverse: #ffffff;
  --kt-menu-link-bg-color-active: var(--blue);
  --kt-menu-link-color-active: #ffffff;
  --kt-pagination-bg: var(--paper);
  --kt-pagination-hover-bg: var(--paper-2);
  --kt-pagination-active-bg: var(--blue);
  --kt-pagination-color: var(--text-dim);
  --kt-app-header-base-bg-color: var(--paper);
  --kt-app-footer-bg-color: var(--paper);
  --kt-border-color: var(--border);
  --kt-text-muted: var(--text-dim);
  --kt-text-gray-500: var(--text-dim);
  --kt-text-gray-600: var(--text-dim);
  --kt-primary-light: var(--blue-dim);
  --kt-success-light: var(--green-dim);
  --kt-danger-light: var(--red-dim);
  --kt-warning-light: var(--amber-dim);
}

/* ---------- Confirmed non-variable exceptions (direct overrides) ---------- */
[data-theme=dark] body {
  background-color: var(--body) !important;
}

[data-theme=dark] .card {
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar {
  background-color: var(--paper) !important;
  border-right: 1px solid var(--border) !important;
}

[data-theme=dark] .menu-link.active {
  background-color: var(--blue) !important;
  color: #ffffff !important;
}

[data-theme=dark] #kt_app_header {
  border-bottom: 1px solid var(--border) !important;
}

[data-theme=dark] .app-footer {
  border-top: 1px solid var(--border) !important;
}

[data-theme=dark] .form-select {
  background-color: var(--paper-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: .475rem !important;
}

/* ---------- Status pills (dashboard) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
}
.pill-green {
  background: var(--green-dim);
  border-color: var(--green-border);
  color: var(--green);
}
.pill-amber {
  background: var(--amber-dim);
  border-color: var(--amber-border);
  color: var(--amber);
}
.pill-red {
  background: var(--red-dim);
  border-color: var(--red-border);
  color: var(--red);
}
.pill-dim {
  background: var(--paper-2);
  border-color: var(--border);
  color: var(--text-dim);
}

.mono-pill {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}

/* Note: .stat-card itself has no rule below -- its background/border come
   from the .card override above; only its inner elements need styling. */
/* ---------- Dashboard stat cards ---------- */
.stat-card-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
}
.stat-card-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--blue-dim);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.stat-card-value {
  font-size: 25px;
  font-weight: 700;
  color: var(--text-bright);
}