/**
 * MC Suite v2.0 - Main Stylesheet Entry Point
 * Aurora Design System
 *
 * This file imports all design system modules in the correct order.
 * Import this single file in your HTML to load the entire design system.
 *
 * Load Order:
 * 1. Design Tokens (CSS Custom Properties)
 * 2. Base/Reset Styles
 * 3. Component Styles
 * 4. Layout Styles
 * 5. Theme Overrides
 */

/* ═══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   Foundation of the design system - must be loaded first
   ═══════════════════════════════════════════════════════════════ */

@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/shadows.css');
@import url('tokens/animations.css');

/* ═══════════════════════════════════════════════════════════════
   2. BASE STYLES
   Reset, global styles, and utility classes
   ═══════════════════════════════════════════════════════════════ */

/* @import url('base/reset.css'); */
/* @import url('base/globals.css'); */
/* @import url('base/utilities.css'); */

/* ═══════════════════════════════════════════════════════════════
   3. COMPONENT STYLES
   Individual UI components
   ═══════════════════════════════════════════════════════════════ */

@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/forms.css');
@import url('components/tables.css');
/* @import url('components/modals.css'); */ /* Disabled - conflicts with Bootstrap modals */
@import url('components/navigation.css');
@import url('components/badges.css');
@import url('components/alerts.css');
@import url('components/dropdowns.css');
@import url('components/tooltips.css');
@import url('components/versions.css');

/* ═══════════════════════════════════════════════════════════════
   4. LAYOUT STYLES
   Page layouts, grids, sidebar, header
   ═══════════════════════════════════════════════════════════════ */

@import url('layouts/sidebar.css');
@import url('layouts/header.css');
@import url('layouts/grid.css');
@import url('layouts/pages.css');

/* ═══════════════════════════════════════════════════════════════
   5. THEME STYLES
   Light/Dark mode overrides
   ═══════════════════════════════════════════════════════════════ */

/* @import url('themes/light.css'); */
/* @import url('themes/dark.css'); */

/* ═══════════════════════════════════════════════════════════════
   GLOBAL RESETS & DEFAULTS
   Applied after tokens are loaded
   ═══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove default margins */
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
dl, dd, ol, ul, figure, hr, fieldset, legend {
  margin: 0;
}

/* Remove list styles */
ol, ul {
  list-style: none;
  padding: 0;
}

/* Make images responsive */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Inherit fonts for form elements */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  margin: 0;
}

/* Remove button styling */
button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* Remove outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* Better focus styles */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Remove default table spacing */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Make text selection more visible */
::selection {
  background-color: var(--aurora-indigo-200);
  color: var(--aurora-indigo-900);
}

/* Scrollbar styling (webkit) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface-sunken);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) var(--color-surface-sunken);
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   Quick helpers for common patterns
   ═══════════════════════════════════════════════════════════════ */

/* Display */
.hidden { display: none !important; }
.block { display: block !important; }
.inline { display: inline !important; }
.inline-block { display: inline-block !important; }
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.grid { display: grid !important; }

/* Flex utilities */
.flex-row { flex-direction: row !important; }
.flex-col { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.items-start { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.items-end { align-items: flex-end !important; }
.items-stretch { align-items: stretch !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-none { flex: none !important; }
.flex-grow { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

/* Position */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* Width & Height */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.h-full { height: 100% !important; }
.h-auto { height: auto !important; }
.min-h-screen { min-height: 100vh !important; }
.max-w-full { max-width: 100% !important; }

/* Overflow */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }

/* Visibility */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.opacity-0 { opacity: 0 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-100 { opacity: 1 !important; }

/* Cursor */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* Pointer Events */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* User Select */
.select-none { user-select: none !important; }
.select-text { user-select: text !important; }
.select-all { user-select: all !important; }

/* Screen Reader Only */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.not-sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Gap utilities */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-5 { gap: var(--space-5) !important; }
.gap-6 { gap: var(--space-6) !important; }
.gap-8 { gap: var(--space-8) !important; }

/* Text alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-end { text-align: end !important; }

/* Text transforms */
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* Text colors */
.text-muted { color: var(--color-text-muted) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-info { color: var(--color-info) !important; }

/* Font weight */
.font-normal { font-weight: var(--font-normal) !important; }
.font-medium { font-weight: var(--font-medium) !important; }
.font-semibold { font-weight: var(--font-semibold) !important; }
.font-bold { font-weight: var(--font-bold) !important; }

/* Text size */
.text-xs { font-size: var(--text-xs) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg { font-size: var(--text-lg) !important; }
.text-xl { font-size: var(--text-xl) !important; }
.text-2xl { font-size: var(--text-2xl) !important; }

/* Truncate text */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rounded corners */
.rounded { border-radius: var(--radius-md) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }
.rounded-none { border-radius: 0 !important; }

/* Shadows */
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-none { box-shadow: none !important; }

/* Padding utilities */
.p-0 { padding: 0 !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-6 { padding: var(--space-6) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }

/* Margin utilities */
.m-0 { margin: 0 !important; }
.m-auto { margin: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mt-auto { margin-top: auto !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }

/* Border utilities */
.border { border: 1px solid var(--color-border) !important; }
.border-0 { border: 0 !important; }
.border-t { border-top: 1px solid var(--color-border) !important; }
.border-b { border-bottom: 1px solid var(--color-border) !important; }

/* Print utilities */
@media print {
  .print-hidden { display: none !important; }
  .print-block { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR BACKDROP
   ═══════════════════════════════════════════════════════════════ */

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--sidebar-z-index, 200) - 1);
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease-default),
              visibility var(--duration-slow) var(--ease-default);
}

.sidebar-backdrop.show {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1024px) {
  .sidebar-backdrop {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SKIP LINK (Accessibility)
   ═══════════════════════════════════════════════════════════════ */

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
  text-decoration: none;
  z-index: 9999;
  transition: top var(--duration-fast) var(--ease-default);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP OVERRIDE LAYER
   Ensure Aurora v2 styles take precedence over Bootstrap defaults
   ═══════════════════════════════════════════════════════════════ */

/* ----- BADGE OVERRIDES ----- */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--badge-padding-y, 0.125rem) var(--badge-padding-x, 0.5rem) !important;
  font-size: var(--text-xs, 0.75rem) !important;
  font-weight: var(--font-medium, 500) !important;
  border-radius: var(--radius-badge, 9999px) !important;
}

.badge.bg-primary,
.badge-primary {
  background-color: var(--color-primary, #4F46E5) !important;
  color: white !important;
}

.badge.bg-success,
.badge-success {
  background-color: var(--color-success, #059669) !important;
  color: white !important;
}

.badge.bg-warning,
.badge-warning {
  background-color: var(--color-warning, #F59E0B) !important;
  color: var(--slate-900, #0F172A) !important;
}

.badge.bg-danger,
.badge-danger {
  background-color: var(--color-danger, #E11D48) !important;
  color: white !important;
}

.badge.bg-info,
.badge-info {
  background-color: var(--color-info, #0891B2) !important;
  color: white !important;
}

.badge.bg-secondary,
.badge-secondary {
  background-color: var(--slate-500, #64748B) !important;
  color: white !important;
}

.badge.bg-dark,
.badge-dark {
  background-color: var(--slate-700, #334155) !important;
  color: white !important;
}

.badge.bg-light,
.badge-light {
  background-color: var(--slate-200, #E2E8F0) !important;
  color: var(--slate-800, #1E293B) !important;
}

/* ----- TABLE OVERRIDES ----- */
.table {
  --bs-table-bg: var(--color-surface, #FFFFFF);
  --bs-table-striped-bg: var(--color-surface-sunken, #F8FAFC);
  --bs-table-hover-bg: var(--color-hover, #F8FAFC);
  --bs-table-border-color: var(--color-border-subtle, #E2E8F0);

  width: 100% !important;
  margin-bottom: var(--space-4, 1rem) !important;
  color: var(--color-text-primary, #0F172A) !important;
  border-collapse: collapse !important;
  font-size: var(--text-sm, 0.875rem) !important;
}

.table > thead {
  background-color: var(--color-surface, #FFFFFF) !important;
}

.table > thead > tr > th,
.table thead th,
table.table > thead > tr > th,
.table-responsive .table > thead > tr > th,
.card .table > thead > tr > th,
.card-body .table > thead > tr > th {
  padding: 0.75rem 1rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
  color: #475569 !important;
  background-color: #F8FAFC !important;
  border-bottom: 2px solid #E2E8F0 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  height: 44px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

.table > tbody > tr > td {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem) !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--color-border-subtle, #E2E8F0) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--color-surface-sunken, #F8FAFC);
  background-color: var(--color-surface-sunken, #F8FAFC) !important;
}

.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--color-hover, #F8FAFC);
  background-color: var(--color-hover, #F8FAFC) !important;
}

/* ----- CARD OVERRIDES ----- */
.card {
  --bs-card-bg: var(--color-surface, #FFFFFF);
  --bs-card-border-color: var(--color-border-subtle, #E2E8F0);
  --bs-card-border-radius: var(--radius-card, 0.75rem);
  --bs-card-cap-bg: var(--color-surface, #FFFFFF);

  background-color: var(--color-surface, #FFFFFF) !important;
  border: 1px solid var(--color-border-subtle, #E2E8F0) !important;
  border-radius: var(--radius-card, 0.75rem) !important;
  box-shadow: var(--shadow-card, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)) !important;
}

/* Status card accents - colored left border */
.card.card-status {
  border-left: 4px solid #64748B !important;
}
.card.card-status.card-status-primary {
  border-left: 4px solid #4F46E5 !important;
}
.card.card-status.card-status-success {
  border-left: 4px solid #059669 !important;
}
.card.card-status.card-status-warning {
  border-left: 4px solid #F59E0B !important;
}
.card.card-status.card-status-danger {
  border-left: 4px solid #E11D48 !important;
}
.card.card-status.card-status-info {
  border-left: 4px solid #0891B2 !important;
}

.card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 65px !important; /* Accommodates ghost buttons/links */
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem) !important;
  background-color: var(--color-surface, #FFFFFF) !important;
  border-bottom: 1px solid var(--color-border-subtle, #E2E8F0) !important;
}

.card-body {
  padding: var(--space-6, 1.5rem) !important;
}

.card-footer {
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem) !important;
  background-color: var(--color-surface) !important;
  border-top: 1px solid var(--color-border-subtle, #E2E8F0) !important;
  border-radius: 0 0 calc(var(--radius-card, 0.75rem) - 1px) calc(var(--radius-card, 0.75rem) - 1px) !important;
}

/* ----- ALERT OVERRIDES ----- */
.alert {
  padding: var(--space-4, 1rem) !important;
  border-radius: var(--radius-lg, 0.5rem) !important;
  border-width: 1px !important;
  border-style: solid !important;
}

.alert-primary {
  background-color: var(--color-primary-subtle, #EEF2FF) !important;
  border-color: var(--aurora-indigo-200, #C7D2FE) !important;
  color: var(--aurora-indigo-800, #3730A3) !important;
}

.alert-success {
  background-color: var(--color-success-subtle, #ECFDF5) !important;
  border-color: var(--aurora-emerald-200, #A7F3D0) !important;
  color: var(--aurora-emerald-800, #065F46) !important;
}

.alert-warning {
  background-color: var(--color-warning-subtle, #FFFBEB) !important;
  border-color: var(--aurora-amber-200, #FDE68A) !important;
  color: var(--aurora-amber-800, #92400E) !important;
}

.alert-danger {
  background-color: var(--color-error-subtle, #FFF1F2) !important;
  border-color: var(--aurora-rose-200, #FECDD3) !important;
  color: var(--aurora-rose-800, #9F1239) !important;
}

.alert-info {
  background-color: var(--color-info-subtle, #ECFEFF) !important;
  border-color: var(--aurora-cyan-200, #A5F3FC) !important;
  color: var(--aurora-cyan-800, #155E75) !important;
}

/* ----- BUTTON OVERRIDES ----- */
.btn {
  font-weight: var(--font-medium, 500) !important;
  border-radius: var(--radius-button, 0.5rem) !important;
  transition: all 0.15s ease-in-out !important;
}

.btn-primary {
  background-color: var(--color-primary, #4F46E5) !important;
  border-color: var(--color-primary, #4F46E5) !important;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover, #4338CA) !important;
  border-color: var(--color-primary-hover, #4338CA) !important;
}

.btn-success {
  background-color: var(--color-success, #059669) !important;
  border-color: var(--color-success, #059669) !important;
}

.btn-warning {
  background-color: var(--color-warning, #F59E0B) !important;
  border-color: var(--color-warning, #F59E0B) !important;
  color: var(--slate-900, #0F172A) !important;
}

.btn-danger {
  background-color: var(--color-danger, #E11D48) !important;
  border-color: var(--color-danger, #E11D48) !important;
}

.btn-info {
  background-color: var(--color-info, #0891B2) !important;
  border-color: var(--color-info, #0891B2) !important;
  color: white !important;
}

.btn-outline-primary {
  color: var(--color-primary, #4F46E5) !important;
  border-color: var(--color-primary, #4F46E5) !important;
}

.btn-outline-primary:hover {
  background-color: var(--color-primary, #4F46E5) !important;
  color: white !important;
}

/* Ghost button variant */
.btn-ghost {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--color-text-secondary, #475569) !important;
}

.btn-ghost:hover {
  background-color: var(--color-hover, #F8FAFC) !important;
  color: var(--color-text-primary, #0F172A) !important;
}

/* Icon button */
.btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: var(--radius-lg, 0.5rem) !important;
}

/* ----- FORM CONTROL OVERRIDES ----- */
.form-control,
.form-select {
  padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem) !important;
  font-size: var(--text-sm, 0.875rem) !important;
  border-color: var(--color-border, #E2E8F0) !important;
  border-radius: var(--radius-input, 0.375rem) !important;
  background-color: var(--color-surface, #FFFFFF) !important;
  color: var(--color-text-primary, #0F172A) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary, #4F46E5) !important;
  box-shadow: 0 0 0 3px var(--color-primary-subtle, rgba(99, 102, 241, 0.15)) !important;
}

.form-control::placeholder {
  color: var(--color-text-muted, #94A3B8) !important;
}

.form-label {
  font-size: var(--text-sm, 0.875rem) !important;
  font-weight: var(--font-medium, 500) !important;
  color: var(--color-text-primary, #0F172A) !important;
  margin-bottom: var(--space-1, 0.25rem) !important;
}

/* ----- DROPDOWN OVERRIDES ----- */
.dropdown-menu {
  border: 1px solid var(--color-border, #E2E8F0) !important;
  border-radius: var(--radius-lg, 0.5rem) !important;
  box-shadow: var(--shadow-dropdown, 0 10px 15px -3px rgb(0 0 0 / 0.1)) !important;
  padding: var(--space-2, 0.5rem) !important;
  background-color: var(--color-surface, #FFFFFF) !important;
}

.dropdown-item {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem) !important;
  border-radius: var(--radius-md, 0.375rem) !important;
  font-size: var(--text-sm, 0.875rem) !important;
  color: var(--color-text-primary, #0F172A) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-hover, #F8FAFC) !important;
  color: var(--color-text-primary, #0F172A) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--color-primary-subtle, #EEF2FF) !important;
  color: var(--color-primary, #4F46E5) !important;
}

/* ----- MODAL OVERRIDES ----- */
/* Force Bootstrap modal z-index to ensure modal is above backdrop */
.modal-backdrop {
  z-index: 1040 !important;
}

.modal {
  z-index: 1050 !important;
}

.modal-content {
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* ----- PAGINATION OVERRIDES ----- */
.pagination {
  gap: var(--space-1, 0.25rem) !important;
}

.page-link {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem) !important;
  border-radius: var(--radius-md, 0.375rem) !important;
  border-color: var(--color-border, #E2E8F0) !important;
  color: var(--color-text-primary, #0F172A) !important;
  font-weight: var(--font-medium, 500) !important;
  font-size: var(--text-sm, 0.875rem) !important;
}

.page-link:hover {
  background-color: var(--color-hover, #F8FAFC) !important;
  border-color: var(--color-border-strong, #CBD5E1) !important;
}

.page-item.active .page-link {
  background-color: var(--color-primary, #4F46E5) !important;
  border-color: var(--color-primary, #4F46E5) !important;
}

/* ----- DARK MODE BOOTSTRAP OVERRIDES ----- */
[data-bs-theme="dark"],
[data-theme="dark"] {
  --bs-body-bg: var(--color-bg-primary, #020617);
  --bs-body-color: var(--color-text-primary, #F8FAFC);
  --bs-border-color: var(--color-border, #334155);
}

[data-bs-theme="dark"] .table,
[data-theme="dark"] .table {
  --bs-table-bg: var(--color-surface, #0F172A);
  --bs-table-border-color: var(--color-border-subtle, #1E293B);
}

[data-bs-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > thead > tr > th,
[data-bs-theme="dark"] .table thead th,
[data-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table-responsive .table > thead > tr > th,
[data-theme="dark"] .table-responsive .table > thead > tr > th,
[data-bs-theme="dark"] .card .table > thead > tr > th,
[data-theme="dark"] .card .table > thead > tr > th {
  background-color: #1E293B !important;
  color: #CBD5E1 !important;
  border-bottom-color: #334155 !important;
  height: 44px !important;
}

[data-bs-theme="dark"] .card,
[data-theme="dark"] .card {
  background-color: var(--color-surface, #0F172A) !important;
  border-color: var(--color-border-subtle, #1E293B) !important;
}

[data-bs-theme="dark"] .dropdown-menu,
[data-theme="dark"] .dropdown-menu {
  background-color: var(--color-surface, #0F172A) !important;
  border-color: var(--color-border, #334155) !important;
}

[data-bs-theme="dark"] .dropdown-item,
[data-theme="dark"] .dropdown-item {
  color: var(--color-text-primary, #F8FAFC) !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--color-hover, #1E293B) !important;
}

[data-bs-theme="dark"] .form-control,
[data-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-theme="dark"] .form-select {
  background-color: var(--color-surface, #0F172A) !important;
  border-color: var(--color-border, #334155) !important;
  color: var(--color-text-primary, #F8FAFC) !important;
}

[data-bs-theme="dark"] .modal-content,
[data-theme="dark"] .modal-content {
  background-color: var(--color-surface, #0F172A) !important;
  border-color: var(--color-border-subtle, #1E293B) !important;
}

/* ----- NAV TABS OVERRIDES ----- */
.nav-tabs {
  border-bottom: 1px solid var(--color-border, #E2E8F0) !important;
}

.nav-tabs .nav-link {
  color: var(--color-text-secondary, #475569) !important;
  border-color: transparent !important;
  border-bottom: 2px solid transparent !important;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem) !important;
  font-weight: var(--font-medium, 500) !important;
}

.nav-tabs .nav-link:hover {
  border-color: transparent !important;
  border-bottom-color: var(--color-border, #E2E8F0) !important;
  color: var(--color-text-primary, #0F172A) !important;
}

.nav-tabs .nav-link.active {
  color: var(--color-primary, #4F46E5) !important;
  border-color: transparent !important;
  border-bottom-color: var(--color-primary, #4F46E5) !important;
  background-color: transparent !important;
}

/* ----- LIST GROUP OVERRIDES ----- */
.list-group-item {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem) !important;
  border-color: var(--color-border-subtle, #F1F5F9) !important;
  background-color: var(--color-surface, #FFFFFF) !important;
  color: var(--color-text-primary, #0F172A) !important;
}

.list-group-item:first-child {
  border-top-left-radius: var(--radius-lg, 0.5rem) !important;
  border-top-right-radius: var(--radius-lg, 0.5rem) !important;
}

.list-group-item:last-child {
  border-bottom-left-radius: var(--radius-lg, 0.5rem) !important;
  border-bottom-right-radius: var(--radius-lg, 0.5rem) !important;
}

.list-group-item.active {
  background-color: var(--color-primary, #4F46E5) !important;
  border-color: var(--color-primary, #4F46E5) !important;
}

.list-group-item-action:hover {
  background-color: var(--color-hover, #F8FAFC) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARD HEADER FORM IMPROVEMENTS
   Proper alignment and spacing for forms in card headers
   ═══════════════════════════════════════════════════════════════ */

/* Card header with form - improved layout */
.card-header form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  width: 100%;
}

.card-header form .form-input,
.card-header form .form-control,
.card-header form .form-select {
  min-width: 120px;
  max-width: 200px;
  height: 36px;
  padding: var(--space-1\.5, 0.375rem) var(--space-2, 0.5rem);
  font-size: var(--text-sm, 0.875rem);
}

.card-header form .btn {
  height: 36px;
  padding: var(--space-1\.5, 0.375rem) var(--space-3, 0.75rem);
}

/* Checkbox in card header forms */
.card-header form label {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-sm, 0.875rem);
  white-space: nowrap;
  margin: 0;
}

.card-header form .form-checkbox,
.card-header form input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON GROUP IMPROVEMENTS
   Better sizing and spacing for button groups
   ═══════════════════════════════════════════════════════════════ */

.btn-group {
  display: inline-flex;
  gap: 0;
}

.btn-group .btn:not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Small button group variant */
.btn-group-sm .btn,
.btn-group .btn-sm {
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem) !important;
  font-size: var(--text-xs, 0.75rem) !important;
  height: auto !important;
  min-height: 28px !important;
}

/* ═══════════════════════════════════════════════════════════════
   FORM SWITCH IMPROVEMENTS (Bootstrap/Aurora Hybrid)
   Proper toggle switch styling for both patterns
   ═══════════════════════════════════════════════════════════════ */

/* Aurora Design System form-switch container */
.form-switch {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2, 0.5rem) !important;
  padding-left: 0 !important;
  min-height: auto !important;
}

/* Bootstrap's form-check form-switch pattern */
.form-check.form-switch {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3, 0.75rem) !important;
  padding-left: 0 !important;
  min-height: auto !important;
}

/* The actual switch input - Aurora pattern */
.form-switch .form-switch-input,
.form-switch:not(.form-check) input[type="checkbox"] {
  position: relative !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 24px !important;
  margin: 0 !important;
  appearance: none !important;
  background-color: var(--color-border, #CBD5E1) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--radius-full, 9999px) !important;
  cursor: pointer !important;
  transition: background-color var(--duration-fast, 150ms) var(--ease-default, ease) !important;
  flex-shrink: 0 !important;
}

/* Bootstrap form-check-input in form-switch */
.form-check.form-switch .form-check-input {
  position: relative !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 24px !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  appearance: none !important;
  background-color: var(--color-border, #CBD5E1) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--radius-full, 9999px) !important;
  cursor: pointer !important;
  transition: background-color var(--duration-fast, 150ms) var(--ease-default, ease) !important;
  flex-shrink: 0 !important;
}

/* The slider circle - Aurora pattern */
.form-switch .form-switch-input::before,
.form-switch:not(.form-check) input[type="checkbox"]::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  background-color: white !important;
  border-radius: var(--radius-full, 9999px) !important;
  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)) !important;
  transition: transform var(--duration-fast, 150ms) var(--ease-bounce, cubic-bezier(0.68, -0.55, 0.265, 1.55)) !important;
}

/* The slider circle - Bootstrap pattern */
.form-check.form-switch .form-check-input::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  background-color: white !important;
  border-radius: var(--radius-full, 9999px) !important;
  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)) !important;
  transition: transform var(--duration-fast, 150ms) var(--ease-bounce, cubic-bezier(0.68, -0.55, 0.265, 1.55)) !important;
}

/* Checked state - Aurora pattern */
.form-switch .form-switch-input:checked,
.form-switch:not(.form-check) input[type="checkbox"]:checked {
  background-color: var(--color-primary, #4F46E5) !important;
  background-image: none !important;
}

/* Checked state - Bootstrap pattern */
.form-check.form-switch .form-check-input:checked {
  background-color: var(--color-primary, #4F46E5) !important;
  background-image: none !important;
  border-color: var(--color-primary, #4F46E5) !important;
}

/* Slider position when checked - Aurora pattern */
.form-switch .form-switch-input:checked::before,
.form-switch:not(.form-check) input[type="checkbox"]:checked::before {
  transform: translateX(20px) !important;
}

/* Slider position when checked - Bootstrap pattern */
.form-check.form-switch .form-check-input:checked::before {
  transform: translateX(20px) !important;
}

/* Focus state - Aurora pattern */
.form-switch .form-switch-input:focus,
.form-switch:not(.form-check) input[type="checkbox"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--color-primary-subtle, rgba(99, 102, 241, 0.15)) !important;
}

/* Focus state - Bootstrap pattern */
.form-check.form-switch .form-check-input:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--color-primary-subtle, rgba(99, 102, 241, 0.15)) !important;
  background-image: none !important;
}

/* Switch label text - Aurora pattern */
.form-switch .form-switch-label,
.form-switch .form-switch-text,
.form-switch:not(.form-check) span:not(.form-switch-input) {
  font-size: var(--text-sm, 0.875rem) !important;
  color: var(--color-text-secondary, #475569) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

/* Switch label text - Bootstrap pattern */
.form-check.form-switch .form-check-label {
  font-size: var(--text-sm, 0.875rem) !important;
  color: var(--color-text-primary, #0F172A) !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARD FOOTER IMPROVEMENTS
   Better layout for actions in card footers
   ═══════════════════════════════════════════════════════════════ */

/* Card footer with multiple actions */
.card-footer-actions,
.card-footer.card-footer-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: var(--space-3, 0.75rem) !important;
}

/* Inline form switch container for card footers */
.form-switch-inline,
.form-switch-container {
  display: flex !important;
  align-items: center !important;
}

/* Ensure proper spacing for card footer buttons on small screens */
@media (max-width: 575px) {
  .card-footer-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .card-footer-actions .btn-group,
  .card-footer-actions .btn-group-sm {
    width: 100% !important;
    justify-content: stretch !important;
  }

  .card-footer-actions .btn-group .btn,
  .card-footer-actions .btn-group-sm .btn {
    flex: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TABLE ACTION BUTTON IMPROVEMENTS
   Better sizing for action buttons in table rows
   ═══════════════════════════════════════════════════════════════ */

/* Icon-only buttons in tables */
.btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: var(--radius-md, 0.375rem) !important;
}

.btn-icon.btn-sm {
  width: 28px !important;
  height: 28px !important;
}

/* Action button group in table rows */
td .d-flex.gap-1 {
  gap: var(--space-1, 0.25rem) !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BUTTON TEXT HIDING
   Hide button text on small screens, show icons only
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .btn .d-none.d-lg-inline {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   WIDGET CARD IMPROVEMENTS
   Better layout for dashboard widget cards
   ═══════════════════════════════════════════════════════════════ */

.widget-card .card-body {
  padding: var(--space-4, 1rem) !important;
}

.widget-card .btn-group {
  display: flex !important;
}

.widget-card .btn-group .btn {
  flex: 1 !important;
}

/* Form inside btn-group (toggle buttons) */
.btn-group form[style*="contents"] {
  display: contents !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARD GRID IMPROVEMENTS
   Better spacing for card grids
   ═══════════════════════════════════════════════════════════════ */

.card-grid {
  display: grid !important;
  gap: var(--space-4, 1rem) !important;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)) !important;
}

@media (min-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1400px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER IMPROVEMENTS
   Better spacing and alignment in page headers
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER IN HEADER__TITLE FIX
   When page-header is incorrectly nested in header__title (navbar)
   Show only the title text, hide breadcrumbs and subtitles
   ═══════════════════════════════════════════════════════════════ */

/* Page header with nested header in page_title block */
.top-navbar + main .page-header:first-child {
  padding-top: 0;
}

/* When page-header is inside header__title (top navbar), make it inline/compact */
.header__title .page-header {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.header__title .page-header-content {
  display: inline !important;
}

/* Show page-title inline in navbar */
.header__title .page-title,
.header__title .page-header-title,
.header__title h1.page-title,
.header__title h1.page-header-title {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--text-lg, 1.125rem) !important;
  font-weight: var(--font-semibold, 600) !important;
  color: var(--color-text-primary, #0F172A) !important;
  line-height: normal !important;
}

/* Remove icon styling from page-title in header__title */
.header__title .page-title i {
  display: none !important;
}

/* Hide breadcrumbs, subtitles, descriptions, actions when in header__title */
.header__title .breadcrumb,
.header__title .page-subtitle,
.header__title .page-header-subtitle,
.header__title .page-header-breadcrumb,
.header__title .page-header-actions,
.header__title .page-header-description,
.header__title nav[aria-label="breadcrumb"],
.header__title .text-muted,
.header__title p {
  display: none !important;
}

/* Ensure page-header-actions buttons are properly spaced */
.page-header-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--space-2, 0.5rem) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT AREA PAGE HEADER
   Proper page header styling in content-wrapper
   ═══════════════════════════════════════════════════════════════ */

/* Page header in content area */
.content-wrapper > .page-header,
.content-wrapper > div > .page-header,
.content-wrapper .page-list > .page-header,
.content-wrapper .page-detail > .page-header,
.content-wrapper .page-form > .page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  margin-bottom: var(--space-8, 2rem);
  padding-bottom: var(--space-6, 1.5rem);
  border-bottom: 1px solid var(--color-border-subtle, #E2E8F0);
}

/* Page header content (title, subtitle, breadcrumb) */
.content-wrapper .page-header-content {
  flex: 1;
  min-width: 0;
}

/* Breadcrumb in content area page header */
.content-wrapper .page-header .breadcrumb {
  margin-bottom: var(--space-2, 0.5rem);
  padding: 0;
  background: transparent;
  font-size: var(--text-sm, 0.875rem);
}

.content-wrapper .page-header .breadcrumb-item {
  color: var(--color-text-tertiary, #64748B);
}

.content-wrapper .page-header .breadcrumb-item a {
  color: var(--color-text-link, #4F46E5);
  text-decoration: none;
}

.content-wrapper .page-header .breadcrumb-item a:hover {
  color: var(--color-text-link-hover, #4338CA);
  text-decoration: underline;
}

.content-wrapper .page-header .breadcrumb-item.active {
  color: var(--color-text-secondary, #475569);
}

.content-wrapper .page-header .breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-text-muted, #94A3B8);
}

/* Page title in content area */
.content-wrapper .page-header .page-title {
  margin: 0;
  font-size: var(--text-2xl, 1.5rem);
  font-weight: var(--font-bold, 700);
  color: var(--color-text-primary, #0F172A);
  line-height: var(--leading-tight, 1.25);
}

/* Page subtitle in content area */
.content-wrapper .page-header .page-subtitle {
  margin-top: var(--space-1, 0.25rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary, #475569);
}

/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP NAV-LINK ACTIVE STATE OVERRIDES
   Reset any Bootstrap .active class inherited styles
   ═══════════════════════════════════════════════════════════════ */

/* Prevent Bootstrap from adding any margin/padding changes to .active */
.nav-link.active {
  /* Reset potential Bootstrap changes */
  margin: 0 !important;
}

/* Sidebar-specific active state override */
.sidebar .nav-link.active {
  /* Ensure border-left takes effect but doesn't shift content */
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARD BODY TEXT SPACING IMPROVEMENTS
   Better spacing for text content within cards
   ═══════════════════════════════════════════════════════════════ */

/* Card body paragraphs and text elements */
.card-body p {
  margin-bottom: var(--space-3, 0.75rem);
}

.card-body p:last-child {
  margin-bottom: 0;
}

/* Card body headings */
.card-body h1,
.card-body h2,
.card-body h3,
.card-body h4,
.card-body h5,
.card-body h6 {
  margin-bottom: var(--space-3, 0.75rem);
}

/* Card body lists */
.card-body ul,
.card-body ol {
  margin-bottom: var(--space-3, 0.75rem);
  padding-left: var(--space-6, 1.5rem);
}

.card-body li {
  margin-bottom: var(--space-1, 0.25rem);
}

/* Form text/help text spacing */
.form-text {
  margin-top: var(--space-1, 0.25rem) !important;
  font-size: var(--text-sm, 0.875rem) !important;
  color: var(--color-text-tertiary, #64748B) !important;
  line-height: var(--leading-relaxed, 1.625) !important;
}

/* Better spacing between form groups in cards */
.card-body .mb-3 {
  margin-bottom: var(--space-4, 1rem) !important;
}

.card-body .mb-4 {
  margin-bottom: var(--space-5, 1.25rem) !important;
}

/* Code blocks in cards */
.card-body code {
  padding: 0.125rem 0.375rem;
  font-size: 0.875em;
  background-color: var(--color-surface-sunken, #F1F5F9);
  border-radius: var(--radius-sm, 0.25rem);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

/* Horizontal rules in cards */
.card-body hr {
  margin: var(--space-5, 1.25rem) 0 !important;
  border: none;
  border-top: 1px solid var(--color-border-subtle, #E2E8F0);
}

/* ═══════════════════════════════════════════════════════════════
   LIST GROUP ITEM SPACING
   Better spacing for list group items
   ═══════════════════════════════════════════════════════════════ */

/* List group items with icons */
.list-group-item i {
  margin-right: var(--space-2, 0.5rem);
  width: 1.25rem;
  text-align: center;
}

/* List group flush in cards */
.card .list-group-flush {
  border-radius: 0;
}

.card .list-group-flush .list-group-item:last-child {
  border-bottom-left-radius: calc(var(--radius-card, 0.75rem) - 1px);
  border-bottom-right-radius: calc(var(--radius-card, 0.75rem) - 1px);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR LIGHT MODE IMPROVEMENTS
   Ensure sidebar links have proper spacing
   ═══════════════════════════════════════════════════════════════ */

/* Info cards with bg-body-secondary */
.card.bg-body-secondary {
  background-color: var(--color-surface-sunken, #F1F5F9) !important;
  border: 1px solid var(--color-border-subtle, #E2E8F0) !important;
}

[data-bs-theme="dark"] .card.bg-body-secondary,
[data-theme="dark"] .card.bg-body-secondary {
  background-color: var(--color-surface-sunken, #020617) !important;
  border-color: var(--color-border-subtle, #1E293B) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS ROW IMPROVEMENTS
   Better layout for settings rows
   ═══════════════════════════════════════════════════════════════ */

.settings-row-info {
  flex: 1;
  min-width: 0;
}

.settings-row-info .form-label {
  margin-bottom: 0;
}

.settings-row-description {
  margin-top: var(--space-1, 0.25rem);
  margin-bottom: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-tertiary, #64748B);
}

/* ═══════════════════════════════════════════════════════════════
   DISPLAY TEXT IMPROVEMENTS
   Better styling for display numbers and stats
   ═══════════════════════════════════════════════════════════════ */

.display-4 {
  font-weight: var(--font-bold, 700) !important;
  color: var(--color-text-primary, #0F172A) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PROGRESS BAR IMPROVEMENTS
   Better styling for progress bars
   ═══════════════════════════════════════════════════════════════ */

.progress {
  background-color: var(--color-surface-sunken, #F1F5F9) !important;
  border-radius: var(--radius-full, 9999px) !important;
  overflow: hidden;
}

.progress-bar {
  border-radius: var(--radius-full, 9999px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DETAIL GRID (Definition List Layout)
   Used for displaying key-value pairs in detail views
   ═══════════════════════════════════════════════════════════════ */

.detail-grid {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: var(--space-3, 0.75rem) var(--space-4, 1rem);
  align-items: start;
}

.detail-grid dt {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-medium, 500);
  color: var(--color-text-secondary, #475569);
}

.detail-grid dd {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-primary, #0F172A);
  margin: 0;
  word-break: break-word;
}

.detail-grid dd a {
  color: var(--color-text-link, #4F46E5);
  text-decoration: none;
}

.detail-grid dd a:hover {
  color: var(--color-text-link-hover, #4338CA);
  text-decoration: underline;
}

/* Compact variant for smaller areas like sidebars */
.detail-grid-compact {
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
}

.detail-grid-compact dt,
.detail-grid-compact dd {
  font-size: var(--text-xs, 0.75rem);
}

/* Single column layout for narrow containers */
@media (max-width: 575px) {
  .detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-1, 0.25rem);
  }

  .detail-grid dt {
    margin-top: var(--space-3, 0.75rem);
  }

  .detail-grid dt:first-child {
    margin-top: 0;
  }
}

/* Detail item for non-dl layouts (vendor view uses this) */
.detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  margin-bottom: var(--space-3, 0.75rem);
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-medium, 500);
  color: var(--color-text-secondary, #475569);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.detail-value {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-primary, #0F172A);
}

.detail-value a {
  color: var(--color-text-link, #4F46E5);
  text-decoration: none;
}

.detail-value a:hover {
  color: var(--color-text-link-hover, #4338CA);
  text-decoration: underline;
}