/* ══════════════════════════════════════════════════════════════════
   FILE:    components.css
   PURPOSE: Premium UI component library — deep dark glass theme.
            Glassmorphism · layered glows · micro-animations.
   ══════════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:1.65;
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
input,textarea,select { font-family:inherit; }

/* ── Ambient blobs ───────────────────────────────────────────────── */
.ambience {
  position:fixed; inset:0;
  pointer-events:none; z-index:0; overflow:hidden;
}
.amb {
  position:absolute; border-radius:50%;
  filter:blur(100px);
  animation:drift 22s ease-in-out infinite alternate;
}
.amb-1 {
  width:1100px; height:1100px; top:-320px; left:-250px;
  background:radial-gradient(circle, rgba(245,166,35,0.45) 0%, rgba(240,82,82,0.18) 38%, transparent 65%);
  opacity:1;
}
.amb-2 {
  width:900px; height:900px; top:5%; right:-260px;
  background:radial-gradient(circle, rgba(79,148,248,0.40) 0%, rgba(168,85,247,0.16) 38%, transparent 65%);
  animation-delay:-8s; opacity:1;
}
.amb-3 {
  width:800px; height:800px; bottom:-150px; left:25%;
  background:radial-gradient(circle, rgba(20,201,140,0.32) 0%, rgba(79,148,248,0.10) 45%, transparent 65%);
  animation-delay:-16s; opacity:1;
}
.amb-4 {
  width:600px; height:600px; top:42%; left:8%;
  background:radial-gradient(circle, rgba(168,85,247,0.28) 0%, transparent 65%);
  animation-delay:-4s; opacity:1;
}
.amb-5 {
  width:700px; height:700px; top:20%; left:35%;
  background:radial-gradient(circle, rgba(79,148,248,0.18) 0%, rgba(168,85,247,0.10) 45%, transparent 68%);
  animation-delay:-11s; opacity:0.9;
}
@keyframes drift {
  0%   { transform:translate(0,0) scale(1); }
  33%  { transform:translate(40px,25px) scale(1.06); }
  66%  { transform:translate(20px,50px) scale(1.03); }
  100% { transform:translate(65px,55px) scale(1.14); }
}

/* ── App layout ─────────────────────────────────────────────────── */
.layout { position:relative; z-index:1; display:flex; min-height:100vh; }

/* ─────────────────────────────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--sidebar-bg);
  border-right:1px solid rgba(255,255,255,0.10);
  box-shadow:4px 0 40px rgba(0,0,0,0.8);
  display:flex; flex-direction:column;
  padding:var(--s5) var(--s3);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}

/* Logo */
.sidebar-logo {
  display:flex; align-items:center; gap:12px;
  padding:var(--s2) var(--s3); margin-bottom:30px;
}
.logo-icon {
  width:42px; height:42px; border-radius:13px;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
  box-shadow:0 4px 28px rgba(245,166,35,0.60), 0 0 0 1px rgba(245,166,35,0.28), 0 0 60px rgba(245,166,35,0.22);
  position:relative; overflow:hidden;
  animation:logo-pulse 4s ease-in-out infinite;
}
.logo-icon::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.20) 0%, transparent 60%);
}
@keyframes logo-pulse {
  0%,100% { box-shadow:0 4px 28px rgba(245,166,35,0.60), 0 0 0 1px rgba(245,166,35,0.28), 0 0 60px rgba(245,166,35,0.22); }
  50%      { box-shadow:0 4px 36px rgba(245,166,35,0.80), 0 0 0 1px rgba(245,166,35,0.45), 0 0 90px rgba(245,166,35,0.35); }
}
.logo-text {
  font-family:var(--font-heading); font-size:15.5px; font-weight:800;
  color:var(--text); line-height:1.2; letter-spacing:-0.3px;
}
.logo-text span {
  display:block; font-size:10px; font-weight:400;
  color:var(--muted2); letter-spacing:1.8px; text-transform:uppercase;
  margin-top:2px;
}

/* Nav */
.nav-section { margin-bottom:var(--s1); }
.nav-label {
  font-size:9px; color:var(--muted); font-weight:700;
  text-transform:uppercase; letter-spacing:2px;
  padding:0 var(--s3); margin-bottom:4px; margin-top:var(--s4);
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px var(--s3); border-radius:var(--radius-sm);
  color:var(--muted2); font-size:13px; font-weight:400;
  cursor:pointer; transition:var(--t);
  border:none; background:none; width:100%; text-align:left;
  position:relative; overflow:hidden;
}
.nav-item::before {
  content:''; position:absolute; left:0; top:15%; height:70%;
  width:2.5px; background:var(--grad-brand); border-radius:2px;
  opacity:0; transform:scaleY(0); transition:var(--t);
}
.nav-item:hover {
  background:rgba(255,255,255,0.05);
  color:var(--text2);
}
.nav-item.active {
  background:linear-gradient(90deg, rgba(245,166,35,0.14) 0%, rgba(245,166,35,0.04) 70%, transparent 100%);
  color:var(--smart); font-weight:600;
  border:none;
  text-shadow:0 0 20px rgba(245,166,35,0.35);
}
.nav-item.active::before { opacity:1; transform:scaleY(1); }
.nav-icon { font-size:15px; width:20px; text-align:center; flex-shrink:0; }
.nav-badge {
  margin-left:auto; background:var(--danger); color:#fff;
  font-size:9px; font-weight:700; padding:2px 6px;
  border-radius:var(--radius-full); font-family:var(--font-mono);
  letter-spacing:0.3px;
}
.nav-badge.info { background:var(--info); color:#000; }
.sidebar-divider { height:1px; background:var(--border); margin:var(--s3) var(--s1); }

/* ── Sidebar user card ─────────────────────────────────────────── */
.sidebar-user {
  display:flex; align-items:center; gap:10px;
  padding:11px 13px; margin-bottom:6px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.sidebar-avatar {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:#fff;
  box-shadow:0 2px 12px rgba(245,166,35,0.40);
}
.sidebar-user-name { font-size:13px; font-weight:700; color:var(--text); }
.sidebar-user-role {
  font-size:10px; color:var(--muted2); text-transform:capitalize;
  margin-top:2px; letter-spacing:0.5px;
}
.nav-signout {
  width:100%; background:none; border:none; cursor:pointer; text-align:left;
  color:var(--danger) !important;
}
.nav-signout:hover { background:rgba(240,82,82,0.12) !important; border-color:rgba(240,82,82,0.25) !important; }

/* Device list */
.device-list { display:flex; flex-direction:column; gap:6px; }
.device-item {
  display:flex; align-items:center; gap:10px;
  padding:10px var(--s3); border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  transition:var(--t);
}
.device-item:hover {
  background:rgba(255,255,255,0.05);
  border-color:var(--border2);
  box-shadow:0 2px 12px rgba(0,0,0,0.2);
}
.device-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  position:relative;
}
.device-dot::after {
  content:''; position:absolute; inset:-3px; border-radius:50%;
  background:inherit; opacity:0.25; animation:ping 2.5s ease infinite;
}
@keyframes ping {
  0%,100% { transform:scale(1); opacity:0.25; }
  50%      { transform:scale(1.7); opacity:0; }
}
.device-dot.smart    { background:var(--smart);    box-shadow:0 0 10px var(--smart-glow); }
.device-dot.metfone  { background:var(--metfone);  box-shadow:0 0 10px var(--metfone-glow); }
.device-dot.cellcard { background:var(--cellcard); box-shadow:0 0 10px var(--cellcard-glow); }
.device-dot.offline  { background:var(--muted); box-shadow:none; }
.device-dot.offline::after { display:none; }
.device-info { flex:1; min-width:0; }
.device-name { font-size:12px; font-weight:600; color:var(--text); }
.device-meta { font-size:10px; color:var(--muted2); margin-top:1px; }

/* ── Operator logos ────────────────────────────────────────────── */
.op-logo {
  height:28px; width:auto; border-radius:7px;
  object-fit:contain; flex-shrink:0;
  box-shadow:0 2px 10px rgba(0,0,0,0.40);
}
.op-logo-lg {
  height:50px; width:auto; border-radius:12px;
  object-fit:contain;
  box-shadow:0 6px 24px rgba(0,0,0,0.45);
}

/* ── Main content ───────────────────────────────────────────────── */
.main { flex:1; min-width:0; padding:var(--s8) var(--s8) 80px; overflow-y:auto; }

/* ─────────────────────────────────────────────────────────────────
   PAGE HEADER
───────────────────────────────────────────────────────────────── */
.page-header {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:var(--s4);
  margin-bottom:var(--s8);
  animation:fadeUp 0.4s ease both;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}
.page-title {
  font-family:var(--font-heading); font-size:30px; font-weight:900;
  letter-spacing:-0.8px;
  background:linear-gradient(135deg,#ffffff 0%,var(--text2) 50%,var(--muted3) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.1;
}
.page-sub { font-size:13px; color:var(--muted2); margin-top:6px; line-height:1.5; }
.header-actions { display:flex; gap:10px; align-items:center; flex-shrink:0; }

/* Live badge */
.live-badge {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(34,212,106,0.10); color:var(--success);
  font-size:11px; font-weight:700; padding:7px 16px;
  border-radius:var(--radius-full);
  border:1px solid rgba(34,212,106,0.22);
  box-shadow:0 0 20px rgba(34,212,106,0.15), inset 0 1px 0 rgba(34,212,106,0.10);
  transition:var(--t); letter-spacing:0.5px;
}
.live-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--success);
  box-shadow:0 0 8px var(--success-glow);
  animation:blink 1.4s ease infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ─────────────────────────────────────────────────────────────────
   STAT CARDS
───────────────────────────────────────────────────────────────── */
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:14px; margin-bottom:20px;
  animation:fadeUp 0.4s 0.05s ease both;
}
.stat-card {
  background:linear-gradient(145deg, #1e3060 0%, #122244 100%);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:var(--radius-lg);
  padding:24px 22px;
  position:relative; overflow:hidden;
  transition:var(--t-slow);
  box-shadow:0 4px 28px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.18);
}
.stat-card::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.30),transparent);
}
.stat-card::after {
  content:''; position:absolute; inset:0;
  background:var(--grad-shine);
  opacity:0; transition:var(--t);
}
.stat-card:hover {
  border-color:rgba(255,255,255,0.22);
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,0.7), 0 0 40px rgba(79,148,248,0.08);
}
.stat-card:hover::after { opacity:1; }
.stat-label {
  font-size:10.5px; color:var(--muted2); text-transform:uppercase;
  letter-spacing:1.4px; margin-bottom:14px; font-weight:700;
  display:flex; align-items:center; gap:6px;
}
.stat-icon {
  width:28px; height:28px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
}
.stat-value {
  font-family:var(--font-mono); font-size:34px; font-weight:700;
  color:var(--text); line-height:1; margin-bottom:10px;
  letter-spacing:-1.5px;
}
.stat-change { font-size:12px; color:var(--muted2); display:flex; align-items:center; gap:4px; }
.stat-change.pos,.stat-change.up   { color:var(--success); }
.stat-change.neg,.stat-change.down { color:var(--danger); }
.stat-change.neu                   { color:var(--muted2); }
.stat-bar {
  height:3px; background:var(--surface4);
  border-radius:var(--radius-full); overflow:hidden;
  margin-top:16px;
}
.stat-bar-fill {
  height:100%; border-radius:var(--radius-full);
  background:var(--grad-brand);
  box-shadow:0 0 10px var(--smart-glow);
}

/* ─────────────────────────────────────────────────────────────────
   CARD
───────────────────────────────────────────────────────────────── */
.card {
  background:linear-gradient(160deg, var(--card2) 0%, var(--card) 100%);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  animation:fadeUp 0.4s ease both;
  transition:border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
  box-shadow:0 4px 28px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.12);
}
.card::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.20),transparent);
  pointer-events:none;
}
.card:hover {
  border-color:rgba(255,255,255,0.18);
  transform:translateY(-2px);
  box-shadow:0 16px 48px rgba(0,0,0,0.75), 0 0 60px rgba(79,148,248,0.05);
}

.card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}
.card-title {
  font-size:14px; font-weight:800; color:var(--text);
  letter-spacing:-0.2px; font-family:var(--font-heading);
}
/* legacy */
.card-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); }
.card-body { padding:22px; }

/* Summary rows — used in batch summary card */
.summary-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 22px; border-bottom:1px solid rgba(255,255,255,0.08);
}
.summary-row:last-child { border-bottom:none; padding-bottom:14px; }
.summary-row:first-child { padding-top:14px; }

/* Card tab-bar wrapper */
.card > .tab-bar { margin:18px 22px 0; }
.card > #tabCsv, .card > #tabText { padding:0 22px 22px; }
.card > .form-group:not(.card-header ~ .form-group) { padding: 0 22px; }

/* ─────────────────────────────────────────────────────────────────
   OPERATOR CARDS
───────────────────────────────────────────────────────────────── */
.operator-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; margin-bottom:20px;
}
.op-card {
  background:var(--card);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--radius-lg);
  padding:24px 22px;
  transition:var(--t-slow);
  position:relative; overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.08);
}
.op-card::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:3px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.op-card.smart {
  border-color:rgba(245,166,35,0.22);
  background:linear-gradient(160deg, #1a1e2e 0%, #0d1729 100%);
}
.op-card.smart::before {
  background:var(--smart-grad);
  box-shadow:0 0 30px rgba(245,166,35,0.50);
}
.op-card.metfone {
  border-color:rgba(79,148,248,0.22);
  background:linear-gradient(160deg, #101e36 0%, #0d1729 100%);
}
.op-card.metfone::before {
  background:var(--metfone-grad);
  box-shadow:0 0 30px rgba(79,148,248,0.50);
}
.op-card.cellcard {
  border-color:rgba(20,201,140,0.22);
  background:linear-gradient(160deg, #0f1e2a 0%, #0d1729 100%);
}
.op-card.cellcard::before {
  background:var(--cellcard-grad);
  box-shadow:0 0 30px rgba(20,201,140,0.50);
}
.op-card:hover {
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}
.op-card.smart:hover    { border-color:var(--smart-border);    box-shadow:0 16px 48px rgba(0,0,0,0.7), 0 0 60px rgba(245,166,35,0.15); }
.op-card.metfone:hover  { border-color:var(--metfone-border);  box-shadow:0 16px 48px rgba(0,0,0,0.7), 0 0 60px rgba(79,148,248,0.15); }
.op-card.cellcard:hover { border-color:var(--cellcard-border); box-shadow:0 16px 48px rgba(0,0,0,0.7), 0 0 60px rgba(20,201,140,0.15); }

/* op card inner */
.op-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.op-name   { font-size:14px; font-weight:800; color:var(--text); font-family:var(--font-heading); }
.op-status { font-size:11px; color:var(--success); font-weight:600; }
.op-count  { font-family:var(--font-mono); font-size:32px; font-weight:700; color:var(--text); margin-bottom:4px; letter-spacing:-1.5px; }
.op-limit  { font-size:12px; color:var(--muted2); margin-bottom:14px; }
.op-meta   { display:flex; justify-content:space-between; font-size:11px; color:var(--muted2); }

/* ─────────────────────────────────────────────────────────────────
   PROGRESS BARS
───────────────────────────────────────────────────────────────── */
.progress-bar {
  height:5px; background:var(--surface4);
  border-radius:var(--radius-full); overflow:hidden; margin-bottom:10px;
}
.progress-fill {
  height:100%; border-radius:var(--radius-full);
  transition:width 0.9s cubic-bezier(0.4,0,0.2,1);
  position:relative; overflow:hidden;
}
.progress-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);
  animation:shimmer 2s ease infinite;
}
@keyframes shimmer {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(400%); }
}
.progress-fill.smart    { background:var(--smart-grad);    box-shadow:0 0 12px var(--smart-glow); }
.progress-fill.metfone  { background:var(--metfone-grad);  box-shadow:0 0 12px var(--metfone-glow); }
.progress-fill.cellcard { background:var(--cellcard-grad); box-shadow:0 0 12px var(--cellcard-glow); }
.progress-fill.success  { background:linear-gradient(90deg,var(--success),var(--success-dim)); box-shadow:0 0 12px var(--success-glow); }
.progress-fill.danger   { background:linear-gradient(90deg,var(--danger),var(--danger-dim)); }

/* ─────────────────────────────────────────────────────────────────
   OPERATOR PILLS
───────────────────────────────────────────────────────────────── */
.op-pill {
  font-size:11px; font-weight:700; padding:3px 12px;
  border-radius:var(--radius-full); display:inline-block;
  letter-spacing:0.4px;
}
.op-pill.smart    { background:var(--smart-soft2);    color:var(--smart);    box-shadow:0 0 12px var(--smart-soft); }
.op-pill.metfone  { background:var(--metfone-soft2);  color:var(--metfone);  box-shadow:0 0 12px var(--metfone-soft); }
.op-pill.cellcard { background:var(--cellcard-soft2); color:var(--cellcard); box-shadow:0 0 12px var(--cellcard-soft); }
.op-pill.unknown  { background:rgba(240,82,82,0.14);  color:var(--danger); }

/* ─────────────────────────────────────────────────────────────────
   STATUS BADGES
───────────────────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 11px; border-radius:var(--radius-full);
  font-size:10.5px; font-weight:700; letter-spacing:0.4px;
}
.badge-success { background:var(--success-soft2); color:var(--success); box-shadow:0 0 12px rgba(34,212,106,0.18); }
.badge-warning { background:var(--warning-soft2); color:var(--warning); }
.badge-danger  { background:var(--danger-soft2);  color:var(--danger);  box-shadow:0 0 12px rgba(240,82,82,0.18); }
.badge-info    { background:var(--info-soft2);    color:var(--info); }
.badge-muted   { background:var(--surface3);      color:var(--muted2); }

/* ─────────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 24px; border-radius:var(--radius-sm);
  font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer; border:none; transition:var(--t);
  white-space:nowrap; line-height:1;
  position:relative; overflow:hidden;
  letter-spacing:0.2px;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,0.10) 50%,transparent 65%);
  opacity:0; transition:var(--t);
}
.btn:hover::after { opacity:1; }
.btn:active:not(:disabled) { transform:scale(0.97); }
.btn:disabled { opacity:0.4; cursor:not-allowed; }

.btn-primary {
  background:var(--smart-grad); color:#000;
  box-shadow:0 4px 20px rgba(245,166,35,0.50), 0 0 0 1px rgba(245,166,35,0.25), inset 0 1px 0 rgba(255,255,255,0.20);
}
.btn-primary:hover:not(:disabled) {
  filter:brightness(1.08);
  box-shadow:0 8px 32px rgba(245,166,35,0.70), 0 0 0 1px rgba(245,166,35,0.40), inset 0 1px 0 rgba(255,255,255,0.25);
  transform:translateY(-2px);
}
.btn-ghost {
  background:rgba(255,255,255,0.05); color:var(--muted2);
  border:1px solid var(--border2);
  backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.btn-ghost:hover:not(:disabled) {
  color:var(--text); border-color:var(--border3);
  background:rgba(255,255,255,0.09);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-danger {
  background:var(--danger-soft2); color:var(--danger);
  border:1px solid rgba(240,82,82,0.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn-danger:hover:not(:disabled) {
  background:var(--danger); color:#fff;
  box-shadow:0 6px 24px var(--danger-glow);
  transform:translateY(-1px);
}
.btn-success {
  background:var(--success-soft2); color:var(--success);
  border:1px solid rgba(34,212,106,0.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn-success:hover:not(:disabled) {
  background:var(--success); color:#000;
  box-shadow:0 6px 24px var(--success-glow);
  transform:translateY(-1px);
}
.btn-sm   { padding:7px 15px; font-size:12px; border-radius:var(--radius-xs); }
.btn-full { width:100%; }

/* ─────────────────────────────────────────────────────────────────
   FORM ELEMENTS
───────────────────────────────────────────────────────────────── */
.form-group { margin-bottom:20px; }
.form-label {
  display:block; font-size:11px; color:var(--muted2);
  font-weight:700; margin-bottom:8px;
  text-transform:uppercase; letter-spacing:1.2px;
}

.form-input {
  width:100%;
  background:#162240;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--radius-sm);
  color:var(--text); font-family:var(--font-body); font-size:13px;
  padding:12px 15px; outline:none;
  transition:var(--t);
  appearance:none;
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.10);
}
.form-input:hover {
  border-color:rgba(255,255,255,0.26);
  background:#1a2a50;
}
.form-input:focus {
  border-color:var(--smart);
  background:rgba(245,166,35,0.06);
  box-shadow:0 0 0 3px rgba(245,166,35,0.18), 0 0 30px rgba(245,166,35,0.10), inset 0 1px 0 rgba(0,0,0,0.05);
}
.form-input::placeholder { color:var(--muted); }
textarea.form-input { min-height:110px; resize:vertical; line-height:1.65; }
.form-select { cursor:pointer; }

/* legacy .input alias */
.input {
  width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--border2);
  border-radius:var(--radius-sm); color:var(--text); font-family:var(--font-body);
  font-size:13px; padding:12px 15px; outline:none; transition:var(--t);
  box-shadow:inset 0 1px 0 rgba(0,0,0,0.10);
}
.input:focus {
  border-color:var(--smart);
  box-shadow:0 0 0 3px rgba(245,166,35,0.18), 0 0 20px rgba(245,166,35,0.08);
}

/* Input with inline badge */
.input-with-badge { position:relative; }
.op-detect-badge {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:700; padding:3px 11px;
  border-radius:var(--radius-full); pointer-events:none;
  letter-spacing:0.3px;
}
.op-detect-badge.smart    { background:var(--smart-soft2);    color:var(--smart); }
.op-detect-badge.metfone  { background:var(--metfone-soft2);  color:var(--metfone); }
.op-detect-badge.cellcard { background:var(--cellcard-soft2); color:var(--cellcard); }
.op-detect-badge.unknown  { background:var(--surface4);       color:var(--muted2); }

/* Sender preview */
.form-sender-preview {
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px 15px; font-size:12px; color:var(--muted2);
  border-left:2.5px solid var(--smart-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}
.form-sender-preview strong { font-family:var(--font-mono); color:var(--text2); }

/* Char count */
.char-count { font-family:var(--font-mono); font-size:11px; color:var(--muted); text-align:right; margin-top:5px; }
.char-count.warn { color:var(--warning); }
.char-count.over { color:var(--danger); }

/* ─────────────────────────────────────────────────────────────────
   TOGGLE SWITCH
───────────────────────────────────────────────────────────────── */
.toggle {
  position:relative; display:inline-flex;
  width:44px; height:26px; flex-shrink:0; cursor:pointer;
}
.toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle-slider {
  position:absolute; inset:0;
  background:var(--surface4);
  border:1px solid var(--border2);
  border-radius:var(--radius-full);
  transition:var(--t);
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.3);
}
.toggle-slider::before {
  content:''; position:absolute;
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(145deg,#fff,#dde4f0);
  top:2px; left:2px;
  transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.toggle input:checked + .toggle-slider {
  background:var(--smart);
  border-color:var(--smart);
  box-shadow:0 0 20px var(--smart-glow), inset 0 2px 4px rgba(0,0,0,0.10);
}
.toggle input:checked + .toggle-slider::before { transform:translateX(18px); }

/* ─────────────────────────────────────────────────────────────────
   BULK SUMMARY
───────────────────────────────────────────────────────────────── */
.bulk-summary {
  background:rgba(255,255,255,0.025);
  border-radius:var(--radius-sm); border:1px solid var(--border); overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
.bulk-row {
  display:flex; align-items:center; padding:12px 16px;
  border-bottom:1px solid var(--border); gap:10px;
  transition:background 0.15s;
}
.bulk-row:hover { background:rgba(255,255,255,0.04); }
.bulk-row:last-child { border-bottom:none; }
.bulk-op-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.bulk-op-dot.smart    { background:var(--smart);    box-shadow:0 0 8px var(--smart-glow); }
.bulk-op-dot.metfone  { background:var(--metfone);  box-shadow:0 0 8px var(--metfone-glow); }
.bulk-op-dot.cellcard { background:var(--cellcard); box-shadow:0 0 8px var(--cellcard-glow); }
.bulk-op-dot.skip     { background:var(--muted); }
.bulk-op-name  { flex:1; font-size:13px; color:var(--text); font-weight:500; }
.bulk-op-phone { font-size:11px; color:var(--muted2); }
.bulk-op-count { font-family:var(--font-mono); font-size:13px; color:var(--muted2); }

/* ─────────────────────────────────────────────────────────────────
   LOG DOT
───────────────────────────────────────────────────────────────── */
.log-dot {
  width:7px; height:7px; border-radius:50%;
  flex-shrink:0; display:inline-block;
}
.log-dot.smart    { background:var(--smart);    box-shadow:0 0 8px var(--smart-glow); }
.log-dot.metfone  { background:var(--metfone);  box-shadow:0 0 8px var(--metfone-glow); }
.log-dot.cellcard { background:var(--cellcard); box-shadow:0 0 8px var(--cellcard-glow); }
.log-dot.sent     { background:var(--success);  box-shadow:0 0 8px var(--success-glow); }
.log-dot.failed   { background:var(--danger);   box-shadow:0 0 8px var(--danger-glow); }
.log-dot.queued   { background:var(--warning); }
.log-dot.skipped  { background:var(--muted); }
.log-dot.sending  { background:var(--info); animation:blink 0.7s ease infinite; }

/* ─────────────────────────────────────────────────────────────────
   ACTIVITY LOG
───────────────────────────────────────────────────────────────── */
.log-list { max-height:480px; overflow-y:auto; }
.log-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 22px; border-bottom:1px solid var(--border);
  transition:background 0.15s;
  position:relative;
}
.log-item:hover { background:rgba(255,255,255,0.03); }
.log-item:last-child { border-bottom:none; }
.log-body { flex:1; min-width:0; }
.log-line1 { display:flex; align-items:center; gap:7px; }
.log-number { font-family:var(--font-mono); font-size:12px; color:var(--text); font-weight:600; }
.log-op {
  font-size:10px; font-weight:700; padding:2px 9px;
  border-radius:var(--radius-full); letter-spacing:0.4px;
}
.log-op.smart    { background:var(--smart-soft2);    color:var(--smart); }
.log-op.metfone  { background:var(--metfone-soft2);  color:var(--metfone); }
.log-op.cellcard { background:var(--cellcard-soft2); color:var(--cellcard); }
.log-status { font-size:10px; margin-left:auto; font-weight:700; }
.log-status.sent    { color:var(--success); }
.log-status.failed  { color:var(--danger); }
.log-status.queued  { color:var(--warning); }
.log-status.sending { color:var(--info); }
.log-msg  { font-size:12px; color:var(--muted2); margin-top:3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.log-time { font-family:var(--font-mono); font-size:10px; color:var(--muted); margin-top:2px; }

/* ─────────────────────────────────────────────────────────────────
   PREFIX TAGS
───────────────────────────────────────────────────────────────── */
.prefix-tag {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:12px;
  padding:4px 12px; border-radius:var(--radius-full);
  border:1px solid var(--border2);
  background:rgba(255,255,255,0.05); color:var(--text);
  transition:var(--t);
}
.prefix-tag:hover { border-color:var(--border3); }
.prefix-tag.smart    { background:var(--smart-soft2);    border-color:var(--smart-border);    color:var(--smart); }
.prefix-tag.metfone  { background:var(--metfone-soft2);  border-color:var(--metfone-border);  color:var(--metfone); }
.prefix-tag.cellcard { background:var(--cellcard-soft2); border-color:var(--cellcard-border); color:var(--cellcard); }

/* ─────────────────────────────────────────────────────────────────
   TABLE
───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th {
  background:rgba(255,255,255,0.03); color:var(--muted2);
  font-weight:700; font-size:10.5px; text-transform:uppercase;
  letter-spacing:1px; padding:13px 18px; text-align:left;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody tr { border-bottom:1px solid var(--border); transition:background 0.15s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(255,255,255,0.03); }
tbody td { padding:14px 18px; color:var(--text); vertical-align:middle; }

/* ─────────────────────────────────────────────────────────────────
   LAYOUT HELPERS
───────────────────────────────────────────────────────────────── */
.two-col   { display:grid; grid-template-columns:1fr 380px; gap:20px; margin-bottom:20px; }
.send-grid { display:grid; grid-template-columns:1fr 320px; gap:20px; }
.char-counter { font-family:var(--font-mono); font-size:12px; color:var(--muted2); }
.char-counter.over { color:var(--danger); }

/* ─────────────────────────────────────────────────────────────────
   DIVIDER
───────────────────────────────────────────────────────────────── */
.divider {
  height:1px; background:var(--border);
  margin:var(--s5) 0; position:relative;
}
.divider::after {
  content:''; position:absolute;
  top:0; left:50%; transform:translateX(-50%);
  width:80px; height:1px;
  background:linear-gradient(90deg,transparent,var(--border3),transparent);
}

/* ─────────────────────────────────────────────────────────────────
   SKELETON LOADER
───────────────────────────────────────────────────────────────── */
.skeleton {
  background:linear-gradient(90deg,var(--surface3) 25%,var(--surface4) 50%,var(--surface3) 75%);
  background-size:200% 100%;
  animation:skel 1.5s ease infinite;
  border-radius:var(--radius-sm);
}
@keyframes skel {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* ─────────────────────────────────────────────────────────────────
   SPINNER
───────────────────────────────────────────────────────────────── */
.spinner {
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--border2);
  border-top-color:var(--smart);
  animation:spin 0.7s linear infinite;
  display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────────
   EMPTY STATE
───────────────────────────────────────────────────────────────── */
.empty-state {
  text-align:center; padding:var(--s12) var(--s8);
  color:var(--muted2);
}
.empty-icon { font-size:42px; margin-bottom:var(--s4); opacity:0.45; }
.empty-title { font-family:var(--font-heading); font-size:17px; font-weight:800; color:var(--muted3); margin-bottom:var(--s2); }
.empty-sub   { font-size:13px; color:var(--muted); }

/* ─────────────────────────────────────────────────────────────────
   MODAL
───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(3,6,13,0.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.modal-box {
  background:#0f1c38;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-xl);
  padding:var(--s8); max-width:460px; width:92%;
  box-shadow:var(--shadow-xl), 0 0 80px rgba(0,0,0,0.5);
  animation:fadeUp 0.24s ease;
  position:relative; overflow:hidden;
}
.modal-box::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:1px;
  background:var(--grad-top);
}
.modal-title {
  font-family:var(--font-heading); font-size:20px;
  font-weight:900; margin-bottom:var(--s5);
  letter-spacing:-0.4px;
}

/* ─────────────────────────────────────────────────────────────────
   TOAST CONTAINER
───────────────────────────────────────────────────────────────── */
#toastContainer {
  position:fixed; bottom:24px; right:24px;
  z-index:9999; display:flex; flex-direction:column; gap:10px;
  pointer-events:none;
}
#toastContainer > * { pointer-events:all; }

/* ─────────────────────────────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background:var(--surface5); border-radius:3px;
  transition:background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background:var(--muted); }

/* ─────────────────────────────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes slideIn {
  from { opacity:0; transform:translateX(-14px); }
  to   { opacity:1; transform:translateX(0); }
}

/* stagger animation helpers */
.anim-1 { animation-delay:0.05s; }
.anim-2 { animation-delay:0.10s; }
.anim-3 { animation-delay:0.15s; }
.anim-4 { animation-delay:0.20s; }

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .two-col { grid-template-columns:1fr; }
}
@media (max-width:960px) {
  .sidebar { display:none; }
  .operator-grid,.ops-grid,.settings-grid,.op-section { grid-template-columns:1fr; }
  .send-grid,.bulk-grid,.reports-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .main { padding:var(--s5) var(--s4) 56px; }
  .stats-grid { grid-template-columns:1fr; }
  .page-title { font-size:22px; }
}