/* ===========================================================================
   X Byte / Zigou — Premium theme layer on top of Bootstrap 5.3
   Visual DNA shared by every SPA. Overrides Bootstrap defaults so the
   product no longer looks like stock Bootstrap.
   =========================================================================== */

:root {
  /* Brand surfaces */
  --xbyte-dark: #05070d;
  --xbyte-graphite: #111827;
  --xbyte-navy: #07111f;
  --xbyte-blue: #2563eb;
  --xbyte-blue-soft: #3b82f6;
  --xbyte-cyan: #38bdf8;
  --xbyte-gold: #c8a45d;
  --xbyte-surface: #0b1220;
  --xbyte-surface-soft: #111827;
  --xbyte-surface-2: #0e1626;
  --xbyte-border: rgba(255, 255, 255, 0.10);
  --xbyte-border-strong: rgba(255, 255, 255, 0.18);
  --xbyte-text: #f8fafc;
  --xbyte-muted: #94a3b8;
  --xbyte-faint: #5b6678;
  --xbyte-light: #f8fafc;

  /* Glows / gradients */
  --xbyte-glow-blue: 0 0 0 1px rgba(56, 189, 248, 0.18), 0 18px 60px -22px rgba(37, 99, 235, 0.55);
  --xbyte-gradient: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  --xbyte-gradient-gold: linear-gradient(135deg, #c8a45d 0%, #e7cd95 100%);
  --xbyte-radial: radial-gradient(1200px 600px at 80% -10%, rgba(37, 99, 235, 0.22), transparent 60%),
                  radial-gradient(900px 500px at 0% 0%, rgba(56, 189, 248, 0.12), transparent 55%);

  /* Bootstrap variable remap */
  --bs-primary: var(--xbyte-blue);
  --bs-primary-rgb: 37, 99, 235;
  --bs-secondary: var(--xbyte-graphite);
  --bs-success: #16a34a;
  --bs-success-rgb: 22, 163, 74;
  --bs-info: var(--xbyte-cyan);
  --bs-info-rgb: 56, 189, 248;
  --bs-warning: var(--xbyte-gold);
  --bs-warning-rgb: 200, 164, 93;
  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-dark: var(--xbyte-dark);
  --bs-light: var(--xbyte-light);

  --bs-body-bg: var(--xbyte-dark);
  --bs-body-color: var(--xbyte-text);
  --bs-border-color: var(--xbyte-border);
  --bs-link-color: var(--xbyte-cyan);
  --bs-link-hover-color: #7dd3fc;
  --bs-emphasis-color: var(--xbyte-text);
  --bs-secondary-color: var(--xbyte-muted);
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --bs-border-radius: 1rem;
  --bs-border-radius-sm: 0.65rem;
  --bs-border-radius-lg: 1.5rem;
  --bs-border-radius-xl: 2rem;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  background: var(--xbyte-dark);
  color: var(--xbyte-text);
  font-family: var(--bs-font-sans-serif);
  letter-spacing: -0.01em;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4, .navbar-brand {
  font-family: var(--bs-font-display);
  letter-spacing: -0.03em;
  font-weight: 600;
}

.text-display { font-family: var(--bs-font-display); letter-spacing: -0.03em; }
.text-muted, .text-secondary { color: var(--xbyte-muted) !important; }
.text-faint { color: var(--xbyte-faint) !important; }
.text-gold { color: var(--xbyte-gold) !important; }
.text-cyan { color: var(--xbyte-cyan) !important; }
.text-gradient {
  background: var(--xbyte-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.fw-medium { font-weight: 500; }
.mono { font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace; }

a { text-decoration: none; }

::selection { background: rgba(56, 189, 248, 0.3); }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--xbyte-dark); }
::-webkit-scrollbar-thumb { background: #1c2638; border-radius: 20px; border: 3px solid var(--xbyte-dark); }
::-webkit-scrollbar-thumb:hover { background: #283449; }

/* ---------- Surfaces ---------- */
.surface { background: var(--xbyte-surface); border: 1px solid var(--xbyte-border); border-radius: var(--bs-border-radius-lg); }
.surface-soft { background: var(--xbyte-surface-soft); }
.bg-dark-app { background: var(--xbyte-dark) !important; }
.bg-radial { background-image: var(--xbyte-radial); }
.hairline { border-color: var(--xbyte-border) !important; }

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-border-radius: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.6rem 1.25rem;
  border-radius: 0.85rem;
  transition: transform .14s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 0.85rem 1.7rem; font-size: 1.02rem; }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.82rem; border-radius: 0.6rem; }

.btn-primary {
  --bs-btn-bg: var(--xbyte-blue);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--xbyte-blue-soft);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--xbyte-blue);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  background-image: var(--xbyte-gradient);
  border: none;
  box-shadow: 0 12px 34px -14px rgba(37, 99, 235, 0.85);
}
.btn-primary:hover { box-shadow: 0 16px 40px -12px rgba(56, 189, 248, 0.7); transform: translateY(-1px); }

.btn-gold {
  background-image: var(--xbyte-gradient-gold);
  color: #1b1407; border: none; font-weight: 700;
  box-shadow: 0 12px 30px -14px rgba(200, 164, 93, 0.7);
}
.btn-gold:hover { color: #1b1407; transform: translateY(-1px); }

.btn-outline-light {
  --bs-btn-color: var(--xbyte-text);
  --bs-btn-border-color: var(--xbyte-border-strong);
  --bs-btn-hover-bg: rgba(255,255,255,0.06);
  --bs-btn-hover-border-color: rgba(255,255,255,0.34);
  --bs-btn-hover-color: #fff;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
}
.btn-outline-primary {
  --bs-btn-color: var(--xbyte-cyan);
  --bs-btn-border-color: rgba(56,189,248,0.4);
  --bs-btn-hover-bg: rgba(56,189,248,0.12);
  --bs-btn-hover-border-color: var(--xbyte-cyan);
  --bs-btn-hover-color: #fff;
}
.btn-ghost {
  background: transparent; color: var(--xbyte-muted); border: 1px solid transparent;
}
.btn-ghost:hover { color: var(--xbyte-text); background: rgba(255,255,255,0.04); }

/* ---------- Cards ---------- */
.card {
  --bs-card-bg: var(--xbyte-surface);
  --bs-card-border-color: var(--xbyte-border);
  --bs-card-border-radius: var(--bs-border-radius-lg);
  --bs-card-color: var(--xbyte-text);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 40%), var(--xbyte-surface);
  border: 1px solid var(--xbyte-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -40px rgba(0,0,0,0.9);
}
.card-hover { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(56,189,248,0.35);
  box-shadow: 0 30px 70px -38px rgba(37,99,235,0.55);
}
.card-glow { box-shadow: var(--xbyte-glow-blue); }

/* ---------- Navbar ---------- */
.navbar {
  background: rgba(5, 7, 13, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--xbyte-border);
}
.navbar-brand { font-weight: 700; font-size: 1.3rem; color: var(--xbyte-text) !important; }
.navbar .nav-link { color: var(--xbyte-muted); font-weight: 500; transition: color .15s ease; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--xbyte-text); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  background: var(--xbyte-surface-2);
  border: 1px solid var(--xbyte-border);
  color: var(--xbyte-text);
  border-radius: 0.8rem;
  padding: 0.7rem 0.95rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control::placeholder { color: var(--xbyte-faint); }
.form-control:focus, .form-select:focus {
  background: var(--xbyte-surface-2);
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
  color: var(--xbyte-text);
}
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3e%3cpath d='M8 11L3 6h10z'/%3e%3c/svg%3e"); background-position: right .9rem center; background-size: 14px; }
.form-select option { background: var(--xbyte-surface); color: var(--xbyte-text); }
.form-label { font-weight: 500; font-size: 0.86rem; color: var(--xbyte-muted); margin-bottom: 0.4rem; }
.form-check-input { background-color: var(--xbyte-surface-2); border-color: var(--xbyte-border-strong); }
.form-check-input:checked { background-color: var(--xbyte-blue); border-color: var(--xbyte-blue); }
.input-group-text { background: var(--xbyte-surface); border-color: var(--xbyte-border); color: var(--xbyte-muted); }

/* ---------- Modal ---------- */
.modal-content {
  background: var(--xbyte-surface);
  border: 1px solid var(--xbyte-border-strong);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 50px 120px -40px rgba(0,0,0,0.9);
}
.modal-header, .modal-footer { border-color: var(--xbyte-border); }
.modal-backdrop.show { opacity: 0.7; backdrop-filter: blur(2px); }

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--xbyte-text);
  --bs-table-border-color: var(--xbyte-border);
  --bs-table-hover-bg: rgba(255,255,255,0.03);
  --bs-table-hover-color: var(--xbyte-text);
  border-color: var(--xbyte-border);
}
.table > thead th {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--xbyte-faint);
  border-bottom: 1px solid var(--xbyte-border);
  padding: 0.85rem 1rem;
}
.table > tbody td { padding: 0.95rem 1rem; vertical-align: middle; border-color: var(--xbyte-border); }
.table-card { background: var(--xbyte-surface); border: 1px solid var(--xbyte-border); border-radius: var(--bs-border-radius-lg); overflow: hidden; }

/* ---------- Badges ---------- */
.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.4em 0.7em;
  border-radius: 0.55rem;
  font-size: 0.72rem;
}
.badge-soft { background: rgba(255,255,255,0.06); color: var(--xbyte-muted); border: 1px solid var(--xbyte-border); }
.badge-blue { background: rgba(37,99,235,0.16); color: #93c5fd; border: 1px solid rgba(37,99,235,0.35); }
.badge-cyan { background: rgba(56,189,248,0.14); color: #7dd3fc; border: 1px solid rgba(56,189,248,0.32); }
.badge-green { background: rgba(22,163,74,0.16); color: #4ade80; border: 1px solid rgba(22,163,74,0.35); }
.badge-gold { background: rgba(200,164,93,0.16); color: #e7cd95; border: 1px solid rgba(200,164,93,0.35); }
.badge-red { background: rgba(220,38,38,0.16); color: #f87171; border: 1px solid rgba(220,38,38,0.35); }
.badge-amber { background: rgba(245,158,11,0.16); color: #fbbf24; border: 1px solid rgba(245,158,11,0.35); }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--bs-border-radius); border: 1px solid var(--xbyte-border); background: var(--xbyte-surface-soft); color: var(--xbyte-text); }
.alert-demo {
  background: linear-gradient(90deg, rgba(200,164,93,0.10), rgba(200,164,93,0.02));
  border: 1px solid rgba(200,164,93,0.30);
  color: #e7cd95;
}
.alert-info { background: rgba(56,189,248,0.08); border-color: rgba(56,189,248,0.28); color: #bae6fd; }

/* ---------- Dropdown ---------- */
.dropdown-menu {
  background: var(--xbyte-surface);
  border: 1px solid var(--xbyte-border-strong);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.9);
  padding: 0.4rem;
}
.dropdown-item { color: var(--xbyte-muted); border-radius: 0.6rem; padding: 0.55rem 0.8rem; font-weight: 500; }
.dropdown-item:hover { background: rgba(255,255,255,0.06); color: var(--xbyte-text); }
.dropdown-divider { border-color: var(--xbyte-border); }

/* ---------- List group ---------- */
.list-group { --bs-list-group-bg: transparent; }
.list-group-item {
  background: transparent; border-color: var(--xbyte-border); color: var(--xbyte-text);
}

/* ---------- Nav pills (internal SPA tabs) ---------- */
.nav-pills { --bs-nav-pills-border-radius: 0.8rem; gap: 0.25rem; }
.nav-pills .nav-link {
  color: var(--xbyte-muted); font-weight: 500; border-radius: 0.7rem;
  padding: 0.5rem 0.95rem; transition: all .15s ease;
}
.nav-pills .nav-link:hover { color: var(--xbyte-text); background: rgba(255,255,255,0.04); }
.nav-pills .nav-link.active {
  background: rgba(56,189,248,0.12); color: #e0f2fe;
  box-shadow: inset 0 0 0 1px rgba(56,189,248,0.3);
}

/* ---------- Offcanvas ---------- */
.offcanvas { background: var(--xbyte-surface); color: var(--xbyte-text); border-color: var(--xbyte-border); }

/* ---------- Utility chrome ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--xbyte-border);
  font-size: 0.8rem; font-weight: 500; color: var(--xbyte-muted);
}
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem;
  font-weight: 600; color: var(--xbyte-cyan);
}
.divider { height: 1px; background: var(--xbyte-border); border: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-green { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.dot-amber { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.dot-red { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }

/* Brand mark */
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--xbyte-gradient);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--bs-font-display); font-weight: 700; color: #fff;
  box-shadow: 0 8px 22px -8px rgba(37,99,235,0.8);
  position: relative; overflow: hidden; flex: 0 0 auto;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.45), transparent 55%);
}

/* Toast container */
.toast-stack { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1090; display: flex; flex-direction: column; gap: 0.6rem; }
.toast-x {
  min-width: 260px; max-width: 360px; padding: 0.85rem 1rem;
  background: var(--xbyte-surface); border: 1px solid var(--xbyte-border-strong);
  border-radius: 0.9rem; box-shadow: 0 24px 60px -24px rgba(0,0,0,0.9);
  display: flex; align-items: center; gap: 0.7rem; font-weight: 500;
  animation: toastIn .25s cubic-bezier(.2,.8,.2,1);
}
.toast-x.success { border-left: 3px solid #22c55e; }
.toast-x.danger { border-left: 3px solid #ef4444; }
.toast-x.info { border-left: 3px solid var(--xbyte-cyan); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Image / map placeholder */
.placeholder-art {
  background-color: var(--xbyte-surface-2);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px);
  border: 1px solid var(--xbyte-border);
  border-radius: var(--bs-border-radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--xbyte-faint); font-family: "JetBrains Mono", monospace; font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* Fade-in for view switches */
.view-fade { animation: viewFade .35s ease; }
@keyframes viewFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

[v-cloak] { display: none; }

/* Focus ring */
:focus-visible { outline: 2px solid rgba(56,189,248,0.6); outline-offset: 2px; }