/**
 * Aincharcha Ecosystem - Central Application Layout & Design System
 * SolaimanLipi Typography, Glassmorphism, Responsive Dark Mode & Strict Geometry Tokens
 */

/* ============================================================
   1. CRITICAL ICON FONT DECLARATIONS & SIDEBAR GEOMETRY LOCK
   ============================================================ */
@font-face {
  font-family: "bootstrap-icons";
  font-display: swap;
  src: url("../vendor/bootstrap-icons/fonts/bootstrap-icons.woff2?2820a3852bdb9a5832199cc61cec4e65") format("woff2"),
       url("../vendor/bootstrap-icons/fonts/bootstrap-icons.woff?2820a3852bdb9a5832199cc61cec4e65") format("woff");
}

@font-face {
  font-family: "boxicons";
  font-display: swap;
  src: url("../vendor/boxicons/fonts/boxicons.woff2") format("woff2"),
       url("../vendor/boxicons/fonts/boxicons.woff") format("woff");
}

/* Instant Local Bengali Font Declarations (Zero Swap Delay / Zero Zoom Jump) */
@font-face {
  font-family: 'SolaimanLipi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/solaimanlipi/solaimanlipi-normal-v1.0.woff2") format("woff2");
}

@font-face {
  font-family: 'SolaimanLipi';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/solaimanlipi/solaimanlipi-bold-v1.0.woff2") format("woff2");
}

/* Anti-Zoom & Anti-FOUT Reset */
html {
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

header ul,
.header-nav ul,
.header-nav li,
.dropdown-menu,
.dropdown-menu li,
.sidebar-nav,
.sidebar-nav li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0;
  padding-left: 0;
}

html, body {
  color: var(--text-color, #1e293b);
  font-family: 'SolaimanLipi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14.5px;
}

/* Fixed Geometry for Sidebar Icons (Strictly prevents icon collapse and layout jump) */
.sidebar-nav .nav-link i:not(.ms-auto):not(.bi-chevron-down),
.sidebar-nav .nav-content a i:not(.bi-circle) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  line-height: 1 !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  text-align: center;
  font-style: normal;
}

/* Submenu little bullet icons */
.sidebar-nav .nav-content a i.bi-circle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 6px !important;
  width: 12px !important;
  min-width: 12px !important;
  height: 12px !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* Chevron Dropdown Arrow Stabilization */
.sidebar-nav .nav-link i.ms-auto,
.sidebar-nav .nav-link .bi-chevron-down {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-right: 0 !important;
  margin-left: auto !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  font-size: 13px !important;
  transition: transform 0.2s ease-in-out !important;
  flex-shrink: 0 !important;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

/* Strict Zero-Flash Rendering for Sidebar Collapses */
.sidebar-nav .collapse {
  transition: none !important;
}

.sidebar-nav .collapse.show {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.sidebar-nav .collapse:not(.show) {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ============================================================
   2. UNIVERSAL CIRCLE GEOMETRY PROTECTION (Strict Zero Egg/Oval Squish)
   ============================================================ */
.rounded-circle,
[class*="rounded-circle"],
.avatar,
.avatar-circle,
.avatar-img,
.profile-img,
.icon-circle,
.stat-circle,
.badge-circle {
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Stat card icon circles (Strict dimensions prevent oval/egg distortion) */
.card .rounded-circle:not(img):not(button):not(a),
.app-card .rounded-circle:not(img):not(button):not(a) {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.card .rounded-circle i,
.app-card .rounded-circle i {
  font-size: 1.15rem !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Sized avatar and circular badges */
.avatar-sm, .avatar-circle-sm {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  font-size: 0.85rem !important;
  padding: 0 !important;
}

.avatar-md, .avatar-circle-md {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  font-size: 1.15rem !important;
  padding: 0 !important;
}

.avatar-lg, .avatar-circle-lg {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  font-size: 1.5rem !important;
  padding: 0 !important;
}

/* Circular Buttons */
button.rounded-circle,
a.rounded-circle {
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Card boundary and responsive overflow protection (Never overflow on mobile) */
.card,
.app-card {
  position: relative;
  overflow: hidden !important;
  word-wrap: break-word;
  max-width: 100% !important;
}

.card-body,
.app-card .card-body {
  max-width: 100% !important;
  word-break: break-word;
}

.card img,
.app-card img {
  max-width: 100% !important;
  height: auto;
}

/* ============================================================
   3. UNIVERSAL BUTTON UI/UX SYSTEM (Compact & Consistent)
   ============================================================ */
/* Action buttons in tables and headers */
.table td .btn,
.table th .btn,
table td .btn,
.btn-action,
.btn-add,
.btn-edit,
.btn-delete,
.btn-create,
.action-btn,
.action-btns .btn,
td .btn-group .btn {
  padding: 0.25rem 0.58rem !important;
  font-size: 0.8125rem !important;
  line-height: 1.35 !important;
  border-radius: 0.375rem !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s ease-in-out;
}

.table td .btn i,
.table th .btn i,
table td .btn i,
.btn-action i,
.btn-add i,
.btn-edit i,
.btn-delete i,
.btn-create i,
.action-btn i {
  font-size: 0.875rem !important;
  line-height: 1;
}

/* Header & Section Action Buttons */
.pagetitle .btn-add,
.pagetitle .btn-create,
.card-header .btn-add,
.card-header .btn-create,
.section-header .btn-add,
.section-header .btn-create {
  padding: 0.32rem 0.75rem !important;
  font-size: 0.84rem !important;
  border-radius: 0.5rem !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Button Icon Spacing */
.btn > i {
  vertical-align: middle;
}

/* ============================================================
   4. ACCENT & SUCCESS UTILITY PALETTE
   ============================================================ */
.text-accent { color: var(--accent-color, #F59E0B) !important; }
.bg-accent { background-color: var(--accent-color, #F59E0B) !important; color: #ffffff !important; }
.border-accent { border-color: var(--accent-color, #F59E0B) !important; }
.btn-accent {
  background-color: var(--accent-color, #F59E0B) !important;
  border-color: var(--accent-color, #F59E0B) !important;
  color: #ffffff !important;
}
.btn-accent:hover {
  background-color: var(--accent-hover, #D97706) !important;
  border-color: var(--accent-hover, #D97706) !important;
  color: #ffffff !important;
}
.badge-accent {
  background-color: var(--accent-color, #F59E0B) !important;
  color: #ffffff !important;
}

.text-primary { color: var(--primary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.border-primary { border-color: var(--primary-color) !important; }
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
}
.btn-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #ffffff !important;
}
.btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.btn-outline-primary:hover {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

.text-success { color: var(--success-color, #00c369) !important; }
.bg-success { background-color: var(--success-color, #00c369) !important; color: #ffffff !important; }
.border-success { border-color: var(--success-color, #00c369) !important; }
.btn-success {
  background-color: var(--success-color, #00c369) !important;
  border-color: var(--success-color, #00c369) !important;
  color: #ffffff !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background-color: var(--success-hover, #00ab5c) !important;
  border-color: var(--success-hover, #00ab5c) !important;
  color: #ffffff !important;
}
.btn-outline-success {
  color: var(--success-color, #00c369) !important;
  border-color: var(--success-color, #00c369) !important;
}
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
  background-color: var(--success-color, #00c369) !important;
  border-color: var(--success-color, #00c369) !important;
  color: #ffffff !important;
}
.badge.bg-success {
  background-color: var(--success-color, #00c369) !important;
  color: #ffffff !important;
}

.nav-link {
  color: var(--bs-nav-link-color, #334155);
  transition: all 0.2s ease;
}
.nav-link:hover {
  color: var(--bs-nav-link-hover-color, var(--primary-color));
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* ============================================================
   5. CENTRAL TRANSLUCENT GLASSMORPHIC DESIGN SYSTEM
   ============================================================ */
.app-card,
.card.app-card {
  background: rgba(255, 255, 255, 0.75) !important;
  background-color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.app-card:hover,
.card.app-card:hover {
  background: rgba(255, 255, 255, 0.90) !important;
  background-color: rgba(255, 255, 255, 0.90) !important;
  border-color: rgba(var(--bs-primary-rgb, 79, 70, 229), 0.35) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}

[data-bs-theme="dark"] .app-card,
[data-bs-theme="dark"] .card.app-card,
.dark-theme .app-card,
.dark-theme .card.app-card,
.dark-mode .app-card,
.dark-mode .card.app-card {
  background: rgba(24, 34, 53, 0.78) !important;
  background-color: rgba(24, 34, 53, 0.78) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.42) !important;
  color: #F1F5F9 !important;
}

[data-bs-theme="dark"] .app-card:hover,
[data-bs-theme="dark"] .card.app-card:hover,
.dark-theme .app-card:hover,
.dark-theme .card.app-card:hover,
.dark-mode .app-card:hover,
.dark-mode .card.app-card:hover {
  background: rgba(24, 34, 53, 0.92) !important;
  background-color: rgba(24, 34, 53, 0.92) !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.58) !important;
}

.app-page-header {
  background: linear-gradient(135deg, rgba(var(--bs-primary-rgb, 79, 70, 229), 0.08) 0%, rgba(6, 182, 212, 0.04) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(var(--bs-primary-rgb, 79, 70, 229), 0.18) !important;
  border-radius: 1rem !important;
  padding: 0.85rem 1.15rem;
}

[data-bs-theme="dark"] .app-page-header,
.dark-theme .app-page-header,
.dark-mode .app-page-header {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(24, 34, 53, 0.75) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

/* ============================================================
   6. STANDARDIZED DARK THEME DESIGN SYSTEM & HIGH CONTRAST
   ============================================================ */
[data-bs-theme="dark"],
.dark-theme,
.dark-mode {
  --bg-color: #0B1120;
  --bg-secondary: #131D31;
  --card-bg: #182235;
  --border-color: #2D3D58;
  --border-light: #202D42;
  --text-color: #F1F5F9;
  --heading-color: #FFFFFF;
  --text-heading: #FFFFFF;
  --text-muted: #94A3B8;
  --text-light: #CBD5E1;
  --bs-body-bg: #0B1120;
  --bs-body-color: #F1F5F9;
  --bs-card-bg: #182235;
  --bs-link-hover-color: #93C5FD;
  --bs-nav-link-color: #CBD5E1;
  --bs-nav-link-hover-color: #FFFFFF;
  --bs-border-color: #2D3D58;
}

[data-bs-theme="dark"] body,
.dark-theme body {
  background-color: #0B1120 !important;
  color: #F1F5F9 !important;
}

[data-bs-theme="dark"] #header,
.dark-theme #header {
  background-color: #131D31 !important;
  border-bottom: 1px solid #2D3D58 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

[data-bs-theme="dark"] .sidebar,
.dark-theme .sidebar {
  background-color: #131D31 !important;
  border-right: 1px solid #2D3D58 !important;
}

[data-bs-theme="dark"] .card,
.dark-theme .card {
  background-color: #182235 !important;
  border-color: #2D3D58 !important;
  color: #F1F5F9 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
.dark-theme .card-header,
.dark-theme .card-footer {
  background-color: #131D31 !important;
  border-color: #2D3D58 !important;
  color: #F1F5F9 !important;
}

[data-bs-theme="dark"] .card-title,
.dark-theme .card-title {
  color: #FFFFFF !important;
}

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .card.bg-light,
.dark-theme .bg-light,
.dark-theme .card.bg-light {
  background-color: #131D31 !important;
  color: #F1F5F9 !important;
  border-color: #2D3D58 !important;
}

[data-bs-theme="dark"] .bg-white,
.dark-theme .bg-white {
  background-color: #182235 !important;
  color: #F1F5F9 !important;
}

/* Universal Text Overrides in Dark Mode (Eliminates hidden dark text) */
[data-bs-theme="dark"] .text-dark:not(.badge):not(.btn):not(.alert-warning *),
[data-bs-theme="dark"] [class*="text-dark"]:not(.badge):not(.btn):not(.alert-warning *),
[data-bs-theme="dark"] .text-black,
[data-bs-theme="dark"] h1.text-dark,
[data-bs-theme="dark"] h2.text-dark,
[data-bs-theme="dark"] h3.text-dark,
[data-bs-theme="dark"] h4.text-dark,
[data-bs-theme="dark"] h5.text-dark,
[data-bs-theme="dark"] h6.text-dark,
[data-bs-theme="dark"] p.text-dark,
[data-bs-theme="dark"] span.text-dark:not(.badge),
[data-bs-theme="dark"] small.text-dark,
[data-bs-theme="dark"] label.text-dark,
[data-bs-theme="dark"] .toggle-sidebar-btn {
  color: #F1F5F9 !important;
}

/* Maintain high-contrast dark text on bright elements in Dark Mode */
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-warning.text-dark,
[data-bs-theme="dark"] .badge.bg-info.text-dark,
[data-bs-theme="dark"] .btn-warning,
[data-bs-theme="dark"] .btn-warning.text-dark,
[data-bs-theme="dark"] .btn-warning *,
[data-bs-theme="dark"] .alert-warning .text-dark {
  color: #0F172A !important;
}

/* Ensure neutral badges adapt cleanly in Dark Mode */
[data-bs-theme="dark"] .badge.bg-light.text-dark,
[data-bs-theme="dark"] .badge.bg-white.text-dark,
[data-bs-theme="dark"] .badge.bg-body.text-dark,
[data-bs-theme="dark"] .badge.bg-body-tertiary.text-dark,
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.bg-white {
  color: #F1F5F9 !important;
}

[data-bs-theme="dark"] .text-secondary {
  color: #CBD5E1 !important;
}

[data-bs-theme="dark"] .text-muted {
  color: #94A3B8 !important;
}

[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
  border-color: #2D3D58 !important;
}

/* Universal Tables in Dark Mode */
[data-bs-theme="dark"] .table {
  color: #E2E8F0 !important;
  border-color: #2D3D58 !important;
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02) !important;
  --bs-table-striped-color: #F1F5F9 !important;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05) !important;
  --bs-table-hover-color: #FFFFFF !important;
}

[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light th {
  background-color: #131D31 !important;
  color: #FFFFFF !important;
  border-color: #2D3D58 !important;
  --bs-table-bg: #131D31 !important;
  --bs-table-color: #FFFFFF !important;
}

[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th {
  border-color: #2D3D58 !important;
}

/* Form Controls & Inputs in Dark Mode */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #0F172A !important;
  border-color: #2D3D58 !important;
  color: #F1F5F9 !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25) !important;
  color: #FFFFFF !important;
  background-color: #0F172A !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: #64748B !important;
}

[data-bs-theme="dark"] select option {
  background-color: #182235 !important;
  color: #F1F5F9 !important;
}

[data-bs-theme="dark"] .input-group-text {
  background-color: #131D31 !important;
  border-color: #2D3D58 !important;
  color: #94A3B8 !important;
}

[data-bs-theme="dark"] .form-check-input {
  background-color: #0F172A !important;
  border-color: #475569 !important;
}

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

/* Buttons in Dark Mode */
[data-bs-theme="dark"] .btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #0B1120 !important;
  font-weight: 700 !important;
}

[data-bs-theme="dark"] .btn-primary:hover {
  background-color: #93C5FD !important;
  border-color: #93C5FD !important;
  color: #0B1120 !important;
}

[data-bs-theme="dark"] .btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  background: transparent !important;
  font-weight: 600;
}

[data-bs-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--primary-color) !important;
  color: #0B1120 !important;
}

[data-bs-theme="dark"] .btn-light {
  background-color: #2D3D58 !important;
  border-color: #3B4D6E !important;
  color: #F1F5F9 !important;
}

[data-bs-theme="dark"] .btn-light:hover {
  background-color: #3B4D6E !important;
  color: #FFFFFF !important;
}

[data-bs-theme="dark"] .btn-secondary {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #F1F5F9 !important;
}

/* Badges in Dark Mode */
[data-bs-theme="dark"] .badge.bg-light {
  background-color: #2D3D58 !important;
  color: #F1F5F9 !important;
  border: 1px solid #475569 !important;
}

[data-bs-theme="dark"] .badge.bg-white {
  background-color: #182235 !important;
  color: #F1F5F9 !important;
  border: 1px solid #475569 !important;
}

[data-bs-theme="dark"] .badge.bg-primary {
  background-color: var(--primary-color) !important;
  color: #0B1120 !important;
  font-weight: 700 !important;
}

[data-bs-theme="dark"] .badge.bg-secondary {
  background-color: #334155 !important;
  color: #F1F5F9 !important;
}

[data-bs-theme="dark"] .badge.bg-info {
  background-color: rgba(14, 165, 233, 0.25) !important;
  color: #7DD3FC !important;
  border: 1px solid rgba(14, 165, 233, 0.4) !important;
}

[data-bs-theme="dark"] .badge.bg-warning {
  background-color: rgba(245, 158, 11, 0.25) !important;
  color: #FDE047 !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

[data-bs-theme="dark"] .badge.bg-success {
  background-color: rgba(16, 185, 129, 0.25) !important;
  color: #6EE7B7 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

[data-bs-theme="dark"] .badge.bg-danger {
  background-color: rgba(239, 68, 68, 0.25) !important;
  color: #FCA5A5 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

/* Modals, Dropdowns & List Groups in Dark Mode */
[data-bs-theme="dark"] .modal-content {
  background-color: #182235 !important;
  color: #F1F5F9 !important;
  border: 1px solid #2D3D58 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: #2D3D58 !important;
  background-color: #131D31 !important;
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: #182235 !important;
  border-color: #2D3D58 !important;
  color: #F1F5F9 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55) !important;
}

[data-bs-theme="dark"] .dropdown-item {
  color: #E2E8F0 !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: #24324A !important;
  color: #FFFFFF !important;
}

[data-bs-theme="dark"] .dropdown-divider {
  border-color: #2D3D58 !important;
}

[data-bs-theme="dark"] .list-group-item {
  background-color: #182235 !important;
  border-color: #2D3D58 !important;
  color: #F1F5F9 !important;
}

[data-bs-theme="dark"] .list-group-item-action:hover {
  background-color: #131D31 !important;
  color: #FFFFFF !important;
}

/* Sidebar Navigation Links in Dark Mode */
[data-bs-theme="dark"] .sidebar-nav .nav-link {
  background-color: rgba(96, 165, 250, 0.12) !important;
  color: var(--primary-color) !important;
}

[data-bs-theme="dark"] .sidebar-nav .nav-link i {
  color: var(--primary-color) !important;
}

[data-bs-theme="dark"] .sidebar-nav .nav-link.collapsed {
  background-color: transparent !important;
  color: #CBD5E1 !important;
}

[data-bs-theme="dark"] .sidebar-nav .nav-link.collapsed i {
  color: #94A3B8 !important;
}

[data-bs-theme="dark"] .sidebar-nav .nav-link.collapsed:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #FFFFFF !important;
}

[data-bs-theme="dark"] .sidebar-nav .nav-link.collapsed:hover i {
  color: var(--primary-color) !important;
}

[data-bs-theme="dark"] .sidebar-nav .nav-content a {
  color: #94A3B8 !important;
}

[data-bs-theme="dark"] .sidebar-nav .nav-content a:hover,
[data-bs-theme="dark"] .sidebar-nav .nav-content a.active {
  color: var(--primary-color) !important;
}

[data-bs-theme="dark"] .sidebar-nav .nav-heading {
  color: #64748B !important;
}

/* ============================================================
   SIDEBAR COMPACT NAVIGATION & PADDING REDUCTION (User Request)
   ============================================================ */
.sidebar-nav {
  padding: 0 !important;
  margin: 0 !important;
}

.sidebar-nav .nav-item {
  margin-bottom: 2px !important;
}

.sidebar-nav .nav-heading {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 10px 0 4px 8px !important;
  padding: 0 !important;
  color: #64748b !important;
}

/* Main top-level sidebar link */
.sidebar-nav .nav-link {
  display: flex !important;
  align-items: center !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  line-height: 1.4 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

/* Hover state */
.sidebar-nav .nav-link:hover {
  padding: 7px 12px !important;
}

/* Active & Uncollapsed state */
.sidebar-nav .nav-link.active,
.sidebar-nav .nav-link:not(.collapsed) {
  padding: 7px 12px !important;
}

/* Submenu container (.nav-content) */
.sidebar-nav .nav-content {
  padding: 2px 0 3px 4px !important;
  margin: 0 !important;
}

.sidebar-nav .nav-content li {
  margin-bottom: 1px !important;
}

/* Submenu links */
.sidebar-nav .nav-content a {
  display: flex !important;
  align-items: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 5px 10px 5px 26px !important;
  border-radius: 6px !important;
  line-height: 1.4 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

/* Submenu link hover & active */
.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  padding: 5px 10px 5px 26px !important;
  font-weight: 600 !important;
}

/* Anti-Shift: Lock layout dimensions firmly & prevent initial paint jumps */
.header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 64px !important;
  max-height: 64px !important;
  padding: 0 20px !important;
  transition: none !important;
  z-index: 997 !important;
  box-sizing: border-box !important;
}

.header-app-logo {
  height: 36px !important;
  max-height: 36px !important;
  width: auto !important;
  transition: none !important;
}

.sidebar {
  position: fixed !important;
  top: 64px !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 280px !important;
  z-index: 996 !important;
  padding: 12px 8px !important;
  transition: none !important;
  box-sizing: border-box !important;
}

#main {
  margin-top: 64px !important;
  transition: none !important;
}

@media (max-width: 767.98px) {
  .header {
    height: 58px !important;
    max-height: 58px !important;
    padding: 0 10px !important;
  }
  .header-app-logo {
    height: 30px !important;
    max-height: 30px !important;
  }
  .sidebar {
    top: 58px !important;
  }
  #main {
    margin-top: 58px !important;
    padding: 14px 10px !important;
  }
  .card, .app-card {
    border-radius: 14px !important;
  }
  .card-body, .card.p-4, .card.p-3 {
    padding: 0.85rem !important;
  }
}

#footer {
  transition: none !important;
}

body.animating-sidebar #main,
body.animating-sidebar #footer,
body.animating-sidebar .sidebar {
  transition: margin-left 0.25s ease, left 0.25s ease !important;
}

@media (min-width: 1200px) {
  #main, #footer {
    margin-left: 280px !important;
  }
  .sidebar {
    left: 0 !important;
  }
  .toggle-sidebar #main,
  .toggle-sidebar #footer,
  html.toggle-sidebar #main,
  html.toggle-sidebar #footer {
    margin-left: 0 !important;
  }
  .toggle-sidebar .sidebar,
  html.toggle-sidebar .sidebar {
    left: -280px !important;
  }
}

@media (max-width: 1199px) {
  #main, #footer {
    margin-left: 0 !important;
  }
  .sidebar {
    left: -280px !important;
  }
  .toggle-sidebar .sidebar,
  html.toggle-sidebar .sidebar {
    left: 0 !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.18) !important;
  }
  .sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 995;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .toggle-sidebar .sidebar-backdrop,
  html.toggle-sidebar .sidebar-backdrop {
    display: block;
    opacity: 1;
  }
}

/* Responsive Horizontal Scrollable Tabs & Chips (Native App Feel on Mobile) */
.nav-pills-scrollable {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-pills-scrollable::-webkit-scrollbar {
  display: none;
}
.nav-pills-scrollable .nav-item {
  flex-shrink: 0 !important;
}
.nav-pills-scrollable .nav-link {
  white-space: nowrap !important;
}

/* Sidebar scrollable container geometry */
.sidebar-scrollable {
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
}

/* ============================================================
   10. CENTRAL SPACING, CARD PADDING & EXAM BANK DESIGN SYSTEM
   ============================================================ */
/* Spacing Utilities (Missing Bootstrap 5 Fractional Tokens) */
.p-3\.5, .p-3-5 { padding: 1.25rem !important; }
.p-2\.5, .p-2-5 { padding: 0.75rem !important; }
.p-4\.5 { padding: 1.75rem !important; }
.px-3\.5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.py-2\.5 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-3\.5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.pt-2\.5 { padding-top: 0.75rem !important; }
.pb-2\.5 { padding-bottom: 0.75rem !important; }
.pt-3\.5 { padding-top: 1.25rem !important; }
.pb-3\.5 { padding-bottom: 1.25rem !important; }
.mb-2\.5 { margin-bottom: 0.75rem !important; }
.mb-3\.5 { margin-bottom: 1.25rem !important; }
.gap-1\.5 { gap: 0.45rem !important; }
.gap-2\.5 { gap: 0.75rem !important; }

/* Centralized Exam Bank Cards with Generous, Guaranteed Padding */
.exam-bank-card {
  padding: 1.5rem !important;
  border-radius: 18px !important;
  background-color: var(--card-bg, #ffffff) !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.exam-bank-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08) !important;
}

.exam-bank-card.exam-type-mcq {
  border-left: 5px solid #4f46e5 !important;
}

.exam-bank-card.exam-type-written {
  border-left: 5px solid #dc2626 !important;
}

[data-bs-theme="dark"] .exam-bank-card,
.dark-theme .exam-bank-card {
  background-color: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Question Review Items in Exam Builder */
.question-review-item {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  background: var(--bs-body-bg, #ffffff);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.question-review-item:hover {
  border-color: #4f46e5;
  background-color: rgba(79, 70, 229, 0.02);
}

[data-bs-theme="dark"] .question-review-item {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

/* Question Bank Picker Modal Cards */
.question-picker-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.65rem;
  background: #ffffff;
  transition: all 0.15s ease;
}

.question-picker-card.is-selected {
  border-color: #10b981;
  background-color: rgba(16, 185, 129, 0.04);
}

[data-bs-theme="dark"] .question-picker-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: #1e293b;
}

[data-bs-theme="dark"] .question-picker-card.is-selected {
  border-color: #10b981;
  background-color: rgba(16, 185, 129, 0.1);
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

.spin {
  display: inline-block;
  animation: spin 0.8s linear infinite;
}