/* =========================================================
   Global Theme Tokens + Bootstrap Theme Override
   Edit this file only to re-skin the whole template.
   ========================================================= */
html[data-theme="navy"] {
    /* Brand */
    --color-primary: #2F4468;
    --color-primary-rgb: 47, 68, 104;
    --color-primary-hover: #3B5480;
    --color-primary-active: #263854;
    --color-primary-soft: #5D7398;
    --color-primary-subtle: #1B2433;
    --color-primary-border: #4E6387;
    --banner-bg: url("../images/banner-bg-dark.svg");
    /* Secondary brand accents */
    --color-secondary: #6D85AF;
    --color-secondary-rgb: 109, 133, 175;
    --color-secondary-hover: #7D95BF;
    --color-accent: #1C2330;
    --color-accent-strong: #263146;
    /* Surfaces */
    --color-body: #0F1724;
    --color-surface: #161F2D;
    --color-surface-alt: #1B2433;
    --color-surface-muted: #202B3D;
    --color-surface-elevated: #202B3D;
    --color-border: #31415F;
    --color-border-soft: #26324A;
    /* Text */
    --color-text: #EAF1FF;
    --color-text-muted: #B8C4D9;
    --color-text-soft: #8FA0BD;
    --color-text-inverse: #FFFFFF;
    --color-heading: #FFFFFF;
    --color-link: #8FADE0;
    --color-link-hover: #B4C8EE;
    /* States */
    --color-success: #3FA36D;
    --color-info: #4D88C7;
    --color-warning: #D6A44B;
    --color-danger: #D46B6B;
    --color-light: #1B2433;
    --color-dark: #0A0F18;
    /* Effects */
    --color-shadow-soft: rgba(0, 0, 0, 0.28);
    --color-shadow-medium: rgba(0, 0, 0, 0.36);
    --color-shadow-strong: rgba(0, 0, 0, 0.48);
    --color-focus-ring: rgba(47, 68, 104, 0.35);
    --color-selection: rgba(109, 133, 175, 0.28);
    --gradient-primary: linear-gradient(135deg, #3B5480 0%, #2F4468 100%);
    --gradient-soft: linear-gradient(180deg, #161F2D 0%, #0F1724 100%);
    /* Legacy / template-preserving tokens */
    --color-overlay-strong: rgba(0, 0, 0, 0.99);
    --color-frost-30: rgba(234, 241, 255, 0.12);
    --color-frost-75: rgba(234, 241, 255, 0.22);
    --color-frost-95: rgba(234, 241, 255, 0.92);
    --color-white-10: rgba(255, 255, 255, 0.10);
    --color-white-20: rgba(255, 255, 255, 0.20);
    --color-white-30: rgba(255, 255, 255, 0.30);
    --color-white-50: rgba(255, 255, 255, 0.50);
    --color-accent-soft: rgba(255, 255, 255, 0.08);
    --color-legacy-purple-solid: rgba(85, 0, 227, 1);
    --color-legacy-purple-start: rgb(85, 0, 227);
    --color-legacy-purple-end: rgba(198, 61, 255, 1);
    --color-text-strong: #EAF1FF;
    --color-text-strong-dark: #FFFFFF;
    --color-shadow-slider: rgba(0, 0, 0, 0.2);
    --color-shadow-slider-2: rgba(0, 0, 0, 0.3);
    --color-shadow-slider-3: rgba(0, 0, 0, 0.5);
    --color-shadow-slider-4: rgba(0, 0, 0, 0.7);
    --color-shadow-slider-5: rgba(0, 0, 0, 0.8);
    --color-shadow-slider-6: rgba(0, 0, 0, 0.9);
    /* Bootstrap root variables */
    --bs-blue: var(--color-info);
    --bs-indigo: var(--color-secondary);
    --bs-purple: var(--color-secondary);
    --bs-pink: #B46F87;
    --bs-red: var(--color-danger);
    --bs-orange: #C58A38;
    --bs-yellow: var(--color-warning);
    --bs-green: var(--color-success);
    --bs-teal: #4D8A78;
    --bs-cyan: #5F8EA8;
    --bs-black: #000000;
    --bs-white: #ffffff;
    --bs-gray: #8FA0BD;
    --bs-gray-dark: #4E6387;
    --bs-gray-100: #202B3D;
    --bs-gray-200: #1B2433;
    --bs-gray-300: #26324A;
    --bs-gray-400: #31415F;
    --bs-gray-500: #4E6387;
    --bs-gray-600: #8FA0BD;
    --bs-gray-700: #B8C4D9;
    --bs-gray-800: #D8E2F0;
    --bs-gray-900: #F4F8FF;
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-secondary: var(--color-secondary);
    --bs-secondary-rgb: var(--color-secondary-rgb);
    --bs-success: var(--color-success);
    --bs-success-rgb: 47, 125, 78;
    --bs-info: var(--color-info);
    --bs-info-rgb: 59, 111, 145;
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 183, 121, 31;
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 177, 69, 69;
    --bs-light: var(--color-light);
    --bs-light-rgb: 248, 243, 234;
    --bs-dark: var(--color-dark);
    --bs-dark-rgb: 44, 36, 23;
    --bs-body-color: var(--color-text);
    --bs-body-color-rgb: 234, 241, 255;
    --bs-body-bg: var(--color-body);
    --bs-body-bg-rgb: 15, 23, 36;
    --bs-secondary-color: var(--color-text-muted);
    --bs-secondary-color-rgb: 184, 196, 217;
    --bs-secondary-bg: var(--color-surface);
    --bs-secondary-bg-rgb: 22, 31, 45;
    --bs-tertiary-color: var(--color-text-soft);
    --bs-tertiary-bg: var(--color-surface-alt);
    --bs-link-color: var(--color-link);
    --bs-link-hover-color: var(--color-link-hover);
    --bs-link-decoration: none;
    --bs-border-color: var(--color-border);
    --bs-border-color-translucent: rgba(49, 65, 95, 0.55);
    --bs-border-radius: 1rem;
    --bs-border-radius-sm: 0.75rem;
    --bs-border-radius-lg: 1.25rem;
    --bs-border-radius-xl: 1.5rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 10px 30px var(--color-shadow-soft);
    --bs-box-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.22);
    --bs-box-shadow-lg: 0 18px 45px var(--color-shadow-medium);
    --bs-focus-ring-color: var(--color-focus-ring);
    --bs-emphasis-color: var(--color-heading);
    --bs-heading-color: var(--color-heading);
    --bs-code-color: #9FB7DF;
    --bs-highlight-bg: #2A3448;
    /* Bootstrap component tokens */
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.7rem;
    --bs-card-bg: var(--color-surface-elevated);
    --bs-card-border-color: var(--color-border-soft);
    --bs-card-cap-bg: var(--color-surface-alt);
    --bs-card-box-shadow: var(--bs-box-shadow-sm);
    --bs-dropdown-bg: var(--color-surface-elevated);
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-color: var(--color-heading);
    --bs-dropdown-link-hover-bg: var(--color-primary-subtle);
    --bs-dropdown-link-active-color: var(--color-heading);
    --bs-dropdown-link-active-bg: var(--color-primary-subtle);
    --bs-dropdown-border-color: var(--color-border-soft);
    --bs-dropdown-box-shadow: var(--bs-box-shadow);
    --bs-navbar-color: rgba(234,241,255,0.92);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff;
    --bs-nav-link-color: var(--color-text-muted);
    --bs-nav-link-hover-color: var(--color-primary);
    --bs-nav-pills-link-active-color: var(--color-heading);
    --bs-nav-pills-link-active-bg: var(--color-primary-subtle);
    --bs-pagination-color: var(--color-primary);
    --bs-pagination-bg: var(--color-surface-elevated);
    --bs-pagination-border-color: var(--color-border-soft);
    --bs-pagination-hover-color: var(--color-heading);
    --bs-pagination-hover-bg: var(--color-primary-subtle);
    --bs-pagination-hover-border-color: var(--color-primary-border);
    --bs-pagination-active-color: var(--color-heading);
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);
    --bs-pagination-disabled-color: #6F7F99;
    --bs-pagination-disabled-bg: var(--color-surface-alt);
    --bs-pagination-disabled-border-color: var(--color-border-soft);
    --bs-form-control-bg: #1B2433;
    --bs-form-control-color: var(--color-text);
    --bs-form-control-border-color: var(--color-border);
    --bs-form-control-focus-border-color: var(--color-primary);
    --bs-form-control-focus-box-shadow: 0 0 0 .25rem var(--color-focus-ring);
    --bs-form-select-border-color: var(--color-border);
    --bs-form-select-focus-border-color: var(--color-primary);
    --bs-form-select-focus-box-shadow: 0 0 0 .25rem var(--color-focus-ring);
    --bs-accordion-btn-bg: var(--color-surface-elevated);
    --bs-accordion-active-bg: var(--color-primary-subtle);
    --bs-accordion-active-color: var(--color-heading);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--color-focus-ring);
    --bs-accordion-border-color: var(--color-border-soft);
    --bs-modal-bg: var(--color-surface-elevated);
    --bs-modal-border-color: rgba(221, 208, 180, 0.7);
    --bs-modal-header-border-color: var(--color-border-soft);
    --bs-modal-footer-border-color: var(--color-border-soft);
    --bs-progress-bg: var(--color-surface-muted);
    --bs-progress-bar-bg: var(--gradient-primary);
    --bs-list-group-color: var(--color-text);
    --bs-list-group-bg: var(--color-surface-elevated);
    --bs-list-group-border-color: var(--color-border-soft);
    --bs-list-group-hover-bg: var(--color-primary-subtle);
    --bs-list-group-active-color: var(--color-heading);
    --bs-list-group-active-bg: var(--color-primary-subtle);
    --bs-list-group-active-border-color: var(--color-primary-border);
}

::selection {
  background: var(--color-selection);
  color: var(--color-heading);
}

html, body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

body {
  text-rendering: optimizeLegibility;
}

a {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Buttons */
.btn {
  box-shadow: var(--bs-box-shadow-sm);
}

.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--color-primary-active);
  --bs-btn-active-border-color: var(--color-primary-active);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--color-primary-soft);
  --bs-btn-disabled-border-color: var(--color-primary-soft);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--color-primary-hover);
  --bs-btn-active-border-color: var(--color-primary-hover);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-secondary);
  --bs-btn-border-color: var(--color-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-secondary-hover);
  --bs-btn-hover-border-color: var(--color-secondary-hover);
}

.btn-light,
.btn-outline-light:hover {
  --bs-btn-color: var(--color-text);
  --bs-btn-bg: var(--color-surface);
  --bs-btn-border-color: var(--color-border-soft);
}

/* Forms */
.form-control,
.form-select,
.input-group-text {
  border-color: var(--color-border);
  background-color: var(--bs-form-control-bg);
}

.form-control,
.form-select {
  min-height: 3rem;
}

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

.form-check-input:focus,
.form-control:focus,
.form-select:focus,
.btn:focus,
.btn-close:focus,
.page-link:focus,
.accordion-button:focus,
.dropdown-item:focus,
.nav-link:focus {
  box-shadow: 0 0 0 .25rem var(--color-focus-ring) !important;
}

/* Cards / surfaces */
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.toast,
.popover,
.tooltip-inner,
.list-group-item,
.accordion-item {
  border-color: var(--color-border-soft);
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.toast,
.popover,
.accordion-item {
  box-shadow: var(--bs-box-shadow-sm);
}

.card,
.list-group-item,
.accordion-item,
.table,
.modal-content,
.dropdown-menu {
  background-color: var(--color-surface-elevated);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.list-group-item.active,
.accordion-button:not(.collapsed) {
  background-color: var(--color-primary-subtle);
}

/* Navigation */
.nav-pills .nav-link,
.nav-tabs .nav-link,
.page-link,
.dropdown-item {
  border-radius: 999px;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-tabs .nav-link.active,
.page-item.active .page-link {
  color: var(--color-heading);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

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

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: var(--color-primary-subtle) var(--color-primary-subtle) var(--color-border-soft);
  background-color: var(--color-primary-subtle);
}

.dropdown-item:hover,
.dropdown-item:focus,
.page-link:hover,
.list-group-item-action:hover,
.list-group-item-action:focus {
  color: var(--color-heading);
  background-color: var(--color-primary-subtle);
}

/* Navbar supported classes */
.navbar,
.bg-primary {
  background: var(--gradient-primary) !important;
}

.navbar-light,
.navbar[data-bs-theme="light"] {
  --bs-navbar-color: rgba(234,241,255,0.82);
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  --bs-navbar-brand-hover-color: #ffffff;
}

.navbar-dark,
.navbar[data-bs-theme="dark"] {
  --bs-navbar-color: rgba(255,255,255,.92);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
}

/* Tables */
.table {
  --bs-table-color: var(--color-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--color-border-soft);
  --bs-table-striped-bg: rgba(32, 43, 61, .75);
  --bs-table-hover-bg: rgba(109, 133, 175, .14);
  vertical-align: middle;
}

.table thead th {
  color: var(--color-heading);
  background: var(--color-surface-alt);
}

.table-primary {
  --bs-table-bg: var(--color-primary-subtle);
  --bs-table-border-color: var(--color-primary-border);
}

/* Alerts / badges */
.alert-primary {
  --bs-alert-color: var(--color-heading);
  --bs-alert-bg: var(--color-primary-subtle);
  --bs-alert-border-color: var(--color-primary-border);
}

.badge.bg-primary,
.text-bg-primary {
  color: var(--color-heading) !important;
  background: var(--color-primary) !important;
}

.badge.bg-light,
.text-bg-light {
  color: var(--color-heading) !important;
  background: var(--color-light) !important;
}

/* Accordion / progress / spinner */
.accordion-button {
  color: var(--color-heading);
}

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

.progress-bar {
  background: var(--gradient-primary);
}

.spinner-border.text-primary,
.spinner-grow.text-primary,
.text-primary {
  color: var(--color-primary) !important;
}

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

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

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

/* Close button for light surfaces */
.btn-close {
  filter: none;
}

/* Scrollbar for modern browsers */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-surface);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--color-surface);
}

*::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 999px;
  border: 2px solid var(--color-surface);
}

/* Utility helpers for template consistency */
.shadow-sm { box-shadow: var(--bs-box-shadow-sm) !important; }
.shadow { box-shadow: var(--bs-box-shadow) !important; }
.shadow-lg { box-shadow: var(--bs-box-shadow-lg) !important; }
.rounded-4 { border-radius: 1rem !important; }
.rounded-5 { border-radius: 1.5rem !important; }


/* Dark theme compatibility */
[data-bs-theme="dark"],
.dark-theme {
  color-scheme: dark;
}

.form-control,
.form-select,
.input-group-text,
textarea,
select,
input {
  color: var(--color-text);
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.table thead th,
.card-header,
.card-footer,
.modal-header,
.modal-footer,
.list-group-item.active,
.accordion-button:not(.collapsed) {
  color: var(--color-heading);
}

.bg-light,
.table-light,
.alert-light {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}

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

.border,
.border-top,
.border-end,
.border-bottom,
.border-start {
  border-color: var(--color-border-soft) !important;
}