/* =====================================================================
 * Admin theme — overrides on top of Bootstrap 4.2.1 so every admin
 * page (users / missions / devices / settings / tasks) matches the
 * operator console's dark-glass look from the landing + map views.
 *
 * Loaded by app/views/admin/main.scala.html after bootstrap.min.css —
 * no template changes needed; we just tighten button / table / form /
 * navbar styling around the existing Bootstrap classes.
 *
 * Palette mirrors landing.scala.html exactly:
 *   --bg-0   #0b0f15    page background
 *   --bg-1   #11161f    slightly elevated surfaces
 *   --line   rgba(255,255,255,0.10)   1px borders / dividers
 *   --text   #eaeaea    primary
 *   --muted  #9aa3ad    secondary
 *   --accent #4adb7c    success / "go" CTA
 *   --accent-2 #10b7ea  info / primary CTA
 *   --citrus #facc15    warning / highlight
 *   --danger #ff5560    danger / destructive
 * ===================================================================== */

:root {
  --bg-0:     #0b0f15;
  --bg-1:     #11161f;
  --bg-2:     #1b2230;
  --panel:    rgba(20, 24, 32, 0.92);
  --line:     rgba(255, 255, 255, 0.10);
  --line-soft:rgba(255, 255, 255, 0.05);
  --text:     #eaeaea;
  --muted:    #9aa3ad;
  --accent:   #4adb7c;
  --accent-2: #10b7ea;
  --citrus:   #facc15;
  --danger:   #ff5560;
}

/* ───── Page chrome ───────────────────────────────────────────────── */
html, body {
  background-color: var(--bg-0);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
/* Subtle two-stop radial behind everything — same vibe as the landing
   without the favicon overlay (too noisy on dense admin tables). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(16,183,234,0.08) 0%, transparent 55%),
    radial-gradient(80% 60% at 80% 100%, rgba(74,219,124,0.05) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 600; }
a { color: var(--accent-2); }
a:hover { color: #7dd9ff; text-decoration: none; }
hr { border-top: 1px solid var(--line); }
.text-muted { color: var(--muted) !important; }
.text-primary { color: var(--accent-2) !important; }
.text-success { color: var(--accent) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--citrus) !important; }

code, pre, kbd, samp {
  color: #6ed7ff;
  background: rgba(11, 15, 21, 0.6);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ───── Navbar ────────────────────────────────────────────────────── */
.navbar.bg-dark {
  background: linear-gradient(180deg, rgba(17,22,31,0.96) 0%, rgba(11,15,21,0.96) 100%) !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.navbar .navbar-brand {
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 14px;
  color: #fff;
}
.navbar-dark .navbar-nav .nav-link {
  color: rgba(234, 234, 234, 0.78);
  transition: color 120ms ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-item.active .nav-link {
  color: var(--accent);
}
/* Outline-light button (used elsewhere in admin chrome). */
.navbar .btn-outline-light {
  border-color: var(--line);
  color: var(--text);
}
.navbar .btn-outline-light:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
/* Favicon-as-link in the navbar — doubles as the navigate-to-map
   shortcut. Hover brightens the logo a touch so it reads as
   interactive without a separate button background. */
.navbar .navbar-brand-logo { padding: 2px; border-radius: 8px; transition: background 120ms ease, transform 120ms ease; }
.navbar .navbar-brand-logo:hover { background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.navbar .navbar-brand-logo:active { transform: translateY(0); }

/* ───── Container layout ──────────────────────────────────────────── */
.container, .container-fluid { padding-top: 4px; }
.container > h1:first-child,
.container > h2:first-child { margin-top: 16px; }

/* ───── Tables ────────────────────────────────────────────────────── */
.table {
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  /* Bootstrap puts borders on cells; we want one cohesive rounded panel. */
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th {
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
  border-top: 0;
  padding: 10px 12px;
}
.table tbody td, .table tbody th {
  border-top: 1px solid var(--line-soft);
  padding: 10px 12px;
  vertical-align: middle;
}
.table-bordered { border: 1px solid var(--line); }
.table-bordered th, .table-bordered td { border: 1px solid var(--line-soft); }
.table-hover tbody tr:hover {
  background: rgba(16, 183, 234, 0.06);
  color: var(--text);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table .text-center { text-align: center; }

/* ───── Buttons ───────────────────────────────────────────────────── */
.btn {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: filter 120ms ease, transform 120ms ease,
              background 120ms ease, border-color 120ms ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 0.25rem 0.55rem; font-size: 0.78rem; }

.btn-primary {
  background: linear-gradient(180deg, #3fd0fa, var(--accent-2));
  border-color: var(--accent-2);
  color: #04212c;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(180deg, #5fdcfb, #1ec4ee);
  border-color: var(--accent-2);
  color: #04212c;
}

.btn-success {
  background: linear-gradient(180deg, #65e69b, var(--accent));
  border-color: var(--accent);
  color: #062416;
}
.btn-success:hover, .btn-success:focus {
  background: linear-gradient(180deg, #79eaa9, #3bce6f);
  border-color: var(--accent);
  color: #062416;
}

.btn-danger {
  background: linear-gradient(180deg, #ff7077, var(--danger));
  border-color: var(--danger);
  color: #2a0a0d;
}
.btn-danger:hover, .btn-danger:focus {
  background: linear-gradient(180deg, #ff878d, #ef4451);
  border-color: var(--danger);
  color: #2a0a0d;
}

.btn-warning {
  background: linear-gradient(180deg, #ffd54a, var(--citrus));
  border-color: var(--citrus);
  color: #2a1d00;
}
.btn-warning:hover, .btn-warning:focus {
  background: linear-gradient(180deg, #ffdf6b, #e8b908);
  border-color: var(--citrus);
  color: #2a1d00;
}

.btn-info {
  background: linear-gradient(180deg, #3fd0fa, var(--accent-2));
  border-color: var(--accent-2);
  color: #04212c;
}

.btn-secondary, .btn-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line);
  color: var(--text);
}
.btn-secondary:hover, .btn-dark:hover,
.btn-secondary:focus, .btn-dark:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.20);
  color: #fff;
}

.btn-light {
  background: rgba(255, 255, 255, 0.92);
  color: #11161f;
  border-color: rgba(255, 255, 255, 0.30);
}
.btn-light:hover {
  background: #fff;
  color: #0b0f15;
}

/* Outline variants */
.btn-outline-primary {
  background: transparent;
  border-color: rgba(16, 183, 234, 0.55);
  color: var(--accent-2);
}
.btn-outline-primary:hover {
  background: rgba(16, 183, 234, 0.12);
  color: #7dd9ff;
  border-color: var(--accent-2);
}
.btn-outline-secondary, .btn-outline-dark {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-outline-secondary:hover, .btn-outline-dark:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.20);
}
.btn-outline-danger {
  background: transparent;
  border-color: rgba(255, 85, 96, 0.50);
  color: #ff9aa1;
}
.btn-outline-danger:hover {
  background: rgba(255, 85, 96, 0.14);
  color: #ffb3b8;
  border-color: var(--danger);
}

/* ───── Forms ─────────────────────────────────────────────────────── */
.form-control {
  background: rgba(11, 15, 21, 0.85);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.form-control:focus {
  background: rgba(11, 15, 21, 0.95);
  color: var(--text);
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(16, 183, 234, 0.18);
  outline: 0;
}
.form-control::placeholder { color: rgba(154, 163, 173, 0.55); }
.form-control[disabled], .form-control:disabled {
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
}
.form-control-plaintext { color: var(--text); }

select.form-control,
select.form-control option {
  background: var(--bg-1);
  color: var(--text);
}

/* Bootstrap also styles inputs by tag in some cases. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], textarea {
  color-scheme: dark;
}

.custom-control-label { color: var(--text); }
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--accent-2);
  border-color: var(--accent-2);
}

label, .col-form-label, .control-label {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.form-text, .text-muted small { color: var(--muted); }
.form-group { margin-bottom: 1rem; }

/* ───── Cards ─────────────────────────────────────────────────────── */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--text);
}
.card-header, .card-footer {
  background: rgba(0, 0, 0, 0.20);
  border-color: var(--line);
  color: var(--text);
}
.card-title { color: var(--text); }
.card-subtitle, .card-text small { color: var(--muted); }

/* ───── Alerts ────────────────────────────────────────────────────── */
.alert {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 10px 14px;
}
.alert-success {
  background: rgba(74, 219, 124, 0.10);
  border-color: rgba(74, 219, 124, 0.40);
  color: #7ce9a4;
}
.alert-danger {
  background: rgba(255, 85, 96, 0.10);
  border-color: rgba(255, 85, 96, 0.40);
  color: #ffa0a8;
}
.alert-warning {
  background: rgba(250, 204, 21, 0.10);
  border-color: rgba(250, 204, 21, 0.40);
  color: #ffe486;
}
.alert-info, .alert-primary {
  background: rgba(16, 183, 234, 0.10);
  border-color: rgba(16, 183, 234, 0.40);
  color: #8ee0ff;
}
.alert-secondary, .alert-dark, .alert-light {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  color: var(--text);
}

/* ───── Badges ────────────────────────────────────────────────────── */
.badge {
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.badge-success { background: rgba(74,219,124,0.18);  color: var(--accent);   border-color: rgba(74,219,124,0.45);  }
.badge-danger  { background: rgba(255,85,96,0.18);   color: #ffa0a8;          border-color: rgba(255,85,96,0.45);   }
.badge-warning { background: rgba(250,204,21,0.18);  color: var(--citrus);    border-color: rgba(250,204,21,0.45);  }
.badge-info    { background: rgba(16,183,234,0.18);  color: #6ed7ff;          border-color: rgba(16,183,234,0.45);  }
.badge-secondary, .badge-dark, .badge-light {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-color: var(--line);
}

/* ───── Breadcrumbs ───────────────────────────────────────────────── */
.breadcrumb {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 10px 0 14px;
}
.breadcrumb-item, .breadcrumb-item.active { color: var(--muted); }
.breadcrumb-item a { color: var(--accent-2); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(154,163,173,0.5); content: "›"; }

/* ───── Pagination ───────────────────────────────────────────────── */
.pagination .page-link {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
}
.pagination .page-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.pagination .page-item.active .page-link {
  background: var(--accent-2);
  color: #04212c;
  border-color: var(--accent-2);
}
.pagination .page-item.disabled .page-link {
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
}

/* ───── Dropdowns ─────────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  border-radius: 8px;
}
.dropdown-item {
  color: var(--text);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(16, 183, 234, 0.10);
  color: #fff;
}
.dropdown-divider { border-top: 1px solid var(--line); }
.dropdown-header { color: var(--muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ───── Modals ────────────────────────────────────────────────────── */
.modal-content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-header, .modal-footer { border-color: var(--line); }
.modal-title { color: #fff; }
.modal-backdrop.show { opacity: 0.65; }
.close { color: var(--text); text-shadow: none; opacity: 0.7; }
.close:hover { color: #fff; opacity: 1; }

/* ───── Nav tabs / pills (used in admin nav.scala.html sub-tabs) ─── */
.nav-tabs { border-bottom: 1px solid var(--line); }
.nav-tabs .nav-link {
  color: var(--muted);
  border: 1px solid transparent;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.nav-tabs .nav-link:hover { color: var(--text); border-color: var(--line); }
.nav-tabs .nav-link.active {
  background: var(--panel);
  color: #fff;
  border-color: var(--line) var(--line) transparent;
}
.nav-pills .nav-link {
  color: var(--muted);
  border-radius: 999px;
}
.nav-pills .nav-link.active {
  background: var(--accent-2);
  color: #04212c;
}

/* ───── Custom file input / file row ──────────────────────────────── */
.custom-file-label {
  background: rgba(11, 15, 21, 0.85);
  color: var(--text);
  border-color: var(--line);
}
.custom-file-label::after {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-left: 1px solid var(--line);
}

/* ───── List groups (rare on admin but cheap to cover) ───────────── */
.list-group-item {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
}
.list-group-item:hover { background: rgba(255, 255, 255, 0.04); }
.list-group-item.active {
  background: rgba(16, 183, 234, 0.16);
  color: #fff;
  border-color: rgba(16, 183, 234, 0.45);
}

/* ───── Definition lists (admin uses dl.row for info pages) ──────── */
dt { color: var(--muted); font-weight: 600; }
dd { color: var(--text); }

/* ───── Scrollbar (WebKit) — subtle on dark ──────────────────────── */
* { scrollbar-color: rgba(255,255,255,0.12) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.20); }
*::-webkit-scrollbar-track { background: transparent; }

/* ───── Focus outlines — keyboard a11y on dark ────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(16,183,234,0.30); outline: 0; }

/* ───── Long device IDs / radar IDs render as inline code ────────── */
table td code { font-size: 12px; padding: 1px 6px; }

/* ───── Device-type pill (admin/device/all.scala.html) ──────────── */
.device-type-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-family: ui-monospace, Consolas, monospace;
}
/* Match the operator console's device-identity palette so the type
   pill in admin and the pill in the Device-detail header read the
   same. Names mirror the SensorType enum values. */
.device-type-pill.device-type-radar                          { color: #5fe89a; background: rgba(74,219,124,0.14);  border-color: rgba(74,219,124,0.45); }
.device-type-pill.device-type-passive_radar_seeker           { color: #bb9bff; background: rgba(187,155,255,0.14); border-color: rgba(187,155,255,0.45); }
.device-type-pill.device-type-optical_sensor                 { color: #6ed7ff; background: rgba(16,183,234,0.14);  border-color: rgba(16,183,234,0.45); }
.device-type-pill.device-type-thermal_optical_sensor         { color: #ffd874; background: rgba(250,204,21,0.14);  border-color: rgba(250,204,21,0.45); }

/* Actions cell (admin/device/all.scala.html) — keep Details + MAVLink
   aligned and consistently gapped instead of relying on ml-1, which
   indents the second button awkwardly when it wraps to a new line. */
.device-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* ───── Device-configuration card (RADAR detail page) ──────────── */
.device-config-card .device-config-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.device-config-card .device-config-status {
  color: var(--muted);
  font-size: 12px;
  margin-left: 6px;
}
.device-config-card .device-config-status.is-ok  { color: var(--accent); }
.device-config-card .device-config-status.is-err { color: #ffa0a8; }
.device-config-card .device-config-form {
  display: grid;
  gap: 14px;
}
.device-config-card .device-config-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px 12px;
  background: rgba(11, 15, 21, 0.4);
}
.device-config-card .device-config-section legend {
  width: auto;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.device-config-card .form-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}
.device-config-card .form-row-label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text);
}
@media (max-width: 640px) {
  .device-config-card .form-row { grid-template-columns: 1fr; }
}

/* =====================================================================
 * Mission statistics page widgets.
 * ===================================================================== */
.stats-section-title {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.stats-mission-header h4 { font-weight: 700; }
.stats-mission-header .mono code { font-size: 11px; }
.stats-empty { color: var(--muted); font-style: italic; padding: 8px 0; }

/* KPI tiles row — auto-fit grid that wraps to 1 col on narrow screens. */
.stats-kpi-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.stats-kpi-tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.30);
  position: relative;
  overflow: hidden;
}
.stats-kpi-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 0% 0%, rgba(16,183,234,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.stats-kpi-tile > * { position: relative; }
.stats-kpi-label {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.stats-kpi-value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}
.stats-kpi-sub {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.stats-kpi-accent { border-color: rgba(74,219,124,0.35); }
.stats-kpi-accent .stats-kpi-value { color: var(--accent); }
.stats-kpi-accent::before {
  background: radial-gradient(120% 70% at 0% 0%, rgba(74,219,124,0.10) 0%, transparent 60%);
}
/* Slim progress bar inside the "closed" KPI tile. */
.stats-kpi-progress {
  margin: 8px 0 6px;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
}
.stats-kpi-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #79eaa9);
  border-radius: 99px;
}

/* Stacked horizontal bar for status distribution. */
.stats-stacked-bar {
  display: flex;
  width: 100%;
  height: 18px;
  background: rgba(255,255,255,0.04);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.stats-bar-seg {
  display: block;
  height: 100%;
  min-width: 2px;
}
.stats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
  color: var(--text);
  font-size: 12px;
}
.stats-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.stats-legend-item i {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  border: 1px solid rgba(0,0,0,0.25);
}
.stats-legend-item strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Shared status palette — used both by stacked-bar segments and by
   the badge in the per-task table. The block-vs-inline distinction
   is handled by selector specificity below. */
.stats-color-new         { background: #10b7ea; }
.stats-color-assigned    { background: #3b82f6; }
.stats-color-need-review { background: #fbbf24; }
.stats-color-in-review   { background: #f59e0b; }
.stats-color-closed      { background: #4adb7c; }
.stats-color-broken      { background: #ef4444; }
.stats-color-empty       { background: #9aa3ad; }

/* Status badges in the table — pill with tinted fill + matching text. */
.stats-badge-status {
  background: transparent;       /* the .stats-color-* above wins */
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  font-size: 11px;
}
/* Override the solid backgrounds for badge contexts: tint the fill,
   tint the border, keep the text bright. */
.stats-badge-status.stats-color-new         { background: rgba(16,183,234,0.16); color: #6ed7ff; border-color: rgba(16,183,234,0.45); }
.stats-badge-status.stats-color-assigned    { background: rgba(59,130,246,0.16); color: #93b9ff; border-color: rgba(59,130,246,0.45); }
.stats-badge-status.stats-color-need-review { background: rgba(251,191,36,0.16); color: #ffd874; border-color: rgba(251,191,36,0.45); }
.stats-badge-status.stats-color-in-review   { background: rgba(245,158,11,0.16); color: #ffc46d; border-color: rgba(245,158,11,0.45); }
.stats-badge-status.stats-color-closed      { background: rgba(74,219,124,0.16); color: var(--accent); border-color: rgba(74,219,124,0.45); }
.stats-badge-status.stats-color-broken      { background: rgba(239,68,68,0.16);  color: #ffa0a8; border-color: rgba(239,68,68,0.45); }
.stats-badge-status.stats-color-empty       { background: rgba(154,163,173,0.16);color: #cfd6df; border-color: rgba(154,163,173,0.45); }

/* Priority widgets — coloured pill + count, plus a smaller badge
   variant for the task table column. */
.stats-priority-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stats-priority-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
}
.stats-priority-pill .stats-priority-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.stats-priority-pill .stats-priority-label {
  flex: 1;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.stats-priority-pill .stats-priority-value {
  font-size: 16px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stats-priority-low     { color: #5fe89a; }
.stats-priority-normal  { color: #6ed7ff; }
.stats-priority-high    { color: #ffd874; }
.stats-priority-highest { color: #ffa0a8; }

/* Same palette applied to the badge in the task table. */
.stats-badge-priority {
  border: 1px solid currentColor;
  background: transparent;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  font-size: 11px;
}
.stats-badge-priority.stats-priority-low     { background: rgba(74,219,124,0.14); border-color: rgba(74,219,124,0.45); color: #5fe89a; }
.stats-badge-priority.stats-priority-normal  { background: rgba(16,183,234,0.14); border-color: rgba(16,183,234,0.45); color: #6ed7ff; }
.stats-badge-priority.stats-priority-high    { background: rgba(250,204,21,0.14); border-color: rgba(250,204,21,0.45); color: #ffd874; }
.stats-badge-priority.stats-priority-highest { background: rgba(239,68,68,0.16);  border-color: rgba(239,68,68,0.45);  color: #ffa0a8; }

/* Per-task table tweaks. */
.stats-task-table .stats-task-link { color: var(--text); font-weight: 600; }
.stats-task-table .stats-task-link:hover { color: #fff; }
.stats-task-table .mono { font-family: ui-monospace, Consolas, monospace; }
.stats-task-table .text-muted.small { font-size: 11px; }