/**
 * Venom Bootstrap Overrides
 *
 * Implements Bootstrap First methodology by mapping Bootstrap variables
 * to Venom Design Tokens. Load this AFTER theme.min.css but BEFORE custom.css
 *
 * Version: 1.0.0
 * Date: 2026-03-05
 */

/* ============================================
   BOOTSTRAP VARIABLE MAPPING TO VENOM TOKENS
   ============================================ */

/* Legacy bridge tokens required by Bootstrap-facing overrides */
:root {
  --vs-surface-rgb: 17, 17, 24;
  --vs-surface-hover: rgba(255, 255, 255, 0.06);
  --vs-surface-elevated: #1a1a24;
  --vs-card-bg: var(--vs-surface);
  --vs-shadow-lg: var(--vs-shadow);
  --vs-accent-hover: var(--vs-accent);
  --vs-accent-contrast: #041016;
  --vs-success: #22c55e;
  --vs-success-rgb: 34, 197, 94;
  --vs-info: #00d4ff;
  --vs-info-rgb: 0, 212, 255;
  --vs-warning: #f97316;
  --vs-warning-rgb: 249, 115, 22;
  --vs-danger: #dc3545;
  --vs-danger-rgb: 220, 53, 69;
}

html[data-theme="light"] {
  --vs-surface-rgb: 255, 255, 255;
  --vs-surface-hover: rgba(24, 24, 27, 0.06);
  --vs-surface-elevated: #f1f5f9;
  --vs-card-bg: var(--vs-surface);
  --vs-shadow-lg: var(--vs-shadow);
}

:root {
  /* Core Bootstrap → Venom Mapping */
  --primary: var(--vs-accent);
  --secondary: var(--vs-surface);
  --success: var(--vs-success);
  --info: var(--vs-info);
  --warning: var(--vs-warning);
  --danger: var(--vs-danger);
  --light: var(--vs-surface-elevated);
  --dark: var(--vs-bg);

  /* Body & Background */
  --body-bg: var(--vs-bg);
  --body-color: var(--vs-text);

  /* Component Colors */
  --component-bg: var(--vs-surface);
  --component-color: var(--vs-text);
  --component-border-color: var(--vs-border);

  /* Form Controls */
  --input-bg: var(--vs-input-bg);
  --input-color: var(--vs-text);
  --input-border-color: var(--vs-border);
  --input-focus-border-color: var(--vs-accent);
  --input-focus-box-shadow: 0 0 0 0.2rem rgba(var(--vs-accent-rgb), 0.25);

  /* Dropdowns */
  --dropdown-bg: var(--vs-surface);
  --dropdown-color: var(--vs-text);
  --dropdown-border-color: var(--vs-border);
  --dropdown-link-color: var(--vs-text);
  --dropdown-link-hover-color: var(--vs-accent);
  --dropdown-link-hover-bg: var(--vs-surface-hover);

  /* Modals */
  --modal-bg: var(--vs-surface);
  --modal-color: var(--vs-text);
  --modal-border-color: var(--vs-border);
  --modal-header-bg: var(--vs-surface);
  --modal-footer-bg: var(--vs-surface);

  /* Cards */
  --card-bg: var(--vs-card-bg);
  --card-color: var(--vs-text);
  --card-border-color: var(--vs-border);

  /* Tables */
  --table-bg: transparent;
  --table-color: var(--vs-text);
  --table-border-color: var(--vs-border);
  --table-head-bg: var(--vs-surface);
  --table-head-color: var(--vs-text);
  --table-striped-bg: var(--vs-surface);
  --table-hover-bg: var(--vs-surface-hover);

  /* Navbar */
  --navbar-bg: var(--vs-surface);
  --navbar-color: var(--vs-text);
  --navbar-hover-color: var(--vs-accent);
  --navbar-active-color: var(--vs-accent);

  /* Pagination */
  --pagination-bg: var(--vs-surface);
  --pagination-color: var(--vs-text);
  --pagination-border-color: var(--vs-border);
  --pagination-hover-bg: var(--vs-surface-hover);
  --pagination-hover-color: var(--vs-accent);
  --pagination-active-bg: var(--vs-accent);
  --pagination-active-color: var(--vs-accent-contrast, #000);

  /* Alerts */
  --alert-bg-level: -10;
  --alert-border-level: -9;
  --alert-color-level: 6;

  /* Badges */
  --badge-bg: var(--vs-accent);
  --badge-color: var(--vs-accent-contrast, #000);

  /* Tooltips & Popovers */
  --tooltip-bg: var(--vs-surface);
  --tooltip-color: var(--vs-text);
  --popover-bg: var(--vs-surface);
  --popover-color: var(--vs-text);
  --popover-border-color: var(--vs-border);

  /* Links */
  --link-color: var(--vs-accent);
  --link-hover-color: var(--vs-accent-hover);

  /* Text Colors */
  --text-muted: var(--vs-text-secondary);
}

/* ============================================
   COMPONENT OVERRIDES
   ============================================ */

/* Body */
body {
  background-color: var(--vs-bg);
  color: var(--vs-text);
}

/* Links */
a {
  color: var(--vs-accent);
}

a:hover {
  color: var(--vs-accent-hover);
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  border-radius: var(--vs-radius-md);
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn:focus,
.btn.focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--vs-accent-rgb), 0.25);
}

.btn-primary {
  background-color: var(--vs-btn-primary-bg);
  border-color: var(--vs-btn-primary-border);
  color: var(--vs-btn-primary-text, var(--vs-btn-primary-color, var(--vs-accent-contrast)));
}

.btn-primary:hover {
  background-color: var(--vs-btn-primary-hover-bg);
  border-color: var(--vs-btn-primary-hover-border);
}

.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--vs-btn-primary-hover-bg);
  border-color: var(--vs-btn-primary-hover-border);
  box-shadow: 0 0 0 0.2rem rgba(var(--vs-accent-rgb), 0.5);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--vs-btn-primary-bg);
  border-color: var(--vs-btn-primary-border);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--vs-btn-primary-hover-bg);
  border-color: var(--vs-btn-primary-hover-border);
}

.btn-secondary {
  background-color: var(--vs-surface);
  border-color: var(--vs-border);
  color: var(--vs-text);
}

.btn-secondary:hover {
  background-color: var(--vs-surface-hover);
  border-color: var(--vs-border);
}

.btn-success {
  background-color: var(--vs-success);
  border-color: var(--vs-success);
}

.btn-info {
  background-color: var(--vs-info);
  border-color: var(--vs-info);
}

.btn-warning {
  background-color: var(--vs-warning);
  border-color: var(--vs-warning);
}

.btn-danger {
  background-color: var(--vs-danger);
  border-color: var(--vs-danger);
}

.btn-outline-primary {
  color: var(--vs-accent);
  border-color: var(--vs-accent);
}

.btn-outline-primary:hover {
  background-color: var(--vs-accent);
  border-color: var(--vs-accent);
  color: var(--vs-accent-contrast, #000);
}

.btn-outline-secondary {
  color: var(--vs-text);
  border-color: var(--vs-border);
}

.btn-outline-secondary:hover {
  background-color: var(--vs-surface);
  border-color: var(--vs-border);
}

/* ============================================
   FORMS
   ============================================ */

.form-control {
  background-color: var(--vs-input-bg);
  border-color: var(--vs-input-border);
  color: var(--vs-text);
}

.form-control:focus {
  background-color: var(--vs-input-bg);
  border-color: var(--vs-accent);
  color: var(--vs-text);
  box-shadow: 0 0 0 0.2rem rgba(var(--vs-accent-rgb), 0.25);
}

.form-control::placeholder {
  color: var(--vs-text-secondary);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--vs-surface);
}

select.form-control:focus::-ms-value {
  background-color: var(--vs-input-bg);
  color: var(--vs-text);
}

.form-check-input {
  background-color: var(--vs-surface);
  border-color: var(--vs-border);
}

.form-check-input:checked {
  background-color: var(--vs-accent);
  border-color: var(--vs-accent);
}

.form-check-input:focus {
  border-color: var(--vs-accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--vs-accent-rgb), 0.25);
}

.custom-select {
  background-color: var(--vs-input-bg);
  border-color: var(--vs-input-border);
  color: var(--vs-text);
}

.custom-select:focus {
  border-color: var(--vs-accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--vs-accent-rgb), 0.25);
}

.custom-file-label {
  background-color: var(--vs-input-bg);
  border-color: var(--vs-input-border);
  color: var(--vs-text);
}

.custom-file-label::after {
  background-color: var(--vs-surface);
  color: var(--vs-text);
}

.input-group-text {
  background-color: var(--vs-surface);
  border-color: var(--vs-border);
  color: var(--vs-text);
}

/* ============================================
   DROPDOWNS
   ============================================ */

.dropdown-menu {
  background-color: var(--vs-surface);
  border-color: var(--vs-border);
  box-shadow: var(--vs-shadow-lg);
}

.dropdown-item {
  color: var(--vs-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--vs-surface-hover);
  color: var(--vs-accent);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--vs-accent);
  color: var(--vs-accent-contrast, #000);
}

.dropdown-divider {
  border-top-color: var(--vs-border);
}

.dropdown-header {
  color: var(--vs-text-secondary);
}

/* ============================================
   CARDS
   ============================================ */

.card {
  background-color: var(--vs-card-bg);
  border-color: var(--vs-border);
}

.card-header {
  background-color: rgba(var(--vs-surface-rgb), 0.5);
  border-bottom-color: var(--vs-border);
}

.card-footer {
  background-color: rgba(var(--vs-surface-rgb), 0.5);
  border-top-color: var(--vs-border);
}

.card-body {
  color: var(--vs-text);
}

.card-title {
  color: var(--vs-text);
}

.card-text {
  color: var(--vs-text-secondary);
}

.card-link {
  color: var(--vs-accent);
}

.card-link:hover {
  color: var(--vs-accent-hover);
}

/* ============================================
   MODALS
   ============================================ */

.modal-content {
  background-color: var(--vs-surface);
  border-color: var(--vs-border);
}

.modal-header {
  background-color: var(--vs-surface);
  border-bottom-color: var(--vs-border);
}

.modal-footer {
  background-color: var(--vs-surface);
  border-top-color: var(--vs-border);
}

.modal-title {
  color: var(--vs-text);
}

.close {
  color: var(--vs-text);
  text-shadow: none;
}

.close:hover {
  color: var(--vs-accent);
}

/* ============================================
   NAVBARS
   ============================================ */

.navbar {
  background-color: var(--vs-surface);
}

.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
  color: var(--vs-text);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--vs-accent);
}

.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
  color: var(--vs-accent);
}

/* ============================================
   NAVS & TABS
   ============================================ */

.nav-link {
  color: var(--vs-text);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--vs-accent);
}

.nav-link.disabled {
  color: var(--vs-text-secondary);
}

.nav-tabs {
  border-bottom-color: var(--vs-border);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: var(--vs-border);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background-color: var(--vs-surface);
  border-color: var(--vs-border);
  color: var(--vs-accent);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--vs-accent);
  color: var(--vs-accent-contrast, #000);
}

/* ============================================
   TABLES
   ============================================ */

.table {
  color: var(--vs-text);
}

.table th,
.table td {
  border-top-color: var(--vs-border);
}

.table thead th {
  border-bottom-color: var(--vs-border);
  color: var(--vs-text);
}

.table tbody + tbody {
  border-top-color: var(--vs-border);
}

.table .table {
  background-color: var(--vs-surface);
}

.table-bordered {
  border-color: var(--vs-border);
}

.table-bordered th,
.table-bordered td {
  border-color: var(--vs-border);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(var(--vs-surface-rgb), 0.5);
}

.table-hover tbody tr:hover {
  background-color: var(--vs-surface-hover);
}

/* ============================================
   PAGINATION
   ============================================ */

.page-link {
  background-color: var(--vs-surface);
  border-color: var(--vs-border);
  color: var(--vs-text);
}

.page-link:hover {
  background-color: var(--vs-surface-hover);
  border-color: var(--vs-border);
  color: var(--vs-accent);
}

.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--vs-accent-rgb), 0.25);
}

.page-item.active .page-link {
  background-color: var(--vs-accent);
  border-color: var(--vs-accent);
  color: var(--vs-accent-contrast, #000);
}

.page-item.disabled .page-link {
  background-color: var(--vs-surface);
  border-color: var(--vs-border);
  color: var(--vs-text-secondary);
}

/* ============================================
   BADGES
   ============================================ */

.badge-primary {
  background-color: var(--vs-accent);
  color: var(--vs-accent-contrast, #000);
}

.badge-secondary {
  background-color: var(--vs-surface);
  color: var(--vs-text);
}

.badge-success {
  background-color: var(--vs-success);
}

.badge-info {
  background-color: var(--vs-info);
}

.badge-warning {
  background-color: var(--vs-warning);
}

.badge-danger {
  background-color: var(--vs-danger);
}

.badge-light {
  background-color: var(--vs-surface-elevated);
  color: var(--vs-text);
}

.badge-dark {
  background-color: var(--vs-bg);
  color: var(--vs-text);
}

/* ============================================
   ALERTS
   ============================================ */

.alert {
  border: none;
  border-radius: var(--vs-radius-md);
}

.alert-primary {
  background-color: rgba(var(--vs-accent-rgb), 0.15);
  color: var(--vs-accent);
}

.alert-secondary {
  background-color: var(--vs-surface);
  color: var(--vs-text);
}

.alert-success {
  background-color: rgba(var(--vs-success-rgb, 34, 197, 94), 0.15);
  color: var(--vs-success);
}

.alert-info {
  background-color: rgba(var(--vs-info-rgb, 0, 212, 255), 0.15);
  color: var(--vs-info);
}

.alert-warning {
  background-color: rgba(var(--vs-warning-rgb, 249, 115, 22), 0.15);
  color: var(--vs-warning);
}

.alert-danger {
  background-color: rgba(var(--vs-danger-rgb, 220, 53, 69), 0.15);
  color: var(--vs-danger);
}

.alert-light {
  background-color: var(--vs-surface-elevated);
  color: var(--vs-text);
}

.alert-dark {
  background-color: rgba(0, 0, 0, 0.3);
  color: var(--vs-text);
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

/* ============================================
   LIST GROUP
   ============================================ */

.list-group {
  background-color: transparent;
}

.list-group-item {
  background-color: var(--vs-surface);
  border-color: var(--vs-border);
  color: var(--vs-text);
}

.list-group-item-action {
  color: var(--vs-text);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--vs-surface-hover);
  color: var(--vs-accent);
}

.list-group-item.active {
  background-color: var(--vs-accent);
  border-color: var(--vs-accent);
  color: var(--vs-accent-contrast, #000);
}

.list-group-item-primary {
  background-color: rgba(var(--vs-accent-rgb), 0.1);
  color: var(--vs-accent);
}

.list-group-item-secondary {
  background-color: var(--vs-surface-hover);
  color: var(--vs-text);
}

/* ============================================
   BREADCRUMB
   ============================================ */

.breadcrumb {
  background-color: var(--vs-surface);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--vs-text-secondary);
}

.breadcrumb-item.active {
  color: var(--vs-text-secondary);
}

/* ============================================
   TOOLTIPS & POPOVERS
   ============================================ */

.tooltip-inner {
  background-color: var(--vs-surface);
  color: var(--vs-text);
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: var(--vs-surface);
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: var(--vs-surface);
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: var(--vs-surface);
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: var(--vs-surface);
}

.popover {
  background-color: var(--vs-surface);
  border-color: var(--vs-border);
}

.popover-header {
  background-color: var(--vs-surface);
  border-bottom-color: var(--vs-border);
  color: var(--vs-text);
}

.popover-body {
  color: var(--vs-text);
}

.bs-popover-top > .arrow::before,
.bs-popover-auto[x-placement^="top"] > .arrow::before {
  border-top-color: var(--vs-border);
}

.bs-popover-top > .arrow::after,
.bs-popover-auto[x-placement^="top"] > .arrow::after {
  border-top-color: var(--vs-surface);
}

/* ============================================
   PROGRESS BARS
   ============================================ */

.progress {
  background-color: var(--vs-surface);
}

.progress-bar {
  background-color: var(--vs-accent);
  color: var(--vs-accent-contrast, #000);
}

.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
}

/* ============================================
   SPINNERS
   ============================================ */

.spinner-border {
  border-color: currentColor;
  border-right-color: transparent;
}

.spinner-border.text-primary {
  color: var(--vs-accent);
}

.spinner-grow.text-primary {
  background-color: var(--vs-accent);
}

/* ============================================
   TOASTS
   ============================================ */

.toast {
  background-color: var(--vs-surface);
  border-color: var(--vs-border);
}

.toast-header {
  background-color: rgba(var(--vs-surface-rgb), 0.5);
  border-bottom-color: var(--vs-border);
  color: var(--vs-text);
}

.toast-body {
  color: var(--vs-text);
}

/* ============================================
   UTILITIES
   ============================================ */

.bg-primary {
  background-color: var(--vs-accent) !important;
}

.bg-secondary {
  background-color: var(--vs-surface) !important;
}

.bg-success {
  background-color: var(--vs-success) !important;
}

.bg-info {
  background-color: var(--vs-info) !important;
}

.bg-warning {
  background-color: var(--vs-warning) !important;
}

.bg-danger {
  background-color: var(--vs-danger) !important;
}

.bg-light {
  background-color: var(--vs-surface-elevated) !important;
}

.bg-dark {
  background-color: var(--vs-bg) !important;
}

.bg-white {
  background-color: var(--vs-surface) !important;
}

.text-primary {
  color: var(--vs-accent) !important;
}

.text-secondary {
  color: var(--vs-text-secondary) !important;
}

.text-success {
  color: var(--vs-success) !important;
}

.text-info {
  color: var(--vs-info) !important;
}

.text-warning {
  color: var(--vs-warning) !important;
}

.text-danger {
  color: var(--vs-danger) !important;
}

.text-light {
  color: var(--vs-text) !important;
}

.text-dark {
  color: var(--vs-text) !important;
}

.text-muted {
  color: var(--vs-text-secondary) !important;
}

.text-white {
  color: var(--vs-text) !important;
}

.border {
  border-color: var(--vs-border) !important;
}

.border-primary {
  border-color: var(--vs-accent) !important;
}

.border-secondary {
  border-color: var(--vs-border) !important;
}

.border-success {
  border-color: var(--vs-success) !important;
}

.border-info {
  border-color: var(--vs-info) !important;
}

.border-warning {
  border-color: var(--vs-warning) !important;
}

.border-danger {
  border-color: var(--vs-danger) !important;
}

.border-light {
  border-color: var(--vs-surface-elevated) !important;
}

.border-dark {
  border-color: var(--vs-bg) !important;
}

/* ============================================
   JUMBOTRON (deprecated in BS5 but used in WHMCS)
   ============================================ */

.jumbotron {
  background-color: var(--vs-surface);
}

/* ============================================
   CAROUSEL
   ============================================ */

.carousel-control-prev,
.carousel-control-next {
  color: var(--vs-text);
}

.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: var(--vs-accent);
}

.carousel-indicators li {
  background-color: var(--vs-text-secondary);
}

.carousel-indicators .active {
  background-color: var(--vs-accent);
}

.carousel-caption {
  color: var(--vs-text);
}

/* ============================================
   CLOSE BUTTON
   ============================================ */

.close {
  color: var(--vs-text);
  opacity: 0.7;
}

.close:hover {
  color: var(--vs-accent);
  opacity: 1;
}

/* ============================================
   CODE & PRE
   ============================================ */

code {
  color: var(--vs-accent);
  background-color: rgba(var(--vs-accent-rgb), 0.1);
}

kbd {
  background-color: var(--vs-surface);
  color: var(--vs-text);
}

pre {
  background-color: var(--vs-surface);
  color: var(--vs-text);
}

.pre-scrollable {
  background-color: var(--vs-surface);
}

/* ============================================
   HORIZONTAL RULE
   ============================================ */

hr {
  border-top-color: var(--vs-border);
}

/* ============================================
   FIGURE
   ============================================ */

.figure-caption {
  color: var(--vs-text-secondary);
}

/* ============================================
   BLOCKQUOTE
   ============================================ */

.blockquote-footer {
  color: var(--vs-text-secondary);
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  body {
    background-color: white !important;
    color: black !important;
  }

  .card,
  .modal-content,
  .dropdown-menu {
    background-color: white !important;
    border-color: #ddd !important;
  }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .form-control,
  .custom-select,
  .page-link {
    transition: none;
  }

  .progress-bar-animated {
    animation: none;
  }

  .spinner-border,
  .spinner-grow {
    animation: none;
  }
}

/* ============================================
   FOCUS VISIBLE SUPPORT
   ============================================ */

.btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible,
.page-link:focus-visible {
  outline: 2px solid var(--vs-focus-ring);
  outline-offset: 2px;
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */

@media (prefers-contrast: high) {
  :root {
    --vs-border: #ffffff;
    --vs-text-secondary: #ffffff;
  }

  .btn:focus,
  .form-control:focus,
  .custom-select:focus,
  .page-link:focus {
    outline: 3px solid var(--vs-accent);
  }
}