/* ============================================================
   VPT Theme — Safety Intelligence Dashboard
   Design tokens matched to virtualpatroltechnologies.com
   Bootstrap 5.3 dark theme override
   ============================================================ */

/* --- 1. DESIGN TOKENS --- */
:root {
  --vpt-bg: #090C11;
  --vpt-bg-2: #11161E;
  --vpt-panel: #161C25;
  --vpt-text: #EAEDF1;
  --vpt-text-body: #C8D0DA;
  --vpt-muted: #9AA6B4;
  --vpt-gold: #C8A23C;
  --vpt-gold-2: #E2C25E;
  --vpt-danger: #C0574C;
  --vpt-success: #38A169;
  --vpt-info: #2c7be5;
  --vpt-line: rgba(255,255,255,.12);
  --vpt-sidebar-width: 260px;
}

/* --- 2. GLOBAL RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Archivo', Arial, sans-serif;
  background: var(--vpt-bg) !important;
  color: var(--vpt-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* Prevent colony_config.html (included as tab) from changing body layout */
  display: block !important;
  height: auto !important;
}

html {
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Archivo', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--vpt-text);
}

p { color: var(--vpt-text-body); }
a { color: inherit; text-decoration: none; }

/* Monospace label style (from website) */
.vpt-mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vpt-muted);
  font-weight: 500;
}
.vpt-mono.gold { color: var(--vpt-gold); }

/* --- 3. LAYOUT: SIDEBAR + CONTENT --- */
.vpt-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.vpt-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  min-width: 0;
}

.vpt-workspace {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  background: var(--vpt-bg);
  position: relative;
  width: 100%;
}

/* Centered layout for auth pages (no sidebar) */
.vpt-auth-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vpt-bg);
  padding: 32px;
}

.vpt-auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--vpt-panel);
  border: 1px solid var(--vpt-line);
  border-radius: 8px;
  padding: 40px;
}

/* Watermark */
.vpt-watermark {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
}
.vpt-watermark img {
  width: 60%;
  max-width: 600px;
  opacity: 0.03;
  filter: grayscale(50%);
}

/* --- 4. SIDEBAR --- */
.vpt-sidebar {
  width: var(--vpt-sidebar-width);
  min-width: var(--vpt-sidebar-width);
  background: var(--vpt-bg-2);
  border-right: 1px solid var(--vpt-line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 1050;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.vpt-sidebar.collapsed { margin-left: calc(var(--vpt-sidebar-width) * -1); }

/* Sidebar brand */
.vpt-sidebar-brand {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--vpt-line);
  text-decoration: none !important;
  gap: 10px;
}
.vpt-sidebar-brand img { height: 38px; width: auto; }
.vpt-sidebar-brand span {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--vpt-text);
}
.vpt-sidebar-brand b { color: var(--vpt-gold); }

/* Sidebar section label */
.vpt-sidebar-label {
  padding: 24px 20px 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--vpt-muted);
}

/* Sidebar nav links */
.vpt-nav-link {
  display: flex;
  align-items: center;
  padding: 11px 20px;
  color: var(--vpt-muted);
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 600;
  border-left: 3px solid transparent;
  transition: all 0.15s;
  cursor: pointer;
}
.vpt-nav-link:hover {
  background: rgba(255,255,255,.04);
  color: var(--vpt-text);
}
.vpt-nav-link.active {
  background: rgba(200,162,60,.08);
  color: var(--vpt-text);
  border-left-color: var(--vpt-gold);
}
.vpt-nav-link i {
  width: 22px;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
}
.vpt-nav-link .fa-chevron-down {
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.2s;
}
.vpt-nav-link[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

/* Sidebar submenu links (colony items) */
.vpt-submenu-link {
  display: block;
  padding: 7px 20px 7px 52px;
  color: var(--vpt-gold) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.15s;
}
.vpt-submenu-link:hover {
  background: rgba(255,255,255,.04);
  color: var(--vpt-gold-2) !important;
}
.vpt-submenu-link.active {
  color: var(--vpt-text) !important;
  background: rgba(200,162,60,.08);
  border-left: 3px solid var(--vpt-gold);
}

/* Sidebar footer */
.vpt-sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--vpt-line);
  background: rgba(0,0,0,.15);
}
.vpt-sidebar-footer a {
  display: block;
  font-size: 12px;
  color: var(--vpt-muted);
  padding: 4px 0;
  text-decoration: none;
}
.vpt-sidebar-footer a:hover { color: var(--vpt-text); }
.vpt-sidebar-footer a i { width: 18px; margin-right: 4px; }

.vpt-user-badge {
  width: 30px;
  height: 30px;
  background: var(--vpt-gold);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #0A0A0A;
  flex-shrink: 0;
}

/* --- 5. TOPBAR --- */
.vpt-topbar {
  height: 52px;
  background: var(--vpt-bg-2);
  border-bottom: 1px solid var(--vpt-line);
  display: flex;
  align-items: center;
  padding: 0 24px;
  flex-shrink: 0;
}

.vpt-topbar .vpt-toggle-btn {
  background: none;
  border: none;
  color: var(--vpt-muted);
  font-size: 18px;
  padding: 0;
  margin-right: 16px;
  cursor: pointer;
}
.vpt-topbar .vpt-toggle-btn:hover { color: var(--vpt-text); }

/* Breadcrumb */
.vpt-breadcrumb {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .04em;
}
.vpt-breadcrumb li { color: var(--vpt-muted); }
.vpt-breadcrumb li a {
  color: var(--vpt-muted);
  text-decoration: none;
  cursor: pointer;
}
.vpt-breadcrumb li a:hover { color: var(--vpt-gold); }
.vpt-breadcrumb li.active { color: var(--vpt-text); font-weight: 600; }
.vpt-breadcrumb .sep {
  margin: 0 8px;
  opacity: .4;
  font-size: 10px;
}

/* --- 6. CARDS --- */
.card {
  background: var(--vpt-panel) !important;
  border: 1px solid var(--vpt-line) !important;
  border-radius: 6px;
  color: var(--vpt-text);
  box-shadow: none !important;
}
.card-header {
  background: var(--vpt-panel) !important;
  border-bottom: 1px solid var(--vpt-line) !important;
  color: var(--vpt-text);
  font-weight: 700;
}
.card-body { color: var(--vpt-text-body); }

/* Clickable navigation card */
.vpt-nav-card {
  cursor: pointer;
  transition: all 0.2s;
}
.vpt-nav-card:hover {
  transform: translateY(-2px);
  border-color: var(--vpt-gold) !important;
}

/* Stat card (for dashboards) */
.vpt-stat-card {
  background: var(--vpt-panel);
  border: 1px solid var(--vpt-line);
  border-radius: 6px;
  padding: 24px;
}
.vpt-stat-card .vpt-stat-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -.03em;
}
.vpt-stat-card .vpt-stat-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vpt-muted);
  margin-top: 8px;
}

/* --- 7. TABLES --- */
.table { color: var(--vpt-text); }
.table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--vpt-line);
  color: var(--vpt-text);
}
.table > thead > tr > th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vpt-muted);
  font-weight: 600;
  border-bottom-width: 1px;
}
.table-hover > tbody > tr:hover > * {
  background-color: rgba(255,255,255,.03);
  color: var(--vpt-text);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255,255,255,.02);
}

/* --- 8. FORMS --- */
.form-control, .form-select {
  background-color: var(--vpt-bg) !important;
  border: 1px solid var(--vpt-line) !important;
  color: var(--vpt-text) !important;
  font-size: 14px;
  border-radius: 4px;
}
.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 2px rgba(200,162,60,.25) !important;
  border-color: var(--vpt-gold) !important;
}
.form-control::placeholder { color: var(--vpt-muted) !important; }

.form-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vpt-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.form-check-input {
  background-color: var(--vpt-bg);
  border-color: var(--vpt-line);
}
.form-check-input:checked {
  background-color: var(--vpt-gold);
  border-color: var(--vpt-gold);
}
.form-check-label { color: var(--vpt-text-body); }

.input-group-text {
  background-color: var(--vpt-bg-2) !important;
  border-color: var(--vpt-line) !important;
  color: var(--vpt-muted) !important;
}

/* --- 9. BUTTONS --- */
.btn-vpt-primary {
  background: var(--vpt-gold);
  color: #0A0A0A;
  border: 1px solid var(--vpt-gold);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 20px;
  transition: .2s;
}
.btn-vpt-primary:hover {
  background: var(--vpt-gold-2);
  border-color: var(--vpt-gold-2);
  color: #0A0A0A;
}

.btn-vpt-outline {
  background: transparent;
  color: var(--vpt-gold);
  border: 1px solid var(--vpt-gold);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 20px;
  transition: .2s;
}
.btn-vpt-outline:hover {
  background: var(--vpt-gold);
  color: #0A0A0A;
}

.btn-vpt-default {
  background: var(--vpt-bg-2);
  color: var(--vpt-text-body);
  border: 1px solid var(--vpt-line);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  transition: .2s;
}
.btn-vpt-default:hover {
  background: var(--vpt-panel);
  color: var(--vpt-text);
  border-color: var(--vpt-gold);
}

.btn-vpt-danger {
  background: var(--vpt-danger);
  color: #fff;
  border: 1px solid var(--vpt-danger);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
}
.btn-vpt-danger:hover {
  background: #D4645A;
  border-color: #D4645A;
  color: #fff;
}

/* --- 10. BADGES / STATUS --- */
.badge { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em; font-weight: 600; }

.vpt-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.vpt-status-dot.healthy { background: var(--vpt-success); }
.vpt-status-dot.stale { background: var(--vpt-gold); }
.vpt-status-dot.offline { background: var(--vpt-danger); }

/* Agent status indicators (from monitor templates) */
.status-validating { border-left: 3px solid var(--vpt-success) !important; }
.status-alert { border-left: 3px solid var(--vpt-gold) !important; animation: vpt-pulse-gold 2s infinite; }
.status-critical { border-left: 3px solid var(--vpt-danger) !important; animation: vpt-pulse-red 1.5s infinite; }
.status-offline { border-left: 3px solid var(--vpt-danger) !important; opacity: .6; }
.status-online { border-left: 3px solid var(--vpt-success) !important; }

@keyframes vpt-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,162,60,.3); }
  50% { box-shadow: 0 0 8px 2px rgba(200,162,60,.2); }
}
@keyframes vpt-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,87,76,.3); }
  50% { box-shadow: 0 0 8px 2px rgba(192,87,76,.2); }
}

/* --- 11. BOOTSTRAP DARK OVERRIDES --- */
.bg-white { background-color: var(--vpt-panel) !important; color: var(--vpt-text) !important; }
.bg-light { background-color: var(--vpt-bg-2) !important; color: var(--vpt-text) !important; }
.text-muted { color: var(--vpt-muted) !important; }
.text-dark { color: var(--vpt-text) !important; }
.text-primary { color: var(--vpt-gold) !important; }
.text-success { color: var(--vpt-success) !important; }
.text-danger { color: var(--vpt-danger) !important; }
.text-info { color: var(--vpt-info) !important; }

.border { border-color: var(--vpt-line) !important; }
.border-top { border-top-color: var(--vpt-line) !important; }
.border-bottom { border-bottom-color: var(--vpt-line) !important; }
.border-start { border-left-color: var(--vpt-line) !important; }
.border-end { border-right-color: var(--vpt-line) !important; }

/* BS5 nav-tabs dark */
.nav-tabs { border-bottom-color: var(--vpt-line); }
.nav-tabs .nav-link {
  color: var(--vpt-muted);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 13px;
}
.nav-tabs .nav-link:hover {
  border-color: var(--vpt-line);
  color: var(--vpt-text);
}
.nav-tabs .nav-link.active {
  background-color: var(--vpt-panel);
  border-color: var(--vpt-line) var(--vpt-line) var(--vpt-panel);
  color: var(--vpt-gold) !important;
}

/* Modals */
.modal-content {
  background: var(--vpt-panel);
  border: 1px solid var(--vpt-line);
  color: var(--vpt-text);
}
.modal-header { border-bottom-color: var(--vpt-line); }
.modal-footer { border-top-color: var(--vpt-line); }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Dropdowns */
.dropdown-menu {
  background: var(--vpt-panel);
  border: 1px solid var(--vpt-line);
}
.dropdown-item {
  color: var(--vpt-text-body);
  font-size: 13px;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(255,255,255,.05);
  color: var(--vpt-text);
}

/* Pagination */
.page-link {
  background: var(--vpt-bg-2);
  border-color: var(--vpt-line);
  color: var(--vpt-text-body);
}
.page-link:hover {
  background: var(--vpt-panel);
  color: var(--vpt-gold);
}
.page-item.active .page-link {
  background: var(--vpt-gold);
  border-color: var(--vpt-gold);
  color: #0A0A0A;
}

/* Alerts */
.alert { border-radius: 4px; }
.alert-success { background: rgba(56,161,105,.12); border-color: rgba(56,161,105,.3); color: var(--vpt-success); }
.alert-danger { background: rgba(192,87,76,.12); border-color: rgba(192,87,76,.3); color: var(--vpt-danger); }
.alert-warning { background: rgba(200,162,60,.12); border-color: rgba(200,162,60,.3); color: var(--vpt-gold); }
.alert-info { background: rgba(44,123,229,.12); border-color: rgba(44,123,229,.3); color: var(--vpt-info); }

/* Tooltips */
.tooltip-inner {
  background: var(--vpt-panel);
  color: var(--vpt-text);
  border: 1px solid var(--vpt-line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}

/* Accordion */
.accordion-item {
  background: var(--vpt-panel);
  border-color: var(--vpt-line);
}
.accordion-button {
  background: var(--vpt-panel);
  color: var(--vpt-text);
}
.accordion-button:not(.collapsed) {
  background: var(--vpt-bg-2);
  color: var(--vpt-gold);
}

/* Progress bars */
.progress {
  background: var(--vpt-bg);
  border-radius: 3px;
}
.progress-bar { background: var(--vpt-gold); }

/* --- 12. UTILITY CLASSES --- */
.text-gold { color: var(--vpt-gold) !important; }
.bg-vpt { background: var(--vpt-bg) !important; }
.bg-vpt-2 { background: var(--vpt-bg-2) !important; }
.bg-vpt-panel { background: var(--vpt-panel) !important; }
.border-gold { border-color: var(--vpt-gold) !important; }

/* Corner bracket motif (VPT frame) */
.vpt-frame {
  position: relative;
}
.vpt-frame::before,
.vpt-frame::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--vpt-gold);
}
.vpt-frame::before { top: -4px; left: -4px; border-right: none; border-bottom: none; }
.vpt-frame::after { bottom: -4px; right: -4px; border-left: none; border-top: none; }

/* Hidden helper */
.hidden { display: none !important; }

/* --- 13. FALCON BS4 DARK OVERRIDES ---
   Force dark theme on legacy colony templates that use BS4 classes,
   inline white backgrounds, and Falcon-specific markup.
   These catch everything the BS5 overrides above miss. */

/* Universal background catch-all: any element with explicit white/light bg */
.bg-100, .bg-200, .bg-soft-primary, .bg-soft-success, .bg-soft-warning, .bg-soft-danger,
.bg-soft-info, .bg-gradient { background-color: var(--vpt-bg-2) !important; }

/* BS4 card variants (Falcon uses .card-bg and specific card patterns) */
.card, .card-body, .card-footer, .card-header,
.tab-content, .tab-pane, .tab-content .card { 
  background-color: var(--vpt-panel) !important; 
  color: var(--vpt-text) !important;
  border-color: var(--vpt-line) !important;
}

/* BS4 nav-pills / nav-tabs (Falcon tab system) */
.nav-pills .nav-link { color: var(--vpt-muted); }
.nav-pills .nav-link.active { background-color: var(--vpt-gold) !important; color: #0A0A0A !important; }
.nav-pills .nav-link:hover { color: var(--vpt-text); }
.nav.nav-tabs .nav-link { color: var(--vpt-muted); }
.nav.nav-tabs .nav-link.active { 
  background-color: var(--vpt-panel) !important;
  color: var(--vpt-gold) !important;
  border-color: var(--vpt-line) var(--vpt-line) var(--vpt-panel) !important;
}

/* Falcon list groups */
.list-group-item {
  background-color: var(--vpt-panel) !important;
  color: var(--vpt-text) !important;
  border-color: var(--vpt-line) !important;
}
.list-group-item.active {
  background-color: rgba(200,162,60,.15) !important;
  border-color: var(--vpt-gold) !important;
  color: var(--vpt-gold) !important;
}

/* Colony dashboard tab content — catch embedded iframes and white containers */
.dashboard-content, .panel-body, .fs--1, .fs-0, .fs-1, .fs-2 { color: var(--vpt-text-body) !important; }

/* Inline style overrides for legacy templates using style="background: #fff" or similar */
[style*="background: white"], [style*="background:#fff"],
[style*="background-color: white"], [style*="background-color:#fff"],
[style*="background-color: #fff"], [style*="background: #fff"],
[style*="background-color: rgb(255"] {
  background-color: var(--vpt-panel) !important;
}

/* Force text color on legacy patterns */
[style*="color: #000"], [style*="color:#000"],
[style*="color: black"], [style*="color:black"],
[style*="color: rgb(0, 0, 0)"] {
  color: var(--vpt-text) !important;
}

/* Falcon's shadow-sm, shadow, rounded elements */
.shadow, .shadow-sm, .shadow-lg { box-shadow: 0 2px 8px rgba(0,0,0,.3) !important; }
.shadow-none { box-shadow: none !important; }
.rounded { border-radius: 6px; }

/* BS4 close button (× in modals) */
button.close, .close {
  color: var(--vpt-text) !important;
  text-shadow: none !important;
  opacity: .7;
}
button.close:hover, .close:hover { color: var(--vpt-text) !important; opacity: 1; }

/* BS4 modal overrides */
.modal-content { background: var(--vpt-panel) !important; border-color: var(--vpt-line) !important; }
.modal-header { background: var(--vpt-bg-2) !important; border-bottom-color: var(--vpt-line) !important; }
.modal-body { background: var(--vpt-panel) !important; color: var(--vpt-text) !important; }
.modal-footer { background: var(--vpt-panel) !important; border-top-color: var(--vpt-line) !important; }
.modal-title { color: var(--vpt-text) !important; }
.modal-backdrop { background: rgba(0,0,0,.7) !important; }

/* BS4 .btn overrides */
.btn-primary { background-color: var(--vpt-info) !important; border-color: var(--vpt-info) !important; }
.btn-success { background-color: var(--vpt-success) !important; border-color: var(--vpt-success) !important; }
.btn-danger { background-color: var(--vpt-danger) !important; border-color: var(--vpt-danger) !important; }
.btn-warning { background-color: var(--vpt-gold) !important; border-color: var(--vpt-gold) !important; color: #0A0A0A !important; }
.btn-outline-primary { color: var(--vpt-info) !important; border-color: var(--vpt-info) !important; }
.btn-outline-secondary { color: var(--vpt-muted) !important; border-color: var(--vpt-line) !important; }
.btn-light { background-color: var(--vpt-bg-2) !important; color: var(--vpt-text) !important; border-color: var(--vpt-line) !important; }
.btn-secondary { background-color: var(--vpt-bg-2) !important; color: var(--vpt-text) !important; border-color: var(--vpt-line) !important; }

/* BS4 form controls (Falcon uses these) */
.form-control, .custom-select, select.form-control, input.form-control, textarea.form-control {
  background-color: var(--vpt-bg) !important;
  color: var(--vpt-text) !important;
  border-color: var(--vpt-line) !important;
}
.form-control:focus, .custom-select:focus {
  background-color: var(--vpt-bg) !important;
  color: var(--vpt-text) !important;
  border-color: var(--vpt-gold) !important;
  box-shadow: 0 0 0 2px rgba(200,162,60,.25) !important;
}
.form-control::placeholder { color: var(--vpt-muted) !important; }
label { color: var(--vpt-text-body); }

/* BS4 input-group */
.input-group-text {
  background-color: var(--vpt-bg-2) !important;
  color: var(--vpt-muted) !important;
  border-color: var(--vpt-line) !important;
}

/* BS4 table overrides */
.table, .table td, .table th { color: var(--vpt-text) !important; border-color: var(--vpt-line) !important; }
.table thead th { color: var(--vpt-muted) !important; border-bottom-color: var(--vpt-line) !important; }
.table-bordered td, .table-bordered th { border-color: var(--vpt-line) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.02) !important; }
.table-hover tbody tr:hover { background-color: rgba(255,255,255,.04) !important; }

/* Scrollbar dark */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--vpt-bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

/* Full-width workspace fix — remove max-width constraints */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Force tab content to fill full width — override BS col-md-10, col-lg-8 etc. */
.tab-pane .col-md-10, .tab-pane .col-lg-10, .tab-pane .col-xl-10,
.tab-pane .col-md-8, .tab-pane .col-lg-8 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Remove negative margins from rows that cause right-edge clipping */
.tab-pane > .container-fluid > .row,
.tab-pane .row,
.view-state .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.tab-pane > .container-fluid > .row > [class*="col"],
.view-state > .row > [class*="col"] {
  padding-left: 12px;
  padding-right: 12px;
}

/* Workspace: edge-to-edge content */
.vpt-workspace > .view-state { padding: 20px; }
.vpt-workspace > .view-state > .card { border-radius: 0; border-left: none; border-right: none; }
#view-colony { padding: 0 !important; }
#view-colony .card { border-radius: 0 !important; border-left: none !important; border-right: none !important; }

/* Protect dashboard tab-content from colony_config.html CSS leak.
   colony_config.html is a full HTML document included via {% include %};
   its unscoped .tab-content rule adds padding/borders/min-height. */
#myTabContent {
  padding: 0 !important;
  border: none !important;
  min-height: auto !important;
  border-radius: 0 !important;
}
#myTabContent > .tab-pane {
  padding: 0 !important;
  border: none !important;
}

/* Toast/notification overrides */
.toast { background: var(--vpt-panel) !important; color: var(--vpt-text) !important; border-color: var(--vpt-line) !important; }
.toast-header { background: var(--vpt-bg-2) !important; color: var(--vpt-text) !important; border-bottom-color: var(--vpt-line) !important; }

/* Popover */
.popover { background: var(--vpt-panel); border-color: var(--vpt-line); }
.popover-header { background: var(--vpt-bg-2); color: var(--vpt-text); border-bottom-color: var(--vpt-line); }
.popover-body { color: var(--vpt-text-body); }

/* Jumbotron / hero areas */
.jumbotron { background: var(--vpt-bg-2) !important; }

/* Generic catch: anything with .bg-white or white background inside workspace */
.vpt-workspace .bg-white, .vpt-workspace [class*="bg-"] { background-color: var(--vpt-panel) !important; }

/* --- 14. RESPONSIVE --- */
@media (max-width: 992px) {
  .vpt-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    box-shadow: 4px 0 12px rgba(0,0,0,.4);
  }
  .vpt-sidebar.collapsed {
    margin-left: calc(var(--vpt-sidebar-width) * -1);
    box-shadow: none;
  }
}

@media (max-width: 576px) {
  .vpt-auth-card { padding: 28px 20px; }
}