:root{
  --accent:#6366f1;
  --accent-2:#8b5cf6;
  --bg:#0f1117;
  --surface:#171923;
  --surface-2:#1e2130;
  --border:#2a2e3f;
}
body{ background:var(--bg); color:#e5e7eb; }
.main-wrap{ min-height:calc(100vh - 130px); }

/* ---- Nav ---- */
.app-nav{
  background:linear-gradient(90deg,#12141d,#171a26);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(6px);
}
.navbar-brand{ color:#fff; }
.brand-badge{
  width:34px;height:34px;border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;color:#fff;font-size:1rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 14px rgba(99,102,241,.4);
}
.brand-badge-lg{ width:56px;height:56px;font-size:1.6rem;border-radius:14px; }
.app-nav .nav-link{ color:#c7cad6; border-radius:8px; padding:.45rem .8rem; }
.app-nav .nav-link:hover{ color:#fff; background:rgba(255,255,255,.05); }
.app-nav .nav-link.active{ color:#fff; background:rgba(99,102,241,.18); }
.driver-pill{
  font-size:.72rem;letter-spacing:.4px;background:var(--surface-2);
  border:1px solid var(--border);color:#a5b4fc;padding:.3rem .6rem;border-radius:20px;
}
.avatar{
  width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;font-weight:700;font-size:.85rem;
}

/* hover dropdowns (desktop) */
@media(min-width:992px){
  .hover-dropdown:hover > .dropdown-menu{ display:block; margin-top:0; }
  .hover-dropdown > .dropdown-toggle:active{ pointer-events:none; }
}
.dropdown-menu{ background:var(--surface-2); border:1px solid var(--border); }
.dropdown-item{ color:#d1d5db; }
.dropdown-item:hover{ background:rgba(99,102,241,.15); color:#fff; }

/* ---- Cards ---- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.card-header{ background:var(--surface-2); border-bottom:1px solid var(--border); border-radius:14px 14px 0 0 !important; }
.table-dark{ --bs-table-bg:transparent; }
.table-dark thead th{ color:#9ca3af; font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; border-color:var(--border); }
.table-dark td{ border-color:var(--border); }

/* ---- Stat cards ---- */
.stat-card .stat-icon{
  width:52px;height:52px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:1.4rem;color:#fff;
}
.stat-card .stat-value{ font-size:1.6rem;font-weight:700;line-height:1; }
.stat-card .stat-label{ color:#9ca3af;font-size:.8rem; }
.stat-1 .stat-icon{ background:linear-gradient(135deg,#6366f1,#8b5cf6); }
.stat-2 .stat-icon{ background:linear-gradient(135deg,#0ea5e9,#22d3ee); }
.stat-3 .stat-icon{ background:linear-gradient(135deg,#f59e0b,#f97316); }
.stat-4 .stat-icon{ background:linear-gradient(135deg,#10b981,#34d399); }

/* ---- Buttons / accents ---- */
.btn-accent{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:none;color:#fff;
}
.btn-accent:hover{ filter:brightness(1.1); color:#fff; }
.bg-accent{ background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important; color:#fff; }

/* ---- Forms ---- */
.form-control,.form-select,.input-group-text{
  background:var(--surface-2); border:1px solid var(--border); color:#e5e7eb;
}
.form-control:focus,.form-select:focus{
  background:var(--surface-2); color:#fff; border-color:var(--accent);
  box-shadow:0 0 0 .2rem rgba(99,102,241,.25);
}
.form-control::placeholder{ color:#6b7280; }

/* ---- Contact list ---- */
.contact-list{ max-height:340px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; padding:.35rem; }
.contact-row{
  display:flex; align-items:center; gap:.7rem; padding:.5rem .6rem; border-radius:8px;
  cursor:pointer; user-select:none;
}
.contact-row:hover{ background:rgba(255,255,255,.04); }
.contact-row .c-info{ display:flex; flex-direction:column; line-height:1.15; margin-right:auto; }
.contact-row .c-name{ font-weight:600; }
.contact-row .c-phone{ font-size:.8rem; color:#9ca3af; }
.contact-row.opted-out{ opacity:.5; }
.contact-list::-webkit-scrollbar{ width:8px; }
.contact-list::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }

/* ---- Send log ---- */
.send-log{
  max-height:220px; overflow-y:auto; font-size:.8rem; font-family:ui-monospace,monospace;
  background:#0b0d13; border:1px solid var(--border); border-radius:8px; padding:.5rem;
}
.send-log .ok{ color:#34d399; }
.send-log .fail{ color:#f87171; }
.send-log .sim{ color:#fbbf24; }

/* ---- Login ---- */
.login-body{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 600px at 70% -10%,rgba(99,102,241,.25),transparent),var(--bg);
}
.login-wrap{ width:100%; max-width:420px; padding:1rem; }
.login-card{ background:var(--surface); border-radius:18px; }

/* ---- Footer ---- */
.app-footer{ border-top:1px solid var(--border); }