/* ==========================================================================
   VAIM theme layer, IntraSec visual language
   Loaded last, on top of Bootstrap 5.1 + UBold (light & dark sheets).
   Everything is driven by the tokens below. Dark is the default;
   <html data-theme="light"> swaps to the light palette.

   Shape rule: controls (buttons, inputs, menu items) = --radius-sm (10px),
   containers (cards, modals, menus) = --radius-md (16px), badges = 6px,
   pills only where markup asks for .rounded-pill.
   ========================================================================== */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokens: dark (default) ---------------------------------------- */
:root {
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --bg: #0a1424;
  --bg-2: #081120;
  --surface: #0f1d33;          /* opaque panels: menus, modals */
  --surface-2: #13243d;        /* hover rows, table heads */
  --surface-3: #1a2d49;
  --card: rgb(255 255 255 / .045);
  --card-strong: rgb(255 255 255 / .07);
  --input: rgb(4 10 20 / .45);
  --border: rgb(255 255 255 / .08);
  --border-strong: rgb(255 255 255 / .14);
  --highlight: inset 0 1px 0 rgb(255 255 255 / .05);

  --text: #e6edf6;
  --text-2: #b9c6d6;
  --muted: #8da0b8;
  --faint: #6b7d96;

  --accent: #3b9eff;
  --accent-deep: #1e6bd6;
  --accent-hover: #63b2ff;
  --accent-2: #2dd4a7;
  --accent-fg: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --ring: color-mix(in srgb, var(--accent) 40%, transparent);
  --grad: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --grad-btn: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  --glow: 0 10px 28px -12px rgb(59 158 255 / .8);

  --critical: #ff5c7a;
  --danger: #f87171;
  --warning: #f5b544;
  --success: #2dd4a7;
  --info: #38c5f0;
  --neutral: #8da0b8;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-badge: 6px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .25);
  --shadow-md: 0 1px 2px rgb(0 0 0 / .25), 0 12px 32px -12px rgb(0 0 0 / .55);
  --shadow-lg: 0 30px 80px -20px rgb(0 0 0 / .7);

  --glow-a: rgb(59 158 255 / .16);
  --glow-b: rgb(45 212 167 / .10);
  --dots: rgb(141 160 184 / .13);

  --topbar-h: 64px;
  --sb-w: 68px;
  --sb-w-open: 236px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  color-scheme: dark;
}

/* ---------- Tokens: light ------------------------------------------------- */
html[data-theme="light"] {
  --bg: #eef2f8;
  --bg-2: #e4eaf3;
  --surface: #ffffff;
  --surface-2: #f3f6fb;
  --surface-3: #e8edf5;
  --card: rgb(255 255 255 / .72);
  --card-strong: rgb(255 255 255 / .86);
  --input: #ffffff;
  --border: rgb(12 32 64 / .10);
  --border-strong: rgb(12 32 64 / .18);
  --highlight: inset 0 1px 0 rgb(255 255 255 / .9);

  --text: #0d1b30;
  --text-2: #2a3b55;
  --muted: #4a5d77;
  --faint: #687c96;

  --accent: #1668d6;
  --accent-deep: #0e52ae;
  --accent-hover: #0e52ae;
  --accent-2: #0e9e77;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --ring: color-mix(in srgb, var(--accent) 30%, transparent);
  --glow: 0 10px 24px -12px rgb(22 104 214 / .6);

  --critical: #c81e4b;
  --danger: #dc3545;
  --warning: #b76e00;
  --success: #0e9e77;
  --info: #0a8db3;
  --neutral: #4a5d77;

  --shadow-sm: 0 1px 2px rgb(12 32 64 / .06);
  --shadow-md: 0 1px 2px rgb(12 32 64 / .06), 0 12px 32px -12px rgb(12 32 64 / .18);
  --shadow-lg: 0 30px 80px -20px rgb(12 32 64 / .3);

  --glow-a: rgb(22 104 214 / .10);
  --glow-b: rgb(14 158 119 / .07);
  --dots: rgb(12 32 64 / .07);

  color-scheme: light;
}

/* Bootstrap variable bridge so utilities follow the tokens */
:root, html[data-theme="light"] {
  --bs-primary: var(--accent);
  --bs-blue: var(--accent);
  --bs-body-font-family: var(--font-sans);
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
}

/* ---------- Base ---------------------------------------------------------- */
html { background: var(--bg) !important; }
/* transparent so the fixed ambient layer (body::before, z-index -1) shows through */
body, .authentication-bg { background: transparent !important; }
body {
  font-family: var(--font-sans) !important;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient backdrop: two soft glows + a faint dot field, fixed and non-interactive */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
body::before {
  background:
    radial-gradient(700px 520px at 8% -6%, var(--glow-a), transparent 70%),
    radial-gradient(640px 560px at 100% 105%, var(--glow-b), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
body::after {
  background-image: radial-gradient(var(--dots) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 0%, transparent 75%);
}
#wrapper, .content-page, .account-pages { position: relative; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.header-title, .page-title {
  font-family: var(--font-sans) !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -.01em;
}
code, kbd, pre, samp, .font-monospace, .text-monospace {
  font-family: var(--font-mono) !important;
}
code { color: var(--accent); font-size: .85em; }
pre {
  background: var(--input);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .875rem 1rem;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
.text-reset, .text-reset:hover { color: inherit !important; }

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); }

.text-muted { color: var(--muted) !important; }
.text-dark, .text-body { color: var(--text) !important; }
.text-white { color: #fff !important; }
.text-primary, .text-blue { color: var(--accent) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-success { color: var(--success) !important; }
.text-info { color: var(--info) !important; }
.text-critical { color: var(--critical) !important; }
.text-low { color: var(--warning) !important; }

.bg-primary, .bg-blue { background-color: var(--accent) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-light { background-color: var(--surface-2) !important; }
.bg-white, .bg-dark { background-color: var(--surface) !important; }
.bg-soft-primary { background-color: var(--accent-soft) !important; }

hr, .dropdown-divider { border-color: var(--border) !important; opacity: 1; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; }

[data-plugin="counterup"], .card h2, .dataTables_info, .page-link {
  font-variant-numeric: tabular-nums;
}

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Top bar ------------------------------------------------------- */
.navbar-custom,
body[data-layout-mode=horizontal] .navbar-custom {
  height: var(--topbar-h) !important;
  background: color-mix(in srgb, var(--bg) 72%, transparent) !important;
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border-bottom: 1px solid var(--border);
  box-shadow: none !important;
  padding: 0 20px !important;
}
@media (prefers-reduced-transparency: reduce) {
  .navbar-custom, body[data-layout-mode=horizontal] .navbar-custom {
    background: var(--bg) !important;
    backdrop-filter: none;
  }
}
.navbar-custom .container-fluid { max-width: 100% !important; }

.logo-box, body[data-layout-mode=horizontal] .logo-box {
  background: transparent !important;
  height: var(--topbar-h);
  width: auto !important;
  padding: 0 36px 0 0 !important;
  display: flex;
  align-items: center;
}
.logo-box .brand {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  line-height: 1;
  color: var(--text) !important;
}
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad);
  color: #fff;
  font-size: 15px;
  box-shadow: var(--glow), inset 0 1px 0 rgb(255 255 255 / .3);
}
.brand-word {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
}
.brand-version {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  color: var(--muted);
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
}

.navbar-custom .topnav-menu > li { display: flex; align-items: center; height: var(--topbar-h); }
.navbar-custom .topnav-menu .nav-link {
  position: relative;
  line-height: 1 !important;
  max-height: none;
  height: 38px;
  display: inline-flex !important;
  align-items: center;
  gap: .375rem;
  padding: 0 11px !important;
  margin: 0 2px;
  color: var(--muted) !important;
  font-weight: 500;
  font-size: .8125rem;
  border-radius: var(--radius-sm);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.navbar-custom .topnav-menu .nav-link:hover,
.navbar-custom .topnav-menu .show > .nav-link {
  color: var(--text) !important;
  background: var(--card-strong);
}
.navbar-custom .topnav-menu .noti-icon,
.navbar-custom .topnav-menu .nav-link i.fe-bell { font-size: 18px !important; }
.navbar-custom .notification-bell-icon { display: flex; }
.navbar-custom .topnav-menu .nav-link .noti-icon-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px !important;
  font-size: 10px !important;
  line-height: 16px !important;
  border-radius: 8px !important;
  background: var(--critical) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px var(--bg);
}
.navbar-custom .noti-icon-badge:empty { display: none; }
.navbar-custom .topnav-menu .nav-link .mdi-chevron-down { font-size: 14px; opacity: .7; }

/* universal search */
.app-search { padding: 0 !important; margin-right: 8px; }
.app-search .app-search-box { position: relative; }
.app-search .input-group { width: 300px; }
.app-search .form-control,
.app-search .app-search-box input {
  height: 38px !important;
  padding: 0 12px 0 36px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s;
}
.app-search .form-control:focus {
  background: var(--input) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}
.app-search .form-control::placeholder { color: var(--faint); }
.app-search .input-group-text,
.app-search .app-search-box button {
  position: absolute !important;
  left: 0;
  top: 0;
  height: 38px;
  width: 36px;
  z-index: 5;
  padding: 0 !important;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  color: var(--muted) !important;
}

/* theme toggle */
.theme-toggle {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  margin: 0 2px;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.theme-toggle:hover { background: var(--card-strong); color: var(--text); }
.theme-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.theme-toggle i { font-size: 17px; }
.theme-toggle .fe-moon { display: none; }
html[data-theme="light"] .theme-toggle .fe-moon { display: inline-block; }
html[data-theme="light"] .theme-toggle .fe-sun { display: none; }
.theme-toggle:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }

/* user chip */
.nav-user .user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  flex: none;
}
.navbar-custom .pro-user-name { color: var(--text); font-weight: 500; }

/* ---------- Page frame ---------------------------------------------------- */
.content-page,
body[data-layout-mode=horizontal] .content-page {
  margin-top: var(--topbar-h) !important;
  margin-left: var(--sb-w) !important;
  padding: 0 8px 56px !important;
  transition: margin-left .22s var(--ease);
}
html.vsb-expanded .content-page,
html.vsb-expanded body[data-layout-mode=horizontal] .content-page { margin-left: var(--sb-w-open) !important; }
body[data-layout-mode=horizontal] .container-fluid { max-width: 1600px !important; }
body[data-layout-mode=horizontal] .content > .container-fluid,
body[data-layout-mode=horizontal] .content-page .container-fluid {
  max-width: 1600px !important;
  margin: 0 auto;
  padding: 0 20px;
}

.page-title-box {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 0 22px;
}
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.page-title-box .page-title {
  line-height: 1.15 !important;
  font-size: 1.625rem !important;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text) !important;
}
.page-title-box .page-title-right { float: none !important; margin: 0 !important; }
.breadcrumb { padding: 0 !important; margin: 0; font-size: .8125rem; align-items: center; }
.breadcrumb-item, .breadcrumb-item a { color: var(--muted) !important; }
.breadcrumb-item a:hover { color: var(--text) !important; }
.breadcrumb-item.active { color: var(--text) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--faint) !important; }

/* ---------- Cards --------------------------------------------------------- */
.card, .card-box, .widget-rounded-circle {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--highlight), var(--shadow-sm) !important;
  margin-bottom: 20px;
}
.card-header, .card-footer {
  background: transparent !important;
  border-color: var(--border) !important;
  padding: 16px 22px;
}
.card-header:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0 !important; }
.card-body { padding: 22px; }
.card-title, .header-title {
  color: var(--text) !important;
  font-size: .9375rem !important;
  font-weight: 600 !important;
  letter-spacing: -.005em;
  text-transform: none !important;
}
.card h2.text-primary {
  font-weight: 600;
  letter-spacing: -.02em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.card h2.text-danger { font-weight: 600; letter-spacing: -.02em; }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  font-weight: 600;
  font-size: .8125rem;
  border-radius: var(--radius-sm);
  padding: .5rem 1rem;
  box-shadow: none;
  transition: background-color .15s var(--ease), border-color .15s var(--ease),
              color .15s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease), filter .15s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--ring) !important; }
.btn-sm { padding: .3rem .7rem; font-size: .75rem; border-radius: 8px; }
.btn-lg { padding: .7rem 1.25rem; font-size: .9375rem; }
.btn.rounded-pill { border-radius: 999px; }

.btn-primary, .btn-blue {
  background: var(--grad-btn) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent) !important;
  color: var(--accent-fg) !important;
  box-shadow: var(--glow), inset 0 1px 0 rgb(255 255 255 / .2) !important;
}
.btn-primary:hover, .btn-blue:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.btn-primary:active, .btn-blue:active { transform: translateY(0); }
.btn-outline-primary {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
  background: transparent !important;
}
.btn-outline-primary:hover { background: var(--accent-soft) !important; }

.btn-light, .btn-secondary, .btn-outline-secondary, .btn-white, .btn-dark {
  background: var(--card-strong) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
}
.btn-light:hover, .btn-secondary:hover, .btn-outline-secondary:hover, .btn-white:hover, .btn-dark:hover {
  background: var(--surface-3) !important;
}

.btn-danger, .btn-success, .btn-warning, .btn-info {
  --tone: var(--danger);
  background: var(--tone) !important;
  border-color: var(--tone) !important;
  color: #fff !important;
}
.btn-success { --tone: var(--success); color: #062a20 !important; }
.btn-warning { --tone: var(--warning); color: #2a1a00 !important; }
.btn-info { --tone: var(--info); color: #04212b !important; }
html[data-theme="light"] .btn-success,
html[data-theme="light"] .btn-warning,
html[data-theme="light"] .btn-info { color: #fff !important; }
.btn-danger:hover, .btn-success:hover, .btn-warning:hover, .btn-info:hover { filter: brightness(1.08); }

.btn-soft-primary, .btn-soft-danger, .btn-soft-success, .btn-soft-warning,
.btn-soft-info, .btn-soft-secondary, .btn-soft-dark {
  --tone: var(--accent);
  background: color-mix(in srgb, var(--tone) 13%, transparent) !important;
  color: var(--tone) !important;
  border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent) !important;
}
.btn-soft-danger { --tone: var(--danger); }
.btn-soft-success { --tone: var(--success); }
.btn-soft-warning { --tone: var(--warning); }
.btn-soft-info { --tone: var(--info); }
.btn-soft-secondary, .btn-soft-dark { --tone: var(--muted); }
.btn-soft-primary:hover, .btn-soft-danger:hover, .btn-soft-success:hover, .btn-soft-warning:hover,
.btn-soft-info:hover, .btn-soft-secondary:hover, .btn-soft-dark:hover {
  background: color-mix(in srgb, var(--tone) 20%, transparent) !important;
}
.btn-link { color: var(--accent); }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: .5; }
html[data-theme="light"] .btn-close { filter: none; }
.waves-effect .waves-ripple { display: none !important; }

/* ---------- Badges -------------------------------------------------------- */
.badge {
  font-family: var(--font-sans);
  font-weight: 500 !important;
  font-size: .75rem !important;
  line-height: 1.35 !important;
  padding: 2px 8px !important;
  border-radius: var(--radius-badge);
  letter-spacing: 0;
  transition: background-color .15s var(--ease) !important;
}
.badge.rounded-pill, .badge-pills { border-radius: 999px !important; }

.badge-soft-primary, .badge-soft-blue, .badge-soft-danger, .badge-soft-success,
.badge-soft-warning, .badge-soft-info, .badge-soft-secondary, .badge-soft-dark,
.badge-soft-pink, .badge-soft-purple, .badge-critical, .badge-low {
  --tone: var(--accent);
  background-color: color-mix(in srgb, var(--tone) 14%, transparent) !important;
  color: var(--tone) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 24%, transparent);
}
.badge-soft-danger { --tone: var(--danger); }
.badge-soft-success { --tone: var(--success); }
.badge-soft-warning, .badge-low { --tone: var(--warning); }
.badge-soft-info { --tone: var(--info); }
.badge-soft-secondary, .badge-soft-dark { --tone: var(--neutral); }
.badge-critical { --tone: var(--critical); }
.badge-soft-pink, .badge-soft-purple { --tone: var(--accent); }

.badge-outline-primary, .badge-outline-danger, .badge-outline-warning,
.badge-outline-success, .badge-outline-info {
  --tone: var(--accent);
  background: transparent !important;
  color: var(--tone) !important;
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent) !important;
}
.badge-outline-danger { --tone: var(--danger); }
.badge-outline-warning { --tone: var(--warning); }
.badge-outline-success { --tone: var(--success); }
.badge-outline-info { --tone: var(--info); }
.badge-link:hover { filter: brightness(1.12); }

/* ---------- Forms --------------------------------------------------------- */
.form-label, label { color: var(--text-2); font-weight: 500; font-size: .8125rem; }
.form-control, .form-select, .input-group-text,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  background-color: var(--input) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  min-height: 38px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input-group-text { background: var(--card-strong) !important; color: var(--muted) !important; }
.form-control::placeholder { color: var(--faint) !important; opacity: 1; }
.form-control:focus, .form-select:focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
  outline: 0;
}
.form-control:disabled, .form-control[readonly],
input[type="text"][disabled], .form-select:disabled {
  background-color: var(--card) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}
.form-control.is-invalid { border-color: var(--danger) !important; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent) !important; }
.invalid-feedback { color: var(--danger); }
.form-text { color: var(--muted); }
textarea.form-control { font-family: var(--font-mono); font-size: .8125rem; }

/* Big filter bars (Subdomains / Endpoints / Vulnerabilities tabs). custom.css
   paints their wrapper and suggestion box white, which turns the translucent
   input gray in dark mode. */
.wrapper .search-input {
  background: transparent;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
}
.search-input .input-group > .form-control {
  background-color: var(--surface) !important;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.search-input .input-group-append .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.search-input .autocom-box {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--text);
  box-shadow: var(--shadow-md);
  overflow-y: auto;
}
.search-input:not(.active) .autocom-box { border: 0; pointer-events: none; }
.autocom-box li { color: var(--text-2); }
.autocom-box li:hover { background: var(--surface-2); color: var(--text); }
.form-select option { background: var(--surface); color: var(--text); }

.form-select,
div.dataTables_wrapper div.dataTables_length select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238da0b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right .625rem center !important;
  background-size: 12px 10px !important;
  padding-right: 2rem !important;
  -webkit-appearance: none;
  appearance: none;
}

.form-check-input {
  background-color: var(--input);
  border-color: var(--border-strong);
}
.form-check-input:checked,
.form-check-primary .form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 3px var(--ring); border-color: var(--accent); }

/* select2 */
.select2-dropdown {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.select2-results__option { color: var(--text-2); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text) !important; }
.select2-container .select2-selection--multiple .select2-selection__choice {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-radius: var(--radius-badge) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--accent) !important; }
.select2-search__field { background: var(--input) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* ---------- Dropdowns ----------------------------------------------------- */
.dropdown-menu {
  /* opaque: page text showed through the old translucent glass */
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 6px !important;
  font-size: .8125rem;
  animation: vaim-pop .18s var(--ease);
}
.dropdown-item {
  color: var(--text-2) !important;
  border-radius: 8px;
  padding: .5rem .7rem !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
}
.dropdown-item i { color: var(--muted); font-size: 15px; }
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--card-strong) !important;
  color: var(--text) !important;
}
.dropdown-item.active, .dropdown-item:active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.dropdown-header, .noti-title { color: var(--muted) !important; padding: .5rem .7rem !important; background: transparent !important; }
.dropdown-header h5, .dropdown-header h6, .noti-title h5, .noti-title h6 {
  font-family: var(--font-mono) !important;
  font-size: .6875rem !important;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.dropdown-icon-item {
  border-radius: var(--radius-sm);
  color: var(--text-2) !important;
  padding: 12px 6px !important;
}
.dropdown-icon-item:hover { background: var(--card-strong); }
.dropdown-icon-item img { height: 22px; margin-bottom: 6px; }
.dropdown-icon-item span { font-size: .75rem; color: var(--text-2); }
.profile-dropdown { min-width: 230px; }
.notification-panel-dropdown { width: 380px; padding: 0 !important; overflow: hidden; }
.notification-panel-header { border-bottom: 1px solid var(--border); }
.notification-panel-header h6 { color: var(--text); font-size: .875rem; }
.notification-panel-header a { font-size: .75rem; color: var(--muted); }
.notification-panel-header a:hover { color: var(--accent); }

/* translate/scale, not transform: Popper positions menus with an inline transform,
   which a transform keyframe would replace while the menu opens */
@keyframes vaim-pop {
  from { opacity: 0; translate: 0 -4px; scale: .985; }
  to { opacity: 1; translate: none; scale: none; }
}

/* The bundled bootstrap.min.css predates the Bootstrap 5.1 JS: it pins menus with
   top: 100% and .dropdown-menu-end { right: 0 !important }, on top of Popper's own
   inline position, so menus opened offset (down and to the left for the profile menu).
   Match the corner Popper anchors each placement from, and let its transform do the rest. */
.dropdown-menu[data-popper-placement^="bottom"],
.dropdown-menu[data-popper-placement^="right"] { top: 0 !important; right: auto !important; bottom: auto !important; left: 0 !important; }
.dropdown-menu[data-popper-placement^="top"] { top: auto !important; right: auto !important; bottom: 0 !important; left: 0 !important; }
.dropdown-menu[data-popper-placement^="left"] { top: 0 !important; right: 0 !important; bottom: auto !important; left: auto !important; }

/* ---------- Tables / DataTables ------------------------------------------ */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--card);
  --bs-table-hover-bg: var(--card-strong);
  --bs-table-accent-bg: transparent;
  color: var(--text-2) !important;
  border-color: var(--border) !important;
  font-size: .8125rem;
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--border) !important;
  padding: .7rem .8rem;
  vertical-align: middle;
  background-color: transparent;
  color: inherit;
}
.table > thead > tr > th, .table thead th,
table.dataTable thead th, table.dataTable thead td {
  background: var(--card) !important;
  color: var(--muted) !important;
  font-family: var(--font-mono);
  font-weight: 500 !important;
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--border) !important;
  border-top: 0 !important;
}
.table > thead > tr > th:first-child { border-top-left-radius: var(--radius-sm); }
.table > thead > tr > th:last-child { border-top-right-radius: var(--radius-sm); }
.table-hover > tbody > tr:hover > *,
table.dataTable tbody tr:hover > * {
  background-color: var(--card-strong) !important;
  --bs-table-accent-bg: transparent;
}
.table > :not(:first-child) { border-top: 0 !important; }
.table-light, .table-light > th, .table-light > td { --bs-table-bg: var(--card); background: var(--card) !important; color: var(--text) !important; }
.table-info, .table-primary { --bs-table-bg: var(--accent-soft); background: var(--accent-soft) !important; color: var(--text) !important; }
.table-danger { --bs-table-bg: color-mix(in srgb, var(--danger) 12%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent) !important; color: var(--text) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--card); color: inherit; }
table.dataTable { border-collapse: separate !important; border-spacing: 0; }
table.dataTable tbody tr.selected > * { box-shadow: inset 0 0 0 9999px var(--accent-soft) !important; color: var(--text) !important; }
table.dataTable tr.dtrg-group td { background: var(--surface-3) !important; color: var(--text) !important; font-weight: 600; }

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
  background-color: var(--input) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  height: 36px;
  padding: 0 10px;
  margin-left: 0 !important;
}
div.dataTables_wrapper div.dataTables_filter input:focus {
  width: 100%;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}
div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
  color: var(--muted) !important;
  font-size: .8125rem;
  font-weight: 400;
}
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.dataTables_processing {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

/* override plugins/datatable/global.css (light-only colours, boxed info text) */
.table > tbody tr { border-bottom: 1px solid var(--border); }
.table > tbody > tr > td { padding: .7rem .8rem; }
.table > thead > tr > th { padding: .7rem .8rem !important; }
.table-striped tbody tr:nth-of-type(odd),
.dataTable.table-striped tbody tr:nth-of-type(odd) { background-color: var(--card) !important; }
div.dataTables_wrapper div.dataTables_info {
  border: 0 !important;
  padding: 0 !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  display: inline-flex;
  align-items: center;
}
div.dataTables_wrapper div.dataTables_filter svg { color: var(--faint); }
.page-item:first-child .page-link, .page-item:last-child .page-link { border-radius: 8px !important; padding: 0 8px !important; }

/* pagination */
.pagination { gap: 4px; }
.page-link {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--muted) !important;
  border-radius: 8px !important;
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px !important;
  font-size: .8125rem;
  box-shadow: none !important;
}
.page-link:hover { background: var(--card-strong) !important; color: var(--text) !important; }
.page-item.active .page-link {
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
  color: var(--accent) !important;
  font-weight: 600;
}
.page-item.disabled .page-link { opacity: .45; background: transparent !important; border-color: transparent !important; }

/* ---------- Tabs & pills -------------------------------------------------- */
.nav-tabs, .nav-bordered {
  border-bottom: 1px solid var(--border) !important;
  gap: 4px;
}
.nav-tabs .nav-link, .nav-bordered .nav-link, .nav-tabs.nav-bordered li a {
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-weight: 500;
  font-size: .8125rem;
  padding: .65rem .8rem !important;
  position: relative;
  border-radius: 0;
}
.nav-tabs .nav-link:hover, .nav-bordered .nav-link:hover { color: var(--text) !important; }
.nav-tabs .nav-link.active, .nav-bordered .nav-link.active,
.nav-tabs.nav-bordered li a.active {
  color: var(--text) !important;
  border-bottom: 0 !important;
}
.nav-tabs .nav-link.active::after, .nav-bordered .nav-link.active::after,
.nav-tabs.nav-bordered li a.active::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}
.nav-pills { gap: 4px; }
.nav-pills .nav-link {
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-weight: 500;
  font-size: .8125rem;
}
.nav-pills .nav-link:hover { color: var(--text); background: var(--card-strong); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* ---------- Alerts -------------------------------------------------------- */
.alert {
  --tone: var(--accent);
  border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent) !important;
  background: color-mix(in srgb, var(--tone) 9%, transparent) !important;
  color: var(--text-2) !important;
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  padding: .8rem 1rem;
}
.alert-danger { --tone: var(--danger); }
.alert-warning { --tone: var(--warning); }
.alert-success { --tone: var(--success); }
.alert-info { --tone: var(--info); }
.alert-secondary, .alert-light, .alert-dark { --tone: var(--neutral); }
.alert .alert-link, .alert a { color: var(--tone) !important; font-weight: 500; }
.alert-heading { color: var(--text); }

/* ---------- Progress ------------------------------------------------------ */
.progress {
  background: var(--card-strong) !important;
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.progress-md { height: 8px; }
.progress-bar { background: var(--grad); border-radius: 999px; }
.progress-bar.bg-danger { background: var(--danger) !important; }
.progress-bar.bg-warning { background: var(--warning) !important; }
.progress-bar.bg-success { background: var(--success) !important; }
.progress-bar.bg-info { background: var(--info) !important; }

/* ---------- List groups --------------------------------------------------- */
.list-group-item {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
.list-group-item.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--border) !important;
}
.list-group-item-action:hover { background: var(--card-strong) !important; }

/* ---------- Modals, offcanvas, right bar --------------------------------- */
.modal-backdrop.show { opacity: .6; background: #040a14; }
.modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg), var(--highlight) !important;
  color: var(--text-2);
}
.modal-header, .modal-footer { border-color: var(--border) !important; padding: 18px 22px; }
.modal-body { padding: 22px; }
.modal-title { color: var(--text); font-weight: 600; font-size: 1rem; }

.offcanvas {
  background: var(--surface) !important;
  color: var(--text-2);
  border-color: var(--border) !important;
}
.offcanvas-header { border-bottom: 1px solid var(--border); }

.right-bar {
  background: var(--surface) !important;
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg) !important;
  width: 380px;
}
.right-bar .rightbar-title, .right-bar .right-bar-title {
  background: transparent !important;
  border-bottom: 1px solid var(--border);
  color: var(--text) !important;
}
.rightbar-overlay { background: rgb(4 10 20 / .5); }

/* ---------- Tooltips, popovers, toasts ----------------------------------- */
.tooltip-inner, .tippy-box {
  background: var(--text) !important;
  color: var(--bg) !important;
  font-family: var(--font-sans);
  font-size: .75rem !important;
  font-weight: 500;
  border-radius: 6px !important;
  padding: 4px 8px;
}
.tippy-box > .tippy-content { padding: 0; }
.tippy-box[data-placement^=top] > .tippy-arrow::before { border-top-color: var(--text) !important; }
.tippy-box[data-placement^=bottom] > .tippy-arrow::before { border-bottom-color: var(--text) !important; }
.tippy-box[data-placement^=left] > .tippy-arrow::before { border-left-color: var(--text) !important; }
.tippy-box[data-placement^=right] > .tippy-arrow::before { border-right-color: var(--text) !important; }
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before { border-top-color: var(--text) !important; }
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { border-bottom-color: var(--text) !important; }

.popover {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.popover-header { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.popover-body { color: var(--text-2); }

.snackbar-container {
  font-family: var(--font-sans) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  font-size: .8125rem !important;
}

.swal2-popup {
  background: var(--surface) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
}
.swal2-title { color: var(--text) !important; font-size: 1.125rem !important; font-weight: 600 !important; }
.swal2-html-container, .swal2-content { color: var(--text-2) !important; font-size: .875rem !important; }
.swal2-styled { border-radius: var(--radius-sm) !important; font-size: .8125rem !important; font-weight: 600 !important; padding: .55rem 1.1rem !important; }
.swal2-styled.swal2-confirm { background: var(--grad-btn) !important; color: var(--accent-fg) !important; box-shadow: var(--glow) !important; }
.swal2-styled.swal2-cancel { background: var(--card-strong) !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important; }
.swal2-styled:focus { box-shadow: 0 0 0 3px var(--ring) !important; }
.swal2-input, .swal2-textarea, .swal2-select {
  background: var(--input) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

/* ---------- Charts -------------------------------------------------------- */
.apexcharts-text, .apexcharts-legend-text, .apexcharts-title-text,
.apexcharts-datalabel-label, .apexcharts-datalabel-value {
  fill: var(--muted) !important;
  color: var(--muted) !important;
  font-family: var(--font-sans) !important;
}
.apexcharts-datalabel-value { fill: var(--text) !important; }
.apexcharts-gridline, .apexcharts-xaxis-tick, .apexcharts-xaxis line { stroke: var(--border) !important; }
.apexcharts-tooltip {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-md) !important;
}
.apexcharts-tooltip-title { background: var(--surface-2) !important; border-color: var(--border) !important; }
.apexcharts-menu { background: var(--surface) !important; border-color: var(--border) !important; }

/* ---------- Auth pages ---------------------------------------------------- */
.account-pages { min-height: 100dvh; display: flex; align-items: center; margin: 0 !important; padding: 48px 0; }
.account-pages .container { width: 100%; }
.account-pages .card {
  background: var(--card-strong) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-lg), var(--highlight) !important;
}
.account-pages .card-body { padding: 36px !important; }
.account-pages h3 { font-size: 1.375rem; margin-top: 16px; }
.account-pages .auth-logo img, .account-pages img[src*="logo-lg"] { height: 56px !important; }

/* ---------- Misc ---------------------------------------------------------- */
.footer { background: transparent !important; border-top: 1px solid var(--border); color: var(--muted) !important; }
.simplebar-scrollbar::before { background: var(--border-strong); }
.accordion-item { background: var(--card) !important; border-color: var(--border) !important; margin-top: 0; }
.accordion-button { background: transparent !important; color: var(--text) !important; font-weight: 500; box-shadow: none !important; }
.accordion-button:not(.collapsed) { background: var(--card-strong) !important; }
.accordion-button:focus { box-shadow: 0 0 0 3px var(--ring) !important; }
.accordion-button::after { filter: invert(1); }
html[data-theme="light"] .accordion-button::after { filter: none; }

.timeline-item::before, .track-order-list ul li::before { background: var(--border) !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-control:focus-visible, .form-select:focus-visible, .btn:focus-visible { outline: 0; }

/* utility display classes would otherwise beat the flex centering in the top bar */
@media (min-width: 992px) {
  .navbar-custom .topnav-menu > li.d-lg-block,
  .navbar-custom .topnav-menu > li.d-lg-inline-block { display: flex !important; }
}
@media (min-width: 1200px) {
  .navbar-custom .topnav-menu > li.d-xl-block { display: flex !important; }
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 991.98px) {
  .content-page, body[data-layout-mode=horizontal] .content-page,
  html.vsb-expanded .content-page { margin-left: 0 !important; }
  body[data-layout-mode=horizontal] .content-page .container-fluid { padding: 0 16px; }
  .logo-box, body[data-layout-mode=horizontal] .logo-box { padding-right: 8px !important; }
  .page-title-box { flex-direction: column-reverse; align-items: flex-start; padding: 22px 0 14px; }
  .right-bar { width: 100%; }
}
@media (max-width: 575.98px) {
  .notification-panel-dropdown { width: calc(100vw - 32px); }
  .navbar-custom .pro-user-name, .brand-version { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Left sidebar (templates/base/_items/sidebar.html) ------------- */
.vsb {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  bottom: 0;
  width: var(--sb-w);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  transition: width .22s var(--ease);
}
/* glass layer on a pseudo-element: backdrop-filter on .vsb itself would become the
   containing block of the fixed-position flyouts and misplace them */
.vsb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
}
@media (prefers-reduced-transparency: reduce) {
  .vsb::before { background: var(--bg); backdrop-filter: none; }
}
html.vsb-expanded .vsb { width: var(--sb-w-open); }

.vsb-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 10px;
  scrollbar-width: none;
}
.vsb-scroll::-webkit-scrollbar { display: none; }
.vsb-bottom { padding: 8px 10px 12px; border-top: 1px solid var(--border); }
.vsb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.vsb-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted) !important;
  font: inherit;
  font-size: .8125rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.vsb-link > i:first-child { flex: none; width: 22px; font-size: 18px; text-align: center; }
.vsb-link:hover,
.vsb-group.open > .vsb-link { background: var(--card-strong); color: var(--text) !important; }
.vsb-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vsb-item.active > .vsb-link { background: var(--accent-soft); color: var(--text) !important; }
.vsb-item.active > .vsb-link > i:first-child { color: var(--accent); }
.vsb-item.active > .vsb-link::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--grad);
}
.vsb-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .15s var(--ease);
}
.vsb-caret { flex: none; font-size: 14px; opacity: 0; transition: transform .2s var(--ease), opacity .15s; }
html.vsb-expanded .vsb-label,
html.vsb-expanded .vsb-caret { opacity: 1; }
.vsb-group.open .vsb-caret { transform: rotate(90deg); }

/* submenu: accordion by default (expanded rail and mobile drawer) */
.vsb-sub { display: none; padding: 2px 0 6px 34px; }
.vsb-group.open > .vsb-sub { display: block; }
.vsb-sub a {
  display: flex;
  align-items: center;
  padding: .45rem .7rem;
  border-radius: 8px;
  color: var(--text-2) !important;
  font-size: .8125rem;
  white-space: nowrap;
}
.vsb-sub a:hover { background: var(--card-strong); color: var(--text) !important; }
.vsb-sub a.is-current { background: var(--accent-soft); color: var(--accent) !important; }
.vsb-sub-title {
  padding: .55rem .7rem .3rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.vsb-sub > .vsb-sub-title:first-child { display: none; }
.vsb-sub-sep { height: 1px; margin: 6px 4px; background: var(--border); }

/* desktop rail: submenu becomes a flyout next to the icon */
@media (min-width: 992px) {
  html:not(.vsb-expanded) .vsb-sub {
    position: fixed;
    z-index: 1060;
    min-width: 220px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    padding: 6px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    animation: vaim-pop .16s var(--ease);
  }
  html:not(.vsb-expanded) .vsb-sub > .vsb-sub-title:first-child { display: block; }
}

.vsb-tip {
  position: fixed;
  z-index: 1070;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

/* project switcher */
.vsb-project-mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
}
.vsb-project .vsb-label { display: flex; flex-direction: column; line-height: 1.2; color: var(--text); }
.vsb-project-hint {
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.vsb-collapse > i { transition: transform .22s var(--ease); }
html.vsb-expanded .vsb-collapse > i { transform: rotate(180deg); }

/* search lives in the drawer on small screens */
.vsb-search { display: none; position: relative; margin-bottom: 10px; }
.vsb-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.vsb-search input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: .875rem;
}
.vsb-search input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

/* hamburger in the top bar (small screens only) */
.vsb-burger {
  display: none;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 20px;
  align-items: center;
  justify-content: center;
}
.vsb-burger:hover { background: var(--card-strong); }
.vsb-backdrop[hidden] { display: none; }

@media (max-width: 991.98px) {
  .vsb-burger { display: inline-flex; }
  .vsb {
    width: min(300px, 86vw) !important;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .25s var(--ease), visibility 0s linear .25s;
  }
  body.vsb-open .vsb {
    transform: none;
    visibility: visible;
    box-shadow: var(--shadow-lg);
    transition: transform .25s var(--ease);
  }
  .vsb::before { background: var(--surface); backdrop-filter: none; }
  .vsb-label, .vsb-caret { opacity: 1; }
  .vsb-search { display: block; }
  .vsb-collapse-item { display: none; }
  .vsb-backdrop {
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    z-index: 999;
    background: rgb(4 10 20 / .55);
  }
  body.vsb-open { overflow: hidden; }
}

/* ---------- Footer (templates/base/_items/footer.html) -------------------- */
.content-page,
body[data-layout-mode=horizontal] .content-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--topbar-h));
  padding-bottom: 0 !important;
}
.content-page > .content { flex: 1 0 auto; padding-bottom: 32px; }
.vaim-footer {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 20px 22px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: .8125rem;
  color: var(--muted);
}