/* ==========================================================================
   WiFi DataPlus+ — Futuristic Dark Theme
   Brand: deep navy + electric blue + bright orange (from the logo)
   Built on Bootstrap 5.3 (dark mode). All legacy class names preserved.
   ========================================================================== */

:root {
  /* Brand palette (overridden at runtime from Settings) */
  --wt-primary:   #0B5CFF;   /* electric blue  */
  --wt-secondary: #F97316;   /* bright orange  */
  --wt-cyan:      #22D3EE;   /* futuristic glow */
  --wt-navy:      #060B1A;   /* deep space navy */
  --wt-navy-2:    #0A1430;
  --wt-panel:     rgba(19, 30, 58, 0.72);
  --wt-panel-2:   rgba(13, 21, 43, 0.85);
  --wt-border:    rgba(120, 160, 255, 0.16);
  --wt-border-2:  rgba(120, 160, 255, 0.28);
  --wt-text:      #E6ECFF;
  --wt-muted:     #93A2C7;
  --wt-glow-blue: 0 0 24px rgba(11, 92, 255, .45);
  --wt-glow-orange: 0 0 24px rgba(249, 115, 22, .45);
  --wt-radius:    16px;
}

/* ---------- Base ---------- */
html, body { min-height: 100%; }
body {
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(11,92,255,.18), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(249,115,22,.14), transparent 55%),
    radial-gradient(1000px 800px at 50% 120%, rgba(34,211,238,.10), transparent 60%),
    var(--wt-navy);
  background-attachment: fixed;
  color: var(--wt-text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: .1px;
  min-height: 100vh;
}

h1,h2,h3,h4,h5,h6,.fw-bold,.navbar-brand { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; }
a { color: var(--wt-cyan); text-decoration: none; }
a:hover { color: #7DE3F5; }
.text-muted { color: var(--wt-muted) !important; }
hr { border-color: var(--wt-border); opacity: 1; }
code { color: #8FD0FF; background: rgba(11,92,255,.12); padding: .1rem .35rem; border-radius: .35rem; }

/* ---------- Buttons ---------- */
.btn { border-radius: 12px; font-weight: 600; letter-spacing: .2px; transition: all .18s ease; }
.btn-primary {
  background: linear-gradient(135deg, var(--wt-primary), #3E7BFF);
  border: none; color: #fff; box-shadow: 0 6px 18px rgba(11,92,255,.35);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 8px 26px rgba(11,92,255,.55); transform: translateY(-1px); }
.btn-secondary, .btn-outline-secondary { border-color: var(--wt-border-2); }
.btn-outline-secondary { color: var(--wt-text); }
.btn-outline-secondary:hover { background: rgba(120,160,255,.12); color: #fff; border-color: var(--wt-border-2); }
.btn-warning { background: linear-gradient(135deg, var(--wt-secondary), #FFA24D); border: none; color: #1a1205; }
.btn-success { background: linear-gradient(135deg,#12B76A,#0E9F6E); border: none; }
.btn-danger  { background: linear-gradient(135deg,#F04438,#D92D20); border: none; }
.btn-light   { background: rgba(255,255,255,.92); border: none; color: #0A1430; }
.btn-outline-light { border-color: rgba(255,255,255,.5); }
.btn-glow { box-shadow: var(--wt-glow-blue); }

/* ---------- Cards / panels (glassmorphism) ---------- */
.card {
  background: var(--wt-panel);
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--wt-text);
}
.card-header { background: transparent; border-bottom: 1px solid var(--wt-border); }

/* ---------- Stat cards ---------- */
.stat-card {
  border-radius: var(--wt-radius); color:#fff; overflow:hidden; position:relative;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.stat-card::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 55%); }
.stat-card .stat-icon { position:absolute; right:.75rem; bottom:.25rem; font-size:3.4rem; opacity:.22; }
.stat-card .stat-value { font-size:1.7rem; font-weight:700; line-height:1.1; position:relative; }
.stat-card .stat-label { font-size:.74rem; text-transform:uppercase; letter-spacing:.09em; opacity:.92; position:relative; }

/* ---------- Sidebar / nav ---------- */
.navbar.bg-gradient-brand {
  background: linear-gradient(120deg, rgba(6,11,26,.92), rgba(10,20,48,.92)) !important;
  border-bottom: 1px solid var(--wt-border);
  backdrop-filter: blur(12px);
}
.navbar-brand-logo { max-height: 40px; filter: drop-shadow(0 0 10px rgba(11,92,255,.4)); }
.wt-sidebar .nav-link { color: var(--wt-muted); padding:.7rem 1.1rem; border-left:3px solid transparent; border-radius:0; transition:all .15s ease; display:flex; align-items:center; gap:.7rem; }
.wt-sidebar .nav-link:hover { background: rgba(120,160,255,.08); color:#fff; }
.wt-sidebar .nav-link.active { background: linear-gradient(90deg, rgba(11,92,255,.25), transparent); color:#fff; border-left-color: var(--wt-secondary); }
.wt-sidebar .nav-link i { width:1.4rem; text-align:center; }
.offcanvas.bg-dark { background: var(--wt-navy-2) !important; }

/* ---------- Admin persistent sidebar (desktop) ---------- */
.wt-admin-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 264px; z-index: 1035;
  background: linear-gradient(180deg, var(--wt-navy-2), var(--wt-navy));
  border-right: 1px solid var(--wt-border);
  overflow-y: auto; overflow-x: hidden;
}
.wt-admin-sidebar::-webkit-scrollbar { width: 6px; }
.wt-rail-brand {
  display: flex; align-items: center; gap: .65rem; padding: 1rem 1.1rem;
  text-decoration: none; color: #fff; border-bottom: 1px solid var(--wt-border);
}
.wt-rail-logo { max-height: 42px; filter: drop-shadow(0 0 10px rgba(11,92,255,.45)); }
.wt-rail-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; line-height: 1.05; display:flex; flex-direction:column; }
.wt-rail-name small { font-weight: 500; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wt-muted); }
.wt-rail-nav { padding: .5rem 0; }
.wt-rail-foot { border-top: 1px solid var(--wt-border); padding: .9rem 1rem; background: rgba(0,0,0,.18); }
.wt-rail-user { display:flex; align-items:center; gap:.6rem; color: var(--wt-text); text-decoration:none; }
.wt-rail-user i { font-size: 1.6rem; color: var(--wt-cyan); }
.wt-rail-user-name { font-weight:600; line-height:1.1; display:flex; flex-direction:column; }
.wt-rail-user-name small { color: var(--wt-muted); font-weight:500; font-size:.72rem; }
.wt-admin-topbar { border-bottom: 1px solid var(--wt-border); }
@media (min-width: 992px) {
  body.wt-has-sidebar, body:has(.wt-admin-sidebar) { padding-left: 264px; }
}

/* ---------- Tables ---------- */
.table { color: var(--wt-text); --bs-table-bg: transparent; --bs-table-color: var(--wt-text); border-color: var(--wt-border); }
.table > :not(caption) > * > * { background: transparent; border-bottom-color: var(--wt-border); }
.table thead th { font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color: var(--wt-muted); border-bottom:1px solid var(--wt-border-2); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(120,160,255,.06); color:#fff; }
.table td, .table th { vertical-align: middle; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  background: rgba(8,15,34,.75); border:1px solid var(--wt-border-2); color: var(--wt-text);
  border-radius: 12px; padding:.6rem .85rem;
}
.form-control:focus, .form-select:focus {
  background: rgba(8,15,34,.9); color:#fff; border-color: var(--wt-primary);
  box-shadow: 0 0 0 .2rem rgba(11,92,255,.25);
}
.form-control::placeholder { color: #6C7BA3; }
.form-label { color: var(--wt-muted); font-size:.85rem; font-weight:600; }
.form-check-input { background-color: rgba(8,15,34,.8); border-color: var(--wt-border-2); }
.form-check-input:checked { background-color: var(--wt-primary); border-color: var(--wt-primary); }
.input-group-text { background: rgba(8,15,34,.75); border-color: var(--wt-border-2); color: var(--wt-muted); }

/* ---------- Badges ---------- */
.badge { border-radius: 8px; font-weight:600; letter-spacing:.02em; }
.text-bg-light { background: rgba(255,255,255,.12) !important; color: var(--wt-text) !important; }

/* ---------- Modals ---------- */
.modal-content { background: var(--wt-panel-2); border:1px solid var(--wt-border-2); border-radius: var(--wt-radius); color: var(--wt-text); backdrop-filter: blur(18px); }
.modal-header, .modal-footer { border-color: var(--wt-border); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ---------- Alerts ---------- */
.alert { border-radius: 12px; border:1px solid var(--wt-border-2); background: var(--wt-panel); color: var(--wt-text); }
.alert-success { border-color: rgba(18,183,106,.5); background: rgba(18,183,106,.12); }
.alert-danger  { border-color: rgba(240,68,56,.5);  background: rgba(240,68,56,.12); }
.alert-warning { border-color: rgba(249,115,22,.5); background: rgba(249,115,22,.12); }
.alert-info    { border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.10); }

/* ---------- Progress ---------- */
.progress { height:.6rem; border-radius:1rem; background: rgba(120,160,255,.14); }
.progress-bar { background: linear-gradient(90deg, var(--wt-primary), var(--wt-cyan)); }

/* ---------- Pagination ---------- */
.page-link { background: rgba(8,15,34,.7); border-color: var(--wt-border); color: var(--wt-text); }
.page-link:hover { background: rgba(11,92,255,.25); color:#fff; border-color: var(--wt-border-2); }
.page-item.active .page-link { background: var(--wt-primary); border-color: var(--wt-primary); }
.page-item.disabled .page-link { background: rgba(8,15,34,.5); color:#5b6a92; }

/* ---------- Login / auth ---------- */
.login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(11,92,255,.35), transparent 60%),
    radial-gradient(800px 600px at 90% 90%, rgba(249,115,22,.28), transparent 55%),
    var(--wt-navy);
  position: relative; overflow: hidden;
}
.login-wrap::before {
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(120,160,255,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(120,160,255,.06) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%);
}
.login-card {
  max-width:440px; width:100%; border-radius: 20px; position: relative;
  background: rgba(13,21,43,.82); border:1px solid var(--wt-border-2);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(11,92,255,.12);
  backdrop-filter: blur(20px);
}
.brand-logo-lg { max-height: 96px; filter: drop-shadow(0 0 18px rgba(11,92,255,.45)); }
.auth-title { font-weight: 800; letter-spacing:-.02em; }
.auth-sub { color: var(--wt-muted); }

/* ---------- Package cards ---------- */
.pkg-card { border-radius: var(--wt-radius); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; height:100%; }
.pkg-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.5), var(--wt-glow-blue); border-color: var(--wt-border-2); }
.pkg-price { font-size:1.9rem; font-weight:800; background: linear-gradient(135deg, var(--wt-cyan), var(--wt-primary)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pkg-featured { border:2px solid var(--wt-secondary); box-shadow: var(--wt-glow-orange); }

/* ---------- Hotspot / captive portal ---------- */
.hotspot-body {
  background:
    radial-gradient(900px 600px at 20% 0%, rgba(11,92,255,.30), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, rgba(249,115,22,.22), transparent 55%),
    var(--wt-navy);
  min-height:100vh;
}
.hotspot-card { max-width:480px; margin:0 auto; border-radius:20px; background: rgba(13,21,43,.85); border:1px solid var(--wt-border-2); backdrop-filter: blur(18px); }

/* ---------- Timeline ---------- */
.timeline { list-style:none; padding-left:0; }
.timeline li { position:relative; padding-left:1.7rem; padding-bottom:1rem; border-left:2px solid var(--wt-border); }
.timeline li:before { content:''; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background: var(--wt-primary); box-shadow: var(--wt-glow-blue); }
.timeline li:last-child { border-left-color: transparent; }

/* ---------- Utility glow / gradient text ---------- */
.bg-gradient-brand { background: linear-gradient(135deg, var(--wt-primary), var(--wt-secondary)) !important; }
.text-gradient { background: linear-gradient(135deg, var(--wt-cyan), var(--wt-primary) 55%, var(--wt-secondary)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.glow-blue { box-shadow: var(--wt-glow-blue); }
.glow-orange { box-shadow: var(--wt-glow-orange); }
.hover-lift { transition: transform .18s ease, box-shadow .18s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.45); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background: var(--wt-navy-2); }
::-webkit-scrollbar-thumb { background: rgba(120,160,255,.28); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,160,255,.45); }

/* ---------- Misc ---------- */
.border-top, .border-bottom, .border-secondary { border-color: var(--wt-border) !important; }
.offcanvas-header .btn-close { filter: invert(1) brightness(1.8); }
.dropdown-menu { background: var(--wt-panel-2); border:1px solid var(--wt-border-2); backdrop-filter: blur(16px); }
.dropdown-item { color: var(--wt-text); }
.dropdown-item:hover { background: rgba(11,92,255,.2); color:#fff; }
.list-group-item { background: transparent; border-color: var(--wt-border); color: var(--wt-text); }
.nav-tabs { border-bottom-color: var(--wt-border); }
.nav-tabs .nav-link { color: var(--wt-muted); border:none; border-bottom:2px solid transparent; }
.nav-tabs .nav-link.active { background: transparent; color:#fff; border-bottom-color: var(--wt-secondary); }
.nav-tabs .nav-link:hover { color:#fff; }

@media print { .no-print { display:none!important; } body { background:#fff; color:#000; } .card{box-shadow:none;border:1px solid #ddd;background:#fff;} }

/* ================================================================
   Security Center / MFA — added in security hardening pass
   ================================================================ */
.mfa-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:16px; font-size:1.5rem; color:#fff;
  background: linear-gradient(135deg, var(--wt-primary), var(--wt-secondary));
  box-shadow: var(--wt-glow-blue);
}
.otp-input { letter-spacing:.5rem; font-weight:700; font-size:1.4rem; font-family:'Space Grotesk', monospace; }
.qr-box {
  padding:12px; border-radius:16px; background:#fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 0 1px var(--wt-border-2);
  line-height:0;
}
.setup-key {
  display:inline-block; padding:.5rem .75rem; border-radius:10px; font-size:.95rem;
  background: var(--wt-navy-2); border:1px solid var(--wt-border-2); color: var(--wt-cyan);
  letter-spacing:.12rem; word-break:break-all;
}
.recovery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-top:.5rem; }
.recovery-code {
  display:block; padding:.6rem .8rem; border-radius:10px; text-align:center;
  background: var(--wt-navy-2); border:1px dashed var(--wt-secondary);
  color: var(--wt-text); font-size:1rem; letter-spacing:.08rem;
}

/* Security event timeline (uses .timeline-item / .timeline-dot) */
.timeline-item { position:relative; padding:0 0 .9rem 1.6rem; border-left:2px solid var(--wt-border); }
.timeline-item:last-child { border-left-color:transparent; }
.timeline-dot {
  position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%;
  box-shadow: 0 0 10px rgba(11,92,255,.5);
}
.posture-list li:last-child { margin-bottom:0 !important; }
.font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ================================================================
   Public / marketing landing page — futuristic dark hero
   ================================================================ */
.wt-public { position: relative; }
.wt-hero { position: relative; overflow: hidden; padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.wt-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(120,160,255,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(120,160,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 20%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 20%, #000 20%, transparent 72%);
}
.wt-hero-glow {
  position:absolute; border-radius:50%; filter: blur(90px); opacity:.42; pointer-events:none; z-index:0;
}
.wt-hero-glow.g1 { width:420px; height:420px; left:-120px; top:-80px; background: rgba(11,92,255,.55); }
.wt-hero-glow.g2 { width:360px; height:360px; right:-100px; top:20px; background: rgba(249,115,22,.30); }
.wt-hero-glow.g3 { width:460px; height:460px; left:40%; bottom:-260px; background: rgba(34,211,238,.30); }
.wt-hero .container { position: relative; z-index: 1; }
.wt-logo-hero { max-height: 92px; filter: drop-shadow(0 0 26px rgba(11,92,255,.5)); }
.wt-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .9rem; border-radius:999px;
  font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--wt-cyan); background: rgba(34,211,238,.10); border:1px solid rgba(34,211,238,.35);
}
.wt-hero h1 {
  font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.03;
  margin: 1rem 0 .5rem;
}
.wt-hero .wt-sub { color: var(--wt-muted); font-size: clamp(1rem, 2.2vw, 1.2rem); max-width: 640px; }
.wt-cta .btn { padding: .8rem 1.4rem; font-size: 1.02rem; }
.wt-trust { display:flex; flex-wrap:wrap; gap:1.2rem; color: var(--wt-muted); font-size:.86rem; }
.wt-trust i { color: var(--wt-cyan); }

.wt-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; position: relative; z-index:1; }
.wt-section-title { font-weight: 800; letter-spacing:-.02em; font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.wt-feature {
  height:100%; border-radius: var(--wt-radius); padding: 1.6rem;
  background: var(--wt-panel); border:1px solid var(--wt-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(14px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wt-feature:hover { transform: translateY(-5px); border-color: var(--wt-border-2); box-shadow: 0 20px 46px rgba(0,0,0,.5), var(--wt-glow-blue); }
.wt-feature .wt-fi {
  width:54px; height:54px; border-radius:15px; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:#fff; margin-bottom:1rem;
  background: linear-gradient(135deg, var(--wt-primary), var(--wt-secondary)); box-shadow: var(--wt-glow-blue);
}
.wt-feature h5 { font-weight:700; }
.wt-feature p { color: var(--wt-muted); margin-bottom:0; }

.wt-stats { display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; }
@media (min-width: 768px) { .wt-stats { grid-template-columns: repeat(4, 1fr); } }
.wt-stat {
  border-radius: var(--wt-radius); padding: 1.2rem; text-align:center;
  background: var(--wt-panel); border:1px solid var(--wt-border); backdrop-filter: blur(12px);
}
.wt-stat .v { font-size: 1.8rem; font-weight: 800; }
.wt-stat .l { color: var(--wt-muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }

.wt-steps { counter-reset: step; }
.wt-step { position:relative; padding-left: 3.2rem; padding-bottom: 1.6rem; }
.wt-step::before {
  counter-increment: step; content: counter(step);
  position:absolute; left:0; top:0; width:2.2rem; height:2.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff;
  background: linear-gradient(135deg, var(--wt-primary), var(--wt-secondary)); box-shadow: var(--wt-glow-blue);
}
.wt-step:not(:last-child)::after { content:''; position:absolute; left:1.05rem; top:2.4rem; bottom:.2rem; width:2px; background: var(--wt-border-2); }
.wt-step h6 { font-weight:700; margin-bottom:.15rem; }
.wt-step p { color: var(--wt-muted); margin-bottom:0; font-size:.92rem; }

.wt-public-footer { border-top:1px solid var(--wt-border); background: rgba(6,11,26,.65); position:relative; z-index:1; }
.wt-public-footer a { color: var(--wt-muted); text-decoration:none; }
.wt-public-footer a:hover { color: var(--wt-cyan); }
.wt-cta-band {
  border-radius: 22px; padding: clamp(1.8rem, 4vw, 3rem); position:relative; overflow:hidden;
  background: linear-gradient(120deg, rgba(11,92,255,.28), rgba(249,115,22,.22));
  border:1px solid var(--wt-border-2); box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.wt-cta-band h3 { font-weight:800; letter-spacing:-.02em; }

/* ---------- Captive-portal footer ---------- */
.hotspot-footer { border-top:1px solid var(--wt-border); margin-top: 1rem; background: rgba(6,11,26,.5); }
.hotspot-footer a { color: var(--wt-muted); text-decoration:none; }
.hotspot-footer a:hover { color: var(--wt-cyan); }