/* ============================================================
   AETHER ENTERPRISE DESIGN SYSTEM v1.0
   ShyftCom E-Commerce ERP
   Framework: Bootstrap 5.2.3 + Velzon Admin Theme
   Load order: LAST — after all Velzon, sidebar, font, shyft-* CSS.
   Override method: CSS custom property cascade + explicit selectors.
   ============================================================ */

/* ── 1. Core Design Tokens (Light Mode) ───────────────────── */
:root {
  /* Indigo palette */
  --ae-indigo-950: #100d70;
  --ae-indigo-900: #1a138a;
  --ae-indigo-800: #2619b3;
  --ae-indigo-700: #3525cd;
  --ae-indigo-600: #4534e1;
  --ae-indigo-500: #5548e8;
  --ae-indigo-400: #7066ef;
  --ae-indigo-300: #9b96f4;
  --ae-indigo-200: #c5c2f9;
  --ae-indigo-100: #eaebfd;
  --ae-indigo-50:  #f3f4ff;

  /* Semantic brand tokens */
  --ae-primary:         #3525cd;
  --ae-primary-rgb:     53, 37, 205;
  --ae-primary-hover:   #4534e1;
  --ae-primary-active:  #2619b3;
  --ae-primary-subtle:  #eaebfd;
  --ae-primary-muted:   #c5c2f9;

  /* Neutral scale (warm indigo-tinted gray) */
  --ae-neutral-950: #07090f;
  --ae-neutral-900: #0c1023;
  --ae-neutral-800: #161d36;
  --ae-neutral-700: #232b4d;
  --ae-neutral-600: #3a4166;
  --ae-neutral-500: #6b7280;
  --ae-neutral-400: #9ca3af;
  --ae-neutral-300: #d1d5db;
  --ae-neutral-200: #e5e8ef;
  --ae-neutral-100: #f2f4f8;
  --ae-neutral-50:  #f8f9fc;

  /* Light mode surfaces */
  --ae-canvas:   #f2f4f8;
  --ae-surface:  #ffffff;
  --ae-surface-raised: #ffffff;
  --ae-surface-input:  #f8f9fc;

  /* Light mode text */
  --ae-text-1:   #0c1023;
  --ae-text-2:   #3a4166;
  --ae-text-3:   #6b7280;
  --ae-text-4:   #9ca3af;
  --ae-text-inv: #ffffff;

  /* Light mode borders */
  --ae-border-1: #e5e8ef;
  --ae-border-2: #d1d5db;
  --ae-border-3: #9ca3af;
  --ae-border-focus: #3525cd;

  /* Semantic status */
  --ae-success:        #16a34a;
  --ae-success-rgb:    22, 163, 74;
  --ae-success-subtle: #dcfce7;
  --ae-warning:        #d97706;
  --ae-warning-rgb:    217, 119, 6;
  --ae-warning-subtle: #fef3c7;
  --ae-danger:         #dc2626;
  --ae-danger-rgb:     220, 38, 38;
  --ae-danger-subtle:  #fee2e2;
  --ae-info:           #0891b2;
  --ae-info-rgb:       8, 145, 178;
  --ae-info-subtle:    #e0f2fe;

  /* Elevation */
  --ae-shadow-xs: 0 1px 2px rgba(12, 16, 35, 0.05);
  --ae-shadow-sm: 0 1px 3px rgba(12, 16, 35, 0.07), 0 1px 2px rgba(12, 16, 35, 0.04);
  --ae-shadow-md: 0 4px 8px rgba(12, 16, 35, 0.07), 0 2px 4px rgba(12, 16, 35, 0.04);
  --ae-shadow-lg: 0 10px 20px rgba(12, 16, 35, 0.08), 0 4px 6px rgba(12, 16, 35, 0.04);
  --ae-shadow-xl: 0 20px 40px rgba(12, 16, 35, 0.1), 0 8px 16px rgba(12, 16, 35, 0.06);
  --ae-shadow-focus: 0 0 0 3px rgba(53, 37, 205, 0.2);

  /* Radius */
  --ae-r-xs:  0.25rem;
  --ae-r-sm:  0.375rem;
  --ae-r-md:  0.5rem;
  --ae-r-lg:  0.75rem;
  --ae-r-xl:  1rem;
  --ae-r-2xl: 1.5rem;
  --ae-r-pill: 9999px;

  /* Typography */
  --ae-font-sans: "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ae-font-mono: ui-monospace, "JetBrains Mono", "Fira Code", monospace;

  /* Transitions */
  --ae-t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --ae-t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ae-t-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. Dark Mode Tokens ──────────────────────────────────── */
html[data-bs-theme="dark"] {
  /* Surfaces */
  --ae-canvas:         #080b18;
  --ae-surface:        #0d1228;
  --ae-surface-raised: #111730;
  --ae-surface-input:  #0c1023;

  /* Text */
  --ae-text-1: #e2e5f0;
  --ae-text-2: #a8b0cc;
  --ae-text-3: #636b85;
  --ae-text-4: #3a4166;

  /* Borders */
  --ae-border-1: #182040;
  --ae-border-2: #232b4d;
  --ae-border-3: #3a4166;
  --ae-border-focus: #5548e8;

  /* Primary subtle for dark */
  --ae-primary-subtle: rgba(53, 37, 205, 0.18);
  --ae-primary-muted:  rgba(53, 37, 205, 0.35);

  /* Elevation (deeper shadows on dark) */
  --ae-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.4);
  --ae-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --ae-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
  --ae-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.5);
  --ae-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.55);
  --ae-shadow-focus: 0 0 0 3px rgba(85, 72, 232, 0.35);
}

/* ── 3. Bootstrap Token Override (light) ──────────────────── */
:root {
  /* Primary */
  --bs-primary:              #3525cd;
  --bs-primary-rgb:          53, 37, 205;
  --bs-primary-text:         #3525cd;
  --bs-primary-bg-subtle:    #eaebfd;
  --bs-primary-border-subtle: #c5c2f9;

  /* Body */
  --bs-body-font-family:  var(--ae-font-sans);
  --bs-body-font-size:    0.9375rem;
  --bs-body-font-weight:  400;
  --bs-body-line-height:  1.55;
  --bs-body-color:        var(--ae-text-1);
  --bs-body-bg:           var(--ae-canvas);
  --bs-secondary-color:   var(--ae-text-3);

  /* Borders */
  --bs-border-color:             var(--ae-border-1);
  --bs-border-color-translucent: rgba(12, 16, 35, 0.08);
  --bs-border-radius:            var(--ae-r-md);
  --bs-border-radius-sm:         var(--ae-r-sm);
  --bs-border-radius-lg:         var(--ae-r-lg);
  --bs-border-radius-xl:         var(--ae-r-xl);
  --bs-border-radius-2xl:        var(--ae-r-2xl);
  --bs-border-radius-pill:       var(--ae-r-pill);

  /* Link */
  --bs-link-color:       #3525cd;
  --bs-link-color-rgb:   53, 37, 205;
  --bs-link-hover-color: #4534e1;

  /* Card */
  --bs-card-spacer-y:      1.25rem;
  --bs-card-spacer-x:      1.25rem;
  --bs-card-border-radius: var(--ae-r-lg);
  --bs-card-border-color:  var(--ae-border-1);
  --bs-card-bg:            var(--ae-surface);
  --bs-card-cap-bg:        transparent;
  --bs-card-cap-color:     var(--ae-text-1);

  /* Modal */
  --bs-modal-border-radius:  var(--ae-r-xl);
  --bs-modal-border-color:   var(--ae-border-1);
  --bs-modal-bg:             var(--ae-surface);
  --bs-modal-header-border-color: var(--ae-border-1);
  --bs-modal-footer-border-color: var(--ae-border-1);

  /* Table */
  --bs-table-color:       var(--ae-text-1);
  --bs-table-border-color: var(--ae-border-1);
  --bs-table-striped-bg:  rgba(53, 37, 205, 0.025);
  --bs-table-hover-bg:    rgba(53, 37, 205, 0.04);
  --bs-table-accent-bg:   transparent;

  /* Breadcrumb */
  --bs-breadcrumb-item-active-color: var(--ae-text-3);

  /* Dropdown */
  --bs-dropdown-border-radius: var(--ae-r-lg);
  --bs-dropdown-border-color:  var(--ae-border-1);
  --bs-dropdown-bg:            var(--ae-surface);
  --bs-dropdown-item-hover-bg: var(--ae-primary-subtle);
  --bs-dropdown-item-hover-color: var(--ae-primary);
  --bs-dropdown-link-active-bg: var(--ae-primary);

  /* List group */
  --bs-list-group-border-color: var(--ae-border-1);
  --bs-list-group-bg:           var(--ae-surface);
  --bs-list-group-action-hover-bg: var(--ae-primary-subtle);
  --bs-list-group-action-active-bg: var(--ae-primary-subtle);

  /* Nav tabs */
  --bs-nav-tabs-border-color:      var(--ae-border-1);
  --bs-nav-tabs-link-active-color: var(--ae-primary);
  --bs-nav-tabs-link-active-bg:    var(--ae-surface);
  --bs-nav-tabs-link-active-border-color: var(--ae-border-1) var(--ae-border-1) var(--ae-surface);
  --bs-nav-link-color: var(--ae-text-2);
  --bs-nav-link-hover-color: var(--ae-primary);
  --bs-nav-pills-link-active-bg: var(--ae-primary);

  /* Pagination */
  --bs-pagination-color:         var(--ae-primary);
  --bs-pagination-border-color:  var(--ae-border-2);
  --bs-pagination-hover-color:   var(--ae-primary-hover);
  --bs-pagination-hover-bg:      var(--ae-primary-subtle);
  --bs-pagination-hover-border-color: var(--ae-primary);
  --bs-pagination-active-bg:     var(--ae-primary);
  --bs-pagination-active-border-color: var(--ae-primary);
  --bs-pagination-disabled-color: var(--ae-text-4);

  /* Toast */
  --bs-toast-bg:            var(--ae-surface-raised);
  --bs-toast-border-color:  var(--ae-border-1);
  --bs-toast-header-bg:     var(--ae-surface);
  --bs-toast-border-radius: var(--ae-r-lg);

  /* Popover */
  --bs-popover-bg:            var(--ae-surface);
  --bs-popover-border-color:  var(--ae-border-1);
  --bs-popover-border-radius: var(--ae-r-lg);

  /* Tooltip */
  --bs-tooltip-bg: var(--ae-neutral-800);
  --bs-tooltip-border-radius: var(--ae-r-md);

  /* Offcanvas */
  --bs-offcanvas-bg:           var(--ae-surface);
  --bs-offcanvas-border-color: var(--ae-border-1);
}

/* ── 4. Bootstrap Token Override (dark) ───────────────────── */
html[data-bs-theme="dark"] {
  --bs-primary:              #7066ef;
  --bs-primary-rgb:          112, 102, 239;
  --bs-primary-text:         #9b96f4;
  --bs-primary-bg-subtle:    rgba(53, 37, 205, 0.18);
  --bs-primary-border-subtle: rgba(53, 37, 205, 0.4);

  --bs-body-color:    var(--ae-text-1);
  --bs-body-bg:       var(--ae-canvas);
  --bs-secondary-color: var(--ae-text-3);

  --bs-border-color:             var(--ae-border-1);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.08);

  --bs-link-color:       #9b96f4;
  --bs-link-color-rgb:   155, 150, 244;
  --bs-link-hover-color: #c5c2f9;

  --bs-card-bg:           var(--ae-surface);
  --bs-card-border-color: var(--ae-border-1);
  --bs-card-cap-bg:       transparent;

  --bs-modal-bg:             var(--ae-surface);
  --bs-modal-border-color:   var(--ae-border-2);
  --bs-modal-header-border-color: var(--ae-border-1);
  --bs-modal-footer-border-color: var(--ae-border-1);

  --bs-table-color:       var(--ae-text-1);
  --bs-table-border-color: var(--ae-border-1);
  --bs-table-striped-bg:  rgba(112, 102, 239, 0.06);
  --bs-table-hover-bg:    rgba(112, 102, 239, 0.09);

  --bs-dropdown-bg:            var(--ae-surface-raised);
  --bs-dropdown-border-color:  var(--ae-border-2);
  --bs-dropdown-item-hover-bg: rgba(112, 102, 239, 0.12);
  --bs-dropdown-item-hover-color: #c5c2f9;
  --bs-dropdown-link-active-bg: #3525cd;

  --bs-list-group-bg:           var(--ae-surface);
  --bs-list-group-border-color: var(--ae-border-1);
  --bs-list-group-action-hover-bg: rgba(112, 102, 239, 0.1);

  --bs-pagination-color:         #9b96f4;
  --bs-pagination-border-color:  var(--ae-border-2);
  --bs-pagination-hover-color:   #c5c2f9;
  --bs-pagination-hover-bg:      rgba(112, 102, 239, 0.12);
  --bs-pagination-hover-border-color: rgba(112, 102, 239, 0.4);
  --bs-pagination-active-bg:     #3525cd;
  --bs-pagination-active-border-color: #3525cd;
  --bs-pagination-disabled-color: var(--ae-text-4);
  --bs-pagination-bg:            var(--ae-surface);

  --bs-toast-bg:           var(--ae-surface-raised);
  --bs-toast-border-color: var(--ae-border-2);
  --bs-toast-header-bg:    var(--ae-surface);

  --bs-popover-bg:           var(--ae-surface-raised);
  --bs-popover-border-color: var(--ae-border-2);

  --bs-tooltip-bg: var(--ae-neutral-200);

  --bs-offcanvas-bg:           var(--ae-surface);
  --bs-offcanvas-border-color: var(--ae-border-2);
}

/* ── 5. Re-point shyft-buttons.css tokens to Aether indigo ── */
:root {
  --sb-primary-rest: #3525cd;
  --sb-gradient: linear-gradient(82.3deg, rgba(53, 37, 205, 1) 10.8%, rgba(77, 68, 227, 1) 94.3%);
}

html[data-bs-theme="dark"] {
  --sb-primary-rest: #3525cd;
  --sb-base: #182040;
  --sb-base-text: #e2e5f0;
  --sb-gradient: linear-gradient(82.3deg, rgba(53, 37, 205, 1) 10.8%, rgba(85, 72, 232, 1) 94.3%);
}

html[data-bs-theme="light"] {
  --sb-primary-rest: #3525cd;
  --sb-base: #e8ebf5;
}

/* ── 6. Re-point shyft-fields.css tokens to Aether indigo ─── */
:root {
  --sf-accent:        #3525cd;
  --sf-accent-2:      #7066ef;
  --sf-focus-ring-1:  rgba(53, 37, 205, 0.26);
  --sf-focus-ring-2:  rgba(53, 37, 205, 0.16);
  --sf-focus-ring-3:  rgba(53, 37, 205, 0.08);
  --sf-border:        #d8dceb;
  --sf-border-strong: #c2c8de;
}

html[data-bs-theme="dark"] {
  --sf-accent:        #7066ef;
  --sf-accent-2:      #9b96f4;
  --sf-focus-ring-1:  rgba(112, 102, 239, 0.3);
  --sf-focus-ring-2:  rgba(112, 102, 239, 0.18);
  --sf-focus-ring-3:  rgba(112, 102, 239, 0.1);
  --sf-bg:            var(--ae-surface-input);
  --sf-text:          var(--ae-text-1);
  --sf-muted:         var(--ae-text-3);
  --sf-border:        var(--ae-border-2);
  --sf-border-strong: var(--ae-border-3);
}

/* ── 7. Re-point shyft-checkboxes.css tokens to Aether indigo */
:root {
  --scb-accent:  #3525cd;
  --scb-bg:      var(--ae-surface-input);
  --scb-border:  var(--ae-border-2);
}

html[data-bs-theme="dark"] {
  --scb-accent:  #7066ef;
  --scb-bg:      var(--ae-surface-input);
  --scb-border:  var(--ae-border-2);
  --scb-text:    var(--ae-text-1);
}

/* ── 7b. Re-point shyft-dropdowns.css tokens to Aether indigo */
:root {
  --sd-accent:          #3525cd;
  --sd-surface-hover:   rgba(53, 37, 205, 0.07);
  --sd-surface-active:  rgba(53, 37, 205, 0.12);
}

html[data-bs-theme="light"] {
  --sd-accent:          #3525cd;
  --sd-surface-hover:   rgba(53, 37, 205, 0.06);
  --sd-surface-active:  rgba(53, 37, 205, 0.1);
}

html[data-bs-theme="dark"] {
  --sd-surface-hover:   rgba(112, 102, 239, 0.12);
  --sd-surface-active:  rgba(112, 102, 239, 0.18);
}

/* ── 7c. Re-point platform-fonts.css variable ────────────── */
:root {
  --platform-font-sans: var(--ae-font-sans);
}

/* ── 8. Sidebar color overrides (wins over admin-sidebar-v2.css) */
#layout-wrapper.admin-sidebar-v2 {
  --sb-bg:              #0d1228;
  --sb-text:            #dce0f0;
  --sb-text-muted:      rgba(220, 224, 240, 0.65);
  --sb-hover:           rgba(112, 102, 239, 0.08);
  --sb-active-bg:       rgba(53, 37, 205, 0.22);
  --sb-icon-bg:         rgba(255, 255, 255, 0.05);
  --sb-icon-bg-hover:   rgba(112, 102, 239, 0.12);
  --sb-icon-bg-active:  rgba(53, 37, 205, 0.2);
  --sb-icon-border:     rgba(255, 255, 255, 0.08);
  --sb-icon-border-hover:  rgba(112, 102, 239, 0.3);
  --sb-icon-border-active: rgba(112, 102, 239, 0.55);
}

html[data-bs-theme="light"] #layout-wrapper.admin-sidebar-v2 {
  --sb-bg:              #ffffff;
  --sb-text:            #0c1023;
  --sb-text-muted:      rgba(12, 16, 35, 0.6);
  --sb-hover:           rgba(53, 37, 205, 0.05);
  --sb-active-bg:       rgba(53, 37, 205, 0.09);
  --sb-icon-bg:         rgba(53, 37, 205, 0.05);
  --sb-icon-bg-hover:   rgba(53, 37, 205, 0.09);
  --sb-icon-bg-active:  rgba(53, 37, 205, 0.12);
  --sb-icon-border:     rgba(53, 37, 205, 0.1);
  --sb-icon-border-hover:  rgba(53, 37, 205, 0.22);
  --sb-icon-border-active: rgba(53, 37, 205, 0.42);
}

/* ── 9. Global Typography ─────────────────────────────────── */
html, body {
  font-family: var(--ae-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
h2, .h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
h3, .h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
h4, .h4 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h5, .h5 {
  font-size: 1rem;
  font-weight: 600;
}
h6, .h6 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.card-title {
  font-weight: 600;
}

/* ── 10. Card Component ───────────────────────────────────── */
.card {
  border-radius: var(--ae-r-lg) !important;
  border: 1px solid var(--ae-border-1) !important;
  background-color: var(--ae-surface) !important;
  box-shadow: var(--ae-shadow-sm) !important;
}

.card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--ae-border-1) !important;
  padding: 1rem 1.25rem;
}

.card-footer {
  background-color: transparent !important;
  border-top: 1px solid var(--ae-border-1) !important;
  padding: 0.875rem 1.25rem;
}

/* Tinted card headers used throughout the Velzon template */
.card-header.bg-light,
.card-header.bg-soft-light {
  background-color: transparent !important;
}

html[data-bs-theme="light"] .card-header.bg-light {
  background-color: var(--ae-neutral-50) !important;
}

html[data-bs-theme="dark"] .card-header.bg-light,
html[data-bs-theme="dark"] .card-header.bg-soft-light {
  background-color: rgba(255, 255, 255, 0.025) !important;
}

/* ── 11. Table ────────────────────────────────────────────── */
.table {
  --bs-table-color:        var(--ae-text-1);
  --bs-table-border-color: var(--ae-border-1);
  font-size: 0.875rem;
}

.table thead th,
.table > thead > tr > th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ae-text-3);
  border-bottom-width: 1px;
}

html[data-bs-theme="light"] .table-light {
  --bs-table-bg: var(--ae-neutral-50);
  --bs-table-color: var(--ae-text-1);
  --bs-table-border-color: var(--ae-border-1);
}

html[data-bs-theme="dark"] .table-light {
  --bs-table-bg: rgba(255, 255, 255, 0.03);
  --bs-table-color: var(--ae-text-2);
  --bs-table-border-color: var(--ae-border-1);
}

/* ── 12. Badge ────────────────────────────────────────────── */
.badge {
  border-radius: var(--ae-r-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.3em 0.65em;
}

.bg-primary,
.badge.bg-primary {
  background-color: var(--ae-primary) !important;
  color: #fff !important;
}

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

/* ── 13. Alert ────────────────────────────────────────────── */
.alert {
  border-radius: var(--ae-r-lg) !important;
  font-size: 0.875rem;
}

/* ── 14. Form Labels & Controls ───────────────────────────── */
.form-label,
label.form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ae-text-2);
  margin-bottom: 0.375rem;
  letter-spacing: 0.01em;
}

.form-text {
  font-size: 0.775rem;
  color: var(--ae-text-3);
}

.input-group-text {
  background-color: var(--ae-surface-input);
  border-color: var(--ae-border-2);
  color: var(--ae-text-3);
  font-size: 0.875rem;
}

html[data-bs-theme="dark"] .input-group-text {
  background-color: var(--ae-surface-input);
  border-color: var(--ae-border-2);
  color: var(--ae-text-3);
}

/* ── 15. Select2 / Choices.js (if used) ──────────────────── */
.select2-container--bootstrap-5 .select2-selection {
  border-color: var(--ae-border-2) !important;
  background-color: var(--ae-surface-input) !important;
  border-radius: var(--ae-r-md) !important;
}

/* ── 16. Dropdown ─────────────────────────────────────────── */
.dropdown-menu {
  background-color: var(--ae-surface-raised);
  border: 1px solid var(--ae-border-1);
  border-radius: var(--ae-r-lg);
  box-shadow: var(--ae-shadow-lg);
  padding: 0.375rem;
  font-size: 0.875rem;
}

.dropdown-item {
  border-radius: var(--ae-r-sm);
  padding: 0.5rem 0.75rem;
  color: var(--ae-text-2);
  transition: background-color var(--ae-t-fast), color var(--ae-t-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--ae-primary-subtle);
  color: var(--ae-primary);
}

html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: rgba(112, 102, 239, 0.12);
  color: #c5c2f9;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--ae-primary);
  color: #fff;
}

.dropdown-divider {
  border-color: var(--ae-border-1);
  margin: 0.25rem 0;
}

.dropdown-header {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ae-text-3);
  padding: 0.5rem 0.75rem 0.25rem;
}

/* ── 17. Nav Tabs & Pills ─────────────────────────────────── */
.nav-tabs {
  border-bottom-color: var(--ae-border-1);
  gap: 0.25rem;
}

.nav-tabs .nav-link {
  border-radius: var(--ae-r-md) var(--ae-r-md) 0 0;
  border-color: transparent;
  color: var(--ae-text-3);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.625rem 1rem;
  transition: color var(--ae-t-fast), border-color var(--ae-t-fast);
}

.nav-tabs .nav-link:hover {
  color: var(--ae-primary);
  border-color: transparent;
}

.nav-tabs .nav-link.active {
  color: var(--ae-primary);
  background-color: var(--ae-surface);
  border-color: var(--ae-border-1) var(--ae-border-1) var(--ae-surface);
  font-weight: 600;
}

.nav-pills .nav-link {
  border-radius: var(--ae-r-md);
  color: var(--ae-text-2);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
}

.nav-pills .nav-link:hover {
  color: var(--ae-primary);
  background-color: var(--ae-primary-subtle);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--ae-primary);
  color: #fff;
  font-weight: 600;
}

/* ── 18. Pagination ───────────────────────────────────────── */
.page-link {
  border-radius: var(--ae-r-sm) !important;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
}

.page-item.active .page-link {
  background-color: var(--ae-primary) !important;
  border-color: var(--ae-primary) !important;
}

/* ── 19. Modal ────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--ae-r-xl) !important;
  border: 1px solid var(--ae-border-1) !important;
  background-color: var(--ae-surface) !important;
  box-shadow: var(--ae-shadow-xl) !important;
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid var(--ae-border-1) !important;
  padding: 1.25rem 1.5rem;
}

.modal-header .modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ae-text-1);
}

.modal-body {
  padding: 1.25rem 1.5rem;
}

.modal-footer {
  border-top: 1px solid var(--ae-border-1) !important;
  padding: 1rem 1.5rem;
  gap: 0.5rem;
}

/* ── 20. Topbar ───────────────────────────────────────────── */
#page-topbar {
  background-color: var(--ae-surface) !important;
  border-bottom: 1px solid var(--ae-border-1) !important;
  box-shadow: var(--ae-shadow-xs) !important;
}

html[data-bs-theme="dark"] #page-topbar {
  background-color: var(--ae-surface) !important;
  border-bottom-color: var(--ae-border-1) !important;
}

/* ── 21. Page Title Box ───────────────────────────────────── */
.page-title-box {
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--ae-border-1);
}

.page-title-box h4,
.page-title-box .h4 {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--ae-text-1);
  letter-spacing: -0.01em;
}

/* ── 22. Breadcrumb ───────────────────────────────────────── */
.breadcrumb {
  font-size: 0.8125rem;
  font-weight: 500;
}

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

.breadcrumb-item a:hover {
  color: var(--ae-primary);
}

.breadcrumb-item.active {
  color: var(--ae-text-3);
  font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--ae-text-4);
}

/* ── 23. Progress Bar ─────────────────────────────────────── */
.progress {
  background-color: var(--ae-border-1);
  border-radius: var(--ae-r-pill);
  height: 0.5rem;
}

.progress-bar {
  background-color: var(--ae-primary);
  border-radius: var(--ae-r-pill);
}

/* ── 24. Spinner ──────────────────────────────────────────── */
.spinner-border,
.spinner-grow {
  color: var(--ae-primary);
}

/* ── 25. List Group ───────────────────────────────────────── */
.list-group-item {
  background-color: var(--ae-surface);
  border-color: var(--ae-border-1);
  color: var(--ae-text-1);
  font-size: 0.875rem;
}

html[data-bs-theme="dark"] .list-group-item {
  background-color: var(--ae-surface);
  border-color: var(--ae-border-1);
}

.list-group-item.active {
  background-color: var(--ae-primary);
  border-color: var(--ae-primary);
}

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

html[data-bs-theme="dark"] .list-group-item-action:hover,
html[data-bs-theme="dark"] .list-group-item-action:focus {
  background-color: rgba(112, 102, 239, 0.1);
  color: #9b96f4;
}

/* ── 26. Accordion ────────────────────────────────────────── */
.accordion-item {
  background-color: var(--ae-surface);
  border-color: var(--ae-border-1);
}

.accordion-header button,
.accordion-button {
  background-color: var(--ae-surface);
  color: var(--ae-text-1);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--ae-r-md) !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--ae-primary-subtle);
  color: var(--ae-primary);
  box-shadow: none;
}

html[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: rgba(53, 37, 205, 0.18);
  color: #9b96f4;
}

.accordion-button::after {
  filter: none;
}

html[data-bs-theme="dark"] .accordion-button {
  background-color: var(--ae-surface);
  color: var(--ae-text-1);
}

html[data-bs-theme="dark"] .accordion-button::after {
  filter: invert(1);
}

/* ── 27. Offcanvas ────────────────────────────────────────── */
.offcanvas {
  background-color: var(--ae-surface);
  border-color: var(--ae-border-2);
}

/* ── 28. Toast ────────────────────────────────────────────── */
.toast {
  background-color: var(--ae-surface-raised);
  border-color: var(--ae-border-1);
  border-radius: var(--ae-r-lg);
  box-shadow: var(--ae-shadow-lg);
}

.toast-header {
  background-color: var(--ae-surface);
  border-bottom-color: var(--ae-border-1);
  color: var(--ae-text-1);
  font-weight: 600;
}

/* ── 29. Popover & Tooltip ────────────────────────────────── */
.popover {
  background-color: var(--ae-surface-raised);
  border-color: var(--ae-border-1);
  border-radius: var(--ae-r-lg);
  box-shadow: var(--ae-shadow-lg);
  font-size: 0.875rem;
}

.popover-header {
  background-color: var(--ae-surface);
  border-bottom-color: var(--ae-border-1);
  font-weight: 600;
  border-radius: var(--ae-r-lg) var(--ae-r-lg) 0 0;
}

.tooltip .tooltip-inner {
  background-color: var(--ae-neutral-900);
  border-radius: var(--ae-r-md);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35rem 0.65rem;
}

/* ── 30. Scrollbar (webkit) ───────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--ae-border-2);
  border-radius: var(--ae-r-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ae-border-3);
}

html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--ae-border-2);
}

html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--ae-border-3);
}

/* ── 31. Focus Ring (Accessibility) ──────────────────────── */
:focus-visible {
  outline: 2px solid var(--ae-primary);
  outline-offset: 2px;
}

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

/* ── 32. Text Color Helpers (Bootstrap compat) ────────────── */
.text-primary {
  color: var(--ae-primary) !important;
}

html[data-bs-theme="dark"] .text-primary {
  color: #9b96f4 !important;
}

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

/* ── 33. Link style ───────────────────────────────────────── */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):not(.card):not([class*="badge"]):not([class*="alert"]) {
  color: var(--ae-primary);
  text-decoration: none;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):not(.card):not([class*="badge"]):not([class*="alert"]):hover {
  color: var(--ae-primary-hover);
  text-decoration: underline;
}

html[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):not(.card):not([class*="badge"]):not([class*="alert"]) {
  color: #9b96f4;
}

html[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):not(.card):not([class*="badge"]):not([class*="alert"]):hover {
  color: #c5c2f9;
}

/* ── 34. Velzon Stats / Widget Card overrides ─────────────── */
.mini-stats-wid .avatar-sm,
.mini-stats-wid .avatar-title {
  background-color: var(--ae-primary-subtle) !important;
  color: var(--ae-primary) !important;
}

/* Velzon colored avatar variants used in dashboards */
.avatar-title.bg-primary {
  background-color: var(--ae-primary) !important;
}

.avatar-title.bg-primary-subtle,
.avatar-title.bg-soft-primary {
  background-color: var(--ae-primary-subtle) !important;
  color: var(--ae-primary) !important;
}

/* ── 35. Velzon specific color-class overrides ────────────── */
.bg-soft-primary {
  background-color: var(--ae-primary-subtle) !important;
  color: var(--ae-primary) !important;
}

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

html[data-bs-theme="dark"] .text-primary { color: #9b96f4 !important; }
html[data-bs-theme="dark"] .bg-soft-primary { background-color: rgba(53, 37, 205, 0.18) !important; color: #9b96f4 !important; }

/* ── 36. Page Content & Layout Shell ─────────────────────── */
/* Light mode: canvas color for the content area */
html[data-bs-theme="light"] .main-content,
html[data-bs-theme="light"] #page-content-wrapper,
html[data-bs-theme="light"] .page-content {
  background-color: var(--ae-canvas) !important;
}

/* Dark mode: keep transparent so the particle canvas shows through */
html[data-bs-theme="dark"] .main-content,
html[data-bs-theme="dark"] #page-content-wrapper {
  background-color: transparent !important;
}

/* ── 37. Footer ───────────────────────────────────────────── */
.footer {
  background-color: var(--ae-surface) !important;
  border-top: 1px solid var(--ae-border-1) !important;
  color: var(--ae-text-3);
  font-size: 0.8125rem;
}

/* ── 38. Page Header / Section Dividers ───────────────────── */
hr {
  border-color: var(--ae-border-1);
  opacity: 1;
}

/* ── 39. Code blocks ──────────────────────────────────────── */
code {
  font-family: var(--ae-font-mono);
  font-size: 0.85em;
  color: var(--ae-primary);
  background-color: var(--ae-primary-subtle);
  border-radius: var(--ae-r-sm);
  padding: 0.15em 0.35em;
}

html[data-bs-theme="dark"] code {
  color: #9b96f4;
  background-color: rgba(53, 37, 205, 0.16);
}

pre {
  background-color: var(--ae-surface-input);
  border: 1px solid var(--ae-border-1);
  border-radius: var(--ae-r-lg);
  padding: 1rem 1.25rem;
  font-family: var(--ae-font-mono);
  font-size: 0.8125rem;
  color: var(--ae-text-1);
}

/* ── 40. Dashboard Stat-number highlight ─────────────────── */
.counter-value,
[data-target],
.fw-bold.text-primary,
.fw-semibold.text-primary {
  font-variant-numeric: tabular-nums;
}

/* ── 41. Responsive table wrapper ─────────────────────────── */
.table-responsive {
  border-radius: var(--ae-r-lg);
  overflow: hidden;
}

/* ── 42. Empty state (no data rows) ──────────────────────── */
.dataTables_empty,
td.dataTables_empty {
  color: var(--ae-text-3);
  font-size: 0.875rem;
  padding: 2rem !important;
}

/* ── 43. Form switches & checkboxes ──────────────────────── */
.form-check-input:checked {
  background-color: var(--ae-primary) !important;
  border-color: var(--ae-primary) !important;
}

.form-check-input:focus {
  border-color: var(--ae-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(53, 37, 205, 0.2) !important;
}

html[data-bs-theme="dark"] .form-check-input:not(:checked) {
  background-color: var(--ae-surface-input) !important;
  border-color: var(--ae-border-2) !important;
}

/* ── 44. Range input ──────────────────────────────────────── */
.form-range::-webkit-slider-thumb { background: var(--ae-primary); }
.form-range::-moz-range-thumb     { background: var(--ae-primary); border-color: var(--ae-primary); }

/* ── 45. DataTables integration ───────────────────────────── */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ae-primary) !important;
  color: #fff !important;
  border-color: var(--ae-primary) !important;
  border-radius: var(--ae-r-sm) !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--ae-primary-subtle) !important;
  color: var(--ae-primary) !important;
  border-color: transparent !important;
  border-radius: var(--ae-r-sm) !important;
}

.dataTables_wrapper .dataTables_filter input {
  border: 2px solid var(--ae-border-2) !important;
  border-radius: var(--ae-r-md) !important;
  background-color: var(--ae-surface-input) !important;
  color: var(--ae-text-1) !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ae-primary) !important;
  box-shadow: 0 0 0 3px rgba(53, 37, 205, 0.15) !important;
  outline: none;
}

/* ── 46. Select2 (Velzon often uses it) ───────────────────── */
.select2-container--default .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection {
  background-color: var(--ae-surface-input) !important;
  border-color: var(--ae-border-2) !important;
  border-radius: var(--ae-r-md) !important;
  color: var(--ae-text-1) !important;
}

.select2-dropdown {
  background-color: var(--ae-surface-raised) !important;
  border-color: var(--ae-border-1) !important;
  border-radius: var(--ae-r-lg) !important;
  box-shadow: var(--ae-shadow-lg) !important;
}

.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected] {
  background-color: var(--ae-primary) !important;
  color: #fff !important;
}

.select2-results__option {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}

/* ── 47. Toastr notification overrides ────────────────────── */
#toast-container > div {
  border-radius: var(--ae-r-lg) !important;
  box-shadow: var(--ae-shadow-lg) !important;
  font-family: var(--ae-font-sans) !important;
  font-size: 0.875rem !important;
  opacity: 1 !important;
}

#toast-container > .toast-success {
  background-color: var(--ae-success) !important;
}

#toast-container > .toast-error {
  background-color: var(--ae-danger) !important;
}

#toast-container > .toast-warning {
  background-color: var(--ae-warning) !important;
  color: #fff !important;
}

#toast-container > .toast-info {
  background-color: var(--ae-info) !important;
}

/* ── 48. Sweet Alert 2 ────────────────────────────────────── */
.swal2-popup {
  font-family: var(--ae-font-sans) !important;
  border-radius: var(--ae-r-xl) !important;
  background-color: var(--ae-surface) !important;
  color: var(--ae-text-1) !important;
}

html[data-bs-theme="dark"] .swal2-popup {
  background-color: var(--ae-surface) !important;
  color: var(--ae-text-1) !important;
}

.swal2-confirm {
  background-color: var(--ae-primary) !important;
  border-radius: var(--ae-r-2xl) !important;
  font-family: var(--ae-font-sans) !important;
}

.swal2-cancel {
  border-radius: var(--ae-r-2xl) !important;
  font-family: var(--ae-font-sans) !important;
}

.swal2-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--ae-text-1) !important;
}

/* ── 49. Flatpickr / Datepicker ───────────────────────────── */
.flatpickr-calendar {
  background-color: var(--ae-surface-raised);
  border-color: var(--ae-border-1);
  border-radius: var(--ae-r-lg);
  box-shadow: var(--ae-shadow-xl);
  font-family: var(--ae-font-sans);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background-color: var(--ae-primary) !important;
  border-color: var(--ae-primary) !important;
}

.flatpickr-day:hover {
  background-color: var(--ae-primary-subtle) !important;
  color: var(--ae-primary) !important;
}

/* ── 50. Sidebar active link text color ───────────────────── */
#layout-wrapper.admin-sidebar-v2 .app-menu .nav-link.active {
  color: #c5c2f9 !important;
}

html[data-bs-theme="light"] #layout-wrapper.admin-sidebar-v2 .app-menu .nav-link.active {
  color: var(--ae-primary) !important;
}

/* ── 51. Outline button variants ──────────────────────────── */
.btn-outline-primary {
  color: var(--ae-primary) !important;
  border-color: var(--ae-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  background-color: var(--ae-primary) !important;
  color: #fff !important;
  border-color: var(--ae-primary) !important;
}

html[data-bs-theme="dark"] .btn-outline-primary {
  color: #9b96f4 !important;
  border-color: #7066ef !important;
}

html[data-bs-theme="dark"] .btn-outline-primary:hover {
  background-color: #3525cd !important;
  color: #fff !important;
  border-color: #3525cd !important;
}

/* ── 52. Velzon topbar search ─────────────────────────────── */
#search-options .form-control:focus {
  border-color: var(--ae-primary);
  box-shadow: var(--ae-shadow-focus);
}

/* ── 53. Velzon Notification badge ────────────────────────── */
.notification-actions .badge {
  background-color: var(--ae-primary) !important;
}

/* ── 54. ApexCharts integration ───────────────────────────── */
.apexcharts-tooltip {
  background-color: var(--ae-surface-raised) !important;
  border: 1px solid var(--ae-border-1) !important;
  border-radius: var(--ae-r-lg) !important;
  box-shadow: var(--ae-shadow-lg) !important;
  font-family: var(--ae-font-sans) !important;
}

.apexcharts-tooltip-title {
  background-color: var(--ae-surface) !important;
  border-bottom: 1px solid var(--ae-border-1) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
}

.apexcharts-tooltip-text {
  font-size: 0.8125rem !important;
  color: var(--ae-text-1) !important;
}

/* ── 55. Utility additions ────────────────────────────────── */
.text-indigo { color: var(--ae-primary); }
.bg-indigo   { background-color: var(--ae-primary) !important; color: #fff; }
.bg-indigo-subtle { background-color: var(--ae-primary-subtle) !important; color: var(--ae-primary) !important; }

/* Gap shorthand helpers */
.gap-xs { gap: 0.25rem !important; }
.gap-sm { gap: 0.5rem !important; }

/* Tabular numbers for all data cells */
td, th { font-variant-numeric: tabular-nums; }

/* ── 56. Velzon --vz-* variable overrides (drive ApexCharts + widget JS) */
:root {
  --vz-primary:              #3525cd;
  --vz-primary-rgb:          53, 37, 205;
  --vz-primary-text-emphasis: #2619b3;
  --vz-primary-bg-subtle:    #eaebfd;
  --vz-primary-border-subtle: #c5c2f9;

  --vz-success:              #16a34a;
  --vz-success-rgb:          22, 163, 74;
  --vz-success-bg-subtle:    #dcfce7;
  --vz-warning:              #d97706;
  --vz-warning-rgb:          217, 119, 6;
  --vz-warning-bg-subtle:    #fef3c7;
  --vz-danger:               #dc2626;
  --vz-danger-rgb:           220, 38, 38;
  --vz-danger-bg-subtle:     #fee2e2;
  --vz-info:                 #0891b2;
  --vz-info-rgb:             8, 145, 178;

  --vz-body-color:           var(--ae-text-1);
  --vz-body-color-rgb:       12, 16, 35;
  --vz-secondary-color:      var(--ae-text-3);
  --vz-secondary-color-rgb:  107, 114, 128;
  --vz-secondary-bg:         var(--ae-surface);
  --vz-secondary-bg-rgb:     255, 255, 255;
  --vz-tertiary-bg:          var(--ae-neutral-50);

  --vz-border-color:         var(--ae-border-1);
  --vz-border-color-rgb:     229, 232, 239;

  --vz-card-bg:              var(--ae-surface);
  --vz-card-bg-rgb:          255, 255, 255;

  --vz-input-bg:             var(--ae-surface-input);
  --vz-input-border:         var(--ae-border-2);

  --vz-light:                var(--ae-neutral-50);
  --vz-light-rgb:            248, 249, 252;
}

html[data-bs-theme="dark"] {
  --vz-primary:              #7066ef;
  --vz-primary-rgb:          112, 102, 239;
  --vz-primary-bg-subtle:    rgba(53, 37, 205, 0.18);

  --vz-body-color:           var(--ae-text-1);
  --vz-body-color-rgb:       226, 229, 240;
  --vz-secondary-color:      var(--ae-text-3);
  --vz-secondary-color-rgb:  99, 107, 133;
  --vz-secondary-bg:         var(--ae-surface);
  --vz-secondary-bg-rgb:     13, 18, 40;
  --vz-tertiary-bg:          var(--ae-surface-raised);

  --vz-border-color:         var(--ae-border-1);
  --vz-border-color-rgb:     24, 32, 64;

  --vz-card-bg:              var(--ae-surface);
  --vz-card-bg-rgb:          13, 18, 40;

  --vz-input-bg:             var(--ae-surface-input);
  --vz-input-border:         var(--ae-border-2);

  --vz-light:                var(--ae-surface-raised);
}