:root {
  color-scheme: dark;
  --vq-bg: #070b16;
  --vq-bg-soft: #0b1020;
  --vq-surface: #101728;
  --vq-surface-2: #151d31;
  --vq-surface-3: #1a2440;
  --vq-border: rgba(148, 163, 184, .16);
  --vq-border-strong: rgba(148, 163, 184, .28);
  --vq-text: #f5f7ff;
  --vq-text-soft: #c5cce0;
  --vq-muted: #8e9ab7;
  --vq-primary: #6d5dfc;
  --vq-primary-2: #2788ff;
  --vq-cyan: #3ad7ff;
  --vq-success: #31d083;
  --vq-warning: #f6b94a;
  --vq-danger: #ff6178;
  --vq-shadow: 0 18px 50px rgba(0, 0, 0, .34);
  --vq-radius: 16px;
  --vq-sidebar-width: 276px;
  --vq-topbar-height: 68px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 82% 4%, rgba(39,136,255,.10), transparent 28%),
    radial-gradient(circle at 18% 92%, rgba(109,93,252,.09), transparent 30%),
    var(--vq-bg);
  color: var(--vq-text);
  font-family: Inter, "Noto Sans Thai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { color:white; }

a { color: var(--vq-cyan); text-decoration: none; }
a:hover { color: #fff; }

/* Core layout */
.wrapper { min-height: 100vh; background: transparent; }
.main {
  min-width: 0;
  min-height: 100vh;
  margin-left: var(--vq-sidebar-width);
  background: transparent;
  transition: margin-left .25s ease;
}
body.sidebar-collapsed .main { margin-left: 0; }
.content { padding: 22px !important; }

/* Sidebar */
.vq-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  width: var(--vq-sidebar-width);
  background: linear-gradient(180deg, #0c1224 0%, #090e1b 100%);
  border-right: 1px solid var(--vq-border);
  box-shadow: 20px 0 50px rgba(0,0,0,.18);
  transition: transform .25s ease;
}
body.sidebar-collapsed .vq-sidebar { transform: translateX(-100%); }
.vq-sidebar-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vq-sidebar-head {
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--vq-border);
}
.vq-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vq-brand-logo {
  width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--vq-border);
  box-shadow: 0 10px 28px rgba(28,91,255,.18);
}
.vq-brand-copy { min-width: 0; flex: 1; }
.vq-brand-name { font-size: 16px; font-weight: 800; letter-spacing: .02em; color: #fff; }
.vq-brand-sub { margin-top: 3px; color: var(--vq-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vq-brand-help {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--vq-border); border-radius: 10px;
  background: rgba(255,255,255,.035); color: var(--vq-muted);
}
.vq-brand-help:hover { background: rgba(58,215,255,.10); color: var(--vq-cyan); border-color: rgba(58,215,255,.3); }

.vq-nav-wrap { flex: 1; overflow: auto; padding: 14px 10px; }
.vq-nav-wrap::-webkit-scrollbar { width: 6px; }
.vq-nav-wrap::-webkit-scrollbar-thumb { background: rgba(148,163,184,.22); border-radius: 999px; }
.vq-nav-section { margin: 18px 10px 7px; color: #65718d; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.vq-nav-section:first-child { margin-top: 4px; }
.vq-nav-list { list-style: none; margin: 0; padding: 0; }
.vq-nav-item { margin: 3px 0; }
.vq-nav-link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 10px 12px;
  border: 1px solid transparent; border-radius: 12px;
  color: #aeb8cf;
  transition: .18s ease;
}
.vq-nav-link .material-symbols-outlined { font-size: 21px; color: #75819e; transition: .18s ease; }
.vq-nav-link:hover { color: #fff; background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.05); }
.vq-nav-link:hover .material-symbols-outlined { color: var(--vq-cyan); }
.vq-nav-item.active > .vq-nav-link {
  color: #fff;
  background: linear-gradient(100deg, rgba(109,93,252,.24), rgba(39,136,255,.12));
  border-color: rgba(109,93,252,.34);
  box-shadow: inset 3px 0 0 var(--vq-cyan), 0 10px 30px rgba(0,0,0,.14);
}
.vq-nav-item.active > .vq-nav-link .material-symbols-outlined { color: var(--vq-cyan); font-variation-settings: 'FILL' 1, 'wght' 450; }
.vq-nav-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.vq-nav-badge { padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; color: #c7f6ff; background: rgba(58,215,255,.12); border: 1px solid rgba(58,215,255,.18); }
.vq-nav-link-danger { color: #ff9aaa; }
.vq-nav-link-danger .material-symbols-outlined { color: var(--vq-danger); }

.vq-sidebar-foot { padding: 12px; border-top: 1px solid var(--vq-border); }
.vq-tenant-card {
  padding: 13px; border: 1px solid var(--vq-border); border-radius: 14px;
  background: linear-gradient(145deg, rgba(109,93,252,.12), rgba(39,136,255,.06));
}
.vq-tenant-label { color: var(--vq-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.vq-tenant-name { margin-top: 4px; color: #fff; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vq-tenant-scope { margin-top: 3px; color: #7d8aa7; font-size: 11px; }

/* Topbar */
.vq-topbar {
  min-height: var(--vq-topbar-height);
  padding: 0 20px;
  background: rgba(7,11,22,.80) !important;
  border-bottom: 1px solid var(--vq-border);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
  z-index: 1030;
}
.vq-icon-button {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--vq-border); border-radius: 12px;
  background: var(--vq-surface); color: var(--vq-text-soft);
}
.vq-icon-button:hover { color: #fff; border-color: rgba(58,215,255,.28); background: var(--vq-surface-2); }
.vq-icon-button .material-symbols-outlined { font-size: 22px; }
.vq-page-context { margin-left: 13px; line-height: 1.15; }
.vq-page-title { color: var(--vq-text); font-size: 14px; font-weight: 750; }
.vq-page-subtitle { margin-top: 3px; color: var(--vq-muted); font-size: 11px; }
.vq-status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px; border: 1px solid var(--vq-border); border-radius: 999px;
  background: var(--vq-surface); color: var(--vq-text-soft); font-size: 11px; font-weight: 700;
}
.vq-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vq-success); box-shadow: 0 0 0 5px rgba(49,208,131,.11); }
.vq-user-pill {
  display: flex; align-items: center; gap: 10px; padding: 5px 9px 5px 6px;
  border: 1px solid var(--vq-border); border-radius: 999px;
  background: var(--vq-surface); color: var(--vq-text);
}
.vq-user-pill:hover { color: #fff; background: var(--vq-surface-2); border-color: var(--vq-border-strong); }
.vq-avatar { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; border: 1px solid var(--vq-border-strong); background: var(--vq-surface-3); }
.vq-user-name { max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.vq-role-badge { display: inline-flex; margin-top: 3px; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; border: 1px solid; }
.vq-role-0 { color: #d7cfff; background: rgba(139,92,246,.13); border-color: rgba(139,92,246,.28); }
.vq-role-1 { color: #bfe5ff; background: rgba(39,136,255,.13); border-color: rgba(39,136,255,.28); }
.vq-role-2 { color: #bcf4db; background: rgba(49,208,131,.12); border-color: rgba(49,208,131,.25); }
.vq-role-3 { color: #ffe1a8; background: rgba(246,185,74,.12); border-color: rgba(246,185,74,.25); }

/* Dropdowns */
.dropdown-menu, .vq-dropdown {
  min-width: 260px;
  padding: 7px;
  background: #11192b;
  border: 1px solid var(--vq-border-strong);
  border-radius: 14px;
  box-shadow: var(--vq-shadow);
  color: var(--vq-text);
}
.dropdown-item { padding: 9px 10px; border-radius: 9px; color: var(--vq-text-soft); font-size: 12px; }
.dropdown-item:hover, .dropdown-item:focus { color: #fff; background: rgba(255,255,255,.06); }
.dropdown-divider { border-color: var(--vq-border); }
.dropdown-header, .text-muted { color: var(--vq-muted) !important; }

/* General surfaces */
.card, .modal-content, .offcanvas, .list-group-item, .accordion-item {
  color: var(--vq-text);
  background: linear-gradient(180deg, rgba(21,29,49,.97), rgba(15,22,38,.97));
  border: 1px solid var(--vq-border);
  border-radius: var(--vq-radius);
  box-shadow: 0 15px 38px rgba(0,0,0,.20);
}
.card-header, .card-footer, .modal-header, .modal-footer, .accordion-button { background: rgba(255,255,255,.02); border-color: var(--vq-border); color: var(--vq-text); }
.card-title, h1, h2, h3, h4, h5, h6 { color: var(--vq-text); }
.card p, .small, small { color: var(--vq-muted); }

/* Forms */
.form-control, .form-select, textarea.form-control, .input-group-text {
  color: var(--vq-text) !important;
  -webkit-text-fill-color: var(--vq-text) !important;
  caret-color: var(--vq-cyan);
  background-color: #11192b !important;
  border: 1px solid var(--vq-border-strong) !important;
  border-radius: 11px;
}
.form-control::placeholder, textarea.form-control::placeholder { color: #69758f !important; opacity: 1; }
.form-control:focus, .form-select:focus {
  border-color: rgba(58,215,255,.72) !important;
  box-shadow: 0 0 0 3px rgba(58,215,255,.11) !important;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background: #0c1220 !important; color: #66718a !important; }
.form-label { color: var(--vq-text-soft); }
.form-check-input { background-color: #11192b; border-color: var(--vq-border-strong); }
.form-check-input:checked { background-color: var(--vq-primary); border-color: var(--vq-primary); }
.form-control:-webkit-autofill, .form-control:-webkit-autofill:hover, .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--vq-text) !important;
  -webkit-box-shadow: 0 0 0 1000px #11192b inset !important;
}

/* Tables */
.table { --bs-table-bg: transparent; --bs-table-color: var(--vq-text-soft); --bs-table-border-color: var(--vq-border); color: var(--vq-text-soft); }
.table > :not(caption) > * > * { background: transparent; border-color: var(--vq-border); }
.table thead th { color: #d9def0; background: rgba(255,255,255,.025); font-size: 11px; letter-spacing: .03em; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(255,255,255,.035); color: #fff; }

/* Buttons */
.btn {display:flex; align-items:center;}
.btn-primary { background: linear-gradient(135deg, var(--vq-primary), var(--vq-primary-2)); border: 0; box-shadow: 0 10px 25px rgba(71,91,255,.22); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline-secondary { color: var(--vq-text-soft); border-color: var(--vq-border-strong); }
.btn-outline-secondary:hover { color: #fff; background: var(--vq-surface-3); border-color: var(--vq-border-strong); }

/* Tabs/pagination */
.nav-tabs { border-color: var(--vq-border); }
.nav-tabs .nav-link { color: var(--vq-muted); border-color: transparent; }
.nav-tabs .nav-link.active { color: #fff; background: var(--vq-surface-2); border-color: var(--vq-border) var(--vq-border) var(--vq-surface-2); }
.page-link { color: var(--vq-text-soft); background: var(--vq-surface); border-color: var(--vq-border); }
.page-link:hover { color: #fff; background: var(--vq-surface-2); border-color: var(--vq-border-strong); }

/* Footer */
.vq-footer { padding: 14px 20px; color: var(--vq-muted); background: rgba(7,11,22,.74); border-top: 1px solid var(--vq-border); font-size: 11px; }
.vq-footer strong { color: var(--vq-text-soft); }
.vq-footer a { color: var(--vq-muted); }
.vq-footer a:hover { color: var(--vq-cyan); }

/* Leaflet and charts */
.leaflet-container { background: #0d1424; border-radius: 14px; border: 1px solid var(--vq-border); }
canvas { max-width: 100%; }

/* Mobile */
.vq-sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  .main { margin-left: 0; }
  .vq-sidebar { transform: translateX(-100%); }
  body.sidebar-open .vq-sidebar { transform: translateX(0); }
  body.sidebar-open .vq-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(0,0,0,.58); backdrop-filter: blur(2px); }
  .vq-page-context { display: none; }
  .content { padding: 14px !important; }
}
@media (max-width: 575.98px) {
  .vq-topbar { padding: 0 12px; }
  .vq-status-chip { display: none; }
  .vq-user-copy { display: none; }
  .vq-user-pill { padding: 4px; }
}

a,
a:hover,
a:focus,
a:active,
a:visited,
.nav-link,
.nav-link:hover,
.nav-link:focus,
.nav-item a,
.nav-item a:hover,
.sidebar a,
.sidebar a:hover,
.sidebar-link,
.sidebar-link:hover,
.navbar a,
.navbar a:hover,
.dropdown-item,
.dropdown-item:hover,
.btn,
.btn:hover,
.quick-access-card,
.quick-access-card:hover,
.getting-started-item,
.getting-started-item:hover {
    text-decoration: none !important;
}

a:focus-visible,
.nav-link:focus-visible,
.sidebar-link:focus-visible,
.btn:focus-visible {
    outline: 2px solid rgba(65, 220, 255, .65);
    outline-offset: 2px;
    text-decoration: none !important;
}