:root{
  --bg:#0b1220; --bg2:#050814;
  --text:#e6edf7; --muted:#9fb0c6;
  --card:rgba(15,23,42,.78); --card2:rgba(2,6,23,.55);
  --border:rgba(160,180,210,.22); --border2:rgba(160,180,210,.34);
  --primary:#60a5fa; --primary2:#93c5fd;
  --shadow:0 14px 44px rgba(0,0,0,.35);
  --radius:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ color-scheme: dark; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(96,165,250,.12), transparent 55%),
    radial-gradient(900px 500px at 80% 10%, rgba(52,211,153,.10), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

a{ color:var(--primary2); }
a:hover{ color:var(--primary); }
.uav-hidden{ display:none !important; }

/* page */
.wrap,.container,main{ max-width:1200px; margin:0 auto; padding:18px; }
@media(max-width:640px){ .wrap,.container,main{ padding:14px; } }

/* cards */
.card, section, fieldset, .panel, .box{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin:14px 0;
}
h1,h2,h3{ margin:0 0 10px; color:var(--text); }
h1{ font-size:22px; } h2{ font-size:18px; } h3{ font-size:15px; }
.muted, small{ color:var(--muted); }
hr{ border:none; border-top:1px solid rgba(160,180,210,.16); margin:14px 0; }

/* inputs */
label{ display:block; font-size:13px; color:var(--muted); margin:0 0 6px; }
input,textarea,select{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--border2);
  background:var(--card2);
  color:var(--text);
  outline:none;
}
input::placeholder,textarea::placeholder{ color:rgba(160,180,210,.70); }
input:focus,textarea:focus,select:focus{
  border-color:rgba(96,165,250,.65);
  box-shadow:0 0 0 4px rgba(96,165,250,.16);
}
textarea{ min-height:84px; resize:vertical; }

/* buttons */
button,.btn,input[type="submit"],input[type="button"]{
  appearance:none;
  border:1px solid var(--border2);
  background:rgba(96,165,250,.14);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
}
button:hover,.btn:hover,input[type="submit"]:hover,input[type="button"]:hover{
  border-color:rgba(96,165,250,.55);
  background:rgba(96,165,250,.22);
}
button:active{ transform:translateY(1px); }

/* table */
.table-wrap{
  overflow:auto;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(2,6,23,.25);
}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:980px;
  background:transparent;
}
thead th{
  position:sticky; top:0;
  background:rgba(10,15,30,.95);
  color:rgba(160,180,210,.90);
  text-align:left;
  font-size:12px;
  letter-spacing:.25px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  z-index:2;
}
tbody td{
  padding:10px 12px;
  border-bottom:1px solid rgba(160,180,210,.12);
  vertical-align:top;
  font-size:13px;
  color:var(--text);
}
tbody tr:nth-child(odd){ background:rgba(255,255,255,.02); }
tbody tr:hover{ background:rgba(96,165,250,.08); }

/* ----- single dropdown multiselect ----- */
.msel{
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(2,6,23,.28);
}
.msel-label{ color:var(--muted); font-size:13px; margin:0 0 8px; }
.msel-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
  background: rgba(2,6,23,.40);
}
.msel-placeholder{ color: rgba(160,180,210,.85); font-weight:700; }
.msel-caret{ opacity:.9; }
.msel-chips{ display:flex; flex-wrap:wrap; gap:6px; flex:1; justify-content:flex-start; }
.chip{
  display:inline-flex;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(160,180,210,.22);
  background: rgba(96,165,250,.10);
  color: var(--text);
  font-size:12px;
  font-weight:800;
}
.msel-pop{
  display:none;
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(8,12,24,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.msel-search{ padding:10px; border-bottom:1px solid rgba(160,180,210,.14); }
.msel-q{ width:100%; }
.msel-groups{ max-height:340px; overflow:auto; padding:10px; }
.msel-group{ margin-bottom:10px; }
.msel-group-title{
  font-size:12px;
  color: rgba(160,180,210,.92);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.msel-opt{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(160,180,210,.14);
  border-radius:12px;
  background: rgba(2,6,23,.30);
  margin-bottom:8px;
}
.msel-opt input{ width:18px; height:18px; margin:0; }
.msel-opt span{ color: var(--text); font-size:14px; font-weight:700; }
.msel-hint{ margin-top:8px; color: rgba(160,180,210,.78); font-size:12px; }


/* === CONTRAST HOTFIX START === */
:root, html, body {
  --bs-body-color: #eef4ff !important;
  --bs-secondary-color: #cdd9ee !important;
  --bs-emphasis-color: #ffffff !important;
  --bs-heading-color: #ffffff !important;
  --bs-body-bg: #07111f !important;
  --bs-card-color: #eef4ff !important;
  --bs-card-bg: rgba(10,18,36,.84) !important;
  --bs-border-color: rgba(170,190,220,.24) !important;
  --bs-table-color: #eef4ff !important;
  --bs-table-bg: transparent !important;
  --bs-table-border-color: rgba(170,190,220,.18) !important;
}

body {
  color: #eef4ff !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #ffffff !important;
}

.card, .card-body, section, fieldset, .panel, .box, .table-wrap,
.msel, .msel-pop,
[class*="stat"], [id*="stat"],
[class*="summary"], [id*="summary"] {
  color: #eef4ff !important;
}

label, .form-label, .small-muted, .text-muted, small,
.msel-label, .msel-hint,
.badge, thead th,
[class*="label"], [class*="caption"], [class*="muted"] {
  color: #cdd9ee !important;
  opacity: 1 !important;
}

.table, .table *,
table, table *, thead th, tbody td, tfoot td {
  color: #eef4ff !important;
}

thead th {
  background: rgba(8,14,28,.96) !important;
}

tbody tr:nth-child(odd) {
  background: rgba(255,255,255,.03) !important;
}

tbody tr:hover {
  background: rgba(96,165,250,.08) !important;
}

input, textarea, select, option {
  color: #f4f8ff !important;
  background: rgba(3,9,22,.72) !important;
}

input::placeholder, textarea::placeholder {
  color: #a9bedb !important;
  opacity: 1 !important;
}

button, .btn, .btn * {
  color: #f8fbff !important;
}

.badge {
  background: rgba(96,165,250,.16) !important;
  border: 1px solid rgba(147,197,253,.28) !important;
}

.small-muted b,
[class*="stat"] b,
[class*="summary"] b,
[class*="count"] b {
  color: #ffffff !important;
}
/* === CONTRAST HOTFIX END === */

