/*
 * ============================================================
 *  Sidebar & Navbar Redesign
 *  Modern design system · Tailwind-inspired utility CSS
 *  Powered by jQuery (Bootstrap removed for these components)
 *
 *  Targets:
 *    .sidebar → sliderbar.blade.php
 *
 *  navigation.blade.php (the top navbar) is styled with Tailwind utility
 *  classes directly (see @source in resources/css/admin-ui.css) — this
 *  file only covers the navbar's native <select> dropdowns (appearance:
 *  none + custom arrow), which isn't Tailwind-utility-driven.
 *
 *  Load order: after all other stylesheets in master.blade.php
 * ============================================================
 */

/* ─────────────────────────────────────────────────────────────
   0. BOOTSTRAP / TAILWIND COMPATIBILITY GUARD
   Tailwind CDN can generate utility CSS for class names it finds
   in the DOM.  Several Bootstrap class names clash:
     .collapse → Tailwind visibility:collapse  (breaks navbar/modals)
   This section hard-restores Bootstrap's expected behaviour and
   must stay as the FIRST rule block so it isn't overridden below.
   ───────────────────────────────────────────────────────────── */

/* Bootstrap uses .collapse for display-based show/hide via JS.
   Tailwind's visibility:collapse makes elements invisible while
   still occupying space — this is NOT the same as display:none.
   Force visibility:visible so Bootstrap's display toggling works. */
.collapse,
.collapsing,
.collapse.in {
  visibility: visible !important;
}

/* Modal: ensure fade modals are visible when .in is applied */
.modal.fade.in,
.modal.in {
  visibility: visible !important;
}

/* bootstrap.min.css (which supplied the base .collapse/.collapsing rules)
   was removed app-wide — without it a non-.in .collapse element has no
   display:none at all (a <div> is display:block by default), so every
   sidebar submenu rendered permanently open regardless of the JS toggle.
   Restore the base show/hide pair bootstrap.css used to provide. */
.collapse:not(.in) {
  display: none !important;
}
.collapse.in {
  display:    block !important;
  visibility: visible !important;
}
.collapsing {
  position:                  relative !important;
  height:                    0 !important;
  overflow:                  hidden !important;
  transition-timing-function: ease !important;
  transition-duration:       0.3s !important;
  transition-property:       height, visibility !important;
}


/* ─────────────────────────────────────────────────────────────
   1. DESIGN TOKENS (CSS Custom Properties)
   ───────────────────────────────────────────────────────────── */
:root {
  /* Typeface */
  --font-sans:         'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  /* Sidebar palette */
  --sb-w:              260px;
  --sb-bg:             #0f172a;
  --sb-surface:        rgba(255, 255, 255, 0.04);
  --sb-divider:        rgba(255, 255, 255, 0.07);
  --sb-text:           #94a3b8;
  --sb-text-hover:     #e2e8f0;
  --sb-text-active:    #ffffff;
  --sb-icon:           #475569;
  --sb-icon-active:    #14b8a6;

  /* Teal accent */
  --accent:            #14b8a6;
  --accent-dim:        rgba(20, 184, 166, 0.13);
  --accent-border:     rgba(20, 184, 166, 0.45);
  --accent-hover:      #0d9488;

  /* Sidebar search */
  --sb-search-bg:      rgba(255, 255, 255, 0.07);
  --sb-search-border:  rgba(255, 255, 255, 0.12);

  /* Submenu */
  --sb-sub-bg:         rgba(0, 0, 0, 0.20);

  /* Navbar */
  --nav-h:             62px;
  --nav-bg:            #ffffff;
  --nav-border:        #e2e8f0;
  --nav-text:          #334155;
  --nav-muted:         #64748b;
  --nav-shadow:        0 1px 0 #e2e8f0, 0 2px 8px rgba(0,0,0,0.04);

  /* Shared */
  --ease:              cubic-bezier(0.4, 0, 0.2, 1);
  --r-xs:              4px;
  --r-sm:              6px;
  --r:                 8px;
  --r-lg:              12px;
  --r-full:            9999px;
}


/* ─────────────────────────────────────────────────────────────
   2. WRAPPER LAYOUT
   ───────────────────────────────────────────────────────────── */

/* Body: kill any MD padding-top that would offset main-panel but not the fixed sidebar */
body {
  padding-top: 0 !important;
  margin-top:  0 !important;
}

/* Wrapper is a plain block — sidebar is position:fixed so flex adds no value
   and would make main-panel overflow by sidebar-width */
.wrapper {
  position:   relative !important;
  min-height: 100vh !important;
  display:    block !important;
  top:        0 !important;
}

/* Main panel shifts right by exactly sidebar width */
.main-panel {
  margin-left: var(--sb-w) !important;
  width:       calc(100% - var(--sb-w)) !important;
  float:       none !important;
  min-height:  100vh !important;
  display:     block !important;
  transition:  margin-left 0.25s var(--ease),
               width       0.25s var(--ease) !important;
}

/* Navbar font: nothing else on the page sets a global body font-family,
   so without this the navbar falls back to the browser default while
   .sidebar (below) forces --font-sans — same fix, same variable, so the
   two match. */
.app-navbar {
  font-family: var(--font-sans) !important;
}


/* ─────────────────────────────────────────────────────────────
   3. SIDEBAR — CONTAINER
   ───────────────────────────────────────────────────────────── */
.sidebar {
  position:         fixed !important;
  top:              0 !important;
  left:             0 !important;
  height:           100vh !important;
  width:            var(--sb-w) !important;
  background:       var(--sb-bg) !important;
  box-shadow:       3px 0 20px rgba(0, 0, 0, 0.30) !important;
  border-right:     none !important;
  border-radius:    0 !important;
  z-index:          1030 !important;
  display:          flex !important;
  flex-direction:   column !important;
  overflow:         hidden !important;
  font-family:      var(--font-sans) !important;
  transition:       width 0.25s var(--ease),
                    transform 0.25s var(--ease) !important;
}

/* Kill Material Dashboard's background-image overlay */
.sidebar::before,
.sidebar::after {
  display: none !important;
}

/* Kill any data-attribute colour overrides from MD */
.sidebar[data-background-color],
.sidebar[data-active-color],
.sidebar[data-image] {
  background: var(--sb-bg) !important;
}


/* ─────────────────────────────────────────────────────────────
   4. SIDEBAR — LOGO / HEADER AREA
   ───────────────────────────────────────────────────────────── */
.sidebar .logo {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  gap:             8px !important;
  padding:         18px 14px 14px !important;
  border-bottom:   1px solid var(--sb-divider) !important;
  background:      rgba(255, 255, 255, 0.02) !important;
  flex-shrink:     0 !important;
  min-height:      auto !important;
  text-align:      center !important;
}

/* Logo image */
.sidebar .logo .photo1 {
  display:         flex !important;
  justify-content: center !important;
}

.sidebar .logo .photo1 .img-responsive {
  height:        50px !important;
  width:         auto !important;
  max-width:     180px !important;
  object-fit:    contain !important;
  border-radius: var(--r) !important;
  margin:        0 auto !important;
}

/* Institution name */
.sidebar .logo a.simple-text.logo-normal {
  display:         block !important;
  color:           #cbd5e1 !important;
  font-size:       12.5px !important;
  font-weight:     600 !important;
  letter-spacing:  0.2px !important;
  line-height:     1.4 !important;
  text-align:      center !important;
  text-transform:  none !important;
  white-space:     normal !important;
  word-break:      break-word !important;
  padding:         0 !important;
  margin-top:      0 !important;
  opacity:         1 !important;
  text-decoration: none !important;
  transition:      color 0.15s var(--ease) !important;
}

.sidebar .logo a.simple-text.logo-normal:hover {
  color: #ffffff !important;
  background: none !important;
}

/* Mini-mode: hide text, shrink logo */
.sidebar-mini .sidebar .logo a.simple-text.logo-normal {
  opacity:   0 !important;
  max-height: 0 !important;
  overflow:  hidden !important;
  padding:   0 !important;
  margin:    0 !important;
}

.sidebar-mini .sidebar .logo .photo1 .img-responsive {
  height: 36px !important;
}


/* ─────────────────────────────────────────────────────────────
   5. SIDEBAR — WRAPPER (scrollable body)
   ───────────────────────────────────────────────────────────── */
.sidebar .sidebar-wrapper {
  flex:             1 !important;
  overflow-y:       auto !important;
  overflow-x:       hidden !important;
  height:           auto !important;
  padding-bottom:   32px !important;
  /* MD JS reads data-background-color="white" and sets inline
     background; force dark colour here to override that */
  background:       var(--sb-bg) !important;
  background-color: var(--sb-bg) !important;

  /* Thin custom scrollbar */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.10) transparent !important;
}

/* Kill any pseudo-element overlays MD adds to sidebar-wrapper */
.sidebar .sidebar-wrapper::before,
.sidebar .sidebar-wrapper::after {
  display: none !important;
}

.sidebar .sidebar-wrapper::-webkit-scrollbar {
  width: 3px;
}
.sidebar .sidebar-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
  background:    rgba(255, 255, 255, 0.12);
  border-radius: var(--r-full);
}
.sidebar .sidebar-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}


/* ─────────────────────────────────────────────────────────────
   6. SIDEBAR — SEARCH BOX
   ───────────────────────────────────────────────────────────── */
.sidebar .sidebar-search {
  position:      sticky !important;
  top:           0 !important;
  z-index:       10 !important;
  background:    var(--sb-bg) !important;
  padding:       12px 12px 10px !important;
  border-bottom: 1px solid var(--sb-divider) !important;
  margin:        0 !important;
}

.sidebar .sidebar-search .input-group {
  position: relative !important;
  width:    100% !important;
}

/* Override all previous inline + scoped styles on #sidebarSearch */
#sidebarSearch {
  appearance:      none !important;
  -webkit-appearance: none !important;
  display:         block !important;
  width:           100% !important;
  height:          36px !important;
  padding:         0 68px 0 14px !important;
  background:      var(--sb-search-bg) !important;
  border:          1px solid var(--sb-search-border) !important;
  border-radius:   var(--r-full) !important;
  color:           #e2e8f0 !important;
  font-family:     "Roboto", "Helvetica Neue", Arial, sans-serif !important;
  font-size:       12.5px !important;
  font-weight:     400 !important;
  line-height:     1 !important;
  letter-spacing:  0.01em !important;
  box-shadow:      none !important;
  outline:         none !important;
  transform:       none !important;
  transition:      border-color 0.15s var(--ease),
                   background   0.15s var(--ease),
                   box-shadow   0.15s var(--ease) !important;
}

#sidebarSearch::placeholder {
  color:       rgba(148, 163, 184, 0.45) !important;
  font-size:   12px !important;
  font-style:  normal !important;
  font-weight: 400 !important;
}

#sidebarSearch:hover {
  border-color: rgba(255, 255, 255, 0.20) !important;
  transform:    none !important;
  box-shadow:   none !important;
}

#sidebarSearch:focus {
  background:   rgba(255, 255, 255, 0.10) !important;
  border-color: var(--accent-border) !important;
  box-shadow:   0 0 0 3px var(--accent-dim) !important;
  color:        #ffffff !important;
  transform:    none !important;
}

/* Invalid input shake stays unchanged */
#sidebarSearch.invalid-input {
  border-color: #f87171 !important;
  box-shadow:   0 0 0 3px rgba(248, 113, 113, 0.20) !important;
  animation:    snShake 0.3s ease-in-out !important;
}

@keyframes snShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-2px); }
  75%      { transform: translateX(2px); }
}

/* Search icon (right) */
.sidebar .sidebar-search .input-group > span.input-group-addon:last-of-type {
  position:       absolute !important;
  right:          10px !important;
  top:            50% !important;
  transform:      translateY(-50%) !important;
  background:     transparent !important;
  border:         none !important;
  padding:        0 !important;
  pointer-events: none !important;
  z-index:        5 !important;
}

.sidebar .sidebar-search .input-group > span.input-group-addon:last-of-type i {
  font-size: 16px !important;
  color:     rgba(148, 163, 184, 0.45) !important;
  display:   block !important;
}

/* Clear button (second-to-last addon) */
#searchClearBtn {
  position:       absolute !important;
  right:          32px !important;
  top:            50% !important;
  transform:      translateY(-50%) !important;
  background:     transparent !important;
  border:         none !important;
  padding:        0 !important;
  pointer-events: all !important;
  cursor:         pointer !important;
  z-index:        6 !important;
  display:        none; /* shown via JS */
  transition:     opacity 0.15s !important;
}

#searchClearBtn i {
  font-size: 15px !important;
  color:     rgba(148, 163, 184, 0.50) !important;
  transition: color 0.15s var(--ease) !important;
}

#searchClearBtn:hover i {
  color: var(--accent) !important;
}

/* No-results message */
#noResultsMessage {
  background:    rgba(255, 255, 255, 0.04) !important;
  border:        1px solid var(--sb-divider) !important;
  border-radius: var(--r-lg) !important;
  margin:        10px 10px 0 !important;
  padding:       22px 14px !important;
  text-align:    center !important;
  animation:     snFadeUp 0.2s var(--ease) !important;
}

#noResultsMessage i {
  display:       block !important;
  font-size:     38px !important;
  color:         rgba(148, 163, 184, 0.25) !important;
  margin-bottom: 8px !important;
  margin-left:   auto !important;
  margin-right:  auto !important;
}

#noResultsMessage p {
  font-size:   13px !important;
  font-weight: 500 !important;
  color:       rgba(148, 163, 184, 0.65) !important;
  margin:      0 0 3px !important;
}

#noResultsMessage small {
  font-size:  11px !important;
  color:      rgba(148, 163, 184, 0.35) !important;
  font-style: italic !important;
}

@keyframes snFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}


/* ─────────────────────────────────────────────────────────────
   7. SIDEBAR — USER SECTION
   ───────────────────────────────────────────────────────────── */
.sidebar .sidebar-wrapper .user {
  padding:        8px 10px !important;
  border-bottom:  1px solid var(--sb-divider) !important;
  margin:         0 !important;
}

/* Trigger row */
.sidebar .sidebar-wrapper .user .info > a {
  display:         flex !important;
  align-items:     center !important;
  gap:             8px !important;
  padding:         8px 10px !important;
  border-radius:   var(--r) !important;
  color:           var(--sb-text) !important;
  font-size:       13px !important;
  font-weight:     500 !important;
  text-decoration: none !important;
  transition:      background 0.15s var(--ease),
                   color      0.15s var(--ease) !important;
}

.sidebar .sidebar-wrapper .user .info > a:hover {
  background: var(--sb-surface) !important;
  color:      var(--sb-text-hover) !important;
}

.sidebar .sidebar-wrapper .user .info > a i {
  font-size:  20px !important;
  color:      var(--sb-icon) !important;
  flex-shrink: 0 !important;
}

.sidebar .sidebar-wrapper .user .info > a > span {
  flex:          1 !important;
  font-size:     13px !important;
  color:         inherit !important;
  margin-left:   0 !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  white-space:   nowrap !important;
  vertical-align: baseline !important;
}

.sidebar .sidebar-wrapper .user .info > a .caret {
  margin-left:    auto !important;
  flex-shrink:    0 !important;
  border-top-color: rgba(148, 163, 184, 0.5) !important;
  transition:     transform 0.2s var(--ease) !important;
}

/* Rotate caret when expanded */
.sidebar .sidebar-wrapper .user .info > a[aria-expanded="true"] .caret {
  transform: rotate(180deg) !important;
}

/* User dropdown collapse */
.sidebar .sidebar-wrapper .user .info .collapse,
.sidebar .sidebar-wrapper .user .info .collapsing {
  background:    var(--sb-sub-bg) !important;
  border-radius: 0 0 var(--r) var(--r) !important;
  margin-top:    2px !important;
}

.sidebar .sidebar-wrapper .user .info .collapse ul.nav,
.sidebar .sidebar-wrapper .user .info .collapsing ul.nav {
  padding: 4px 0 6px !important;
  margin:  0 !important;
}

.sidebar .sidebar-wrapper .user .info .collapse ul.nav li,
.sidebar .sidebar-wrapper .user .info .collapsing ul.nav li {
  padding-left:  0 !important;
  padding-right: 0 !important;
  margin:        1px 6px !important;
}

.sidebar .sidebar-wrapper .user .info .collapse ul.nav li a,
.sidebar .sidebar-wrapper .user .info .collapsing ul.nav li a {
  display:         flex !important;
  align-items:     center !important;
  gap:             8px !important;
  padding:         7px 10px 7px 30px !important;
  border-radius:   var(--r-sm) !important;
  color:           var(--sb-text) !important;
  font-size:       12.5px !important;
  text-decoration: none !important;
  transition:      background 0.15s var(--ease), color 0.15s var(--ease) !important;
}

.sidebar .sidebar-wrapper .user .info .collapse ul.nav li a:hover,
.sidebar .sidebar-wrapper .user .info .collapsing ul.nav li a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color:      var(--sb-text-hover) !important;
}

.sidebar .sidebar-wrapper .user .info .collapse ul.nav li a i,
.sidebar .sidebar-wrapper .user .info .collapsing ul.nav li a i {
  font-size: 15px !important;
  color:     var(--sb-icon) !important;
}

.sidebar .sidebar-wrapper .user .info .collapse ul.nav li a .sidebar-normal,
.sidebar .sidebar-wrapper .user .info .collapsing ul.nav li a .sidebar-normal {
  color:   inherit !important;
  font-size: 12.5px !important;
  margin:  0 !important;
}


/* ─────────────────────────────────────────────────────────────
   8. SIDEBAR — MAIN NAV LIST
   ───────────────────────────────────────────────────────────── */

/* Top-level <ul class="nav"> inside sidebar-wrapper */
.sidebar .sidebar-wrapper > ul.nav {
  margin:  10px 0 0 !important;
  padding: 0 10px !important;
  list-style: none !important;
}

/* ── Top-level list items ── */
.sidebar .sidebar-wrapper > ul.nav > li {
  margin-bottom:  4px !important;
  border-radius:  var(--r) !important;
  overflow:       visible !important;
  list-style:     none !important;
  padding:        0 !important;
}

/* ── Top-level anchor ── */
.sidebar .sidebar-wrapper > ul.nav > li > a {
  display:         flex !important;
  align-items:     center !important;
  gap:             12px !important;
  min-height:      44px !important;
  padding:         10px 14px !important;
  border-radius:   var(--r) !important;
  border-left:     3px solid transparent !important;
  color:           var(--sb-text) !important;
  font-size:       13px !important;
  font-weight:     500 !important;
  letter-spacing:  0.15px !important;
  text-decoration: none !important;
  white-space:     nowrap !important;
  overflow:        hidden !important;
  transition:      background   0.15s var(--ease),
                   color        0.15s var(--ease),
                   border-color 0.15s var(--ease) !important;
}

.sidebar .sidebar-wrapper > ul.nav > li > a:hover {
  background: var(--sb-surface) !important;
  color:      var(--sb-text-hover) !important;
}

/* Icon in top-level anchor */
.sidebar .sidebar-wrapper > ul.nav > li > a i {
  font-size:  19px !important;
  color:      var(--sb-icon) !important;
  flex-shrink: 0 !important;
  transition:  color 0.15s var(--ease) !important;
}

/* <p> label in top-level anchor */
.sidebar .sidebar-wrapper > ul.nav > li > a p {
  flex:          1 !important;
  margin:        0 !important;
  font-size:     13px !important;
  font-weight:   500 !important;
  color:         inherit !important;
  line-height:   1.4 !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  display:       flex !important;
  align-items:   center !important;
  text-transform: none !important;
}

/* Caret (collapse toggle) */
.sidebar .sidebar-wrapper > ul.nav > li > a p .caret,
.sidebar .sidebar-wrapper > ul.nav > li > a .caret {
  margin-left:    auto !important;
  flex-shrink:    0 !important;
  border-top-color: rgba(148, 163, 184, 0.45) !important;
  transition:     transform 0.22s var(--ease) !important;
}

/* Rotate caret when open */
.sidebar .sidebar-wrapper > ul.nav > li > a[aria-expanded="true"] p .caret,
.sidebar .sidebar-wrapper > ul.nav > li > a[aria-expanded="true"] .caret {
  transform: rotate(180deg) !important;
}

/* ── ACTIVE top-level item ── */
.sidebar .sidebar-wrapper > ul.nav > li.active > a {
  background:   var(--accent-dim) !important;
  color:        var(--accent) !important;
  border-left:  3px solid var(--accent) !important;
  font-weight:  600 !important;
}

.sidebar .sidebar-wrapper > ul.nav > li.active > a i {
  color: var(--accent) !important;
}

.sidebar .sidebar-wrapper > ul.nav > li.active > a p {
  color: var(--accent) !important;
}

.sidebar .sidebar-wrapper > ul.nav > li.active > a p .caret,
.sidebar .sidebar-wrapper > ul.nav > li.active > a .caret {
  border-top-color: var(--accent) !important;
}

/* ── HOVER on active item ── */
.sidebar .sidebar-wrapper > ul.nav > li.active > a:hover {
  background: rgba(20, 184, 166, 0.18) !important;
}


/* ─────────────────────────────────────────────────────────────
   9. SIDEBAR — COLLAPSE / SUBMENU
   ───────────────────────────────────────────────────────────── */

/* Collapse wrapper */
.sidebar .sidebar-wrapper > ul.nav > li > .collapse,
.sidebar .sidebar-wrapper > ul.nav > li > .collapsing {
  background:    var(--sb-sub-bg) !important;
  border-radius: 0 0 var(--r) var(--r) !important;
  overflow:      hidden !important;
}

/* Submenu <ul class="nav"> */
.sidebar .sidebar-wrapper > ul.nav > li > .collapse > ul.nav,
.sidebar .sidebar-wrapper > ul.nav > li > .collapsing > ul.nav {
  padding:    6px 0 8px !important;
  margin:     0 !important;
  list-style: none !important;
}

/* Submenu items */
.sidebar .sidebar-wrapper > ul.nav > li > .collapse > ul.nav > li,
.sidebar .sidebar-wrapper > ul.nav > li > .collapsing > ul.nav > li {
  list-style:    none !important;
  margin:        2px 8px !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
  border-radius: var(--r-sm) !important;
}

/* Submenu anchors */
.sidebar .sidebar-wrapper > ul.nav > li > .collapse > ul.nav > li > a,
.sidebar .sidebar-wrapper > ul.nav > li > .collapsing > ul.nav > li > a {
  display:         flex !important;
  align-items:     center !important;
  gap:             10px !important;
  min-height:      38px !important;
  padding:         8px 12px 8px 20px !important;
  border-radius:   var(--r-sm) !important;
  border-left:     2px solid transparent !important;
  color:           var(--sb-text) !important;
  font-size:       12.5px !important;
  font-weight:     400 !important;
  text-decoration: none !important;
  transition:      background   0.15s var(--ease),
                   color        0.15s var(--ease),
                   border-color 0.15s var(--ease) !important;
}

.sidebar .sidebar-wrapper > ul.nav > li > .collapse > ul.nav > li > a:hover,
.sidebar .sidebar-wrapper > ul.nav > li > .collapsing > ul.nav > li > a:hover {
  background: rgba(255, 255, 255, 0.055) !important;
  color:      var(--sb-text-hover) !important;
}

/* Submenu icon */
.sidebar .sidebar-wrapper > ul.nav > li > .collapse > ul.nav > li > a i,
.sidebar .sidebar-wrapper > ul.nav > li > .collapsing > ul.nav > li > a i {
  font-size:  15px !important;
  color:      var(--sb-icon) !important;
  flex-shrink: 0 !important;
  transition:  color 0.15s var(--ease) !important;
}

/* Submenu label */
.sidebar .sidebar-wrapper > ul.nav > li > .collapse > ul.nav > li > a .sidebar-normal,
.sidebar .sidebar-wrapper > ul.nav > li > .collapsing > ul.nav > li > a .sidebar-normal {
  flex:          1 !important;
  color:         inherit !important;
  font-size:     12.5px !important;
  font-weight:   inherit !important;
  margin:        0 !important;
  line-height:   1.4 !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  white-space:   nowrap !important;
  text-transform: none !important;
}

/* ACTIVE submenu item */
.sidebar .sidebar-wrapper > ul.nav > li > .collapse > ul.nav > li.active > a,
.sidebar .sidebar-wrapper > ul.nav > li > .collapsing > ul.nav > li.active > a {
  background:   var(--accent-dim) !important;
  color:        var(--accent) !important;
  border-left:  2px solid var(--accent) !important;
  font-weight:  600 !important;
}

.sidebar .sidebar-wrapper > ul.nav > li > .collapse > ul.nav > li.active > a i,
.sidebar .sidebar-wrapper > ul.nav > li > .collapsing > ul.nav > li.active > a i {
  color: var(--accent) !important;
}

.sidebar .sidebar-wrapper > ul.nav > li > .collapse > ul.nav > li.active > a .sidebar-normal,
.sidebar .sidebar-wrapper > ul.nav > li > .collapsing > ul.nav > li.active > a .sidebar-normal {
  color:       var(--accent) !important;
  font-weight: 600 !important;
}

/* Expanded parent: give it a subtle left border */
.sidebar .sidebar-wrapper > ul.nav > li:has(> .collapse.in) > a,
.sidebar .sidebar-wrapper > ul.nav > li:has(> .collapsing) > a {
  color:      var(--sb-text-hover) !important;
  background: var(--sb-surface) !important;
}


/* ─────────────────────────────────────────────────────────────
   9b. SIDEBAR — SELECT DROPDOWNS (mobile-view: user/institution/
   academic-year switchers, plain native <select>, dark themed)
   ───────────────────────────────────────────────────────────── */
.sidebar .sidebar-select {
  appearance:      none !important;
  -webkit-appearance: none !important;
  display:         block !important;
  width:           100% !important;
  height:          36px !important;
  padding:         0 30px 0 12px !important;
  background:      var(--sb-search-bg) !important;
  border:          1px solid var(--sb-search-border) !important;
  border-radius:   var(--r) !important;
  color:           #e2e8f0 !important;
  font-family:     var(--font-sans) !important;
  font-size:       12.5px !important;
  font-weight:     500 !important;
  line-height:     1 !important;
  cursor:          pointer !important;
  box-shadow:      none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 1.1em !important;
  transition:      border-color 0.15s var(--ease),
                   background-color 0.15s var(--ease) !important;
}

.sidebar .sidebar-select option {
  color:      #1e293b !important;
  background: #ffffff !important;
}

.sidebar .sidebar-select:hover {
  border-color: rgba(255, 255, 255, 0.20) !important;
}

.sidebar .sidebar-select:focus {
  outline:      none !important;
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-color: var(--accent-border) !important;
  box-shadow:   0 0 0 3px var(--accent-dim) !important;
}


/* ─────────────────────────────────────────────────────────────
   10. SIDEBAR — BOTTOM SPACER / FOOTER ITEMS
   ───────────────────────────────────────────────────────────── */
/* The last <ul><li> in the PHP-generated menu is an empty spacer */
.sidebar .sidebar-wrapper > ul.nav > li:last-child {
  padding-bottom: 20px !important;
}


/* ─────────────────────────────────────────────────────────────
   11. SIDEBAR — MINI (collapsed) STATE
   Material Dashboard adds .sidebar-mini to <body>
   ───────────────────────────────────────────────────────────── */
.sidebar-mini .sidebar {
  width: 64px !important;
}

.sidebar-mini .main-panel {
  margin-left: 64px !important;
  width:       calc(100% - 64px) !important;
}

/* Hide text labels in mini mode */
.sidebar-mini .sidebar .logo a.simple-text.logo-normal,
.sidebar-mini .sidebar .sidebar-wrapper > ul.nav > li > a p,
.sidebar-mini .sidebar .sidebar-wrapper .user .info > a > span,
.sidebar-mini .sidebar .sidebar-wrapper .user .info > a .caret {
  opacity:    0 !important;
  max-width:  0 !important;
  overflow:   hidden !important;
}

/* Centre icons in mini mode */
.sidebar-mini .sidebar .sidebar-wrapper > ul.nav > li > a {
  justify-content: center !important;
  padding:         10px !important;
}

.sidebar-mini .sidebar .sidebar-wrapper .user .info > a {
  justify-content: center !important;
}

.sidebar-mini .sidebar .logo {
  padding: 14px 8px !important;
}

.sidebar-mini .sidebar .logo .photo1 .img-responsive {
  height: 34px !important;
}


/* ─────────────────────────────────────────────────────────────
   11b. SIDEBAR — MINI: SEARCH BOX
   At 64px there's no room for the full input — collapse it down to
   just the trailing search icon, which now doubles as an "expand the
   sidebar and let me type" button (see sliderbar.blade.php click
   handler). Without this the input, its placeholder text and the
   clear button simply overflowed the icon rail.
   ───────────────────────────────────────────────────────────── */
.sidebar-mini .sidebar .sidebar-search {
  padding: 10px 8px !important;
}

.sidebar-mini .sidebar .sidebar-search .input-group {
  display:         flex !important;
  justify-content: center !important;
}

.sidebar-mini #sidebarSearch {
  width:           0 !important;
  height:          0 !important;
  padding:         0 !important;
  border:          none !important;
  opacity:         0 !important;
  position:        absolute !important;
  pointer-events:  none !important;
}

.sidebar-mini #searchClearBtn {
  display: none !important;
}

.sidebar-mini #noResultsMessage {
  display: none !important;
}

/* The search icon becomes a standalone round button, centred in the rail */
.sidebar-mini .sidebar-search .input-group > span.input-group-addon:last-of-type {
  position:        static !important;
  transform:       none !important;
  width:           36px !important;
  height:          36px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  border-radius:   var(--r-full) !important;
  background:      var(--sb-search-bg) !important;
  border:          1px solid var(--sb-search-border) !important;
  pointer-events:  all !important;
  cursor:          pointer !important;
  transition:      background 0.15s var(--ease), border-color 0.15s var(--ease) !important;
}

.sidebar-mini .sidebar-search .input-group > span.input-group-addon:last-of-type:hover {
  background:   rgba(255, 255, 255, 0.12) !important;
  border-color: var(--accent-border) !important;
}


/* ─────────────────────────────────────────────────────────────
   11c. SIDEBAR — SUBMENU INDICATOR
   Every expandable top-level item renders a Font Awesome chevron. It
   stays visible in both regular and icon-only sidebar states.
   ───────────────────────────────────────────────────────────── */
.sidebar .sidebar-wrapper > ul.nav > li > a[data-sb-toggle="collapse"] {
  position:      relative !important;
  padding-right: 32px !important;
}

.sidebar .sidebar-wrapper > ul.nav > li > a[data-sb-toggle="collapse"] .caret {
  display: none !important;
}

.sidebar .sidebar-wrapper > ul.nav > li > a > .sn-submenu-indicator {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  position:        absolute !important;
  top:             50% !important;
  right:           0px !important;
  width:           16px !important;
  height:          16px !important;
  transform:       translateY(-50%) !important;
  font-size:       15px !important;
  line-height:     1 !important;
  color:           var(--sb-text) !important;
  pointer-events:  none !important;
  transition:      color 0.15s var(--ease), transform 0.2s var(--ease) !important;
}

.sidebar .sidebar-wrapper > ul.nav > li > a[aria-expanded="true"] > .sn-submenu-indicator {
  transform: translateY(-50%) rotate(90deg) !important;
  color:     var(--accent) !important;
}

.sidebar-mini .sidebar .sidebar-wrapper > ul.nav > li > a[data-sb-toggle="collapse"] {
  position: relative !important;
  padding-right: 10px !important;
}

.sidebar-mini .sidebar .sidebar-wrapper > ul.nav > li > a > .sn-submenu-indicator {
  display:        flex !important;
  align-items:    center !important;
  justify-content: center !important;
  position:       absolute !important;
  top:            2px !important;
  right:          2px !important;
  width:          14px !important;
  height:         14px !important;
  font-size:      8px !important;
  line-height:    1 !important;
  color:          rgba(148, 163, 184, 0.9) !important;
  background:     rgba(255, 255, 255, 0.08) !important;
  border:         1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius:  var(--r-full) !important;
  transition:     color 0.15s var(--ease), border-color 0.15s var(--ease),
                  background 0.15s var(--ease), transform 0.2s var(--ease) !important;
}

/* Pick up the accent colour when the submenu is open. */
.sidebar-mini .sidebar .sidebar-wrapper > ul.nav > li > a[aria-expanded="true"] > .sn-submenu-indicator {
  transform:    rotate(180deg) !important;
  color:        var(--accent) !important;
  border-color: var(--accent-border) !important;
  background:   var(--accent-dim) !important;
}

.sidebar-mini .sidebar .sidebar-wrapper > ul.nav > li > a {
  width:      100% !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
}

.sidebar-mini .sidebar .sidebar-wrapper > ul.nav > li > a > i:not(.sn-submenu-indicator) {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           20px !important;
  height:          20px !important;
  margin:          0 !important;
  opacity:         1 !important;
  visibility:      visible !important;
}


/* ─────────────────────────────────────────────────────────────
   16b. NAVBAR — LAYOUT (Tailwind cascade-layer fix)
   Tailwind's utilities (incl. `.ml-auto`) are imported into
   `@layer utilities` in resources/css/admin-ui.css. Per the CSS
   cascade-layers spec, ANY unlayered rule beats ANY layered rule
   regardless of specificity or source order — and styles.css's
   `ul { margin: 0px; padding: 0px; }` (line ~3032) is unlayered,
   so it was silently winning over `.ml-auto` and collapsing the
   right-hand nav actions against the sidebar-toggle buttons
   instead of pushing them to the right. Restated here, unlayered,
   so it wins on the normal specificity/source-order cascade
   instead (this file loads last — see file header).
   ───────────────────────────────────────────────────────────── */
.app-navbar > div > ul {
  margin-left: auto !important;
}


/* ─────────────────────────────────────────────────────────────
   17. NAVBAR — SELECT DROPDOWNS (plain native <select>, skinned to
   match the navbar pill design). These 3 switchers (user / institution
   / academic year) used to be select2 instances; select2 is overkill
   for a handful of options and its generated markup is hard to keep
   pixel-perfect, so they now render as a styled native <select
   class="nav-select"> with no JS widget at all — select2 stays in use
   everywhere else in the app, just not here.
   navigation.blade.php itself is styled with Tailwind utility classes
   directly (see @source in resources/css/admin-ui.css) — this native
   select needs raw CSS because `appearance:none` + a custom arrow
   background-image isn't expressible as Tailwind utilities alone.
   ───────────────────────────────────────────────────────────── */
.main-panel .app-navbar .nav-select {
  appearance:          none !important;
  -webkit-appearance:  none !important;
  display:             flex !important;
  align-items:         center !important;
  height:              34px !important;
  max-width:           160px !important;
  background:          #f8fafc !important;
  border:              1px solid var(--nav-border) !important;
  border-radius:       var(--r) !important;
  box-shadow:          none !important;
  padding:             0 26px 0 12px !important;
  color:               var(--nav-text) !important;
  font-family:         var(--font-sans) !important;
  font-size:           13px !important;
  font-weight:         500 !important;
  letter-spacing:      0.15px !important;
  line-height:         32px !important;
  white-space:         nowrap !important;
  overflow:            hidden !important;
  text-overflow:       ellipsis !important;
  cursor:              pointer !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: right 8px center !important;
  background-size:     1em !important;
  transition:          border-color 0.15s var(--ease),
                       background-color 0.15s var(--ease),
                       box-shadow 0.15s var(--ease) !important;
}

.main-panel .app-navbar .nav-select option {
  color:      #1e293b !important;
  background: #ffffff !important;
}

.main-panel .app-navbar .nav-select:hover {
  background-color: #f1f5f9 !important;
  border-color:      #94a3b8 !important;
}

.main-panel .app-navbar .nav-select:focus {
  outline:      none !important;
  border-color: var(--accent-border) !important;
  box-shadow:   0 0 0 3px var(--accent-dim) !important;
}

@media (max-width: 1200px) {
  .main-panel .app-navbar .nav-select {
    max-width: 120px !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   18. NAVBAR — LOGOUT BUTTON
   styles.css has a global, unlayered `a:hover { color: #2196f3 }`
   (and separately relies on the browser default underline for the
   non-hover state). Tailwind's utilities compile into `@layer
   utilities` — per the cascade-layers spec, ANY unlayered rule beats
   ANY layered rule regardless of specificity, so that plain `a:hover`
   was silently winning over `hover:text-white` and turning this
   button blue instead of the intended deep red. Pinned here instead,
   unlayered, so it wins on the normal cascade (this file loads last).
   ───────────────────────────────────────────────────────────── */
.app-navbar .nav-logout-btn,
.app-navbar .nav-logout-btn:hover,
.app-navbar .nav-logout-btn:focus,
.app-navbar .nav-logout-btn:active {
  text-decoration: none !important;
}

.app-navbar .nav-logout-btn {
  color: #dc2626 !important; /* red-600 */
}

.app-navbar .nav-logout-btn:hover,
.app-navbar .nav-logout-btn:focus {
  color: #dc2626 !important;
}


/* ─────────────────────────────────────────────────────────────
   20b. SELECT2 THEME — matches the .ui-select look
   select2.min.css is a plain unlayered <link>, same as styles.css's
   a:hover above — Tailwind's @layer components/utilities in admin-ui.css
   can NEVER beat it regardless of specificity, so the theme rules that
   used to live there (targeting .select2-container--default etc.) were
   silently losing to select2's own default skin. Moved here instead,
   unlayered, loading after select2.min.css, so normal cascade rules
   (source order + specificity) decide and this wins. Values are the
   raw-CSS equivalents of admin-ui.css's `.ui-select`/`.ui-input` look
   (rounded-lg border-gray-300, brand-teal focus ring) — this file has no
   Tailwind build step, so no @apply here.
   ───────────────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
  height: auto !important;
  min-height: 38px !important;
  border-radius: 0.5rem !important;
  border: 1px solid #d1d5db !important;
  background: #fff !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 0.875rem !important;
  color: #1f2937 !important;
  line-height: 36px !important;
  padding-left: 0.75rem !important;
  padding-right: 1.75rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #9ca3af !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
  right: 6px !important;
}
.select2-container--default .select2-selection--multiple {
  min-height: 38px !important;
  border-radius: 0.5rem !important;
  border: 1px solid #d1d5db !important;
  background: #fff !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  padding-left: 0.375rem !important;
  padding-right: 0.375rem !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #f0fdfa !important;
  color: #0f766e !important;
  border: 1px solid #99f6e4 !important;
  border-radius: 0.375rem !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  padding: 0.125rem 0.5rem !important;
  margin: 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #14b8a6 !important;
  margin-right: 0.25rem !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #0f766e !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: #14b8a6 !important;
  box-shadow: 0 0 0 2px #ccfbf1 !important;
}
/* Reflects Parsley's error state (added to the now select2-hidden native
   <select>) onto the visible container — see the MutationObserver in
   admin-ui.js that toggles this class. */
.select2-container.ui-select2-error .select2-selection--single,
.select2-container.ui-select2-error .select2-selection--multiple {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 2px #fee2e2 !important;
}
.select2-dropdown {
  border-radius: 0.5rem !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  font-size: 0.875rem !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: 0.5rem !important;
  border: 1px solid #d1d5db !important;
  padding: 0.375rem 0.5rem !important;
  font-size: 0.875rem !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #14b8a6 !important;
  outline: none !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #f0fdfa !important;
  color: #0f766e !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: #e6f9f6 !important;
}


/* ─────────────────────────────────────────────────────────────
   20c. DATETIMEPICKER THEME — matches the .ui-select/.ui-input look
   Same unlayered-beats-layered reasoning as 20b above:
   bootstrap-datetimepicker.min.css is a plain unlayered <link>, so an
   admin-ui.css override could never win — themed here instead. The
   z-index bump matters specifically for datetimepicker inputs that live
   inside a `.ui-modal-backdrop` (z-index 1050) — the plugin's own
   default z-index sits below that, so the calendar would otherwise
   render invisibly behind the modal.
   ───────────────────────────────────────────────────────────── */
.bootstrap-datetimepicker-widget {
  /* The plugin's own CSS only ever sets `.dropdown-menu{display:block}` and
     relies on Bootstrap 3's base `.dropdown-menu{position:absolute; top:100%;
     left:0; z-index:1000}` for floating/positioning — which no longer exists
     in this project (Bootstrap CSS removed globally), so the widget was
     rendering as a plain static block, pushing the rest of the page down
     instead of floating over it. Restoring that positioning here. */
  /* top/left are NOT !important — the plugin computes and sets its own
     precise pixel position via inline style.top/left at show-time
     (jQuery .offset()-based); these are only a fallback in case that
     inline style is ever absent, and must lose to it, not override it. */
  position: absolute !important;
  top: 100%;
  left: 0;
  z-index: 2000 !important;
  background: #fff !important;
  border-radius: 0.5rem !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  padding: 0.5rem !important;
  font-size: 0.8125rem !important;
}
.bootstrap-datetimepicker-widget.pull-right {
  left: auto;
  right: 0;
}
.bootstrap-datetimepicker-widget.dropdown-menu:before,
.bootstrap-datetimepicker-widget.dropdown-menu:after {
  display: none !important;
}
.bootstrap-datetimepicker-widget table th {
  color: #374151 !important;
  font-weight: 600 !important;
}
.bootstrap-datetimepicker-widget table th.dow {
  color: #9ca3af !important;
  font-weight: 600 !important;
  font-size: 0.6875rem !important;
  text-transform: uppercase !important;
}
.bootstrap-datetimepicker-widget table th.prev,
.bootstrap-datetimepicker-widget table th.next,
.bootstrap-datetimepicker-widget table th.picker-switch {
  border-radius: 0.375rem !important;
}
.bootstrap-datetimepicker-widget table th.prev:hover,
.bootstrap-datetimepicker-widget table th.next:hover,
.bootstrap-datetimepicker-widget table th.picker-switch:hover {
  background: #f0fdfa !important;
  color: #0f766e !important;
}
.bootstrap-datetimepicker-widget table td {
  border-radius: 0.375rem !important;
}
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover,
.bootstrap-datetimepicker-widget .datepicker-months td span:hover,
.bootstrap-datetimepicker-widget .datepicker-years td span:hover,
.bootstrap-datetimepicker-widget .datepicker-decades td span:hover {
  background: #f0fdfa !important;
  color: #0f766e !important;
}
.bootstrap-datetimepicker-widget table td.day.active,
.bootstrap-datetimepicker-widget table td.day.active:hover,
.bootstrap-datetimepicker-widget table td.hour.active,
.bootstrap-datetimepicker-widget table td.minute.active,
.bootstrap-datetimepicker-widget table td.second.active,
.bootstrap-datetimepicker-widget .datepicker-months td span.active,
.bootstrap-datetimepicker-widget .datepicker-years td span.active,
.bootstrap-datetimepicker-widget .datepicker-decades td span.active {
  background: #0d9488 !important;
  color: #fff !important;
  text-shadow: none !important;
}
.bootstrap-datetimepicker-widget table td.today:before {
  border-bottom-color: #0d9488 !important;
}
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
  color: #d1d5db !important;
}
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
  color: #e5e7eb !important;
  background: transparent !important;
}
.bootstrap-datetimepicker-widget .timepicker-picker table td a.btn {
  color: #6b7280 !important;
  border: none !important;
  background: transparent !important;
}
.bootstrap-datetimepicker-widget .timepicker-picker table td a.btn:hover {
  background: #f0fdfa !important;
  color: #0f766e !important;
  border-radius: 0.375rem !important;
}
.bootstrap-datetimepicker-widget .timepicker-picker table td span {
  font-size: 1rem !important;
  color: #1f2937 !important;
}
.bootstrap-datetimepicker-widget a[data-action] {
  color: #6b7280 !important;
}
.bootstrap-datetimepicker-widget a[data-action]:hover {
  background: #f0fdfa !important;
  color: #0f766e !important;
  border-radius: 0.375rem !important;
}
.bootstrap-datetimepicker-widget .picker-switch.accordion-toggle a {
  color: #6b7280 !important;
}
.bootstrap-datetimepicker-widget .picker-switch.accordion-toggle a:hover {
  color: #0f766e !important;
}


/* ─────────────────────────────────────────────────────────────
   21. CONTENT AREA — top padding to sit below navbar
   ───────────────────────────────────────────────────────────── */
.main-panel > .content {
  padding-top: 24px !important;
  min-height:  calc(100vh - var(--nav-h)) !important;
}

/* Off-canvas backdrop only ever applies on mobile (see section 22) — kept
   hidden by default so it's never an empty block sitting in the desktop
   layout flow. */
.nav-backdrop {
  display: none;
}


/* ─────────────────────────────────────────────────────────────
   22. RESPONSIVE — Mobile (<= 991px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .sidebar {
    transform:  translateX(-100%) !important;
    transition: transform 0.25s var(--ease) !important;
    z-index:    1040 !important;
    width:      var(--sb-w) !important; /* never mini on mobile — it's an off-canvas overlay */
  }

  .nav-open .sidebar {
    transform: translateX(0) !important;
  }

  .main-panel {
    margin-left: 0 !important;
    width:       100% !important;
    display:     block !important;
  }

  /* Mini-collapse is a desktop-only concept here (the mobile sidebar is
     an off-canvas overlay, not a narrow icon rail) — hiding it also fixes
     the two nav buttons crowding each other at the navbar's left edge. */
  #minimizeSidebar {
    display: none !important;
  }

  .app-navbar .navbar-toggle {
    margin-right: 2px !important;
  }

  /* Tap-outside-to-close backdrop, shown/hidden purely via .nav-open on
     <body> (toggled in navigation.blade.php's script). Sits between the
     navbar/main-panel (z-index 900-1030) and the sidebar (1040) so it
     only dims the page behind it. */
  .nav-backdrop {
    position:   fixed;
    inset:      0;
    z-index:    1035;
    background: rgba(15, 23, 42, 0.45);
  }

  .nav-open .nav-backdrop {
    display: block;
  }

  /* Lock page scroll behind the open off-canvas sidebar */
  .nav-open {
    overflow: hidden !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   23. UTILITY — visible-on-sidebar-* helpers (MD compat)
   ───────────────────────────────────────────────────────────── */
.sidebar-mini .visible-on-sidebar-regular {
  display: none !important;
}

.sidebar-mini .visible-on-sidebar-mini {
  display: block !important;
}

.visible-on-sidebar-mini {
  display: none !important;
}

.visible-on-sidebar-regular {
  display: block !important;
}


/* ─────────────────────────────────────────────────────────────
   24. KILL MATERIAL DASHBOARD OVERRIDES that bleed through
   ───────────────────────────────────────────────────────────── */

/* MD adds a gradient card-style box to the sidebar logo */
.sidebar .logo::after {
  display: none !important;
}

/* MD applies opacity transitions to sidebar anchors — override */
.sidebar .nav li > a,
.sidebar .nav li > a p {
  opacity:        1 !important;
  text-transform: none !important;
}

/* MD makes sidebar links white on hover via important — beat it */
.sidebar[data-active-color="mediumaquamarine"] .nav li.active > a {
  background:  var(--accent-dim) !important;
  color:       var(--accent) !important;
  box-shadow:  none !important;
}

/* Remove MD's hardcoded card-like drop shadow on active items */
.sidebar .nav li.active > a,
.sidebar .nav li.active > a i {
  box-shadow: none !important;
}

/* MD wraps sidebar in a box-shadow that we override at component level */
.sidebar .sidebar-wrapper .user .info {
  padding-bottom: 0 !important;
}


/* ═════════════════════════════════════════════════════════════
   25. MATERIAL DASHBOARD THEME — SURGICAL OVERRIDES ONLY
   Target: strip MD's purple aesthetic layer without touching
   Bootstrap layout, sizing, or component structure.
   Rule of thumb: override colour/shadow/gradient, never padding
   or height, so Bootstrap grid & forms stay intact.
   ═════════════════════════════════════════════════════════════ */

/* ── INPUTS ──────────────────────────────────────────────────
   MD injects a purple gradient as background-image to simulate
   an animated underline. Kill that image; keep everything else
   (Bootstrap border, height, padding) untouched.               */
.form-control {
  background-image: none !important;   /* remove purple gradient */
}
.form-control:focus {
  background-image: none !important;
  border-color:     var(--accent) !important;
  box-shadow:       0 0 0 2px var(--accent-dim) !important;
  outline:          none !important;
}
/* Kill the MD animated underline pseudo-element */
.form-group .form-control ~ .material-input::after,
.form-group .form-control ~ .material-input {
  display: none !important;
}

/* ── BUTTONS ─────────────────────────────────────────────────
   MD overrides Bootstrap's 4px radius to 30px (pill) and
   adds coloured box-shadows on every variant. Restore sane
   radius; keep Bootstrap's padding/font-size intact.           */
.btn {
  border-radius: 6px !important;
  box-shadow:    none !important;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.open > .dropdown-toggle.btn {
  box-shadow: none !important;
  outline:    none !important;
}
/* btn-round is used in the navbar minimize button — keep mild */
.btn-round {
  border-radius: 24px !important;
}
/* Remove per-colour box-shadows MD adds */
.btn-primary, .btn-info, .btn-success,
.btn-warning, .btn-danger, .btn-default,
.btn-primary:hover, .btn-info:hover, .btn-success:hover,
.btn-warning:hover, .btn-danger:hover, .btn-default:hover,
.btn-primary:focus, .btn-info:focus, .btn-success:focus,
.btn-warning:focus, .btn-danger:focus, .btn-default:focus,
.btn-primary:active, .btn-info:active, .btn-success:active,
.btn-warning:active, .btn-danger:active, .btn-default:active {
  box-shadow: none !important;
}

/* ── CARDS ───────────────────────────────────────────────────
   Reduce MD's heavy shadow; keep structure / padding / layout.  */
.card {
  box-shadow:    0 2px 8px rgba(0,0,0,0.08) !important;
  border-radius: 8px !important;
}
/* Coloured card-header blocks — reduce the protruding shadow */
.card .card-header[class*="card-header-"] {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* ── ACTIVE NAV-TABS / NAV-PILLS ─────────────────────────────
   Replace MD's purple active colour with our teal accent.       */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color:     var(--accent) !important;
  box-shadow: none !important;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: var(--accent) !important;
  box-shadow:       none !important;
}

/* ── PAGINATION ──────────────────────────────────────────────
   Active page colour → teal; keep Bootstrap sizing/border.     */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--accent) !important;
  border-color:     var(--accent) !important;
  box-shadow:       none !important;
}

/* ── PROGRESS BARS ───────────────────────────────────────────
   Use teal instead of MD's default purple.                      */
.progress-bar {
  background-color: var(--accent) !important;
  box-shadow:       none !important;
}

/* ── SCROLLBAR ───────────────────────────────────────────────
   Thin teal scrollbar; scoped to main content area only
   to avoid interfering with sidebar custom scrollbar.           */
.main-panel,
.content,
.modal-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(20,184,166,0.25) transparent;
}
.main-panel::-webkit-scrollbar,
.content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.main-panel::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.main-panel::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
  background:    rgba(20,184,166,0.30);
  border-radius: 9999px;
}
.main-panel::-webkit-scrollbar-thumb:hover,
.content::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(20,184,166,0.55);
}


/* ═════════════════════════════════════════════════════════════
   26. NOTIFICATION MODAL (slide-in from right)
   ═════════════════════════════════════════════════════════════ */
.come-from-modal.right .modal-dialog {
  position:   fixed !important;
  right:      0 !important;
  top:        0 !important;
  bottom:     0 !important;
  width:      380px !important;
  max-width:  95vw !important;
  margin:     0 !important;
  height:     100% !important;
  transform:  translateX(100%) !important;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
.come-from-modal.right.in .modal-dialog {
  transform: translateX(0) !important;
}
.come-from-modal.right .modal-content {
  height:        100% !important;
  border-radius: 0 !important;
  border:        none !important;
  box-shadow:    -4px 0 24px rgba(0,0,0,0.12) !important;
  display:       flex !important;
  flex-direction: column !important;
  overflow:      hidden !important;
}
.come-from-modal.right .modal-header {
  flex-shrink:   0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding:       16px 20px !important;
  background:    #fff !important;
}
.come-from-modal.right .modal-header h4 {
  font-size:   16px !important;
  font-weight: 600 !important;
  color:       #1e293b !important;
  margin:      0 !important;
}
.come-from-modal.right .modal-body {
  flex:       1 !important;
  overflow-y: auto !important;
  padding:    12px 0 !important;
  background: #f8fafc !important;
}
/* Help Center tutorial list items */
#ajaxModal-list-group-video .list-group-item,
#ajaxModal-list-group-document .list-group-item {
  border:        none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-radius: 0 !important;
  padding:       12px 20px !important;
  background:    #fff !important;
  color:         #334155 !important;
  font-size:     13.5px !important;
  transition:    background 0.15s ease !important;
  display:       flex !important;
  align-items:   center !important;
  justify-content: space-between !important;
}
#ajaxModal-list-group-video .list-group-item:hover,
#ajaxModal-list-group-document .list-group-item:hover {
  background: #f0fdf9 !important;
}
.come-from-modal.right .modal-footer {
  flex-shrink:   0 !important;
  border-top:    1px solid #e5e7eb !important;
  padding:       12px 20px !important;
  background:    #fff !important;
}


/* ═════════════════════════════════════════════════════════════
   27. DATATABLES FOOTER / PAGINATION FIX
   ═════════════════════════════════════════════════════════════ */
.dataTables_wrapper .dataTables_paginate {
  margin-top:  10px !important;
  padding-top: 8px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding:       4px 10px !important;
  border-radius: 5px !important;
  margin:        0 2px !important;
  font-size:     13px !important;
  color:         #374151 !important;
  border:        1px solid #e5e7eb !important;
  background:    #fff !important;
  cursor:        pointer !important;
  transition:    all 0.15s ease !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background:   #f0fdf9 !important;
  border-color: var(--accent) !important;
  color:        var(--accent) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background:   var(--accent) !important;
  border-color: var(--accent) !important;
  color:        #fff !important;
  font-weight:  600 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color:   #cbd5e1 !important;
  cursor:  default !important;
  border-color: #e5e7eb !important;
  background:   #f8fafc !important;
}
.dataTables_wrapper .dataTables_info {
  color:     #64748b !important;
  font-size: 13px !important;
  padding:   10px 0 !important;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size:   13px !important;
  color:       #374151 !important;
  font-weight: 400 !important;
}
.dataTables_wrapper .dataTables_filter input {
  background-image: none !important;
  border:           1px solid #d1d5db !important;
  border-radius:    6px !important;
  padding:          5px 10px !important;
  margin-left:      6px !important;
  font-size:        13px !important;
  color:            #1e293b !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--accent) !important;
  box-shadow:   0 0 0 2px var(--accent-dim) !important;
  outline:      none !important;
  background-image: none !important;
}
.dataTables_wrapper .dataTables_length select {
  background-image: none !important;
  border:           1px solid #d1d5db !important;
  border-radius:    5px !important;
  padding:          4px 8px !important;
  font-size:        13px !important;
  margin:           0 4px !important;
}


/* ═════════════════════════════════════════════════════════════
   28. GENERAL POLISH — content area top spacing, page header
   ═════════════════════════════════════════════════════════════ */
/* Ensure content sits below the navbar with proper breathing room */
.main-panel > .content {
  padding-top: 20px !important;
}

/* Page-level action buttons row (top-right Add/Delete buttons) */
.content .row:first-child .btn,
.content > .container-fluid > .row:first-child .btn {
  font-size:     13px !important;
  padding:       7px 14px !important;
  border-radius: 6px !important;
  box-shadow:    none !important;
}

/* Card icon header (the coloured square icon above card title) */
.card .card-header.card-header-icon {
  float:      right !important;
  padding:    10px !important;
  margin-top: -20px !important;
  margin-right: 15px !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 20px 0 rgba(0,0,0,0.14) !important;
}

/* Ensure Bootstrap modal backdrop doesn't obscure sidebar */
.modal-backdrop {
  z-index: 1029 !important;
}
.modal {
  z-index: 1030 !important;
}
.sidebar {
  z-index: 1031 !important;
}