/* =====================================================================
   SMCUP2021 — Design System v3.0
   Theme: SEMS University Portal — Wine Red / Warm Gray
   Fonts: Inter (loaded via _Layout.cshtml)
   ===================================================================== */

/* ─── 1. DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* Primary — Wine Red */
  --clr-primary:        #A63232;
  --clr-primary-hover:  #C04444;
  --clr-primary-active: #7B1E1E;
  --clr-primary-light:  #FAEAEA;
  --clr-primary-dim:    #F0D0D0;

  /* Neutrals — Warm Tones */
  --clr-bg:             #F5F4F0;
  --clr-surface:        #FFFFFF;
  --clr-surface-2:      #F0EDEB;
  --clr-border:         #E8E0E0;
  --clr-border-strong:  #D4C8C8;

  /* Text */
  --clr-text:           #1A1A1A;
  --clr-text-2:         #374151;
  --clr-text-3:         #6B7280;
  --clr-text-4:         #9CA3AF;

  /* Semantic */
  --clr-success:        #10B981;
  --clr-success-light:  #D1FAE5;
  --clr-success-text:   #065f46;
  --clr-warning:        #F59E0B;
  --clr-warning-light:  #FEF3C7;
  --clr-warning-text:   #92400e;
  --clr-danger:         #EF4444;
  --clr-danger-light:   #FEE2E2;
  --clr-danger-text:    #7f1d1d;
  --clr-info:           #A63232;
  --clr-info-light:     #F5E8E8;
  --clr-info-text:      #A63232;

  /* Sidebar — Wine Red canvas */
  --sidebar-width:      260px;
  --sidebar-collapsed:  0px;
  --sidebar-bg:         #A63232;
  --sidebar-text:       rgba(255, 255, 255, 0.85);
  --sidebar-text-muted: rgba(255, 255, 255, 0.48);
  --sidebar-hover-bg:   rgba(255, 255, 255, 0.12);
  --sidebar-active-bg:  rgba(255, 255, 255, 0.15);
  --sidebar-border:     rgba(255, 255, 255, 0.12);
  --sidebar-scrollbar:  rgba(255, 255, 255, 0.20);

  /* Header */
  --header-height:      64px;

  /* Radius */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .04);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .06);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .05);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .05);
  --ring:      0 0 0 3px rgb(166 50 50 / .25);

  /* Transitions */
  --transition:      all .2s cubic-bezier(.4, 0, .2, 1);
  --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);
  --transition-slow: all .35s cubic-bezier(.4, 0, .2, 1);

  /* Buttons */
  --clr-btn-text: #ffffff;
}

/* ─── DARK MODE TOKENS ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --clr-bg:            #1A0F0F;
  --clr-surface:       #2D1515;
  --clr-surface-2:     #3A1E1E;
  --clr-border:        #4D2525;
  --clr-border-strong: #613030;
  --clr-text:          #F5F5F5;
  --clr-text-2:        #D1B8B8;
  --clr-text-3:        #A08080;
  --clr-text-4:        #7A5858;
  --clr-primary-light: #3D1E1E;
  --clr-primary-dim:   #5A2828;
  /* Semantic lights — darkened so text-on-light stays readable */
  --clr-success-light: #052e1c;
  --clr-warning-light: #451a03;
  --clr-danger-light:  #450a0a;
  --clr-info-light:    #3D1515;
  /* Sidebar token — controls sidebar + header logo zone */
  --sidebar-bg:        #2D1515;
}

/* ─── SMOOTH DARK/LIGHT TRANSITION ─────────────────────────────────── */
*, *::before, *::after {
  transition: background-color .3s ease, color .2s ease, border-color .2s ease;
}

/* ─── 2. BASE RESET & TYPOGRAPHY ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 14px;
  line-height: 1.6;
  background: var(--clr-bg) !important;
  color: var(--clr-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .3s, color .3s;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600;
  color: var(--clr-text);
  line-height: 1.3;
}

a {
  color: var(--clr-primary);
  text-decoration: none;
  transition: var(--transition-fast);
}
a:hover { color: var(--clr-primary-hover); text-decoration: none; }

p { color: var(--clr-text-2); margin-bottom: .75rem; }

/* ─── 3. LAYOUT SHELL ──────────────────────────────────────────────── */
#main {
  margin-top: var(--header-height);
  margin-left: var(--sidebar-width);
  padding: 28px 32px;
  min-height: calc(100vh - var(--header-height));
  transition: var(--transition-slow);
}

@media (max-width: 1199px) {
  #main { margin-left: 0; padding: 20px 16px; }
}

.toggle-sidebar #main,
.toggle-sidebar #footer { margin-left: 0; }

.toggle-sidebar .sidebar { left: calc(-1 * var(--sidebar-width)); }

/* Footer */
#footer {
  margin-left: var(--sidebar-width);
  transition: var(--transition-slow);
}
.toggle-sidebar #footer { margin-left: 0; }

@media (max-width: 1199px) {
  #footer { margin-left: 0; }
}

/* ─── 4. HEADER / TOP BAR ──────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--clr-surface) !important;
  border-bottom: 1px solid var(--clr-border);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  padding: 0 20px 0 0;
  z-index: 1000;
  transition: var(--transition-slow);
}

/* Logo zone — wine red band matching the sidebar */
.header .logo {
  width: var(--sidebar-width);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  text-decoration: none;
  background: var(--sidebar-bg);
  height: 100%;
  flex-shrink: 0;
}

.header .logo img {
  height: 40px;
  width: 40px;
  object-fit: contain;
  border-radius: 50%;
  background: #ffffff;
  padding: 4px;
  flex-shrink: 0;
}

.header .logo span {
  font-size: 13px;
  font-weight: 700;
  color: var(--sidebar-text);
  line-height: 1.2;
  letter-spacing: -.2px;
  display: none;
}

@media (min-width: 1200px) {
  .header .logo span { display: block; }
}

/* Sidebar toggle button */
.toggle-sidebar-btn {
  background: transparent !important;
  border: none;
  outline: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--clr-text);
  padding: 8px 12px;
  border-radius: var(--radius);
  margin-left: 8px;
  transition: var(--transition-fast);
  line-height: 1;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.toggle-sidebar-btn:hover {
  background: var(--clr-primary-light) !important;
  color: var(--clr-primary);
}
.toggle-sidebar-btn:focus-visible {
  box-shadow: var(--ring);
}

/* Header nav */
.header-nav { display: flex; align-items: center; margin-left: auto; }
.header-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }

/* Dark mode toggle button */
#darkModeToggle {
  background: none;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  color: var(--clr-text-3);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: var(--transition-fast);
  margin-right: 8px;
}
#darkModeToggle:hover {
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  border-color: var(--clr-primary-dim);
}

/* Language selector */
.header-nav .nav-item.dropdown > a.nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text-2);
  padding: 6px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-fast);
  height: 36px;
  margin-right: 8px;
}
.header-nav .nav-item.dropdown > a.nav-link:hover {
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  border-color: var(--clr-primary-dim);
}
.header-nav .nav-item.dropdown > a.nav-link::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 2px;
}

/* Profile dropdown trigger */
.nav-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px !important;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
  color: var(--clr-text) !important;
}
.nav-profile:hover {
  background: var(--clr-primary-light);
  border-color: var(--clr-primary-dim);
}
.nav-profile img {
  width: 30px; height: 30px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--clr-border);
}
.nav-profile .dropdown-toggle {
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text-2);
  white-space: nowrap;
}
.nav-profile .dropdown-toggle::after { display: none; }

/* ─── DROPDOWN MENUS ────────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 6px;
  min-width: 200px;
}
.dropdown-menu.show {
  animation: dropdown-in .15s cubic-bezier(.4, 0, .2, 1);
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown-menu .dropdown-header {
  padding: 10px 12px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-text-3);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.dropdown-menu .dropdown-header h6 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-text);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text-2);
  transition: var(--transition-fast);
  border: none;
  background: none;
  width: 100%;
}
.dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item svg {
  font-size: 15px;
  color: var(--clr-text-3);
  margin: 0;
  width: 16px;
  flex-shrink: 0;
  border: none !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--clr-primary-light);
  color: var(--clr-primary);
}
.dropdown-menu .dropdown-item:hover i { color: var(--clr-primary); }

.dropdown-menu .dropdown-divider {
  border-color: var(--clr-border);
  margin: 4px 0;
}

/* Profile dropdown arrow hack */
.dropdown-menu-arrow::before { display: none; }

/* ─── 5. SIDEBAR ────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: none;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
  z-index: 999;
  overflow: hidden;
  padding: 0;
  transition: var(--transition-slow);
  display: flex;
  flex-direction: column;
}

/* Scrollable navigation area */
.sidebar nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 12px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-scrollbar) transparent;
}
.sidebar nav::-webkit-scrollbar { width: 4px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb {
  background: var(--sidebar-scrollbar);
  border-radius: var(--radius-full);
}

@media (max-width: 1199px) {
  .sidebar {
    left: calc(-1 * var(--sidebar-width));
    box-shadow: var(--shadow-xl);
  }
  .toggle-sidebar .sidebar { left: 0; }
}

/* Sidebar section label */
.sidebar-nav .nav-heading {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--sidebar-text-muted);
  padding: 16px 8px 4px;
  margin: 0;
}

/* Sidebar list */
.sidebar-nav {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-nav li { list-style: none; margin: 0; padding: 0; }
.sidebar-nav .nav-item { margin-bottom: 1px; }

/* Sidebar links */
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sidebar-text) !important;
  text-decoration: none;
  transition: var(--transition-fast);
  position: relative;
  width: 100%;
  background: none !important;
  border: none;
}
.sidebar-nav .nav-link i {
  font-size: 16px;
  color: rgba(255, 255, 255, .60) !important;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  transition: var(--transition-fast);
}
.sidebar-nav .nav-link span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collapsed chevron */
.sidebar-nav .nav-link .bi-chevron-down {
  font-size: 11px !important;
  width: auto !important;
  color: var(--sidebar-text-muted) !important;
  margin-left: auto;
  transition: transform .2s ease;
}
.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

/* Hover state */
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.collapsed:hover {
  background: var(--sidebar-hover-bg) !important;
  color: var(--sidebar-text) !important;
}
.sidebar-nav .nav-link:hover i {
  color: var(--sidebar-text) !important;
}

/* Active / selected state — collapse triggers (sub-menu open) */
.sidebar-nav .nav-link[data-bs-toggle="collapse"]:not(.collapsed) {
  background: var(--sidebar-active-bg) !important;
  color: white !important;
  font-weight: 600;
}
.sidebar-nav .nav-link[data-bs-toggle="collapse"]:not(.collapsed) i {
  color: white !important;
}
.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
  color: rgba(255, 255, 255, .7) !important;
}

/* Standalone nav links active */
.sidebar-nav .nav-link-alone:not(.collapsed) {
  background: var(--sidebar-active-bg) !important;
  color: white !important;
  font-weight: 600;
}

/* Sub-menu (collapse) */
.sidebar-nav .nav-content {
  list-style: none;
  padding: 2px 0 4px 30px;
  margin: 0;
  flex-direction: column;
  gap: 1px;
}
.sidebar-nav .nav-content.show {
  display: flex !important;
}
.sidebar-nav .nav-content li { list-style: none; }
.sidebar-nav .nav-content a,
.sidebar-nav .nav-content .ul-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .68) !important;
  text-decoration: none;
  transition: var(--transition-fast);
}
.sidebar-nav .nav-content a i {
  font-size: 5px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .38);
  display: inline-block;
  flex-shrink: 0;
}
.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  background: var(--sidebar-hover-bg) !important;
  color: var(--sidebar-text) !important;
}
.sidebar-nav .nav-content a.active i,
.sidebar-nav .nav-content a:hover i {
  background: var(--sidebar-text) !important;
}

/* Sidebar spinner */
.sidebar-nav .spinner-border {
  width: 1.2rem !important;
  height: 1.2rem !important;
  margin: 0 0 0 8px !important;
  border-width: 2px;
  color: rgba(255,255,255,.7) !important;
}

/* ─── 6. PAGE TITLE & BREADCRUMB ───────────────────────────────────── */
.pagetitle {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--clr-border);
}
.pagetitle h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--clr-text) !important;
  margin: 0 0 4px;
  letter-spacing: -.3px;
}
.pagetitle .breadcrumb {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--clr-text-3);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--clr-text-4);
  content: "/";
}
.breadcrumb-item a {
  color: var(--clr-text-3) !important;
  font-weight: 500;
  transition: var(--transition-fast);
}
.breadcrumb-item a:hover { color: var(--clr-primary) !important; }
.breadcrumb-item.active { color: var(--clr-text-2) !important; }

/* ─── 7. CARDS ──────────────────────────────────────────────────────── */
.card {
  background: var(--clr-surface) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 20px;
  overflow: visible;
  transition: var(--transition-fast);
}
.card:hover {
  box-shadow: var(--shadow-md) !important;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--clr-border) !important;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-footer {
  background: var(--clr-surface-2) !important;
  border-top: 1px solid var(--clr-border) !important;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}
.card-body { padding: 20px; }

/* Legacy NiceAdmin inner card pattern: card > card-body > card-header + card-body */
.card > .card-body > .card-header:first-child {
  margin: -20px -20px 20px;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.card > .card-body > .card-body { padding: 4px 0 0; }

/* Bootstrap 4 → 5 spacing aliases (mr/ml/pr/pl removed in BS5) */
.mr-0 { margin-right: 0 !important; }      .ml-0 { margin-left: 0 !important; }
.mr-1 { margin-right: .25rem !important; } .ml-1 { margin-left: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }  .ml-2 { margin-left: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }   .ml-3 { margin-left: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; } .ml-4 { margin-left: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }   .ml-5 { margin-left: 3rem !important; }
.pr-0 { padding-right: 0 !important; }     .pl-0 { padding-left: 0 !important; }
.pr-1 { padding-right: .25rem !important; }.pl-1 { padding-left: .25rem !important; }
.pr-2 { padding-right: .5rem !important; } .pl-2 { padding-left: .5rem !important; }
.pr-3 { padding-right: 1rem !important; }  .pl-3 { padding-left: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }.pl-4 { padding-left: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }  .pl-5 { padding-left: 3rem !important; }
.card-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--clr-text) !important;
  margin: 0;
  padding: 0 !important;
}
.card-subtitle {
  font-size: 12px;
  color: var(--clr-text-3) !important;
  font-weight: 400;
  margin-top: 2px;
}

/* Stat / info cards */
.info-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--clr-border) !important;
  background: var(--clr-surface) !important;
  padding: 20px;
  transition: var(--transition-fast);
}
.info-card:hover { box-shadow: var(--shadow-md) !important; }
.dashboard .info-card h6 {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--clr-text) !important;
  margin: 0 !important;
}

.dashboard .card-icon {
  font-size: 22px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--radius-md) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard .sales-card    .card-icon { color: var(--clr-primary);  background: var(--clr-primary-light); }
.dashboard .revenue-card  .card-icon { color: var(--clr-success);  background: var(--clr-success-light); }
.dashboard .customers-card .card-icon { color: var(--clr-warning); background: var(--clr-warning-light); }

/* ─── 8. BUTTONS ────────────────────────────────────────────────────── */
.btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 16px !important;
  border-radius: var(--radius) !important;
  transition: var(--transition-fast) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
  letter-spacing: -.1px;
  border-width: 1px !important;
}
.btn:focus { box-shadow: var(--ring) !important; outline: none !important; }

.btn-primary {
  background: var(--clr-primary) !important;
  border-color: var(--clr-primary) !important;
  color: var(--clr-btn-text) !important;
}
.btn-primary:hover {
  background: var(--clr-primary-hover) !important;
  border-color: var(--clr-primary-hover) !important;
}
.btn-primary:active {
  background: var(--clr-primary-active) !important;
}

.btn-outline-primary {
  background: transparent !important;
  border-color: var(--clr-primary) !important;
  color: var(--clr-primary) !important;
}
.btn-outline-primary:hover {
  background: var(--clr-primary-light) !important;
  color: var(--clr-primary) !important;
}

.btn-secondary {
  background: var(--clr-surface-2) !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-text-2) !important;
}
.btn-secondary:hover {
  background: var(--clr-border) !important;
  color: var(--clr-text) !important;
}

.btn-success {
  background: var(--clr-success) !important;
  border-color: var(--clr-success) !important;
  color: var(--clr-btn-text) !important;
}
.btn-success:hover { filter: brightness(1.08); }

.btn-danger {
  background: var(--clr-danger) !important;
  border-color: var(--clr-danger) !important;
  color: var(--clr-btn-text) !important;
}
.btn-danger:hover { filter: brightness(1.08); }

.btn-warning {
  background: var(--clr-warning) !important;
  border-color: var(--clr-warning) !important;
  color: var(--clr-btn-text) !important;
}
.btn-warning:hover { filter: brightness(1.08); }

.btn-sm {
  font-size: 12px !important;
  padding: 4px 10px !important;
}
.btn-lg {
  font-size: 15px !important;
  padding: 10px 22px !important;
}
.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button-custom,
.btn-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-primary) !important;
  color: #fff !important;
  border: 1px solid var(--clr-primary) !important;
  border-radius: var(--radius) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  transition: var(--transition-fast);
  cursor: pointer;
  width: auto;
  text-decoration: none;
}
.button-custom:hover { background: var(--clr-primary-hover) !important; color: #fff !important; }

/* ─── 9. FORM CONTROLS ─────────────────────────────────────────────── */
.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text-2);
  margin-bottom: 6px;
}

.form-control,
.form-select {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--clr-text) !important;
  background: var(--clr-surface) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius) !important;
  padding: 8px 12px !important;
  transition: var(--transition-fast) !important;
  box-shadow: var(--shadow-xs) !important;
  height: auto !important;
  line-height: 1.5 !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--clr-primary) !important;
  box-shadow: var(--ring) !important;
  outline: none !important;
  background: var(--clr-surface) !important;
}
.form-control::placeholder { color: var(--clr-text-4) !important; }
.form-control:disabled,
.form-select:disabled {
  background: var(--clr-surface-2) !important;
  color: var(--clr-text-3) !important;
  cursor: not-allowed;
}

/* ─── Custom dropdown arrow for native <select> elements ────────────── */
select.form-control,
select.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 40px !important;
  cursor: pointer;
}
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239E8E8E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Bootstrap 4 → 5 compat: .form-group lost its margin-bottom */
.form-group { margin-bottom: 1rem; }

.form-text { font-size: 12px; color: var(--clr-text-3); margin-top: 4px; }

.input-group-text {
  background: var(--clr-surface-2) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius) !important;
  color: var(--clr-text-3) !important;
  font-size: 13px;
}

.invalid-feedback { font-size: 12px; color: var(--clr-danger); margin-top: 4px; }
.valid-feedback   { font-size: 12px; color: var(--clr-success); margin-top: 4px; }

.form-check-input {
  width: 16px; height: 16px;
  border: 1.5px solid var(--clr-border-strong) !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: var(--transition-fast);
}
.form-check-input:checked {
  background-color: var(--clr-primary) !important;
  border-color: var(--clr-primary) !important;
}
.form-check-input:focus { box-shadow: var(--ring) !important; }

/* Select2 overrides */
.select2-container {
  width: 100% !important;
  min-width: 150px;
}
.select2-container--bootstrap4 .select2-selection {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius) !important;
  min-height: 38px !important;
  background: var(--clr-surface) !important;
  font-size: 13px !important;
}
/* Fixed height so the arrow centring math is predictable */
.select2-container--bootstrap4 .select2-selection--single {
  height: 38px !important;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  color: var(--clr-text) !important;
  line-height: 36px !important;
  padding: 0 30px 0 12px !important;
}
/* Centre the arrow vertically with transform instead of relying on height */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: auto !important;
  width: 20px !important;
  right: 6px !important;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
  top: 50% !important;
  left: 50% !important;
  margin-top: -3px !important;
  margin-left: -4px !important;
  border-color: var(--clr-text-3) transparent transparent !important;
}
.select2-dropdown {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
}
.select2-container--bootstrap4.select2-container--focus .select2-selection {
  border-color: var(--clr-primary) !important;
  box-shadow: var(--ring) !important;
}
.select2-results__option--highlighted {
  background-color: var(--clr-primary) !important;
}

/* ─── 10. TABLES ────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: var(--clr-surface);
  font-size: 13px;
  color: var(--clr-text-2);
  border-color: var(--clr-border);
}
.table > :not(caption) > * > * {
  padding: 10px 14px;
  border-bottom-color: var(--clr-border);
  background: transparent;
}
.table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--clr-text-3) !important;
  background: var(--clr-surface-2) !important;
  border-bottom: 1px solid var(--clr-border) !important;
  white-space: nowrap;
}
.table tbody tr {
  transition: background .12s;
}
.table tbody tr:hover > td {
  background: var(--clr-primary-light) !important;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 0 1px 0;
}
.table-bordered thead th {
  border-bottom: 2px solid var(--clr-border) !important;
}

/* DataTables overrides */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius) !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  color: var(--clr-text) !important;
  background: var(--clr-surface) !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--clr-primary) !important;
  box-shadow: var(--ring) !important;
  outline: none !important;
}
.dataTables_info,
.dataTables_length label,
.dataTables_filter label {
  font-size: 12px !important;
  color: var(--clr-text-3) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-size: 12px !important;
  border-radius: var(--radius) !important;
  padding: 4px 10px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--clr-primary) !important;
  border-color: var(--clr-primary) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--clr-primary-light) !important;
  border-color: var(--clr-primary-dim) !important;
  color: var(--clr-primary) !important;
}
#dataTable_length select { width: auto !important; min-width: 70px; }

/* ─── 11. BADGES ────────────────────────────────────────────────────── */
.badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: var(--radius-full) !important;
  letter-spacing: .2px;
}
.badge.bg-primary { background: var(--clr-primary-light) !important; color: var(--clr-primary) !important; }
.badge.bg-success { background: var(--clr-success-light) !important; color: var(--clr-success) !important; }
.badge.bg-danger  { background: var(--clr-danger-light)  !important; color: var(--clr-danger) !important; }
.badge.bg-warning { background: var(--clr-warning-light) !important; color: var(--clr-warning-text) !important; }
.badge.bg-info    { background: var(--clr-info-light)    !important; color: var(--clr-info) !important; }
.badge.bg-secondary { background: var(--clr-surface-2) !important; color: var(--clr-text-2) !important; border: 1px solid var(--clr-border); }

/* ─── 12. ALERTS ────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-md) !important;
  border-width: 1px !important;
  font-size: 13px;
  padding: 12px 16px !important;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert-success {
  background: var(--clr-success-light) !important;
  border-color: var(--clr-success) !important;
  color: var(--clr-success-text) !important;
}
.alert-danger {
  background: var(--clr-danger-light) !important;
  border-color: var(--clr-danger) !important;
  color: var(--clr-danger-text) !important;
}
.alert-warning {
  background: var(--clr-warning-light) !important;
  border-color: var(--clr-warning) !important;
  color: var(--clr-warning-text) !important;
}
.alert-info {
  background: var(--clr-info-light) !important;
  border-color: var(--clr-info) !important;
  color: var(--clr-info-text) !important;
}
.alert-heading { font-weight: 600; }
.btn-close { opacity: .6; }
.btn-close:hover { opacity: 1; }

/* ─── 13. MODALS ────────────────────────────────────────────────────── */
.modal-content {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  background: var(--clr-surface) !important;
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--clr-border) !important;
  padding: 18px 22px;
  background: var(--clr-surface) !important;
}
.modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--clr-text) !important;
}
.modal-body { padding: 22px; }
.modal-footer {
  border-top: 1px solid var(--clr-border) !important;
  padding: 14px 22px;
  background: var(--clr-surface-2) !important;
}
.modal-backdrop.show { opacity: .4; }

/* ─── 14. FOOTER ────────────────────────────────────────────────────── */
#footer {
  padding: 16px 32px;
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  font-size: 12px;
  color: var(--clr-text-3);
  transition: var(--transition-slow);
}
.footer-copyright {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.logo-footer {
  height: 28px;
  width: auto;
  opacity: .6;
}
.text-footer p {
  margin: 0;
  color: var(--clr-text-3);
  font-size: 12px;
  text-align: center;
}
.text-footer .border-top {
  border-color: var(--clr-border) !important;
  margin-top: 6px;
  padding-top: 6px;
}
.text-footer a {
  color: var(--clr-primary);
  font-weight: 600;
}

/* ─── 15. DASHBOARD WIDGETS ─────────────────────────────────────────── */
/* News feed */
.news-feed.card {
  border-radius: var(--radius-lg) !important;
  transition: var(--transition-fast) !important;
  opacity: 1 !important;
}
.news-feed.card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}
.news-feed .focusImage img {
  border-radius: var(--radius-md) !important;
  object-fit: cover;
  width: 100%;
  height: 120px;
}

/* Top intro */
.top-intro img {
  width: 80px !important;
  height: 80px !important;
  border-radius: var(--radius-lg) !important;
  object-fit: contain;
}

/* Breadcrumb section title */
.t-show {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--clr-text) !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--clr-border) !important;
}

/* ─── 16. TABS ──────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--clr-border) !important;
  gap: 2px;
}
.nav-tabs .nav-link {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--clr-text-3) !important;
  border: none !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 8px 16px !important;
  transition: var(--transition-fast);
}
.nav-tabs .nav-link:hover { color: var(--clr-primary) !important; background: var(--clr-primary-light) !important; }
.nav-tabs .nav-link.active {
  color: var(--clr-primary) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--clr-primary) !important;
  font-weight: 600 !important;
}

.nav-tabs-bordered { border-bottom: 2px solid var(--clr-border) !important; }
.nav-tabs-bordered .nav-link { color: var(--clr-text-2) !important; margin-bottom: -2px !important; }
.nav-tabs-bordered .nav-link:hover { color: var(--clr-primary) !important; }
.nav-tabs-bordered .nav-link.active {
  color: var(--clr-primary) !important;
  border-bottom: 2px solid var(--clr-primary) !important;
  background: transparent !important;
}

/* ─── 17. ACCORDION ─────────────────────────────────────────────────── */
.accordion-item {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 8px;
  overflow: hidden;
}
.accordion-button {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--clr-text) !important;
  background: var(--clr-surface) !important;
  padding: 14px 18px !important;
}
.accordion-button:not(.collapsed) {
  color: var(--clr-primary) !important;
  background: var(--clr-primary-light) !important;
  box-shadow: none !important;
}
.accordion-button:focus { box-shadow: none !important; }
.accordion-body {
  padding: 14px 18px !important;
  font-size: 13px;
  color: var(--clr-text-2);
}

/* ─── 18. SWEETALERT ────────────────────────────────────────────────── */
.sweet-alert {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--clr-border) !important;
}
.sweet-alert h2 {
  font-size: 18px !important;
  color: var(--clr-text) !important;
}
.sweet-alert .btn {
  border-radius: var(--radius) !important;
}

/* ─── 19. LOADING OVERLAY ───────────────────────────────────────────── */
.loadingoverlay {
  border-radius: var(--radius-lg);
}
.loadingoverlay_element { font-size: 16px !important; }

/* Spinner */
.spinner-border {
  width: 1.5rem !important;
  height: 1.5rem !important;
  border-width: 2px !important;
  margin: 0 !important;
  color: var(--clr-primary) !important;
}

/* ─── 20. MISC UTILITIES ────────────────────────────────────────────── */
.back-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--clr-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: var(--transition-fast);
  z-index: 999;
}
.back-top:hover { background: var(--clr-primary-hover); transform: translateY(-2px); }
.back-top.not-visible { opacity: 0; pointer-events: none; bottom: 0; }
.back-top.active { opacity: 1; }

.border-title {
  display: block;
  width: 32px; height: 3px;
  background: var(--clr-primary);
  border-radius: var(--radius-full);
  margin-top: 6px;
  border: none;
}

.boxs {
  width: 48px; height: 48px;
  background: var(--clr-primary-light);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.boxs i { color: var(--clr-primary) !important; font-size: 22px !important; }

/* Section dashboard wrapper */
.section.dashboard { padding-top: 0; }

/* Overflow helpers */
.overflow-y { overflow-x: hidden; overflow-y: auto; }
.overflow-x { overflow-x: auto; overflow-y: hidden; }

/* Auth / login page link */
.custom-login-btn {
  font-size: 13px;
  font-weight: 500;
  color: #fff !important;
  background: var(--clr-primary) !important;
  border: 1px solid var(--clr-primary) !important;
  padding: 7px 18px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: var(--transition-fast);
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.custom-login-btn:hover { background: var(--clr-primary-hover) !important; border-color: var(--clr-primary-hover) !important; color: #fff !important; }

/* Error page */
.error-404 h1 {
  font-size: 120px !important;
  color: var(--clr-primary) !important;
  font-weight: 800 !important;
}
.error-404 h2 { color: var(--clr-text) !important; }

/* ─── 21. DARK MODE OVERRIDES ───────────────────────────────────────── */

/* ── Core surfaces ── */
[data-theme="dark"] .card,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .header,
[data-theme="dark"] #footer {
  background: var(--clr-surface) !important;
}
[data-theme="dark"] .card-footer {
  background: var(--clr-surface-2) !important;
  border-color: var(--clr-border) !important;
}

/* ── Sidebar + header logo zone — dark wine via updated token ── */
[data-theme="dark"] .sidebar      { background: var(--sidebar-bg) !important; }
[data-theme="dark"] .header .logo { background: var(--sidebar-bg) !important; }

/* ── Form inputs ── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] select {
  background: var(--clr-surface-2) !important;
  color: var(--clr-text) !important;
  border-color: var(--clr-border) !important;
}
[data-theme="dark"] select option {
  background-color: #2D1515 !important;
  color: #F5F5F5 !important;
}
[data-theme="dark"] select {
  scrollbar-width: thin !important;
  scrollbar-color: #A63232 #2D1515 !important;
}
[data-theme="dark"] .form-control::placeholder { color: var(--clr-text-4) !important; }
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled {
  background: var(--clr-surface) !important;
  color: var(--clr-text-4) !important;
}
[data-theme="dark"] .input-group-text {
  background: var(--clr-surface-2) !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-text-3) !important;
}

/* ── Tables ── */
[data-theme="dark"] .table > :not(caption) > * > * {
  --bs-table-bg: var(--clr-surface);
  color: var(--clr-text-2);
}
[data-theme="dark"] .table thead th {
  background: var(--clr-surface-2) !important;
  color: var(--clr-text-3) !important;
}
[data-theme="dark"] .table tbody tr:hover > td {
  background: var(--clr-surface-2) !important;
}

/* ── Buttons ── */
[data-theme="dark"] .btn-secondary {
  background: var(--clr-surface-2) !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-text-2) !important;
}
[data-theme="dark"] .btn-outline-primary:hover {
  background: var(--clr-primary-light) !important;
}
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* Danger — outline style on dark bg so they don't disappear */
[data-theme="dark"] .btn-danger {
  background: transparent !important;
  border-color: var(--clr-danger) !important;
  color: var(--clr-danger) !important;
}
[data-theme="dark"] .btn-danger:hover {
  background: var(--clr-danger) !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-outline-danger {
  background: transparent !important;
  border-color: var(--clr-danger) !important;
  color: var(--clr-danger) !important;
}
[data-theme="dark"] .btn-outline-danger:hover {
  background: var(--clr-danger) !important;
  color: #fff !important;
}

/* Hamburger / sidebar-toggle */
[data-theme="dark"] .toggle-sidebar-btn,
[data-theme="dark"] .toggle-sidebar-btn i {
  color: var(--clr-text) !important;
}

/* ── Alerts — semantic light tokens are dark in dark mode; lighten text ── */
[data-theme="dark"] .alert-success { color: #6ee7b7 !important; }
[data-theme="dark"] .alert-danger  { color: #fca5a5 !important; }
[data-theme="dark"] .alert-warning { color: #fcd34d !important; }
[data-theme="dark"] .alert-info    { color: #93c5fd !important; }

/* ── Badges — text must be light to read on darkened semantic backgrounds ── */
[data-theme="dark"] .badge.bg-success { color: #6ee7b7 !important; }
[data-theme="dark"] .badge.bg-danger  { color: #fca5a5 !important; }
[data-theme="dark"] .badge.bg-warning { color: #fcd34d !important; }
[data-theme="dark"] .badge.bg-info    { color: #93c5fd !important; }

/* ── Select2 (bootstrap4 theme) ── */
[data-theme="dark"] .select2-dropdown {
  background-color: #2D1515 !important;
  border-color: #4D2525 !important;
  color: #F5F5F5 !important;
}
[data-theme="dark"] .select2-results__options {
  background-color: #2D1515 !important;
  scrollbar-width: thin !important;
  scrollbar-color: #A63232 #2D1515 !important;
}
[data-theme="dark"] .select2-results__option {
  background-color: #2D1515 !important;
  color: #F5F5F5 !important;
}
[data-theme="dark"] .select2-results__option--highlighted,
[data-theme="dark"] .select2-results__option[aria-selected=true] {
  background-color: #A63232 !important;
  color: #ffffff !important;
}
[data-theme="dark"] .select2-search__field,
[data-theme="dark"] .select2-search--dropdown .select2-search__field {
  background-color: #3D1E1E !important;
  color: #F5F5F5 !important;
  border-color: #4D2525 !important;
}
[data-theme="dark"] .select2-results__options::-webkit-scrollbar {
  width: 6px !important;
}
[data-theme="dark"] .select2-results__options::-webkit-scrollbar-track {
  background: #2D1515 !important;
}
[data-theme="dark"] .select2-results__options::-webkit-scrollbar-thumb {
  background: #A63232 !important;
  border-radius: 3px !important;
}
[data-theme="dark"] .select2-container--bootstrap4 .select2-selection {
  background: var(--clr-surface-2) !important;
  border-color: var(--clr-border) !important;
}
[data-theme="dark"] .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  color: var(--clr-text) !important;
}
[data-theme="dark"] .select2-container--bootstrap4 .select2-selection__placeholder {
  color: var(--clr-text-4) !important;
}

/* ── Select2 (default theme) ── */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background: var(--clr-surface-2) !important;
  border-color: var(--clr-border) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: var(--clr-text) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection__placeholder {
  color: var(--clr-text-4) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection__arrow b {
  border-color: var(--clr-text-3) transparent transparent !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--clr-primary-dim) !important;
  border-color: var(--clr-primary) !important;
  color: var(--clr-text) !important;
}
[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection {
  border-color: var(--clr-primary) !important;
  box-shadow: var(--ring) !important;
}

/* ── DataTables ── */
[data-theme="dark"] .dataTables_wrapper {
  color: var(--clr-text) !important;
}
[data-theme="dark"] table.dataTable,
[data-theme="dark"] table.dataTable tbody tr {
  background-color: var(--clr-surface) !important;
  color: var(--clr-text) !important;
  border-color: var(--clr-border) !important;
}
[data-theme="dark"] table.dataTable tbody tr:hover,
[data-theme="dark"] table.dataTable tbody tr:hover > td {
  background-color: var(--clr-surface-2) !important;
}
[data-theme="dark"] table.dataTable tbody td {
  border-color: var(--clr-border) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper select,
[data-theme="dark"] .dataTables_wrapper input[type="search"] {
  background: var(--clr-surface-2) !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-text) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter label {
  color: var(--clr-text-3) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate span .paginate_button,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.paginate_button_previous,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.paginate_button_next,
[data-theme="dark"] div.dataTables_wrapper div.dataTables_paginate ul.pagination li.paginate_button a {
  background: transparent !important;
  background-color: transparent !important;
  color: #F5F5F5 !important;
  border: 1px solid #4D2525 !important;
  border-radius: 4px !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #A63232 !important;
  border-color: #A63232 !important;
  color: #fff !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #A63232 !important;
  border-color: #A63232 !important;
  color: #fff !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: transparent !important;
  color: #6B7280 !important;
  border-color: #4D2525 !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
/* DataTables Bootstrap4 integration — <a class="page-link"> is the visual button */
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.page-item > a.page-link {
  background-color: transparent !important;
  color: #F5F5F5 !important;
  border-color: #4D2525 !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.page-item.active > a.page-link,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.page-item.active > a.page-link:hover {
  background-color: #A63232 !important;
  color: #ffffff !important;
  border-color: #A63232 !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.page-item:not(.active) > a.page-link:hover {
  background-color: rgba(166,50,50,0.2) !important;
  color: #A63232 !important;
  border-color: #A63232 !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.page-item.disabled > a.page-link {
  background-color: transparent !important;
  color: #6B7280 !important;
  border-color: #4D2525 !important;
  opacity: 0.5 !important;
}

/* ── SweetAlert ── */
[data-theme="dark"] .sweet-alert {
  background: var(--clr-surface) !important;
  border-color: var(--clr-border) !important;
}
[data-theme="dark"] .sweet-alert h2 { color: var(--clr-text) !important; }
[data-theme="dark"] .sweet-alert p  { color: var(--clr-text-2) !important; }

/* ── Accordion ── */
[data-theme="dark"] .accordion-item {
  border-color: var(--clr-border) !important;
  background-color: var(--clr-surface) !important;
}
[data-theme="dark"] .accordion-button {
  background: var(--clr-surface) !important;
  color: var(--clr-text) !important;
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: var(--clr-primary-light) !important;
  color: var(--clr-primary) !important;
}
[data-theme="dark"] .accordion-button::after { filter: invert(0.7); }
[data-theme="dark"] .accordion-body {
  background-color: var(--clr-surface) !important;
  color: var(--clr-text-2) !important;
}
[data-theme="dark"] .accordion-collapse {
  background-color: var(--clr-surface) !important;
}

/* ── Dark mode toggle icon ── */
[data-theme="dark"] #darkModeToggle { color: #F59E0B; border-color: var(--clr-border); }

/* ── Jumbotron — overrides hardcoded inline background-color in views ── */
[data-theme="dark"] .jumbotron {
  background: var(--clr-surface-2) !important;
  color: var(--clr-text) !important;
}

/* ── Air-Datepicker ── */
[data-theme="dark"] .air-datepicker {
  background: var(--clr-surface) !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-text) !important;
}
[data-theme="dark"] .air-datepicker--navigation {
  border-bottom-color: var(--clr-border) !important;
}
[data-theme="dark"] .air-datepicker--cell.-selected- {
  background: var(--clr-primary) !important;
  color: #fff !important;
}
[data-theme="dark"] .air-datepicker--cell:hover {
  background: var(--clr-primary-light) !important;
}
[data-theme="dark"] .air-datepicker-nav--title,
[data-theme="dark"] .air-datepicker--cell.-day-name- {
  color: var(--clr-text-2) !important;
}
[data-theme="dark"] .air-datepicker-nav--action svg { stroke: var(--clr-text-2); }
[data-theme="dark"] .air-datepicker--cell.-other-month- { color: var(--clr-text-4) !important; }
[data-theme="dark"] .air-datepicker--cell.-focus-        { background: var(--clr-primary-dim) !important; }
[data-theme="dark"] .air-datepicker--pointer:after       { background: var(--clr-surface) !important; }

/* ── jQuery Multi-Select ── */
[data-theme="dark"] .ms-container .ms-selectable,
[data-theme="dark"] .ms-container .ms-selection {
  background: var(--clr-surface) !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-text) !important;
}
[data-theme="dark"] .ms-container .ms-list {
  background: var(--clr-surface) !important;
  border-color: var(--clr-border) !important;
}
[data-theme="dark"] .ms-container .ms-list li {
  color: var(--clr-text) !important;
}
[data-theme="dark"] .ms-container .ms-list li.ms-hover {
  background: var(--clr-primary) !important;
  color: #fff !important;
}
[data-theme="dark"] .ms-container .ms-list li.disabled {
  color: var(--clr-text-4) !important;
  background: transparent !important;
}
[data-theme="dark"] .ms-container .ms-optgroup-label {
  background: var(--clr-surface-2) !important;
  color: var(--clr-text-2) !important;
}
[data-theme="dark"] .ms-container .ms-selectable-header,
[data-theme="dark"] .ms-container .ms-selection-header {
  background: var(--clr-surface-2) !important;
  border-bottom-color: var(--clr-border) !important;
  color: var(--clr-text-2) !important;
}
[data-theme="dark"] .ms-container .ms-selectable-header input,
[data-theme="dark"] .ms-container .ms-selection-header input {
  background: var(--clr-surface) !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-text) !important;
}

/* ─── 22. ANIMATIONS ────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: fadeInUp .25s cubic-bezier(.4, 0, .2, 1) both;
}
.section.dashboard { animation: fadeInUp .3s cubic-bezier(.4, 0, .2, 1) both; }

/* ─── 23. RESPONSIVE ────────────────────────────────────────────────── */

/* Sidebar backdrop — mobile overlay */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  cursor: pointer;
}
.sidebar-backdrop.active { display: block; }

@media (max-width: 768px) {
  #main { padding: 16px 12px; }
  .pagetitle h1 { font-size: 18px; }
  .card-body { padding: 14px; }
  .btn { padding: 6px 12px !important; }
  .dash-hero .card-body { padding: 16px !important; }
}

@media print {
  .sidebar, .header, #footer, #darkModeToggle { display: none !important; }
  #main { margin: 0 !important; padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ─── 24. DASHBOARD — HOME/INDEX ───────────────────────────────────── */

/* Hero / welcome banner */
.dash-hero { border-left: 4px solid var(--clr-primary) !important; }
.dash-hero .card-body {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px !important;
}
.dash-hero-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  padding: 6px;
  background: var(--clr-primary-light);
  border: 1px solid var(--clr-primary-dim);
}
.dash-hero-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--clr-primary);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.dash-hero-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--clr-text) !important;
  margin: 0 0 8px !important;
  letter-spacing: -.3px;
}
.dash-hero-desc {
  font-size: 13px;
  color: var(--clr-text-3);
  margin: 0;
  line-height: 1.6;
}

/* Section label row */
.dash-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dash-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-text);
  margin: 0;
}

/* News feed list */
.dash-news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Individual news card — rendered as <a> */
.dash-news-card {
  display: block;
  text-decoration: none !important;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: var(--transition-fast);
  color: inherit;
}
.dash-news-card:hover {
  border-color: var(--clr-primary-dim);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: inherit;
}

.dash-news-inner {
  display: flex;
  align-items: stretch;
}

/* Image panel */
.dash-news-img {
  width: 220px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: var(--clr-surface-2);
}
.dash-news-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.dash-news-card:hover .dash-news-img img {
  transform: scale(1.03);
}

/* Text panel */
.dash-news-body {
  flex: 1;
  padding: 20px 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dash-news-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.dash-news-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--clr-text) !important;
  margin: 0 !important;
  line-height: 1.4;
  padding: 0 !important;
}
.dash-news-card:hover .dash-news-title {
  color: var(--clr-primary) !important;
}

.dash-news-date {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--clr-primary-light);
  border: 1px solid var(--clr-primary-dim);
  color: var(--clr-primary);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  line-height: 1.6;
}

.dash-news-content {
  font-size: 13px;
  color: var(--clr-text-3);
  margin: 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Empty state */
.dash-empty {
  text-align: center;
  padding: 64px 24px;
  background: var(--clr-surface);
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius-xl);
  color: var(--clr-text-4);
}
.dash-empty i {
  font-size: 40px;
  display: block;
  margin-bottom: 14px;
  opacity: .5;
}
.dash-empty p {
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-text-3);
  margin: 0;
}

/* Responsive: stack image on small screens */
@media (max-width: 640px) {
  .dash-hero .card-body {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px !important;
  }
  .dash-news-inner { flex-direction: column; }
  .dash-news-img   { width: 100%; height: 160px; }
  .dash-news-body  { padding: 14px 16px; }
}

/* ─── 25. SIDEBAR USER SECTION ──────────────────────────────────────── */
.sidebar-user-section {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--sidebar-border);
  background: var(--sidebar-active-bg);
  position: relative;
}
.sidebar-user-section::before {
  content: '';
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}

/* Avatar circle */
.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.28);
  color: var(--sidebar-text);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255,255,255,.20);
}

/* User name + role */
.sidebar-user-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.sidebar-user-role {
  font-size: 11px;
  font-weight: 500;
  color: var(--sidebar-text-muted);
  white-space: nowrap;
  display: block;
}

/* Icon action buttons (profile, sign-out) */
.sidebar-action-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius);
  color: rgba(255, 255, 255, .70);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.sidebar-action-btn:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
  border-color: rgba(255, 255, 255, .45);
}
.sidebar-signout-btn:hover {
  background: rgba(0, 0, 0, .25);
  color: #FFB0B0 !important;
  border-color: rgba(255, 176, 176, .50) !important;
}

/* Dark mode sidebar user section */
[data-theme="dark"] .sidebar-user-section {
  background: rgba(0, 0, 0, 0.30) !important;
  border-top-color: rgba(255, 255, 255, .08) !important;
}

/* Sidebar section headings (li.nav-heading) */
.sidebar-nav li.nav-heading {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--sidebar-text-muted);
  padding: 18px 10px 5px;
  margin: 0;
  list-style: none;
  user-select: none;
  pointer-events: none;
}

/* First heading — no top padding (flush with nav top) */
.sidebar-nav li.nav-heading:first-child {
  padding-top: 4px;
}

/* ─── 26. AUTH / LOGIN PAGE ─────────────────────────────────────────── */
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 40px 36px 36px;
  animation: fadeInUp .3s cubic-bezier(.4, 0, .2, 1) both;
}

/* Logo + system name */
.auth-logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  text-align: center;
}
.auth-logo-img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  padding: 8px;
  background: var(--clr-primary-light);
  border: 1px solid var(--clr-primary-dim);
}
.auth-system-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text-3);
  margin: 0;
  letter-spacing: -.1px;
}

/* Title block */
.auth-heading {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--clr-border);
}
.auth-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--clr-text) !important;
  margin: 0 0 5px !important;
  letter-spacing: -.35px;
}
.auth-subtitle {
  font-size: 13px;
  color: var(--clr-text-3);
  margin: 0;
}

/* Form layout */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.auth-field .form-label {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text-2);
}

/* Submit button */
.auth-submit {
  height: 42px;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-top: 4px;
  letter-spacing: -.1px;
}

/* Password show/hide toggle */
.password-toggle {
  background: var(--clr-surface-2) !important;
  border: 1px solid var(--clr-border) !important;
  border-left: none !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  color: var(--clr-text-3) !important;
  cursor: pointer;
  padding: 0 12px !important;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
}
.password-toggle:hover {
  background: var(--clr-primary-light) !important;
  color: var(--clr-primary) !important;
}

/* Server-side validation summary */
.validation-summary-valid   { display: none !important; }
.validation-summary-errors  {
  background: var(--clr-danger-light);
  border: 1px solid var(--clr-danger);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--clr-danger-text);
  margin-bottom: 4px;
}
.validation-summary-errors ul {
  margin: 0;
  padding-left: 16px;
}
.validation-summary-errors ul li { list-style-type: disc; }

/* ─── 27. HEADER USER AVATAR ────────────────────────────────────────── */
.header-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-hover));
  color: var(--clr-btn-text);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .5px;
  box-shadow: 0 1px 6px rgb(166 50 50 / .35);
}

/* Dropdown sign-out button danger highlight */
.dropdown-menu .dropdown-item.text-danger {
  color: var(--clr-danger) !important;
}
.dropdown-menu .dropdown-item.text-danger i {
  color: var(--clr-danger) !important;
}
.dropdown-menu .dropdown-item.text-danger:hover {
  background: var(--clr-danger-light) !important;
  color: var(--clr-danger) !important;
}

/* Role badge inside dropdown header */
.dropdown-menu .dropdown-header .badge {
  font-size: 10px !important;
  padding: 2px 7px !important;
  display: inline-block;
}

/* nav-profile chevron gap */
.nav-profile .bi-chevron-down {
  margin-left: 2px;
  font-size: 10px;
  color: var(--clr-text-3);
  transition: transform .2s ease;
}
.nav-profile[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

/* Header gap for nav-item list */
.header-nav ul.d-flex { gap: 4px; }

/* ─── FILTER FORM ROWS ──────────────────────────────────────────────── */
.card .form-horizontal .row,
.card form .row {
  row-gap: 4px;
}

/* Ensure the DataTables wrapper inside the results card has top breathing room */
#table { padding-top: 4px; }

/* ─── 28. DARK MODE — TARGETED BUGFIXES ─────────────────────────────── */

/* ── Contact / info-box — fix NiceAdmin hardcoded navy (#012970) ── */
.contact .info-box i {
  color: #A63232 !important;
}
.contact .info-box h3 {
  color: #A63232 !important;
}
.contact .info-box p {
  color: var(--clr-text-2) !important;
}

[data-theme="dark"] .contact .info-box {
  border-color: var(--clr-border) !important;
}
[data-theme="dark"] .contact .info-box i {
  /* icon: white is more legible than wine-red on dark bg */
  color: rgba(255, 255, 255, 0.85) !important;
}
[data-theme="dark"] .contact .info-box h3 {
  color: var(--clr-text) !important;
}
[data-theme="dark"] .contact .info-box p {
  color: var(--clr-text-2) !important;
}

/* Bootstrap .border class — dark mode border colour */
[data-theme="dark"] .border {
  border-color: var(--clr-border) !important;
}

/* ── DataTables — more specific selectors to beat CDN stylesheet ── */
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable thead td,
[data-theme="dark"] .dataTables_scrollHead th,
[data-theme="dark"] .dataTables_scrollHead td {
  background-color: var(--clr-surface-2) !important;
  color: var(--clr-text-3) !important;
  border-bottom-color: var(--clr-border) !important;
}
[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
[data-theme="dark"] table.dataTable.display tbody tr.odd {
  background-color: var(--clr-surface) !important;
}
[data-theme="dark"] table.dataTable tbody td {
  color: var(--clr-text-2) !important;
  border-color: var(--clr-border) !important;
}

/* ── Misc NiceAdmin hardcoded colour fixes ── */
[data-theme="dark"] .text-ln    { color: var(--clr-text-2) !important; }
[data-theme="dark"] .formular   { color: var(--clr-text) !important; }
[data-theme="dark"] .p-col      { color: var(--clr-primary) !important; }
[data-theme="dark"] .border-costume { border-color: var(--clr-primary) !important; }