/* Red Hat Display - latin-ext italic */
@font-face {
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/red-hat-display/red-hat-display-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Red Hat Display - latin italic */
@font-face {
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/red-hat-display/red-hat-display-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Red Hat Display - latin-ext normal */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/red-hat-display/red-hat-display-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Red Hat Display - latin normal */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/red-hat-display/red-hat-display-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Red Hat Mono - latin-ext italic */
@font-face {
  font-family: 'Red Hat Mono';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/red-hat-mono/red-hat-mono-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Red Hat Mono - latin italic */
@font-face {
  font-family: 'Red Hat Mono';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/red-hat-mono/red-hat-mono-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Red Hat Mono - latin-ext normal */
@font-face {
  font-family: 'Red Hat Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/red-hat-mono/red-hat-mono-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Red Hat Mono - latin normal */
@font-face {
  font-family: 'Red Hat Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/red-hat-mono/red-hat-mono-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------- */
/* 1. ROOT DESIGN TOKENS & CSS VARIABLES                                      */
/* -------------------------------------------------------------------------- */
:root {
  /* Layout Architecture & Structural Tokens */
  --cx-theme-navbar-top-height: 4rem;
  --cx-theme-navbar-vertical-width: 15.875rem;
  --cx-theme-navbar-vertical-collapsed-width: 4rem;
  --cx-theme-navbar-footer-height: 4rem;
  --cx-theme-footer-height: 4rem;
  --cx-theme-navbar-bg: #ffffff;
  --cx-theme-navbar-top-bg-color: var(--cx-theme-navbar-bg);
  --cx-theme-navbar-vertical-bg-color: var(--cx-theme-navbar-bg);

  /* Brand Primary Colors */
  --cx-theme-primary: #3874ff;
  --cx-theme-primary-hover: #2563eb;
  --cx-theme-primary-rgb: 56, 116, 255;
  --cx-theme-primary-subtle: rgba(56, 116, 255, 0.12);

  /* Brand Secondary Colors */
  --cx-theme-secondary: #525b75;
  --cx-theme-secondary-hover: #404963;
  --cx-theme-secondary-rgb: 82, 91, 117;
  --cx-theme-secondary-subtle: rgba(82, 91, 117, 0.12);

  /* Accent & Semantic Palette */
  --cx-theme-success: #25b865;
  --cx-theme-success-rgb: 37, 184, 101;
  --cx-theme-success-subtle: rgba(37, 184, 101, 0.12);

  --cx-theme-info: #00d3be;
  --cx-theme-info-rgb: 0, 211, 190;
  --cx-theme-info-subtle: rgba(0, 211, 190, 0.12);

  --cx-theme-warning: #e5780b;
  --cx-theme-warning-rgb: 229, 120, 11;
  --cx-theme-warning-subtle: rgba(229, 120, 11, 0.12);

  --cx-theme-danger: #fa3b1d;
  --cx-theme-danger-rgb: 250, 59, 29;
  --cx-theme-danger-subtle: rgba(250, 59, 29, 0.12);

  /* Surface & Background */
  --cx-theme-bg-body: #f5f7fa;
  --cx-theme-bg-surface: #ffffff;
  --cx-theme-bg-elevated: #ffffff;
  --cx-theme-border-color: rgba(203, 213, 225, 0.7);

  /* Typography */
  --cx-theme-font-family: 'Red Hat Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cx-theme-font-sans-serif: var(--cx-theme-font-family);
  --cx-theme-font-monospace: 'Red Hat Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --cx-theme-text-primary: #141824;
  --cx-theme-text-secondary: #525b75;
  --cx-theme-text-muted: #858d9d;

  /* Elevation Shadows */
  --cx-theme-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --cx-theme-shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.1), 0 1px 2px -1px rgba(16, 24, 40, 0.1);
  --cx-theme-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --cx-theme-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --cx-theme-shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);

  /* Glassmorphism & Radii */
  --cx-theme-radius-sm: 0.375rem;
  --cx-theme-radius-md: 0.5rem;
  --cx-theme-radius-lg: 0.75rem;
  --cx-theme-radius-xl: 1rem;
  --cx-theme-radius-full: 9999px;
  /* Standardized Project-Wide Border Radius Tokens (6px / 0.375rem Default) */
  --cx-theme-radius-default: var(--cx-theme-radius-sm);
  --cx-theme-border-radius: var(--cx-theme-radius-sm);
  --cx-theme-border-radius-sm: var(--cx-theme-radius-sm);
  --cx-theme-border-radius-lg: var(--cx-theme-radius-sm);
  --cx-theme-card-border-radius: var(--cx-theme-radius-sm);
  --cx-theme-card-inner-border-radius: calc(var(--cx-theme-radius-sm) - 1px);
  --cx-theme-btn-border-radius: var(--cx-theme-radius-sm);
  --cx-theme-badge-border-radius: var(--cx-theme-radius-sm);
  --cx-theme-transition-fast: 0.15s ease-in-out;
  --cx-theme-transition-normal: 0.25s ease-in-out;
}

html.navbar-vertical-collapsed,
:root.navbar-vertical-collapsed {
  --cx-theme-navbar-vertical-width: 4rem;
}

/* Closing phase: reuse the final width without activating collapsed layout. */
html.navbar-vertical-closing,
:root.navbar-vertical-closing {
  --cx-theme-navbar-vertical-width: 4rem;
  --cx-theme-sidebar-width-delay: 0.18s;
}

html:not(.navbar-vertical-collapsed):not(.navbar-vertical-closing) {
  --cx-theme-sidebar-content-delay: 0.26s;
}

/* Dark Mode Overrides */
[data-bs-theme="dark"] {
  --cx-theme-bg-body: #0f111a;
  --cx-theme-bg-surface: #141824;
  --cx-theme-bg-elevated: #222834;
  --cx-theme-navbar-bg: #141824;
  --cx-theme-navbar-top-bg-color: #141824;
  --cx-theme-navbar-vertical-bg-color: #141824;
  --cx-theme-navbar-vertical-collapsed-menu-bg: #141824;
  --cx-theme-border-color: rgba(255, 255, 255, 0.08);
  --cx-theme-text-primary: #f8fafc;
  --cx-theme-text-secondary: #94a3b8;
  --cx-theme-text-muted: #64748b;
  --cx-theme-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --cx-theme-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5);
  --cx-theme-shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.6);
}

/* -------------------------------------------------------------------------- */
/* 2. BASE & TYPOGRAPHY ENHANCEMENTS                                         */
/* -------------------------------------------------------------------------- */
body {
  font-family: var(--cx-theme-font-family) !important;
  color: var(--cx-theme-text-primary);
  background-color: var(--cx-theme-bg-body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code,
kbd,
samp,
pre,
.text-monospace {
  font-family: var(--cx-theme-font-monospace) !important;
}


/* -------------------------------------------------------------------------- */
/* 3. CARD & CONTAINER SYSTEM (DRY)                                          */
/* -------------------------------------------------------------------------- */
.card,
.cx-card {
  --cx-theme-card-border-radius: var(--cx-theme-radius-sm);
  --cx-theme-card-inner-border-radius: calc(var(--cx-theme-radius-sm) - 1px);
  border-radius: var(--cx-theme-radius-sm);
  border: 1px solid var(--cx-theme-border-color);
  box-shadow: var(--cx-theme-shadow-xs);
  transition: box-shadow var(--cx-theme-transition-normal), transform var(--cx-theme-transition-normal);
}

.card-header:first-child {
  border-top-left-radius: calc(var(--cx-theme-radius-sm) - 1px);
  border-top-right-radius: calc(var(--cx-theme-radius-sm) - 1px);
}

.card-footer:last-child {
  border-bottom-left-radius: calc(var(--cx-theme-radius-sm) - 1px);
  border-bottom-right-radius: calc(var(--cx-theme-radius-sm) - 1px);
}

.card-img-top {
  border-top-left-radius: calc(var(--cx-theme-radius-sm) - 1px);
  border-top-right-radius: calc(var(--cx-theme-radius-sm) - 1px);
}

.card-img-bottom {
  border-bottom-left-radius: calc(var(--cx-theme-radius-sm) - 1px);
  border-bottom-right-radius: calc(var(--cx-theme-radius-sm) - 1px);
}

.card:hover,
.cx-card-hover:hover {
  box-shadow: var(--cx-theme-shadow-md);
}

.cx-card-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

[data-bs-theme="dark"] .cx-card-glass {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* -------------------------------------------------------------------------- */
/* 4. BUTTONS & INTERACTIVE ELEMENTS                                         */
/* -------------------------------------------------------------------------- */
.btn {
  font-weight: 600;
  border-radius: var(--cx-theme-radius-sm) !important;
  transition: all var(--cx-theme-transition-fast);
}

.btn.rounded-pill {
  border-radius: var(--cx-theme-radius-full) !important;
}

.btn-primary {
  background-color: var(--cx-theme-primary);
  border-color: var(--cx-theme-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--cx-theme-primary-hover);
  border-color: var(--cx-theme-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--cx-theme-primary-rgb), 0.35);
}

.btn-soft-primary {
  color: var(--cx-theme-primary);
  background-color: var(--cx-theme-primary-subtle);
  border-color: transparent;
}

.btn-soft-primary:hover {
  background-color: rgba(var(--cx-theme-primary-rgb), 0.2);
  color: var(--cx-theme-primary-hover);
}

.btn-soft-success {
  color: var(--cx-theme-success);
  background-color: var(--cx-theme-success-subtle);
  border-color: transparent;
}

.btn-soft-success:hover {
  background-color: rgba(var(--cx-theme-success-rgb), 0.2);
}

.btn-soft-danger {
  color: var(--cx-theme-danger);
  background-color: var(--cx-theme-danger-subtle);
  border-color: transparent;
}

.btn-soft-danger:hover {
  background-color: rgba(var(--cx-theme-danger-rgb), 0.2);
}

/* -------------------------------------------------------------------------- */
/* 5. BADGES & PILLS                                                          */
/* -------------------------------------------------------------------------- */
.badge,
.badge-subtle,
[class*="badge-"] {
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.35em 0.65em;
  border-radius: var(--cx-theme-radius-sm) !important;
}

.badge.rounded-pill,
.badge-subtle.rounded-pill {
  border-radius: var(--cx-theme-radius-full) !important;
}

.badge-cx-primary {
  background-color: var(--cx-theme-primary-subtle);
  color: var(--cx-theme-primary);
}

.badge-cx-success {
  background-color: var(--cx-theme-success-subtle);
  color: var(--cx-theme-success);
}

.badge-cx-warning {
  background-color: var(--cx-theme-warning-subtle);
  color: var(--cx-theme-warning);
}

.badge-cx-danger {
  background-color: var(--cx-theme-danger-subtle);
  color: var(--cx-theme-danger);
}

/* -------------------------------------------------------------------------- */
/* 6. NAVBAR & SIDEBAR NAVIGATION REFINEMENTS                                 */
/* -------------------------------------------------------------------------- */
.navbar-vertical,
.navbar-top,
.navbar-vertical .navbar-vertical-content {
  border-color: var(--cx-theme-border-color) !important;
  background-color: var(--cx-theme-navbar-bg) !important;
  background: var(--cx-theme-navbar-bg) !important;
}

.navbar-vertical {
  border-right: 1px solid var(--cx-theme-border-color) !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  width: var(--cx-theme-navbar-vertical-width, 15.875rem) !important;
  padding-top: var(--cx-theme-navbar-top-height, 4rem) !important;
  padding-bottom: var(--cx-theme-navbar-footer-height, 4rem) !important;
  z-index: 1020 !important;
  display: block !important;
  transition: width 0.26s cubic-bezier(0.2, 0, 0, 1) var(--cx-theme-sidebar-width-delay, 0s) !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

html:not(.navbar-vertical-collapsed) .navbar-vertical {
  width: var(--cx-theme-navbar-vertical-width, 15.875rem) !important;
}

html.navbar-vertical-collapsed .navbar-vertical,
.navbar-vertical-collapsed .navbar-vertical {
  width: var(--cx-theme-navbar-vertical-collapsed-width, 4rem) !important;
}

.navbar-top {
  border-bottom: 1px solid var(--cx-theme-border-color) !important;
}

.navbar-vertical .nav-link,
html:not(.navbar-vertical-collapsed) .navbar-vertical .nav-link,
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xxl .navbar-vertical-content .navbar-nav .nav-link,
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xl .navbar-vertical-content .navbar-nav .nav-link,
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-link,
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-md .navbar-vertical-content .navbar-nav .nav-link,
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-sm .navbar-vertical-content .navbar-nav .nav-link,
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xs .navbar-vertical-content .navbar-nav .nav-link {
  border-radius: var(--cx-theme-radius-sm) !important;
  width: calc(100% - 23px) !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 3px 12px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  color: var(--cx-theme-text-secondary);
  font-weight: 500;
  transition: width 0.26s cubic-bezier(0.2, 0, 0, 1) var(--cx-theme-sidebar-width-delay, 0s),
              background-color 0.2s ease,
              color 0.2s ease !important;
}

.navbar-vertical .nav-link > .d-flex,
.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link > .d-flex {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure all direct children inside nav-link flex container default to order 5 (after icon & text) */
.navbar-vertical .nav-link > .d-flex > * {
  order: 5;
}

/* 1. MANDATORY ORDER: Icon FIRST */
.navbar-vertical .nav-link .nav-link-icon,
.navbar-vertical .nav-link-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  order: 1 !important;
}

.navbar-vertical .nav-link .nav-link-icon svg,
.navbar-vertical .nav-link .nav-link-icon svg.lucide,
.navbar-vertical .nav-link-icon svg,
.navbar-vertical .nav-link-icon svg.lucide {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  display: block !important;
  margin: auto !important;
}

/* 2. MANDATORY ORDER: Text SECOND */
.navbar-vertical .nav-link .nav-link-text-wrapper,
.navbar-vertical .nav-link .nav-link-text {
  order: 2 !important;
  margin-left: 0.25rem !important;
  white-space: nowrap !important;
}

.navbar-vertical .nav-link .nav-link-text-wrapper .nav-link-text {
  margin-left: 0 !important;
}

html:not(.navbar-vertical-collapsed) .navbar-vertical .nav-link .nav-link-text-wrapper,
html:not(.navbar-vertical-collapsed) .navbar-vertical .nav-link .nav-link-text {
  opacity: 1 !important;
}

/* 3. MANDATORY ORDER: Everything else to the right (Badges, indicators, chevrons) */
.navbar-vertical .nav-link .nav-link-badge,
.navbar-vertical .nav-link .badge,
.navbar-vertical .nav-link-badge {
  order: 3 !important;
}

html:not(.navbar-vertical-collapsed) .navbar-vertical .nav-link .nav-link-badge,
html:not(.navbar-vertical-collapsed) .navbar-vertical .nav-link .badge {
  opacity: 1 !important;
}

.navbar-vertical .nav-link .new-page-indicator,
.navbar-vertical .new-page-indicator {
  order: 4 !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  min-height: 6px !important;
  max-width: 6px !important;
  max-height: 6px !important;
  margin-left: 0.25rem !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: currentColor !important;
  flex-shrink: 0 !important;
  transform: translateY(-4px) !important;
}

.navbar-vertical .new-page-indicator circle {
  fill: currentColor !important;
  stroke: none !important;
}

.navbar-vertical .new-page-indicator svg,
svg.new-page-indicator {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  min-height: 6px !important;
  max-width: 6px !important;
  max-height: 6px !important;
  display: block !important;
  fill: currentColor !important;
  stroke: none !important;
}

.navbar-vertical .dropdown-indicator-icon-wrapper {
  order: 10 !important;
  margin-left: auto !important;
  margin-right: 0.125rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1rem !important;
  height: 1rem !important;
}

[dir="rtl"] .navbar-vertical .dropdown-indicator-icon-wrapper {
  margin-left: 0.75rem !important;
  margin-right: auto !important;
}

html:not(.navbar-vertical-collapsed) .navbar-vertical .dropdown-indicator-icon-wrapper {
  opacity: 1 !important;
}

html:not(.navbar-vertical-collapsed) .navbar-vertical .nav-link:hover {
  color: var(--cx-theme-primary);
  background-color: var(--cx-theme-primary-subtle);
  border-radius: var(--cx-theme-radius-sm) !important;
}

html:not(.navbar-vertical-collapsed) .navbar-vertical .nav-link.active,
html:not(.navbar-vertical-collapsed) .navbar-vertical .navbar-nav .nav-link.active {
  color: var(--cx-theme-primary);
  background-color: var(--cx-theme-primary-subtle);
  border-radius: var(--cx-theme-radius-sm) !important;
  font-weight: 700;
}

/* -------------------------------------------------------------------------- */
/* 7. TABLES & DATA VISUALIZATION                                             */
/* -------------------------------------------------------------------------- */
.table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--cx-theme-text-muted);
  border-bottom: 2px solid var(--cx-theme-border-color);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.table tbody td {
  vertical-align: middle;
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
}

/* -------------------------------------------------------------------------- */
/* 8. FORMS, INPUTS, COMBOS & PROJECT-WIDE RADIUS STANDARDIZATION             */
/* -------------------------------------------------------------------------- */
.form-control,
.form-control-sm,
.form-control-lg,
.form-select,
.form-select-sm,
.form-select-lg,
.input-group-text,
.choices .choices__inner,
.dropdown-menu,
.modal-content,
.alert,
.toast {
  border-radius: var(--cx-theme-radius-sm) !important;
}

/* Choices.js Combos & Dropdown Lists */
.choices[data-type*="select-one"] .choices__inner {
  border-radius: var(--cx-theme-radius-sm) !important;
}

.choices.is-open .choices__inner {
  border-radius: var(--cx-theme-radius-sm) var(--cx-theme-radius-sm) 0 0 !important;
}

.choices .choices__list--dropdown {
  border-radius: 0 0 var(--cx-theme-radius-sm) var(--cx-theme-radius-sm) !important;
}

/* Input Groups Attachment Handling */
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > :first-child:not(:last-child) {
  border-top-left-radius: var(--cx-theme-radius-sm) !important;
  border-bottom-left-radius: var(--cx-theme-radius-sm) !important;
}

.input-group > :last-child:not(:first-child) {
  border-top-right-radius: var(--cx-theme-radius-sm) !important;
  border-bottom-right-radius: var(--cx-theme-radius-sm) !important;
}

/* -------------------------------------------------------------------------- */
/* 9. MICRO-ANIMATIONS & UTILITIES                                            */
/* -------------------------------------------------------------------------- */
.cx-hover-lift {
  transition: transform var(--cx-theme-transition-normal), box-shadow var(--cx-theme-transition-normal);
}

.cx-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--cx-theme-shadow-lg);
}

.cx-gradient-brand {
  background: linear-gradient(135deg, var(--cx-theme-primary) 0%, #6366f1 100%);
  color: #ffffff;
}

.cx-gradient-accent {
  background: linear-gradient(135deg, #00d3be 0%, var(--cx-theme-primary) 100%);
  color: #ffffff;
}

/* -------------------------------------------------------------------------- */
/* SCROLLBAR SPECIFICATIONS (Sidebar & Main Content)                          */
/* -------------------------------------------------------------------------- */

/* 1. Barra Lateral (Sidebar): 6px, Auto-hide Overlay, Esquinas Rectas */
@supports (-moz-appearance: none) {
  .navbar-vertical,
  .navbar-vertical .navbar-collapse,
  .navbar-vertical .navbar-vertical-content {
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
  }
  .navbar-vertical:hover,
  .navbar-vertical .navbar-collapse:hover,
  .navbar-vertical .navbar-vertical-content:hover {
    scrollbar-color: rgba(100, 116, 139, 0.4) transparent !important;
  }
}

.navbar-vertical::-webkit-scrollbar,
.navbar-vertical .navbar-collapse::-webkit-scrollbar,
.navbar-vertical .navbar-vertical-content::-webkit-scrollbar,
html:not(.navbar-vertical-collapsed) .navbar-vertical .navbar-vertical-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.navbar-vertical::-webkit-scrollbar-track,
.navbar-vertical .navbar-collapse::-webkit-scrollbar-track,
.navbar-vertical .navbar-vertical-content::-webkit-scrollbar-track,
html:not(.navbar-vertical-collapsed) .navbar-vertical .navbar-vertical-content::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  border: none !important;
}

.navbar-vertical::-webkit-scrollbar-thumb,
.navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb,
.navbar-vertical .navbar-vertical-content::-webkit-scrollbar-thumb,
html:not(.navbar-vertical-collapsed) .navbar-vertical .navbar-vertical-content::-webkit-scrollbar-thumb {
  background-color: transparent !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  border: none !important;
  transition: background-color 0.2s ease;
}

.navbar-vertical:hover *::-webkit-scrollbar-thumb,
.navbar-vertical:hover::-webkit-scrollbar-thumb,
.navbar-vertical:hover .navbar-collapse::-webkit-scrollbar-thumb,
.navbar-vertical:hover .navbar-vertical-content::-webkit-scrollbar-thumb,
.navbar-vertical .navbar-vertical-content:hover::-webkit-scrollbar-thumb,
.navbar-vertical:hover .navbar-vertical-content::-webkit-scrollbar-thumb,
html:not(.navbar-vertical-collapsed) .navbar-vertical:hover .navbar-vertical-content::-webkit-scrollbar-thumb,
html:not(.navbar-vertical-collapsed) .navbar-vertical .navbar-vertical-content:hover::-webkit-scrollbar-thumb {
  background-color: #64748b !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  visibility: visible !important;
}

/* Ocultar totalmente scrollbar al colapsar a 64px */
html.navbar-vertical-collapsed .navbar-vertical::-webkit-scrollbar,
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content::-webkit-scrollbar,
.navbar-vertical-collapsed .navbar-vertical::-webkit-scrollbar,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* ARCHITECTURAL VIEWPORT SCROLL CONTAINMENT (Respect Navbar Top & In-Flow Footer) */
/* -------------------------------------------------------------------------- */
html:has(.content),
body:has(.content) {
  overflow: hidden !important;
  height: 100vh !important;
  max-height: 100vh !important;
}

.main:has(.content) {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  position: relative !important;
}

.navbar-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--cx-theme-navbar-top-height, 4rem) !important;
  z-index: 1030 !important;
}

.content {
  position: fixed !important;
  top: var(--cx-theme-navbar-top-height, 4rem) !important;
  bottom: 0 !important;
  left: var(--cx-theme-navbar-vertical-width, 15.875rem) !important;
  right: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: scroll !important; /* Force permanent vertical scrollbar (never hidden) */
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding-top: 2rem !important;
  padding-bottom: 0 !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  transition: left 0.26s cubic-bezier(0.2, 0, 0, 1) !important;
}

@supports (-moz-appearance: none) {
  .content {
    scrollbar-width: auto !important;
    scrollbar-color: #64748b rgba(15, 23, 42, 0.45) !important;
  }
  [data-bs-theme="light"] .content {
    scrollbar-color: #64748b rgba(226, 232, 240, 0.7) !important;
  }
}

/* 2. Contenido Principal (Content a la derecha): 10px, Permanente, Esquinas Rectas */
.content::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
  display: block !important;
}

.content::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.45) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

[data-bs-theme="light"] .content::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.7) !important;
  border-left: 1px solid rgba(203, 213, 225, 0.8) !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

.content::-webkit-scrollbar-thumb {
  background-color: #64748b !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  border: none !important;
  min-height: 40px !important;
  cursor: pointer !important;
  visibility: visible !important;
}

.content::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8 !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

.content::-webkit-scrollbar-thumb:active {
  background-color: #3b82f6 !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

/* Architectural Reset: Override Phoenix High-Specificity margin-left in Collapsed & Expanded states */
html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-lg + .navbar.navbar-top ~ .content,
html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl + .navbar.navbar-top ~ .content,
html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xxl + .navbar.navbar-top ~ .content,
html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-md + .navbar.navbar-top ~ .content,
html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-sm + .navbar.navbar-top ~ .content,
html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xs + .navbar.navbar-top ~ .content,
html.navbar-vertical-collapsed .navbar-vertical ~ .content,
html.navbar-vertical-collapsed .content,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-lg + .navbar.navbar-top ~ .content,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl + .navbar.navbar-top ~ .content,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xxl + .navbar.navbar-top ~ .content,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-md + .navbar.navbar-top ~ .content,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-sm + .navbar.navbar-top ~ .content,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xs + .navbar.navbar-top ~ .content,
.navbar-vertical-collapsed .navbar-vertical ~ .content,
.navbar-vertical-collapsed .content {
  left: var(--cx-theme-navbar-vertical-collapsed-width, 4rem) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-lg ~ .navbar-top ~ .content,
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xl ~ .navbar-top ~ .content,
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xxl ~ .navbar-top ~ .content,
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-md ~ .navbar-top ~ .content,
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-sm ~ .navbar-top ~ .content,
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xs ~ .navbar-top ~ .content,
html:not(.navbar-vertical-collapsed) .navbar-vertical ~ .content,
.navbar-vertical.navbar-expand-lg ~ .navbar-top ~ .content,
.navbar-vertical.navbar-expand-xl ~ .navbar-top ~ .content,
.navbar-vertical.navbar-expand-xxl ~ .navbar-top ~ .content,
.navbar-vertical.navbar-expand-md ~ .navbar-top ~ .content,
.navbar-vertical.navbar-expand-sm ~ .navbar-top ~ .content,
.navbar-vertical.navbar-expand-xs ~ .navbar-top ~ .content,
.navbar-vertical ~ .content,
.content {
  left: var(--cx-theme-navbar-vertical-width, 15.875rem) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body:not(:has(.navbar-vertical)) .content,
[data-navigation-type="horizontal"] .content {
  left: 0 !important;
  margin-left: 0 !important;
}

/* Universal Scrollbar Zero-Radius Square Enforcer */
*::-webkit-scrollbar,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-corner,
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-corner,
.scrollbar::-webkit-scrollbar-thumb,
.scrollbar-overlay::-webkit-scrollbar-thumb,
.simplebar-scrollbar,
.simplebar-scrollbar::before,
.simplebar-scrollbar:before {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

::-webkit-scrollbar-button,
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
.content::-webkit-scrollbar-button,
.navbar-vertical::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* In-Flow Footer Architecture (Travels with content, never overlaps cards) */
.footer,
.content .footer,
footer.footer {
  position: relative !important;
  margin-top: auto !important;
  margin-left: -2.5rem !important;
  margin-right: -2.5rem !important;
  width: calc(100% + 5rem) !important;
  height: auto !important;
  min-height: var(--cx-theme-footer-height, 4rem) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  z-index: 10 !important;
  background-color: var(--cx-theme-navbar-bg) !important;
  border-top: 1px solid var(--cx-theme-border-color) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 2.5rem !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.footer > .row,
.content .footer > .row,
footer.footer > .row {
  width: 100% !important;
}

/* Clean breathing room between content and footer on all pages */
.content > :nth-last-child(2) {
  margin-bottom: 2.5rem !important;
}

@media (max-width: 991.98px) {
  .content {
    left: 0 !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .footer,
  .content .footer,
  footer.footer {
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
    width: calc(100% + 3rem) !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 9. COLLAPSED NAVBAR VERTICAL (Fixed sidebar, independent scroll & flyouts)  */
/* -------------------------------------------------------------------------- */
html.navbar-vertical-collapsed .navbar-vertical,
.navbar-vertical-collapsed .navbar-vertical,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xs,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-sm,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-md,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-lg,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xxl {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  width: var(--cx-theme-navbar-vertical-collapsed-width, 4rem) !important;
  padding-top: var(--cx-theme-navbar-top-height, 4rem) !important;
  padding-bottom: var(--cx-theme-navbar-footer-height, 4rem) !important;
  z-index: 1020 !important;
  display: block !important;
  overflow: visible !important;
  transition: width 0.26s cubic-bezier(0.2, 0, 0, 1) var(--cx-theme-sidebar-width-delay, 0s) !important;
  box-sizing: border-box !important;
}

.navbar-vertical .navbar-collapse {
  display: block !important;
  height: calc(100vh - var(--cx-theme-navbar-top-height, 4rem) - var(--cx-theme-navbar-footer-height, 4rem)) !important;
  max-height: calc(100vh - var(--cx-theme-navbar-top-height, 4rem) - var(--cx-theme-navbar-footer-height, 4rem)) !important;
  overflow: visible !important;
}

.navbar-vertical .navbar-vertical-content {
  display: block !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.navbar-vertical-collapsed .navbar-vertical .navbar-collapse {
  display: block !important;
  height: calc(100vh - var(--cx-theme-navbar-top-height, 4rem) - var(--cx-theme-navbar-footer-height, 4rem)) !important;
  max-height: calc(100vh - var(--cx-theme-navbar-top-height, 4rem) - var(--cx-theme-navbar-footer-height, 4rem)) !important;
  overflow: visible !important;
}

.navbar-vertical-collapsed .navbar-vertical .navbar-collapse::-webkit-scrollbar,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content {
  display: block !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Centered icon & indicator pill in collapsed navigation links (morphing width, anchored left edge) */
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav > .nav-item > .nav-item-wrapper > .nav-link,
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav > .nav-item > .nav-item-wrapper > .nav-link,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xs .navbar-vertical-content .navbar-nav .nav-link.label-1,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-sm .navbar-vertical-content .navbar-nav .nav-link.label-1,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-md .navbar-vertical-content .navbar-nav .nav-link.label-1,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-link.label-1,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-vertical-content .navbar-nav .nav-link.label-1,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xxl .navbar-vertical-content .navbar-nav .nav-link.label-1 {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  margin: 3px 12px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--cx-theme-radius-sm) !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  transition: width 0.26s cubic-bezier(0.2, 0, 0, 1),
              background-color 0.2s ease,
              color 0.2s ease !important;
}

/* Active and Hover Indicator States in Collapsed Navbar */
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1:hover,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1:hover {
  width: 40px !important;
  height: 40px !important;
  margin: 3px 12px !important;
  border-radius: var(--cx-theme-radius-sm) !important;
  color: var(--cx-theme-primary) !important;
  background-color: var(--cx-theme-primary-subtle) !important;
}

html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1.active,
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-item-wrapper:has(.active) .label-1.nav-link,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1.active,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-item-wrapper:has(.active) .label-1.nav-link {
  width: 40px !important;
  height: 40px !important;
  margin: 3px 12px !important;
  border-radius: var(--cx-theme-radius-sm) !important;
  color: var(--cx-theme-primary) !important;
  background-color: var(--cx-theme-primary-subtle) !important;
  font-weight: 700 !important;
}

/* Zero margin on icon in collapsed navbar */
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 .nav-link-icon,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 .nav-link-icon {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin: 0 !important;
}

/* Smooth fade out & collapse for dropdown indicator (chevron >) and badges */
html.navbar-vertical-collapsed .navbar-vertical .dropdown-indicator-icon-wrapper,
html.navbar-vertical-collapsed .navbar-vertical .nav-link.label-1 .dropdown-indicator-icon-wrapper,
html.navbar-vertical-collapsed .navbar-vertical .new-page-indicator,
.navbar-vertical-collapsed .navbar-vertical .dropdown-indicator-icon-wrapper,
.navbar-vertical-collapsed .navbar-vertical .nav-link.label-1 .dropdown-indicator-icon-wrapper,
.navbar-vertical-collapsed .navbar-vertical .new-page-indicator {
  display: inline-flex !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Smoothly clip and fade text and badges from collapsed top-level item */
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 .nav-link-text,
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 .nav-link-badge,
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 .badge,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 .nav-link-text,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 .nav-link-badge,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 .badge {
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Internal flex container maintains flex-start for seamless spatial continuity */
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 > .d-flex,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 > .d-flex {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Icon container centering within 40px slot */
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 .nav-link-icon,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 .nav-link-icon {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  order: 1 !important;
}

/* SVG Icon Millimetric Centering (Zero margin, block display, fixed square) */
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 svg,
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 svg.lucide,
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 .nav-link-icon svg,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 svg,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 svg.lucide,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 .nav-link-icon svg {
  margin: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
}

/* Centered dividers and section labels with matched vertical rhythm (40px slot parity) */
.navbar-vertical .navbar-vertical-label {
  height: 40px !important;
  line-height: 40px !important;
  margin: 0 !important;
  padding: 0 0 0 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.15s !important;
}

html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-label,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-label {
  display: none !important;
  height: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.navbar-vertical .navbar-vertical-line {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0 !important;
  transition: opacity 0.18s cubic-bezier(0.2, 0, 0, 1),
              display 0.18s allow-discrete !important;
}

html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-line,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-line {
  display: block !important;
  height: 0 !important;
  margin: 20px 0.75rem 22px 0.75rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--cx-theme-border-color) !important;
  opacity: 0.6 !important;
  box-sizing: content-box !important;
}

@starting-style {
  html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-line,
  .navbar-vertical-collapsed .navbar-vertical .navbar-vertical-line {
    opacity: 0 !important;
  }
}

/* Sidebar Footer & Architectural Parity with Page Footer */
.navbar-vertical .navbar-vertical-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: calc(var(--cx-theme-navbar-vertical-width, 15.875rem) - 1px) !important;
  height: var(--cx-theme-navbar-footer-height, 4rem) !important;
  background: var(--cx-theme-navbar-vertical-bg-color, #ffffff) !important;
  border-top: 1px solid var(--cx-theme-navbar-vertical-border-color, rgba(203, 213, 225, 0.7)) !important;
  border-right: 1px solid var(--cx-theme-border-color, rgba(203, 213, 225, 0.7)) !important;
  z-index: 1025 !important;
  transition: width 0.26s cubic-bezier(0.2, 0, 0, 1) var(--cx-theme-sidebar-width-delay, 0s) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

/* Footer Toggle Button - Adopting .nav-link spatial geometry (margin: auto 12px, width: calc(100% - 24px), height: 40px) */
.navbar-vertical .navbar-vertical-footer .navbar-vertical-toggle {
  width: calc(100% - 24px) !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: auto 12px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: var(--cx-theme-radius-sm) !important;
  color: var(--cx-theme-navbar-vertical-link-color) !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  transition: width 0.26s cubic-bezier(0.2, 0, 0, 1) var(--cx-theme-sidebar-width-delay, 0s),
              color 0.18s ease-in-out !important;
}

/* Explicit Footer Order: 1=Icon (Left, 40px footprint, center at 32px), 2=Text (Middle), 3=Version (Right) */
.navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-icon-collapse,
.navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-icon-expand {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  box-sizing: content-box !important;
  padding: 11px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  order: 1 !important;
}

.navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-text {
  order: 2 !important;
  margin-left: 0.25rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  color: inherit !important;
  white-space: nowrap !important;
  opacity: 1;
}

.navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-version,
html:not(.navbar-vertical-collapsed) .navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-version,
html:not(.navbar-vertical-collapsed) .navbar-vertical .navbar-vertical-footer .navbar-vertical-toggle:hover .navbar-vertical-footer-version {
  order: 3 !important;
  margin-left: auto !important;
  margin-right: 0.5rem !important;
  font-size: 0.775rem !important;
  color: var(--cx-theme-text-muted, #64748b) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap !important;
  opacity: 1;
}

/* Theme-aware hover color with no active selector background */
.navbar-vertical .navbar-vertical-footer .navbar-vertical-toggle:hover {
  color: var(--cx-theme-navbar-vertical-link-hover-color) !important;
  background: transparent !important;
}

.navbar-vertical .navbar-vertical-footer .navbar-vertical-toggle:hover .navbar-vertical-footer-text {
  color: var(--cx-theme-navbar-vertical-link-hover-color) !important;
}

.navbar-vertical .navbar-vertical-footer .navbar-vertical-toggle:hover svg {
  stroke: var(--cx-theme-navbar-vertical-link-hover-color) !important;
  color: var(--cx-theme-navbar-vertical-link-hover-color) !important;
}

.navbar-vertical .navbar-vertical-footer .navbar-vertical-toggle:focus,
.navbar-vertical .navbar-vertical-footer .navbar-vertical-toggle:active {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Text, Labels & Version Smooth Fade Transitions (Prevents abrupt pop-in on return) */
.navbar-vertical .nav-link-text,
.navbar-vertical .nav-link-badge,
.navbar-vertical .nav-link .badge,
.navbar-vertical .new-page-indicator,
.navbar-vertical .dropdown-indicator-icon-wrapper,
.navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-text,
.navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-version,
.navbar-vertical .navbar-vertical-label {
  white-space: nowrap !important;
  opacity: 1;
  transition: opacity 0.18s cubic-bezier(0.2, 0, 0, 1) var(--cx-theme-sidebar-content-delay, 0s) !important;
}

/* Reverse of the opening fade. It changes paint only; layout and scroll stay untouched. */
html.navbar-vertical-closing .navbar-vertical .nav-link-text,
html.navbar-vertical-closing .navbar-vertical .nav-link-badge,
html.navbar-vertical-closing .navbar-vertical .badge,
html.navbar-vertical-closing .navbar-vertical .new-page-indicator,
html.navbar-vertical-closing .navbar-vertical .dropdown-indicator-icon-wrapper,
html.navbar-vertical-closing .navbar-vertical .navbar-vertical-label,
html.navbar-vertical-closing .navbar-vertical .navbar-vertical-footer-text,
html.navbar-vertical-closing .navbar-vertical .navbar-vertical-footer-version {
  opacity: 0 !important;
  pointer-events: none !important;
}

html.navbar-vertical-closing .navbar-vertical .navbar-vertical-footer {
  width: var(--cx-theme-navbar-vertical-collapsed-width, 4rem) !important;
}

.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.label-1 {
  transition: background-color 0.2s ease,
              width 0.26s cubic-bezier(0.2, 0, 0, 1) var(--cx-theme-sidebar-width-delay, 0s),
              margin 0.26s cubic-bezier(0.2, 0, 0, 1) !important;
}

html.navbar-vertical-collapsed .navbar-vertical .nav-link-text,
.navbar-vertical-collapsed .navbar-vertical .nav-link-text {
  display: inline-block !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Base Styles for Collapsed Navbar State */
html.navbar-vertical-collapsed .navbar-vertical,
.navbar-vertical-collapsed .navbar-vertical {
  width: var(--cx-theme-navbar-vertical-collapsed-width, 4rem) !important;
  overflow: visible !important;
}

html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-label,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-label {
  display: flex !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-footer,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--cx-theme-navbar-vertical-collapsed-width, 4rem) !important;
  height: var(--cx-theme-navbar-footer-height, 4rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  background: var(--cx-theme-navbar-vertical-bg-color, #ffffff) !important;
  border-top: 1px solid var(--cx-theme-navbar-vertical-border-color, rgba(203, 213, 225, 0.7)) !important;
  border-right: 1px solid var(--cx-theme-navbar-vertical-border-color, rgba(203, 213, 225, 0.7)) !important;
  z-index: 1025 !important;
  transition: width 0.26s cubic-bezier(0.2, 0, 0, 1) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-footer .navbar-vertical-toggle,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-footer .navbar-vertical-toggle {
  width: calc(100% - 24px) !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: auto 12px !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}

/* Semantic Toggle Icon States (Collapse vs Expand) */
/* Both icons remain mounted in the same 40px footprint so their state can
   cross-fade without changing the footer's established geometry. */
.navbar-vertical .navbar-vertical-footer .navbar-vertical-toggle {
  position: relative !important;
}

.navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-icon-collapse,
.navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-icon-expand {
  display: block !important;
  transform-origin: center !important;
  transition: opacity 0.18s cubic-bezier(0.2, 0, 0, 1),
              transform 0.18s cubic-bezier(0.2, 0, 0, 1) !important;
}

.navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-icon-collapse {
  position: relative !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}

.navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-icon-expand {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 0 !important;
  transform: scale(0.82) !important;
}

html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-icon-collapse,
.navbar-vertical-closing .navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-icon-collapse,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-icon-collapse {
  opacity: 0 !important;
  transform: scale(0.82) !important;
}

html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-icon-expand,
.navbar-vertical-closing .navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-icon-expand,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-icon-expand {
  opacity: 1 !important;
  transform: scale(1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-icon-collapse,
  .navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-icon-expand {
    transition-duration: 0.01ms !important;
  }
}

html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-text,
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-version,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-text,
.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-footer .navbar-vertical-footer-version {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper {
  position: relative !important;
}

.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper .parent-wrapper.label-1,
.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper .nav-link-text-wrapper {
  position: fixed !important;
  left: 4rem !important;
  padding-left: 6px !important;
  padding-bottom: 1.5rem !important;
  display: none !important;
  z-index: 1060 !important;
  pointer-events: auto !important;
}

/* Invisible bridge so mouse hover never drops between icon and flyout */
.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper .parent-wrapper.label-1::before {
  content: "" !important;
  position: absolute !important;
  left: -20px !important;
  top: 0 !important;
  width: 30px !important;
  bottom: 0 !important;
  background: transparent !important;
  pointer-events: auto !important;
}

.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper:hover>.parent-wrapper.label-1,
.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper:focus-within>.parent-wrapper.label-1,
.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper:hover>.nav-link-text-wrapper {
  display: block !important;
}

.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper .parent-wrapper.label-1>.parent,
.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper .nav-link-text-wrapper .nav-link-text {
  display: block !important;
  width: 230px !important;
  max-height: calc(100vh - 4rem) !important;
  overflow-y: auto !important;
  background: var(--cx-theme-navbar-vertical-collapsed-menu-bg, #ffffff) !important;
  margin-left: 0 !important;
  border-radius: var(--cx-theme-radius-sm) !important;
  position: relative !important;
  padding-bottom: 8px !important;
  border: 1px solid var(--cx-theme-navbar-vertical-border-color, rgba(203, 213, 225, 0.7)) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
}

.navbar-vertical-collapsed .navbar-vertical .parent-wrapper.label-1 .nav-link-text,
.navbar-vertical-collapsed .navbar-vertical .parent-wrapper.label-1 .dropdown-indicator-icon-wrapper,
.navbar-vertical-collapsed .navbar-vertical .parent-wrapper.label-1 .nav-link-badge,
.navbar-vertical-collapsed .navbar-vertical .parent-wrapper.label-1 .badge,
.navbar-vertical-collapsed .navbar-vertical .nav-link-text-wrapper .nav-link-text,
.navbar-vertical-collapsed .navbar-vertical .nav-link-text-wrapper .nav-link-badge,
.navbar-vertical-collapsed .navbar-vertical .nav-link-text-wrapper .badge {
  display: inline-block !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  width: auto !important;
  max-width: none !important;
}

.navbar-vertical-collapsed .navbar-vertical .parent-wrapper.label-1 .nav-link {
  pointer-events: auto !important;
  cursor: pointer !important;
  width: auto !important;
  height: auto !important;
  min-width: auto !important;
  max-width: none !important;
  margin: 2px 12px !important;
  padding: 0.45rem 1rem 0.55rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: var(--cx-theme-radius-sm) !important;
}

.navbar-vertical-collapsed .navbar-vertical .parent-wrapper.label-1 .nav-link svg.lucide {
  margin-right: 0.5rem !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* 12. LUCIDE ICONS UNIFIED STYLES                                            */
/* -------------------------------------------------------------------------- */
svg.lucide,
.lucide {
  width: 1rem;
  height: 1rem;
  stroke-width: 2px;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

svg.lucide-xs,
.lucide-xs {
  width: 0.75rem;
  height: 0.75rem;
}

svg.lucide-sm,
.lucide-sm {
  width: 0.875rem;
  height: 0.875rem;
}

svg.lucide-lg,
.lucide-lg {
  width: 1.25rem;
  height: 1.25rem;
}

svg.lucide-xl,
.lucide-xl {
  width: 1.5rem;
  height: 1.5rem;
}

svg.lucide-2xl,
.lucide-2xl {
  width: 2rem;
  height: 2rem;
}

.nav-link svg.lucide,
.nav-link-icon svg.lucide,
.nav-link-icon-wrapper svg.lucide {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

[dir="rtl"] .nav-link svg.lucide,
[dir="rtl"] .nav-link-icon svg.lucide,
[dir="rtl"] .nav-link-icon-wrapper svg.lucide {
  margin-right: 0;
  margin-left: 0.5rem;
}

.btn svg.lucide {
  vertical-align: -0.15em;
}

/* Stacked icons container */
.fa-stack,
.icon-stack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  vertical-align: middle;
  width: 2.25em;
  height: 2.25em;
  flex-shrink: 0;
}

.fa-stack svg.lucide,
.icon-stack svg.lucide {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* Base shape: circle forms the solid badge disc matching Phoenix */
.fa-stack > svg[data-lucide="circle"]:first-child,
.icon-stack > svg[data-lucide="circle"]:first-child {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Inner glyph scaled and centered on the badge */
.fa-stack > svg:last-child:not(:first-child),
.icon-stack > svg:last-child:not(:first-child) {
  width: 52%;
  height: 52%;
  z-index: 1;
}

/* Proportional scaling matching Bootstrap utility font sizes */
.fs-11 svg.lucide,
.fs-10 svg.lucide {
  width: 0.725rem;
  height: 0.725rem;
}

.fs-9 svg.lucide {
  width: 0.825rem;
  height: 0.825rem;
}

.fs-8 svg.lucide {
  width: 0.95rem;
  height: 0.95rem;
}

.fs-7 svg.lucide {
  width: 1.1rem;
  height: 1.1rem;
}

.fs-6 svg.lucide {
  width: 1.25rem;
  height: 1.25rem;
}

.fs-5 svg.lucide {
  width: 1.5rem;
  height: 1.5rem;
}

.fs-4 svg.lucide {
  width: 1.75rem;
  height: 1.75rem;
}

.fs-3 svg.lucide {
  width: 2rem;
  height: 2rem;
}

/* ==========================================================================
   Native View Transitions API (SPA-Like Seamless Navigation, Zero Dependencies)
   ========================================================================== */
@view-transition {
  navigation: auto;
}

@media (min-width: 992px) {
  .navbar-vertical {
    view-transition-name: sidebar-nav;
  }
}

.navbar-top:not([style*="display: none"]):not([style*="display:none"]) {
  view-transition-name: top-nav;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Sticky Sub-Navigation & In-Content Sticky Components
   (Compensates for .content scroll-container boundary and top padding)
   ========================================================================== */
.widgets-scrollspy-nav,
.faq-category-tab {
  position: sticky !important;
  top: calc(-1 * var(--cx-theme-content-padding-top, 2rem)) !important;
  background-color: var(--cx-theme-bg-body) !important;
  background: var(--cx-theme-bg-body) !important;
  z-index: 100 !important;
}

.faq-subcategory-content,
.faq-subcategory-content .empty-header {
  top: calc(-1 * var(--cx-theme-content-padding-top, 2rem)) !important;
  background-color: var(--cx-theme-bg-body) !important;
}

/* -------------------------------------------------------------------------- */
/* CMAS - personalizaciones del proyecto integradas al tema central            */
/* -------------------------------------------------------------------------- */

/**
 * Todo lo de CMAS vive aqui, dentro del tema, y no en un archivo aparte: el
 * panel administrativo hace lo mismo, de modo que los dos frontend cargan
 * exactamente las dos hojas del tema y nada mas.
 *
 * Se escribe SOLO sobre las variables que el tema lee, que son las del prefijo
 * --cx-theme-. Antes esto vivia en un cmas.css que redefinia --bs-* y --cx-*,
 * prefijos que el tema ignora, y por eso hacia falta un parche de reglas
 * explicitas sobre .card, .btn, .form-control y demas para forzar el radio. Ese
 * parche desaparecio: era el sintoma de estar escribiendo en la variable
 * equivocada.
 *
 * Las fuentes Red Hat ya vienen declaradas arriba, en este mismo archivo, y se
 * sirven desde assets/fonts. Ningun CDN.
 */

:root {
  /* 1. Tipografia Red Hat. */
  --cx-theme-font-sans-serif: 'Red Hat Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cx-theme-font-monospace: 'Red Hat Mono', ui-monospace, Consolas, monospace;

  /* 2. Radio de 4px. Los escalones del tema se aplanan a uno solo; el pill
        (circulo) se queda, porque de el dependen avatares e insignias. */
  --cx-theme-radius-sm: 4px;
  --cx-theme-border-radius: 4px;
  --cx-theme-border-radius-sm: 4px;
  --cx-theme-border-radius-lg: 4px;
  --cx-theme-border-radius-xl: 4px;
  --cx-theme-border-radius-xxl: 4px;

  /* 3. El azul agua de CMAS sobre el azul generico del tema. */
  --cx-theme-primary: #2684eb;
  --cx-theme-primary-rgb: 38, 132, 235;

  /**
   * 4. La escala completa, un punto mas grande.
   *
   * El publico del tramite son adultos mayores. El tema calcula el cuerpo del
   * texto a partir de esta variable, y con el crecen campos, botones y todo lo
   * que el tema dimensiona en rem: no hace falta redefinir .form-control ni
   * .btn uno por uno, que es lo que se hacia antes.
   *
   * Esto distingue al tramite del panel administrativo, que es una herramienta
   * de uso diario y conserva la densidad del tema.
   */
  --cx-theme-body-font-size: 1.125rem;
}

/* ===========================================================================
   Visor de documentos.

   Pantalla completa y partida: el documento a la izquierda, el dictamen a la
   derecha. Revisar es mirar el papel, así que el papel se lleva el espacio.

   El escenario es oscuro en ambos temas, a propósito: un fondo neutro y sin
   brillo es lo que deja juzgar la legibilidad de una foto. El panel de la
   derecha sí sigue el tema del resto del sistema.
   =========================================================================== */


/* --- Barra superior ------------------------------------------------------ */


/* --- Paginador ----------------------------------------------------------- */


/* --- El reparto ---------------------------------------------------------- */


/* --- Herramientas -------------------------------------------------------- */


/* El control real es el radio; la etiqueta es lo que se ve. Sin JavaScript. */


/* --- El escenario -------------------------------------------------------- */

/* Gris neutro en ambos temas: juzgar una foto sobre blanco puro o sobre negro
   puro engaña sobre su exposición. */

/* -------------------------------------------------------------------------- */
/* EL LIENZO DEL VISOR DE DOCUMENTOS                                          */
/* -------------------------------------------------------------------------- */

/**
 * Lo unico del panel que no sale del tema, porque no es estilo sino la funcion
 * de la herramienta: un lienzo para mirar una identificacion fotografiada con
 * un telefono.
 *
 * El fondo oscuro cuadriculado no es decoracion. Un documento escaneado suele
 * traer margenes blancos, y sobre un fondo claro no se ve donde termina el
 * papel; el damero marca ese limite, igual que en cualquier visor de imagenes.
 */

.cmas-lienzo {
  background-color: #23262d;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, .02) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, .02) 25%, transparent 25%);
  background-size: 20px 20px;
  color: rgba(255, 255, 255, .75);
}

.cmas-lienzo a { color: #fff; }

.cmas-lienzo-doc {
  max-width: 100%;
  max-height: 100%;
  border: 0;
  border-radius: var(--cx-theme-border-radius);
  object-fit: contain;
  /* Solo se anima el giro. 'zoom' NO es una propiedad animable interoperable:
     listarla aqui hacia que el navegador se quedara en el valor de partida y el
     zoom de los botones 50%/200% no surtiera efecto (el computed seguia en 1).
     El giro con 'transform' si se anima y se conserva. */
  transition: transform .2s ease;
}

/**
 * Zoom y giro. Los controles son btn-check del tema; lo que el tema no tiene
 * -ni tendria por que- es transformar la imagen que gobiernan.
 *
 * El :has() queda acotado al contenedor de cada visor, asi que cada documento
 * gobierna solo el suyo. Se selecciona por clase y no por prefijo de id porque
 * los identificadores llevan el nombre del requisito, y un prefijo seria fragil
 * ante cualquier cambio de nomenclatura.
 *
 * El acercamiento usa 'zoom' y no 'transform: scale()'. La imagen vive dentro
 * de una modal, y el .modal-dialog de Bootstrap se traslada 50px al animarse:
 * eso crea un contexto de transformacion del que la imagen no puede escapar, y
 * su propio scale() se quedaba sin efecto. 'zoom' no depende de ese contexto, y
 * ademas rehace la maqueta -la barra de desplazamiento del lienzo aparece
 * cuando el documento crece-, que es justo lo que se quiere al examinar una
 * identificacion. El giro sigue con transform, que ahi si funciona.
 */
.cmas-lienzo-wrap:has(.cmas-zoom-50:checked) .cmas-lienzo-doc { zoom: .5; }

/**
 * Al ampliar se suelta el tope de tamano. Con max-width al 100% la imagen se
 * quedaba encajada en el lienzo y el 200% no hacia nada: justo lo contrario de
 * lo que se pide al acercarse a leer una fecha de vencimiento. Sin el tope, el
 * documento desborda y el lienzo -que ya lleva overflow-auto- deja recorrerlo.
 */
.cmas-lienzo-wrap:has(.cmas-zoom-200:checked) .cmas-lienzo-doc {
  zoom: 2;
  max-width: none;
  max-height: none;
}
.cmas-lienzo-wrap:has(.cmas-rotar:checked)    .cmas-lienzo-doc { transform: rotate(90deg); }

/**
 * Una cara en PDF, cuando el requisito lleva frente y reverso.
 *
 * El <object> de un PDF no tiene tamano propio: sin altura declarada colapsa a
 * cero y la cara simplemente no se ve.
 *
 * Un PDF ya trae su propio visor con desplazamiento, asi que lo que necesita es
 * alto real, no un recuadro pequeno dentro de otro que tambien se desplaza: dos
 * barras anidadas para leer una credencial es justo lo que estorba. Se le da
 * casi toda la altura visible, y cuando hay dos caras la segunda queda a un
 * desplazamiento de distancia en el lienzo, que es el gesto natural.
 */
.cmas-lienzo-pdf-parte {
  height: calc(100vh - 13rem);
  min-height: 30rem;
  border-radius: var(--cx-theme-border-radius);
}

/**
 * Con PDF el lienzo no centra ni acolcha: el visor nativo ocupa el ancho
 * completo, igual que en una entrega de una sola cara.
 */
.cmas-lienzo:has(.cmas-lienzo-pdf-parte) {
  align-items: stretch;
  padding: 0;
}


/**
 * El cotejo: las dos entregas del mismo requisito, una junto a la otra.
 *
 * Misma clase para las dos columnas a proposito. Antes cada documento se
 * dibujaba con su propio tamano y su propia altura de arranque, segun la
 * resolucion de la foto, y comparar dos cosas que no estan a la misma escala no
 * dice nada: parecian distintas por como se mostraban, no por lo que eran.
 *
 * Por eso los tres botones de aumento gobiernan las dos a la vez -el :has()
 * cuelga de la modal entera, no de cada columna- y las imagenes se alinean
 * arriba, no al centro: dos documentos de distinta proporcion centrados
 * arrancan a distinta altura y el ojo no puede ir de uno al otro.
 */
.cmas-cotejo {
  background-color: #23262d;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, .02) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, .02) 25%, transparent 25%);
  background-size: 20px 20px;
  color: rgba(255, 255, 255, .75);
}

.cmas-cotejo a { color: #fff; }

.cmas-cotejo-doc {
  width: 100%;
  height: auto;
  border: 0;
  border-radius: var(--cx-theme-border-radius);
  object-fit: contain;
  /* Igual que el lienzo: 'zoom' no se anima de forma fiable, y transicionarlo
     dejaba el cotejo clavado al tamano inicial (los botones 100%/200% no movian
     nada). Se anima solo 'width'. */
  transition: width .2s ease;
}

/* Ajustar: el documento entero visible sin desplazar, que es como se empieza
   -- primero se compara el conjunto y despues se entra al detalle. */
.modal:has(.cmas-cotejo-ajustar:checked) .cmas-cotejo-doc {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

/*
 * 100% y 200%: el aumento se mide sobre el tamano real del documento, no sobre
 * el hueco donde se dibuja. Es lo que espera quien lo pulsa -- "200%" significa
 * el doble de grande el papel -- y ademas es lo unico que funciona aqui: con
 * un ancho en porcentaje, la imagen es un hijo flex y flex-shrink la devolvia
 * al ancho de su caja, de modo que el 200% no aumentaba nada.
 *
 * flex-shrink en 0 por la misma razon. Al desbordar, cada caja lleva su propio
 * overflow-auto y el documento se recorre dentro de ella.
 */
.modal:has(.cmas-cotejo-100:checked) .cmas-cotejo-doc,
.modal:has(.cmas-cotejo-200:checked) .cmas-cotejo-doc {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  flex-shrink: 0;
}

.modal:has(.cmas-cotejo-100:checked) .cmas-cotejo-doc { zoom: 1; }
.modal:has(.cmas-cotejo-200:checked) .cmas-cotejo-doc { zoom: 2; }


/* --- Panel de dictamen --------------------------------------------------- */


/* --- Requisitos oficiales ------------------------------------------------ */


/* La excepción de la INE vencida es la regla que más se consulta y la que peor
   se recuerda, así que se destaca en vez de quedar como un renglón más. */

/* --- Vigencia ------------------------------------------------------------ */


/* --- Veredicto de vigencia ----------------------------------------------- */


/* --- Opciones de determinación ------------------------------------------- */


/* --- Angosto: el visor se apila ------------------------------------------ */

@media (max-width: 991.98px) {
}

@media (max-width: 575.98px) {
}

/* ===========================================================================
   Tablero de expedientes.

   Tres columnas que se desplazan a lo ancho si no caben, cada una con su
   propio desplazamiento vertical: así el encabezado de la columna sigue a la
   vista mientras se recorre una pila larga.

   Todo sobre variables del tema, como el resto de esta capa.
   =========================================================================== */


/* --- Encabezado de columna ---------------------------------------------- */


/* --- La pila de tarjetas ------------------------------------------------- */


/* --- La tarjeta ---------------------------------------------------------- */


/* La tarjeta entera es el botón que abre el expediente: apuntarle a un enlace
   pequeño, decenas de veces al día, es trabajo de más. */


/* --- Arrastre ------------------------------------------------------------ */