/* ============================================================
   ResnSec360 - Dell-Inspired Professional Theme
   Load order: style.min.css > icons.min.css > control-center.css > dell-theme.css
   This file only declares tokens and overrides - no business
   logic, no template structure, no vendor file changes.
   ============================================================ */

/* ── 1. TOKEN DECLARATIONS ─────────────────────────────────── */
:root {
  /* Color: Brand blue */
  --dt-blue:          #0076CE;
  --dt-blue-dark:     #004B8D;
  --dt-blue-darkest:  #003D73;
  --dt-blue-soft:     #F0F4FA;
  --dt-blue-tint:     #E3F0FB;

  /* Color: Neutrals */
  --dt-page-bg:       #F5F5F5;
  --dt-panel-bg:      #FFFFFF;
  --dt-text-primary:  #1D1D1D;
  --dt-text-secondary:#595959;
  --dt-text-disabled: #9E9E9E;
  --dt-border:        #DDDDDD;
  --dt-border-light:  #EEEEEE;
  --dt-footer-bg:     #1D1D1D;
  --dt-footer-text:   #CCCCCC;

  /* Color: Semantic status */
  --dt-success:       #2E7D32;
  --dt-success-tint:  #E8F5E9;
  --dt-success-text:  #1B5E20;
  --dt-warning:       #E65100;
  --dt-warning-tint:  #FFF3E0;
  --dt-warning-text:  #BF360C;
  --dt-danger:        #C62828;
  --dt-danger-tint:   #FFEBEE;
  --dt-danger-text:   #B71C1C;
  --dt-info:          var(--dt-blue);
  --dt-info-tint:     var(--dt-blue-tint);
  --dt-info-text:     var(--dt-blue-dark);

  /* Typography */
  --dt-font:          'Roboto', 'Segoe UI', system-ui, Arial, sans-serif;
  --dt-text-xs:       12px;
  --dt-text-sm:       12px;
  --dt-text-base:     14px;
  --dt-text-md:       16px;
  --dt-text-lg:       18px;
  --dt-text-xl:       22px;
  --dt-text-2xl:      28px;
  --dt-weight-normal: 400;
  --dt-weight-medium: 500;
  --dt-weight-semi:   600;
  --dt-weight-bold:   700;
  --dt-line-height:   1.5;

  /* Spacing - 8px grid */
  --dt-sp-1:  4px;
  --dt-sp-2:  8px;
  --dt-sp-3:  12px;
  --dt-sp-4:  16px;
  --dt-sp-5:  20px;
  --dt-sp-6:  24px;
  --dt-sp-8:  32px;
  --dt-sp-10: 40px;
  --dt-sp-12: 48px;

  /* Radii */
  --dt-radius-xs: 2px;
  --dt-radius-sm: 3px;
  --dt-radius:    4px;
  --dt-radius-md: 6px;
  --dt-radius-lg: 8px;
  --dt-radius-xl: 12px;

  /* Shadows */
  --dt-shadow-none: none;
  --dt-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.06);
  --dt-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.10);
  --dt-shadow:      0 2px 6px rgba(0, 0, 0, 0.10);
  --dt-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.10);
  --dt-shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.10);

  /* Layout */
  --dt-header-height:  64px;
  --dt-sidebar-width:  256px;
  --dt-content-max-w:  1280px;

  /* Focus ring */
  --dt-focus-ring: 0 0 0 3px rgba(0, 118, 206, 0.30);

  /* Transition */
  --dt-transition: 150ms ease;

  /* Button secondary (gray) */
  --dt-btn-secondary-bg:       #EBEBEB;
  --dt-btn-secondary-hover-bg: #DCDCDC;
  --dt-btn-secondary-border:   #D0D0D0;
}


/* ── 2. BOOTSTRAP VARIABLE OVERRIDES ────────────────────────── */
/* These flow through Bootstrap's own component tokens so that
   cards, badges, alerts, inputs, etc. automatically pick up the
   Dell palette without per-component selector overrides. */
:root {
  --bs-primary:             var(--dt-blue);
  --bs-primary-rgb:         0, 118, 206;

  --bs-body-bg:             var(--dt-page-bg);
  --bs-body-color:          var(--dt-text-primary);
  --bs-body-font-family:    var(--dt-font);
  --bs-body-font-size:      var(--dt-text-base);
  --bs-body-line-height:    var(--dt-line-height);

  --bs-secondary-color:     var(--dt-text-secondary);
  --bs-tertiary-bg:         var(--dt-page-bg);
  --bs-secondary-bg:        #EFEFEF;

  --bs-link-color:          var(--dt-blue);
  --bs-link-color-rgb:      0, 118, 206;
  --bs-link-hover-color:    var(--dt-blue-dark);
  --bs-link-hover-color-rgb:0, 75, 141;

  --bs-border-color:        var(--dt-border);
  --bs-border-color-translucent: rgba(0, 0, 0, 0.10);
  --bs-border-radius:       var(--dt-radius);
  --bs-border-radius-sm:    var(--dt-radius-sm);
  --bs-border-radius-lg:    var(--dt-radius-lg);
  --bs-border-radius-xl:    var(--dt-radius-xl);
  --bs-border-radius-2xl:   var(--dt-radius-xl);

  --bs-card-border-color:   var(--dt-border);
  --bs-card-border-radius:  var(--dt-radius-md);
  --bs-card-box-shadow:     var(--dt-shadow-sm);
  --bs-card-bg:             var(--dt-panel-bg);
  --bs-card-cap-bg:         var(--dt-panel-bg);

  --bs-box-shadow:          var(--dt-shadow);
  --bs-box-shadow-sm:       var(--dt-shadow-xs);
  --bs-box-shadow-lg:       var(--dt-shadow-md);

  --bs-focus-ring-width:    3px;
  --bs-focus-ring-opacity:  0.30;
  --bs-focus-ring-color:    rgba(0, 118, 206, 0.30);

  --bs-success:             var(--dt-success);
  --bs-danger:              var(--dt-danger);
  --bs-warning:             var(--dt-warning);
  --bs-info:                var(--dt-blue);

  /* Table */
  --bs-table-hover-bg:      var(--dt-blue-soft);
  --bs-table-striped-bg:    transparent;
  --bs-table-border-color:  var(--dt-border-light);
}


/* ── 3. LAYOUT TOKEN APPLICATION ────────────────────────────── */
/* Apply --dt-sidebar-width token to the layout so the token actually drives
   the sidebar dimension (overrides 280px default from control-center.css). */
.layout-wrapper {
  --bs-sidebar-width: var(--dt-sidebar-width);
}


/* ── 4. GLOBAL RESETS ───────────────────────────────────────── */
body {
  font-family: var(--dt-font);
  font-size: var(--dt-text-base);
  color: var(--dt-text-primary);
  background-color: var(--dt-page-bg);
  line-height: var(--dt-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings: the vendor sheet hardcodes Nunito for h1-h6; keep the whole
   type system on the single Dell family. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--dt-font);
  color: var(--dt-text-primary);
}

/* Consistent focus ring across all interactive elements */
*:focus-visible {
  outline: none;
  box-shadow: var(--dt-focus-ring);
}

a {
  color: var(--dt-blue);
  text-decoration: none;
  transition: color var(--dt-transition);
}

a:hover {
  color: var(--dt-blue-dark);
}


/* ── 4. TOPBAR ──────────────────────────────────────────────── */
.navbar-custom {
  background-color: var(--dt-panel-bg) !important;
  border-bottom: 1px solid var(--dt-border);
  box-shadow: var(--dt-shadow-xs);
  min-height: var(--dt-header-height);
}

.navbar-custom .topbar {
  min-height: var(--dt-header-height);
}

/* Topbar icon buttons (.nav-link used on <button> elements in topbar) */
.navbar-custom button.nav-link {
  color: var(--dt-text-secondary);
  transition: color var(--dt-transition);
  background: transparent;
  border: none;
}

.navbar-custom button.nav-link:hover {
  color: var(--dt-text-primary);
}

/* Hamburger sidebar toggle */
.button-toggle-menu {
  color: var(--dt-text-secondary);
  background: transparent;
  border: none;
  padding: var(--dt-sp-2);
  border-radius: var(--dt-radius);
  font-size: 22px;
  line-height: 1;
  transition: color var(--dt-transition), background-color var(--dt-transition);
}

.button-toggle-menu:hover {
  color: var(--dt-text-primary);
  background-color: var(--dt-blue-soft);
}

/* Search input inside topbar dropdown (no .app-search wrapper exists in markup) */
.navbar-custom .dropdown-lg form .form-control {
  background-color: var(--dt-page-bg);
  border: 1px solid var(--dt-border);
  color: var(--dt-text-primary);
  font-size: var(--dt-text-base);
  border-radius: var(--dt-radius);
}

.navbar-custom .dropdown-lg form .form-control:focus {
  border-color: var(--dt-blue);
  box-shadow: var(--dt-focus-ring);
  background-color: var(--dt-panel-bg);
}

/* User avatar chip in topbar */
.account-user-avatar {
  background: var(--dt-blue-tint);
  color: var(--dt-blue-dark);
  border-radius: var(--dt-radius);
  font-weight: var(--dt-weight-semi);
}


/* ── 5. SIDEBAR ─────────────────────────────────────────────── */
.main-menu {
  background-color: var(--dt-panel-bg) !important;
  border-right: 1px solid var(--dt-border);
  box-shadow: var(--dt-shadow-xs);
}

/* Brand / logo area at top of sidebar.
   Always dark (same navy as the sign-in page) in BOTH themes: the ResnSec360
   logo artwork is designed for a dark surface, so it must not follow the
   light/dark toggle like the rest of the sidebar. */
.logo-box,
.control-center-brand {
  background: linear-gradient(135deg, #05101F 0%, #0C2340 60%, #14294A 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  color: #ffffff;
}

.control-center-brand {
  height: var(--dt-header-height);
  margin-top: 0;
}

/* Navigation link base */
.main-menu .app-menu .menu-link {
  color: var(--dt-text-secondary);
  border-radius: var(--dt-radius);
  transition: background-color var(--dt-transition), color var(--dt-transition);
  font-size: var(--dt-text-base);
  font-weight: var(--dt-weight-normal);
}

.main-menu .app-menu .menu-link:hover {
  background-color: var(--dt-blue-soft);
  color: var(--dt-text-primary);
}

/* Vendor style.min.css sets white text on [aria-expanded="true"] links
   (designed for a dark sidebar). On our white sidebar that makes the text
   invisible. Lock the color for all expanded + post-click states. */
.main-menu .app-menu .menu-link[aria-expanded="true"],
.main-menu .app-menu .menu-link[aria-expanded="true"]:focus,
.main-menu .app-menu .menu-link[aria-expanded="true"]:active {
  color: var(--dt-text-primary) !important;
  background-color: var(--dt-blue-soft);
}

/* Also cover :focus and :active on normal (non-expanded) links,
   where the vendor may similarly apply white text. */
.main-menu .app-menu .menu-link:focus,
.main-menu .app-menu .menu-link:active {
  color: var(--dt-text-secondary) !important;
}

/* Active/current page link — active class is on <a>, never on <li> */
.main-menu .app-menu .menu-link.active {
  background-color: var(--dt-blue-soft);
  color: var(--dt-blue-dark);   /* #004B8D on #F0F4FA = ~6.4:1, passes WCAG AA */
  font-weight: var(--dt-weight-medium);
  box-shadow: inset 3px 0 0 var(--dt-blue);
}

/* Sub-menu text */
.main-menu .app-menu .sub-menu .menu-link {
  font-size: var(--dt-text-sm);
  color: var(--dt-text-secondary);
}

.main-menu .app-menu .sub-menu .menu-link:hover {
  color: var(--dt-blue-dark);   /* #004B8D on #F0F4FA = ~6.4:1, passes WCAG AA */
  background-color: var(--dt-blue-soft);
}

.main-menu .app-menu .sub-menu .menu-link.active {
  color: var(--dt-blue-dark);
  background-color: var(--dt-blue-soft);
}

/* Section divider labels inside sidebar */
.main-menu .app-menu .menu-title {
  color: var(--dt-text-disabled);
  font-size: var(--dt-text-xs);
  font-weight: var(--dt-weight-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Sidebar icon color */
.main-menu .app-menu .menu-link .menu-icon {
  color: var(--dt-text-disabled);
  transition: color var(--dt-transition);
}

.main-menu .app-menu .menu-link:hover .menu-icon,
.main-menu .app-menu .menu-link.active .menu-icon,
.main-menu .app-menu .menu-link[aria-expanded="true"] .menu-icon {
  color: var(--dt-blue);
}

/* Prevent vendor from turning icon white in focus/active states */
.main-menu .app-menu .menu-link:focus .menu-icon,
.main-menu .app-menu .menu-link:active .menu-icon {
  color: var(--dt-text-disabled) !important;
}

.main-menu .app-menu .menu-link[aria-expanded="true"]:focus .menu-icon,
.main-menu .app-menu .menu-link[aria-expanded="true"]:active .menu-icon {
  color: var(--dt-blue) !important;
}

/* Collapse chevron arrow on expandable menu items */
.main-menu .app-menu .menu-arrow {
  color: var(--dt-text-disabled);
  transition: transform var(--dt-transition), color var(--dt-transition);
  font-size: 16px;
  flex: 0 0 auto;
}

.main-menu .app-menu .menu-link:hover .menu-arrow,
.main-menu .app-menu .menu-link[aria-expanded="true"] .menu-arrow {
  color: var(--dt-text-secondary);
}

.main-menu .app-menu .menu-link[aria-expanded="true"] .menu-arrow {
  transform: rotate(90deg);
}


/* ── 6. PAGE TITLE BAR ──────────────────────────────────────── */
.page-title-row {
  border-bottom: 1px solid var(--dt-border-light);
  margin-bottom: var(--dt-sp-5);
  padding-bottom: var(--dt-sp-4) !important;
}

.page-title {
  font-size: var(--dt-text-xl);
  font-weight: var(--dt-weight-semi);
  color: var(--dt-text-primary);
  line-height: 1.3;
}

.breadcrumb {
  font-size: var(--dt-text-sm);
  margin: 0;
}

.breadcrumb-item a {
  color: var(--dt-blue);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--dt-blue-dark);
  text-decoration: underline;
}

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

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--dt-text-disabled);
}


/* ── 7. CARDS ───────────────────────────────────────────────── */
.card {
  background-color: var(--dt-panel-bg);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-md);
  box-shadow: var(--dt-shadow-xs);
}

.card-header {
  background-color: var(--dt-panel-bg);
  border-bottom: 1px solid var(--dt-border-light);
  padding: var(--dt-sp-4) var(--dt-sp-5);
  font-size: var(--dt-text-base);
  font-weight: var(--dt-weight-semi);
  color: var(--dt-text-primary);
}

/* Card titles are authored as <h2 class="card-title"> across the app;
   size them as compact panel headings rather than page-level h2s. */
.card-header .card-title {
  font-size: var(--dt-text-md);
  font-weight: var(--dt-weight-semi);
  line-height: 1.3;
  margin-bottom: 0;
}

.card-body {
  padding: var(--dt-sp-5);
}

.card-footer {
  background-color: var(--dt-panel-bg);
  border-top: 1px solid var(--dt-border-light);
  padding: var(--dt-sp-3) var(--dt-sp-5);
}

/* Metric card */
.metric-card {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-md);
  box-shadow: var(--dt-shadow-xs);
  background: var(--dt-panel-bg);
  transition: box-shadow var(--dt-transition);
}

.metric-card:hover {
  box-shadow: var(--dt-shadow-md);
}

.metric-value {
  font-size: 26px;
  font-weight: var(--dt-weight-bold);
  color: var(--dt-text-primary);
  line-height: 1.1;
}

.metric-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--dt-radius);
  font-size: 20px;
}

/* Inventory / category utility cards */
.inventory-item,
.category-row {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  background: var(--dt-panel-bg);
}

.inventory-item strong {
  color: var(--dt-text-primary);
  font-size: 18px;
}


/* ── 8. TABLES ──────────────────────────────────────────────── */
.table {
  font-size: var(--dt-text-base);
  color: var(--dt-text-primary);
  border-color: var(--dt-border-light);
}

.table thead th {
  font-size: var(--dt-text-sm);
  font-weight: var(--dt-weight-semi);
  color: var(--dt-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--dt-border);
  background-color: var(--dt-panel-bg);
  padding: var(--dt-sp-3) var(--dt-sp-4);
  white-space: nowrap;
}

.table tbody td {
  padding: var(--dt-sp-3) var(--dt-sp-4);
  border-bottom: 1px solid var(--dt-border-light);
  vertical-align: middle;
  color: var(--dt-text-primary);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background-color: var(--dt-blue-soft);
}

/* No striping - hover only (Dell pattern) */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: transparent;
  color: inherit;
}

/* DataTables overrides */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  padding: var(--dt-sp-2) var(--dt-sp-3);
  font-size: var(--dt-text-base);
  color: var(--dt-text-primary);
  background: var(--dt-panel-bg);
}

.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--dt-blue);
  box-shadow: var(--dt-focus-ring);
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  padding: var(--dt-sp-1) var(--dt-sp-2);
  font-size: var(--dt-text-base);
  color: var(--dt-text-primary);
}

.dataTables_wrapper .dataTables_info {
  font-size: var(--dt-text-sm);
  color: var(--dt-text-secondary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--dt-radius) !important;
  font-size: var(--dt-text-sm);
  color: var(--dt-text-secondary) !important;
  border: 1px solid transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--dt-blue-soft) !important;
  color: var(--dt-blue) !important;
  border-color: var(--dt-border) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--dt-blue) !important;
  color: #fff !important;
  border-color: var(--dt-blue) !important;
}


/* ── 9. BUTTONS ─────────────────────────────────────────────── */
.btn {
  font-family: var(--dt-font);
  font-size: var(--dt-text-base);
  font-weight: var(--dt-weight-medium);
  border-radius: var(--dt-radius);
  padding: var(--dt-sp-2) var(--dt-sp-4);
  transition: background-color var(--dt-transition),
              border-color var(--dt-transition),
              color var(--dt-transition),
              box-shadow var(--dt-transition);
  line-height: 1.5;
  letter-spacing: 0;
}

.btn:focus-visible {
  box-shadow: var(--dt-focus-ring);
}

/* Primary */
.btn-primary {
  background-color: var(--dt-blue);
  border-color: var(--dt-blue);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--dt-blue-dark);
  border-color: var(--dt-blue-dark);
  color: #ffffff;
}

.btn-primary:active {
  background-color: var(--dt-blue-darkest);
  border-color: var(--dt-blue-darkest);
}

/* Outline primary */
.btn-outline-primary {
  border-color: var(--dt-blue);
  color: var(--dt-blue);
  background-color: transparent;
}

.btn-outline-primary:hover {
  background-color: var(--dt-blue);
  border-color: var(--dt-blue);
  color: #ffffff;
}

/* Secondary (light gray) */
.btn-secondary {
  background-color: var(--dt-btn-secondary-bg);
  border-color: var(--dt-btn-secondary-border);
  color: var(--dt-text-primary);
}

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

/* Light button */
.btn-light {
  background-color: var(--dt-panel-bg);
  border-color: var(--dt-border);
  color: var(--dt-text-primary);
}

.btn-light:hover {
  background-color: var(--dt-page-bg);
  border-color: var(--dt-btn-secondary-border);
  color: var(--dt-text-primary);
}

/* Success */
.btn-success {
  background-color: var(--dt-success);
  border-color: var(--dt-success);
  color: #ffffff;
}

.btn-success:hover {
  background-color: var(--dt-success-text);
  border-color: var(--dt-success-text);
  color: #ffffff;
}

/* Danger */
.btn-danger {
  background-color: var(--dt-danger);
  border-color: var(--dt-danger);
  color: #ffffff;
}

.btn-danger:hover {
  background-color: var(--dt-danger-text);
  border-color: var(--dt-danger-text);
  color: #ffffff;
}

/* Small button */
.btn-sm {
  font-size: var(--dt-text-sm);
  padding: var(--dt-sp-1) var(--dt-sp-3);
  border-radius: var(--dt-radius-sm);
}

/* Large button */
.btn-lg {
  font-size: var(--dt-text-md);
  padding: var(--dt-sp-3) var(--dt-sp-6);
}


/* ── 10. BADGES & STATUS CHIPS ──────────────────────────────── */
.badge {
  font-size: var(--dt-text-xs);
  font-weight: var(--dt-weight-medium);
  border-radius: var(--dt-radius-xs);
  padding: 2px var(--dt-sp-2);
  letter-spacing: 0.02em;
}

.badge.bg-primary,
.badge.text-bg-primary   { background-color: var(--dt-blue-tint) !important; color: var(--dt-blue-dark) !important; }
.badge.bg-success,
.badge.text-bg-success   { background-color: var(--dt-success-tint) !important; color: var(--dt-success-text) !important; }
.badge.bg-danger,
.badge.text-bg-danger    { background-color: var(--dt-danger-tint) !important; color: var(--dt-danger-text) !important; }
.badge.bg-warning,
.badge.text-bg-warning   { background-color: var(--dt-warning-tint) !important; color: var(--dt-warning-text) !important; }
.badge.bg-info,
.badge.text-bg-info      { background-color: var(--dt-blue-tint) !important; color: var(--dt-blue-dark) !important; }
.badge.bg-secondary,
.badge.text-bg-secondary { background-color: #EBEBEB !important; color: var(--dt-text-secondary) !important; }
.badge.bg-light,
.badge.text-bg-light     { background-color: var(--dt-page-bg) !important; color: var(--dt-text-secondary) !important; border: 1px solid var(--dt-border); }


/* ── 11. FORMS & INPUTS ─────────────────────────────────────── */
.form-control,
.form-select {
  font-family: var(--dt-font);
  font-size: var(--dt-text-base);
  color: var(--dt-text-primary);
  background-color: var(--dt-panel-bg);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  padding: var(--dt-sp-2) var(--dt-sp-3);
  transition: border-color var(--dt-transition), box-shadow var(--dt-transition);
}

.form-control::placeholder {
  color: var(--dt-text-disabled);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--dt-blue);
  box-shadow: var(--dt-focus-ring);
  outline: none;
  color: var(--dt-text-primary);
  background-color: var(--dt-panel-bg);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--dt-page-bg);
  color: var(--dt-text-disabled);
  border-color: var(--dt-border-light);
}

.form-label {
  font-size: var(--dt-text-sm);
  font-weight: var(--dt-weight-medium);
  color: var(--dt-text-secondary);
  margin-bottom: var(--dt-sp-1);
}

.form-text {
  font-size: var(--dt-text-xs);
  color: var(--dt-text-disabled);
}

/* Validation */
.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: var(--dt-success);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--dt-danger);
}

.valid-feedback   { color: var(--dt-success); font-size: var(--dt-text-xs); }
.invalid-feedback { color: var(--dt-danger);  font-size: var(--dt-text-xs); }

/* Input groups */
.input-group-text {
  background-color: var(--dt-page-bg);
  border-color: var(--dt-border);
  color: var(--dt-text-secondary);
  font-size: var(--dt-text-base);
}

/* Textarea */
textarea.form-control {
  resize: vertical;
  min-height: 80px;
}


/* ── 12. ALERTS ─────────────────────────────────────────────── */
.alert {
  border-radius: var(--dt-radius);
  font-size: var(--dt-text-base);
  border-width: 1px;
  padding: var(--dt-sp-3) var(--dt-sp-4);
}

.alert-primary  { background: var(--dt-blue-tint);    border-color: #B8D9F0; color: var(--dt-blue-dark); }
.alert-success  { background: var(--dt-success-tint); border-color: #A5D6A7; color: var(--dt-success-text); }
.alert-danger   { background: var(--dt-danger-tint);  border-color: #FFCDD2; color: var(--dt-danger-text); }
.alert-warning  { background: var(--dt-warning-tint); border-color: #FFCCBC; color: var(--dt-warning-text); }
.alert-info     { background: var(--dt-blue-tint);    border-color: #B8D9F0; color: var(--dt-blue-dark); }


/* ── 13. MODALS ─────────────────────────────────────────────── */
.modal-content {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-xl);
  box-shadow: var(--dt-shadow-lg);
  background-color: var(--dt-panel-bg);
}

.modal-header {
  border-bottom: 1px solid var(--dt-border-light);
  padding: var(--dt-sp-5) var(--dt-sp-6);
  background-color: var(--dt-panel-bg);
  border-radius: var(--dt-radius-xl) var(--dt-radius-xl) 0 0;
}

.modal-title {
  font-size: var(--dt-text-lg);
  font-weight: var(--dt-weight-semi);
  color: var(--dt-text-primary);
}

.modal-body {
  padding: var(--dt-sp-5) var(--dt-sp-6);
  font-size: var(--dt-text-base);
  color: var(--dt-text-primary);
}

.modal-footer {
  border-top: 1px solid var(--dt-border-light);
  padding: var(--dt-sp-4) var(--dt-sp-6);
  background-color: var(--dt-panel-bg);
  border-radius: 0 0 var(--dt-radius-xl) var(--dt-radius-xl);
  gap: var(--dt-sp-2);
}

.modal-backdrop.show {
  opacity: 0.4;
}


/* ── 14. DROPDOWNS ──────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-md);
  box-shadow: var(--dt-shadow-md);
  background-color: var(--dt-panel-bg);
  padding: var(--dt-sp-1) 0;
  font-size: var(--dt-text-base);
  min-width: 180px;
}

.dropdown-item {
  color: var(--dt-text-primary);
  padding: var(--dt-sp-2) var(--dt-sp-4);
  font-size: var(--dt-text-base);
  transition: background-color var(--dt-transition);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--dt-blue-soft);
  color: var(--dt-text-primary);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--dt-blue);
  color: #ffffff;
}

.dropdown-divider {
  border-color: var(--dt-border-light);
  margin: var(--dt-sp-1) 0;
}

.dropdown-header {
  font-size: var(--dt-text-xs);
  font-weight: var(--dt-weight-semi);
  color: var(--dt-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--dt-sp-2) var(--dt-sp-4);
}


/* ── 15. FOOTER ─────────────────────────────────────────────── */
.footer {
  background-color: var(--dt-footer-bg);
  border-top: none;
  padding: var(--dt-sp-3) 0;
  font-size: var(--dt-text-sm);
  color: var(--dt-footer-text);
  flex: 0 0 auto;
}

.footer a {
  color: var(--dt-footer-text);
  opacity: 0.85;
}

.footer a:hover {
  color: #ffffff;
  opacity: 1;
}


/* ── 16. SHORTCUT LINKS (dashboard) ─────────────────────────── */
.shortcut-link {
  color: var(--dt-text-primary);
  background: var(--dt-panel-bg);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  font-weight: var(--dt-weight-medium);
  font-size: var(--dt-text-base);
  transition: border-color var(--dt-transition),
              background-color var(--dt-transition),
              color var(--dt-transition);
}

.shortcut-link:hover,
.shortcut-link:focus {
  color: var(--dt-blue);
  border-color: var(--dt-blue);
  background: var(--dt-blue-soft);
}


/* ── 17. SEARCH RESULT LIST ─────────────────────────────────── */
.search-result-icon {
  background: var(--dt-blue-tint);
  color: var(--dt-blue);
  border-radius: var(--dt-radius);
}

.search-result-list .list-group-item {
  border-color: var(--dt-border-light);
  color: var(--dt-text-primary);
  font-size: var(--dt-text-base);
}

.search-result-list .list-group-item:hover {
  background-color: var(--dt-blue-soft);
}


/* ── 18. TABS ───────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--dt-border);
  gap: 0;
}

.nav-tabs .nav-link {
  font-size: var(--dt-text-base);
  font-weight: var(--dt-weight-medium);
  color: var(--dt-text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: var(--dt-sp-3) var(--dt-sp-5);
  margin-bottom: -2px;
  transition: color var(--dt-transition), border-color var(--dt-transition);
}

.nav-tabs .nav-link:hover {
  color: var(--dt-text-primary);
  border-bottom-color: var(--dt-border);
  background: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--dt-blue);
  border-bottom: 2px solid var(--dt-blue);
  background: transparent;
  font-weight: var(--dt-weight-semi);
}


/* ── 19. PAGINATION ─────────────────────────────────────────── */
.pagination {
  gap: var(--dt-sp-1);
}

.page-link {
  color: var(--dt-blue);
  border-color: var(--dt-border);
  border-radius: var(--dt-radius) !important;
  font-size: var(--dt-text-sm);
  padding: var(--dt-sp-2) var(--dt-sp-3);
  transition: background-color var(--dt-transition), color var(--dt-transition);
}

.page-link:hover {
  background-color: var(--dt-blue-soft);
  border-color: var(--dt-border);
  color: var(--dt-blue-dark);
}

.page-item.active .page-link {
  background-color: var(--dt-blue);
  border-color: var(--dt-blue);
  color: #ffffff;
}

.page-item.disabled .page-link {
  color: var(--dt-text-disabled);
  border-color: var(--dt-border-light);
}


/* ── 20. DARK THEME OVERRIDES ───────────────────────────────── */
[data-bs-theme="dark"] {
  --dt-page-bg:        #1A1D21;
  --dt-panel-bg:       #22262B;
  --dt-text-primary:   #E8EAED;
  --dt-text-secondary: #9AA0A6;
  --dt-text-disabled:  #5F6368;
  --dt-border:         #3C4043;
  --dt-border-light:   #2E3135;
  --dt-blue-soft:      rgba(0, 118, 206, 0.15);
  --dt-blue-tint:      rgba(0, 118, 206, 0.18);
  --dt-success-tint:   rgba(46, 125, 50, 0.18);
  --dt-danger-tint:    rgba(198, 40, 40, 0.18);
  --dt-warning-tint:   rgba(230, 81, 0, 0.18);

  /* Bootstrap dark overrides */
  --bs-body-bg:        var(--dt-page-bg);
  --bs-body-color:     var(--dt-text-primary);
  --bs-border-color:   var(--dt-border);
  --bs-card-bg:        var(--dt-panel-bg);
  --bs-card-border-color: var(--dt-border);
}

[data-bs-theme="dark"] .navbar-custom {
  background-color: var(--dt-panel-bg) !important;
  border-bottom-color: var(--dt-border);
}

[data-bs-theme="dark"] .main-menu {
  background-color: var(--dt-panel-bg) !important;
  border-right-color: var(--dt-border);
}

[data-bs-theme="dark"] .logo-box,
[data-bs-theme="dark"] .control-center-brand {
  /* stays the fixed navy defined in section 5 - no theme-dependent override */
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

[data-bs-theme="dark"] .card {
  background-color: var(--dt-panel-bg);
  border-color: var(--dt-border);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
  background-color: var(--dt-panel-bg);
  border-color: var(--dt-border);
}

[data-bs-theme="dark"] .table {
  color: var(--dt-text-primary);
  border-color: var(--dt-border-light);
}

[data-bs-theme="dark"] .table thead th {
  color: var(--dt-text-secondary);
  border-bottom-color: var(--dt-border);
  background-color: var(--dt-panel-bg);
}

[data-bs-theme="dark"] .table tbody td {
  border-bottom-color: var(--dt-border-light);
  color: var(--dt-text-primary);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--dt-panel-bg);
  border-color: var(--dt-border);
  color: var(--dt-text-primary);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--dt-panel-bg);
  border-color: var(--dt-blue);
  color: var(--dt-text-primary);
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--dt-panel-bg);
  border-color: var(--dt-border);
}

[data-bs-theme="dark"] .dropdown-item {
  color: var(--dt-text-primary);
}

[data-bs-theme="dark"] .dropdown-item:hover {
  background-color: var(--dt-blue-soft);
}

[data-bs-theme="dark"] .modal-content {
  background-color: var(--dt-panel-bg);
  border-color: var(--dt-border);
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: var(--dt-border);
  background-color: var(--dt-panel-bg);
}

/* Footer is already dark (#1D1D1D) — no override needed in dark mode.
   The footer-bg token is intentionally not re-mapped here. */

[data-bs-theme="dark"] .shortcut-link {
  background: var(--dt-panel-bg);
  border-color: var(--dt-border);
  color: var(--dt-text-primary);
}

[data-bs-theme="dark"] .shortcut-link:hover {
  border-color: var(--dt-blue);
  background: var(--dt-blue-soft);
  color: var(--dt-blue);
}

[data-bs-theme="dark"] .page-title {
  color: var(--dt-text-primary);
}

[data-bs-theme="dark"] .page-title-row {
  border-bottom-color: var(--dt-border);
}

[data-bs-theme="dark"] .inventory-item,
[data-bs-theme="dark"] .category-row {
  background: var(--dt-panel-bg);
  border-color: var(--dt-border);
}

[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.text-bg-secondary {
  background-color: #3C4043 !important;
  color: var(--dt-text-secondary) !important;
}

[data-bs-theme="dark"] .btn-secondary {
  background-color: #3C4043;
  border-color: var(--dt-border);
  color: var(--dt-text-primary);
}

[data-bs-theme="dark"] .btn-light {
  background-color: #3C4043;
  border-color: var(--dt-border);
  color: var(--dt-text-primary);
}

[data-bs-theme="dark"] .input-group-text {
  background-color: #2E3135;
  border-color: var(--dt-border);
  color: var(--dt-text-secondary);
}

[data-bs-theme="dark"] .alert-primary,
[data-bs-theme="dark"] .alert-info {
  background: var(--dt-blue-tint);
  border-color: rgba(0, 118, 206, 0.30);
  color: #90CAF9;
}

[data-bs-theme="dark"] .alert-success {
  background: var(--dt-success-tint);
  border-color: rgba(46, 125, 50, 0.30);
  color: #A5D6A7;
}

[data-bs-theme="dark"] .alert-danger {
  background: var(--dt-danger-tint);
  border-color: rgba(198, 40, 40, 0.30);
  color: #EF9A9A;
}

[data-bs-theme="dark"] .alert-warning {
  background: var(--dt-warning-tint);
  border-color: rgba(230, 81, 0, 0.30);
  color: #FFCC80;
}


/* Dark: badge variants (all tint-based) */
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.text-bg-primary {
  background-color: rgba(0, 118, 206, 0.20) !important;
  color: #90CAF9 !important;
}

[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.text-bg-success {
  background-color: rgba(46, 125, 50, 0.20) !important;
  color: #A5D6A7 !important;
}

[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.text-bg-danger {
  background-color: rgba(198, 40, 40, 0.20) !important;
  color: #EF9A9A !important;
}

[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.text-bg-warning {
  background-color: rgba(230, 81, 0, 0.20) !important;
  color: #FFCC80 !important;
}

[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.text-bg-info {
  background-color: rgba(0, 118, 206, 0.20) !important;
  color: #90CAF9 !important;
}

[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.text-bg-light {
  background-color: #3C4043 !important;
  color: var(--dt-text-secondary) !important;
  border-color: var(--dt-border) !important;
}

/* Dark: nav tabs */
[data-bs-theme="dark"] .nav-tabs {
  border-bottom-color: var(--dt-border);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: var(--dt-text-secondary);
  border-bottom-color: transparent;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--dt-text-primary);
  border-bottom-color: var(--dt-border);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link {
  color: #90CAF9;
  border-bottom-color: var(--dt-blue);
  background: transparent;
}

/* Dark: pagination */
[data-bs-theme="dark"] .page-link {
  background-color: var(--dt-panel-bg);
  border-color: var(--dt-border);
  color: #90CAF9;
}

[data-bs-theme="dark"] .page-link:hover {
  background-color: var(--dt-blue-soft);
  border-color: var(--dt-border);
  color: #90CAF9;
}

[data-bs-theme="dark"] .page-item.active .page-link {
  background-color: var(--dt-blue);
  border-color: var(--dt-blue);
  color: #ffffff;
}

[data-bs-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--dt-panel-bg);
  border-color: var(--dt-border);
  color: var(--dt-text-disabled);
}

/* Dark: breadcrumb */
[data-bs-theme="dark"] .breadcrumb-item a {
  color: #90CAF9;
}

[data-bs-theme="dark"] .breadcrumb-item a:hover {
  color: #B3D4F5;
}

[data-bs-theme="dark"] .breadcrumb-item.active {
  color: var(--dt-text-secondary);
}

[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--dt-text-disabled);
}

/* Dark: metric cards */
[data-bs-theme="dark"] .metric-card {
  background: var(--dt-panel-bg);
  border-color: var(--dt-border);
}

[data-bs-theme="dark"] .metric-value {
  color: var(--dt-text-primary);
}

/* Dark: user avatar chip — use lighter blue text for legibility on dark bg */
[data-bs-theme="dark"] .account-user-avatar {
  background: rgba(0, 118, 206, 0.20);
  color: #90CAF9;
}

/* Dark: expanded sidebar links must stay visible on dark sidebar bg */
[data-bs-theme="dark"] .main-menu .app-menu .menu-link[aria-expanded="true"],
[data-bs-theme="dark"] .main-menu .app-menu .menu-link[aria-expanded="true"]:focus,
[data-bs-theme="dark"] .main-menu .app-menu .menu-link[aria-expanded="true"]:active {
  color: var(--dt-text-primary) !important;
  background-color: var(--dt-blue-soft);
}

[data-bs-theme="dark"] .main-menu .app-menu .menu-link:focus,
[data-bs-theme="dark"] .main-menu .app-menu .menu-link:active {
  color: var(--dt-text-secondary) !important;
}

/* Dark: sidebar menu arrow chevron */
[data-bs-theme="dark"] .main-menu .app-menu .menu-arrow {
  color: var(--dt-text-disabled);
}

/* Dark: hamburger button */
[data-bs-theme="dark"] .button-toggle-menu {
  color: var(--dt-text-secondary);
}

[data-bs-theme="dark"] .button-toggle-menu:hover {
  color: var(--dt-text-primary);
  background-color: var(--dt-blue-soft);
}

/* Dark: topbar search input */
[data-bs-theme="dark"] .navbar-custom .dropdown-lg form .form-control {
  background-color: #1A1D21;
  border-color: var(--dt-border);
  color: var(--dt-text-primary);
}

[data-bs-theme="dark"] .navbar-custom .dropdown-lg form .form-control:focus {
  background-color: var(--dt-panel-bg);
  border-color: var(--dt-blue);
}

/* Dark: topbar page-title text */
[data-bs-theme="dark"] .navbar-custom .fw-semibold {
  color: var(--dt-text-primary) !important;
}

[data-bs-theme="dark"] .navbar-custom .text-muted {
  color: var(--dt-text-secondary) !important;
}

/* Dark: DataTables controls */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background-color: var(--dt-panel-bg);
  border-color: var(--dt-border);
  color: var(--dt-text-primary);
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info {
  color: var(--dt-text-secondary);
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--dt-text-secondary) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--dt-blue-soft) !important;
  color: #90CAF9 !important;
  border-color: var(--dt-border) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--dt-blue) !important;
  color: #ffffff !important;
  border-color: var(--dt-blue) !important;
}

/* Dark: search result list */
[data-bs-theme="dark"] .search-result-icon {
  background: rgba(0, 118, 206, 0.18);
  color: #90CAF9;
}

[data-bs-theme="dark"] .search-result-list .list-group-item {
  background-color: var(--dt-panel-bg);
  border-color: var(--dt-border-light);
  color: var(--dt-text-primary);
}

[data-bs-theme="dark"] .search-result-list .list-group-item:hover {
  background-color: var(--dt-blue-soft);
}

/* Dark: btn-secondary uses dark token */
[data-bs-theme="dark"] .btn-secondary {
  --dt-btn-secondary-bg:       #3C4043;
  --dt-btn-secondary-hover-bg: #48494B;
  --dt-btn-secondary-border:   var(--dt-border);
}

[data-bs-theme="dark"] .btn-light {
  background-color: #3C4043;
  border-color: var(--dt-border);
  color: var(--dt-text-primary);
}


/* ── 21. BTN-SOFT VARIANTS ──────────────────────────────────── */
/* Soft buttons: tinted background, colored text — used across BIA templates */
.btn-soft-primary {
  background-color: var(--dt-blue-tint);
  border-color: transparent;
  color: var(--dt-blue-dark);
}
.btn-soft-primary:hover {
  background-color: var(--dt-blue-soft);
  color: var(--dt-blue-darkest);
  border-color: transparent;
}

.btn-soft-secondary {
  background-color: var(--dt-btn-secondary-bg);
  border-color: transparent;
  color: var(--dt-text-secondary);
}
.btn-soft-secondary:hover {
  background-color: var(--dt-btn-secondary-hover-bg);
  color: var(--dt-text-primary);
  border-color: transparent;
}

.btn-soft-success {
  background-color: var(--dt-success-tint);
  border-color: transparent;
  color: var(--dt-success-text);
}
.btn-soft-success:hover {
  background-color: #C8E6C9;
  color: var(--dt-success-text);
  border-color: transparent;
}

.btn-soft-warning {
  background-color: var(--dt-warning-tint);
  border-color: transparent;
  color: var(--dt-warning-text);
}
.btn-soft-warning:hover {
  background-color: #FFE0B2;
  color: var(--dt-warning-text);
  border-color: transparent;
}

.btn-soft-danger {
  background-color: var(--dt-danger-tint);
  border-color: transparent;
  color: var(--dt-danger-text);
}
.btn-soft-danger:hover {
  background-color: #FFCDD2;
  color: var(--dt-danger-text);
  border-color: transparent;
}

.btn-soft-info {
  background-color: var(--dt-blue-tint);
  border-color: transparent;
  color: var(--dt-blue-dark);
}
.btn-soft-info:hover {
  background-color: var(--dt-blue-soft);
  color: var(--dt-blue-darkest);
  border-color: transparent;
}

[data-bs-theme="dark"] .btn-soft-primary,
[data-bs-theme="dark"] .btn-soft-info {
  background-color: rgba(0, 118, 206, 0.18);
  color: #90CAF9;
}
[data-bs-theme="dark"] .btn-soft-success {
  background-color: rgba(46, 125, 50, 0.18);
  color: #A5D6A7;
}
[data-bs-theme="dark"] .btn-soft-warning {
  background-color: rgba(230, 81, 0, 0.18);
  color: #FFCC80;
}
[data-bs-theme="dark"] .btn-soft-danger {
  background-color: rgba(198, 40, 40, 0.18);
  color: #EF9A9A;
}
[data-bs-theme="dark"] .btn-soft-secondary {
  background-color: #3C4043;
  color: var(--dt-text-secondary);
}


/* ── 22. BG-SOFT UTILITIES ──────────────────────────────────── */
/* Background tint utilities used in stat cards and info blocks */
.bg-soft-primary { background-color: var(--dt-blue-tint) !important; }
.bg-soft-info    { background-color: var(--dt-blue-tint) !important; }
.bg-soft-success { background-color: var(--dt-success-tint) !important; }
.bg-soft-warning { background-color: var(--dt-warning-tint) !important; }
.bg-soft-danger  { background-color: var(--dt-danger-tint) !important; }

[data-bs-theme="dark"] .bg-soft-primary,
[data-bs-theme="dark"] .bg-soft-info    { background-color: rgba(0, 118, 206, 0.18) !important; }
[data-bs-theme="dark"] .bg-soft-success { background-color: rgba(46, 125, 50, 0.18) !important; }
[data-bs-theme="dark"] .bg-soft-warning { background-color: rgba(230, 81, 0, 0.18) !important; }
[data-bs-theme="dark"] .bg-soft-danger  { background-color: rgba(198, 40, 40, 0.18) !important; }


/* ── 23. PROGRESS BARS ──────────────────────────────────────── */
/* Standard progress height; removes the need for inline style="height:8px" */
.progress {
  height: 8px;
  border-radius: var(--dt-radius-xs);
  background-color: var(--dt-border);
  overflow: hidden;
}

.progress-bar {
  border-radius: var(--dt-radius-xs);
  transition: width 0.4s ease;
}

.progress-bar.bg-success { background-color: var(--dt-success) !important; }
.progress-bar.bg-info    { background-color: var(--dt-blue) !important; }
.progress-bar.bg-warning { background-color: var(--dt-warning) !important; }
.progress-bar.bg-danger  { background-color: var(--dt-danger) !important; }
.progress-bar.bg-primary { background-color: var(--dt-blue) !important; }

[data-bs-theme="dark"] .progress {
  background-color: var(--dt-border);
}


/* ── 24. BADGE BG-WHITE FIX ─────────────────────────────────── */
/* bg-white on dark backgrounds is invisible — normalize to border variant */
.badge.bg-white,
.badge.text-bg-white {
  background-color: var(--dt-panel-bg) !important;
  color: var(--dt-text-secondary) !important;
  border: 1px solid var(--dt-border);
}

[data-bs-theme="dark"] .badge.bg-white,
[data-bs-theme="dark"] .badge.text-bg-white {
  background-color: #3C4043 !important;
  color: var(--dt-text-secondary) !important;
  border-color: var(--dt-border) !important;
}


/* ── 25. MOBILE TAB SCROLL ──────────────────────────────────── */
/* Prevent nav-tabs from overflowing on small viewports */
@media (max-width: 767.98px) {
  .nav-tabs-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs-scroll-wrapper::-webkit-scrollbar { display: none; }
  .nav-tabs-scroll-wrapper .nav-tabs {
    flex-wrap: nowrap;
    min-width: max-content;
  }
}


/* ── 26. SEMANTIC COLOR TOKENS (subtle / text / outline) ────── */
/* Bootstrap 5.3 utilities such as .text-success, .bg-success-subtle,
   .border-success-subtle and .text-success-emphasis read the *-rgb,
   *-bg-subtle, *-border-subtle and *-text-emphasis tokens - not the
   plain --bs-success token overridden in section 2. Without these
   mappings those utilities fall back to the vendor (Velzon) palette.
   Map them onto the Dell tokens so every semantic utility renders in
   the Dell palette in both themes. */
:root {
  --bs-success-rgb:            46, 125, 50;
  --bs-danger-rgb:             198, 40, 40;
  --bs-warning-rgb:            230, 81, 0;
  --bs-info-rgb:               0, 118, 206;
  --bs-secondary-rgb:          89, 89, 89;

  --bs-primary-bg-subtle:      var(--dt-blue-tint);
  --bs-info-bg-subtle:         var(--dt-blue-tint);
  --bs-success-bg-subtle:      var(--dt-success-tint);
  --bs-warning-bg-subtle:      var(--dt-warning-tint);
  --bs-danger-bg-subtle:       var(--dt-danger-tint);
  --bs-secondary-bg-subtle:    #EBEBEB;
  --bs-light-bg-subtle:        var(--dt-page-bg);
  --bs-dark-bg-subtle:         #E0E0E0;

  --bs-primary-border-subtle:  #B3D4EE;
  --bs-info-border-subtle:     #B3D4EE;
  --bs-success-border-subtle:  #C8E6C9;
  --bs-warning-border-subtle:  #FFCC80;
  --bs-danger-border-subtle:   #EF9A9A;
  --bs-secondary-border-subtle:var(--dt-border);

  --bs-primary-text-emphasis:  var(--dt-blue-dark);
  --bs-info-text-emphasis:     var(--dt-blue-dark);
  --bs-success-text-emphasis:  var(--dt-success-text);
  --bs-warning-text-emphasis:  var(--dt-warning-text);
  --bs-danger-text-emphasis:   var(--dt-danger-text);
  --bs-secondary-text-emphasis:var(--dt-text-secondary);
}

[data-bs-theme="dark"] {
  --bs-primary-bg-subtle:      rgba(0, 118, 206, 0.20);
  --bs-info-bg-subtle:         rgba(0, 118, 206, 0.20);
  --bs-success-bg-subtle:      rgba(46, 125, 50, 0.20);
  --bs-warning-bg-subtle:      rgba(230, 81, 0, 0.20);
  --bs-danger-bg-subtle:       rgba(198, 40, 40, 0.20);
  --bs-secondary-bg-subtle:    #3C4043;
  --bs-light-bg-subtle:        #3C4043;
  --bs-dark-bg-subtle:         #3C4043;

  --bs-primary-border-subtle:  rgba(0, 118, 206, 0.45);
  --bs-info-border-subtle:     rgba(0, 118, 206, 0.45);
  --bs-success-border-subtle:  rgba(46, 125, 50, 0.45);
  --bs-warning-border-subtle:  rgba(230, 81, 0, 0.45);
  --bs-danger-border-subtle:   rgba(198, 40, 40, 0.45);
  --bs-secondary-border-subtle:var(--dt-border);

  --bs-primary-text-emphasis:  #90CAF9;
  --bs-info-text-emphasis:     #90CAF9;
  --bs-success-text-emphasis:  #A5D6A7;
  --bs-warning-text-emphasis:  #FFCC80;
  --bs-danger-text-emphasis:   #EF9A9A;
  --bs-secondary-text-emphasis:var(--dt-text-secondary);
}

/* Subtle badge chips: same tint + emphasis pairing as the .badge.bg-* rules
   in section 10, so both spellings render identically. */
.badge.bg-primary-subtle,
.badge.bg-info-subtle      { background-color: var(--dt-blue-tint) !important;    color: var(--dt-blue-dark) !important; }
.badge.bg-success-subtle   { background-color: var(--dt-success-tint) !important; color: var(--dt-success-text) !important; }
.badge.bg-danger-subtle    { background-color: var(--dt-danger-tint) !important;  color: var(--dt-danger-text) !important; }
.badge.bg-warning-subtle   { background-color: var(--dt-warning-tint) !important; color: var(--dt-warning-text) !important; }
.badge.bg-secondary-subtle,
.badge.bg-dark-subtle      { background-color: #EBEBEB !important;                color: var(--dt-text-secondary) !important; }

[data-bs-theme="dark"] .badge.bg-primary-subtle,
[data-bs-theme="dark"] .badge.bg-info-subtle      { background-color: rgba(0, 118, 206, 0.20) !important; color: #90CAF9 !important; }
[data-bs-theme="dark"] .badge.bg-success-subtle   { background-color: rgba(46, 125, 50, 0.20) !important; color: #A5D6A7 !important; }
[data-bs-theme="dark"] .badge.bg-danger-subtle    { background-color: rgba(198, 40, 40, 0.20) !important; color: #EF9A9A !important; }
[data-bs-theme="dark"] .badge.bg-warning-subtle   { background-color: rgba(230, 81, 0, 0.20) !important;  color: #FFCC80 !important; }
[data-bs-theme="dark"] .badge.bg-secondary-subtle,
[data-bs-theme="dark"] .badge.bg-dark-subtle      { background-color: #3C4043 !important; color: var(--dt-text-secondary) !important; }

/* Remaining solid / outline button variants (section 9 covers primary,
   secondary, light, success, danger and outline-primary only). */
.btn-info {
  background-color: var(--dt-blue);
  border-color: var(--dt-blue);
  color: #ffffff;
}
.btn-info:hover,
.btn-info:focus {
  background-color: var(--dt-blue-dark);
  border-color: var(--dt-blue-dark);
  color: #ffffff;
}

.btn-warning {
  background-color: var(--dt-warning);
  border-color: var(--dt-warning);
  color: #ffffff;
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--dt-warning-text);
  border-color: var(--dt-warning-text);
  color: #ffffff;
}

.btn-outline-secondary {
  border-color: var(--dt-border);
  color: var(--dt-text-secondary);
  background-color: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--dt-page-bg);
  border-color: var(--dt-btn-secondary-border);
  color: var(--dt-text-primary);
}

.btn-outline-info {
  border-color: var(--dt-blue);
  color: var(--dt-blue);
  background-color: transparent;
}
.btn-outline-info:hover,
.btn-outline-info:focus {
  background-color: var(--dt-blue);
  border-color: var(--dt-blue);
  color: #ffffff;
}

.btn-outline-success {
  border-color: var(--dt-success);
  color: var(--dt-success);
  background-color: transparent;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--dt-success);
  border-color: var(--dt-success);
  color: #ffffff;
}

.btn-outline-warning {
  border-color: var(--dt-warning);
  color: var(--dt-warning);
  background-color: transparent;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background-color: var(--dt-warning);
  border-color: var(--dt-warning);
  color: #ffffff;
}

.btn-outline-danger {
  border-color: var(--dt-danger);
  color: var(--dt-danger);
  background-color: transparent;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: var(--dt-danger);
  border-color: var(--dt-danger);
  color: #ffffff;
}

[data-bs-theme="dark"] .btn-outline-secondary {
  border-color: var(--dt-border);
  color: var(--dt-text-secondary);
}
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:focus {
  background-color: #3C4043;
  color: var(--dt-text-primary);
}

/* Neutral alert used for instructions / hints (section 12 covers the
   semantic variants only). */
.alert-light {
  background-color: var(--dt-panel-bg);
  border-color: var(--dt-border);
  color: var(--dt-text-secondary);
}
[data-bs-theme="dark"] .alert-light {
  background-color: var(--dt-panel-bg);
  border-color: var(--dt-border);
  color: var(--dt-text-secondary);
}


/* ── 27. ACCORDIONS ─────────────────────────────────────────── */
/* The purchased theme never skinned Bootstrap accordions, so they
   rendered with stock typography (16px regular) and borders. Align
   them with the Dell tokens used by card headers and tables. */
.accordion-item {
  border-color: var(--dt-border);
}

.accordion-button {
  font-family: var(--dt-font);
  font-size: var(--dt-text-base);
  font-weight: var(--dt-weight-semi);
}

/* The framework pages (ITCA, NIST CSF, Cyber Maturity, Zero Trust,
   SOC) color their category accordion headers with the stock
   Bootstrap .bg-blue utility (#346ee0), which clashes with the Dell
   brand blue. Retint scoped to accordion buttons so the utility
   keeps its stock meaning elsewhere. */
.accordion-button.bg-blue {
  background-color: var(--dt-blue) !important;
}

.accordion-button.bg-blue:hover,
.accordion-button.bg-blue:not(.collapsed) {
  background-color: var(--dt-blue-dark) !important;
}

.accordion-button.bg-blue:focus {
  box-shadow: var(--dt-focus-ring);
}

/* Default accordion chevron is dark — invert it for the blue header */
.accordion-button.bg-blue::after {
  filter: brightness(0) invert(1);
}


/* ── 28. PRINT RESET ────────────────────────────────────────── */
@media print {
  .main-menu,
  .navbar-custom,
  .footer { display: none !important; }

  .page-content {
    width: 100% !important;
    margin: 0 !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12px !important;
  }

  .card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
}