/* ==========================================================================
   Modern UI overrides — loaded AFTER custom.min.css / bootstrap.
   Purely cosmetic (color, spacing, radius, shadow, typography).
   Does not add/remove markup, IDs, or change any functional class behavior.
   ========================================================================== */

:root {
  --mt-primary: #3d5ee1;
  --mt-primary-dark: #2f49b8;
  --mt-sidebar-bg: #1f2430;
  --mt-sidebar-bg-active: #2a3142;
  --mt-sidebar-text: #c7cbd8;
  --mt-sidebar-text-active: #ffffff;
  --mt-surface: #ffffff;
  --mt-bg: #f4f6fb;
  --mt-border: #e6e9f2;
  --mt-text: #2b2f3a;
  --mt-text-muted: #6b7280;
  --mt-radius: 10px;
  --mt-radius-sm: 6px;
  --mt-shadow: 0 2px 10px rgba(31, 36, 48, 0.06);
  --mt-shadow-md: 0 6px 20px rgba(31, 36, 48, 0.08);
}

/* ---------- Dark mode ----------
   Toggled by adding data-theme="dark" to <html> (see the toggle script
   in each master page's <head> — it reads/writes localStorage and sets
   this attribute before first paint to avoid a light-mode flash). Every
   --mt-* variable is redefined here; component rules elsewhere in this
   file already reference those variables, so most of the app re-themes
   automatically. Only places that use literal hex instead of a variable
   (third-party widgets, a few legacy overrides) get an explicit
   [data-theme="dark"] rule below. */
:root[data-theme="dark"] {
  --mt-primary: #6a7cf0;
  --mt-primary-dark: #8b9af5;
  --mt-sidebar-bg: #15171f;
  --mt-sidebar-bg-active: #1f2430;
  --mt-sidebar-text: #a7abba;
  --mt-sidebar-text-active: #ffffff;
  --mt-surface: #1c212e;
  --mt-bg: #11141c;
  --mt-border: #2b3142;
  --mt-text: #e4e7ef;
  --mt-text-muted: #9aa1b4;
  --mt-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  --mt-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.45);
}

body {
  background: var(--mt-bg);
  color: var(--mt-text);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Async postback progress bar ----------
   Replaces the legacy "PLEASE WAIT..." pixel-art UpdateProgress gif
   (Images/Loading.gif), which rendered inline inside .right_col and
   pushed page content down every time it appeared. This is a fixed-
   position bar pinned to the very top of the viewport instead, so it
   never shifts layout regardless of scroll position or which page
   triggered the postback. */
.modern-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  overflow: hidden;
  z-index: 10000;
  background: transparent;
}

.modern-progress-bar-fill {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, var(--mt-primary), #6a7cf0);
  border-radius: 0 2px 2px 0;
  animation: modern-progress-sweep 1.1s ease-in-out infinite;
}

@keyframes modern-progress-sweep {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(60%);
  }
  100% {
    transform: translateX(250%);
  }
}

/* ---------- Layout shell ---------- */
.container.body {
  background: var(--mt-bg);
}

/* Sticky footer: .main_container holds .top_nav, .right_col and <footer>
   as normal-flow siblings (left_col is absolutely positioned, so it's
   not part of this flow). On short pages the footer used to sit right
   after the content, leaving a bare gap below it instead of reaching
   the bottom of the viewport. Stretching main_container to the full
   viewport height and pushing footer down with margin-top:auto fixes
   that without touching any page markup. */
.main_container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* .left_col is position:absolute with top:0/bottom:0 (see below), but
     none of its ancestors were a positioned containing block, so it
     stretched to match the VIEWPORT height instead of the actual page
     content height. On any page taller than one viewport, the sidebar's
     dark background ran out partway down, exposing the page background
     underneath once scrolled. Making this element the containing block
     fixes that — its own height already matches full content height via
     its flex children (top_nav + right_col + footer). */
  position: relative;
}

.right_col {
  background: var(--mt-bg) !important;
  padding: 24px 28px;
}

/* ---------- Sidebar ---------- */
.left_col {
  background: linear-gradient(180deg, #20263380 0%, var(--mt-sidebar-bg) 100%), var(--mt-sidebar-bg);
  background: linear-gradient(165deg, #242b3a 0%, #1a1e29 60%, #1f2430 100%);
  padding-top: 0;
}

.left_col.scroll-view {
  background: transparent;
}

/* Dark-sidebar scrollbar */
.left_col.scroll-view::-webkit-scrollbar {
  width: 6px;
}

.left_col.scroll-view::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.nav_title {
  background: transparent;
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}

.site_title,
.site_title:hover,
.site_title:focus {
  color: var(--mt-sidebar-text-active);
  font-weight: 700;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.site_title .brand-mark {
  display: inline-block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  object-position: center;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--mt-primary), #6a7cf0);
  box-shadow: 0 4px 14px rgba(61, 94, 225, 0.45);
  flex-shrink: 0;
}

.main_menu_side .side-menu > li {
  margin: 3px 12px;
  position: relative;
  --item-accent: var(--mt-primary);
  --item-accent-soft: rgba(61, 94, 225, 0.35);
}

/* Give each top-level menu item its own accent color. Menu items are
   DB-driven (Staff) or vary per module (Admin/Member), so icon classes
   can't be relied on — position-based cycling works everywhere. */
.main_menu_side .side-menu > li:nth-child(8n+1) { --item-accent: #3d5ee1; --item-accent-soft: rgba(61, 94, 225, 0.35); }
.main_menu_side .side-menu > li:nth-child(8n+2) { --item-accent: #8b5cf6; --item-accent-soft: rgba(139, 92, 246, 0.35); }
.main_menu_side .side-menu > li:nth-child(8n+3) { --item-accent: #ec4899; --item-accent-soft: rgba(236, 72, 153, 0.35); }
.main_menu_side .side-menu > li:nth-child(8n+4) { --item-accent: #f59e0b; --item-accent-soft: rgba(245, 158, 11, 0.35); }
.main_menu_side .side-menu > li:nth-child(8n+5) { --item-accent: #14b8a6; --item-accent-soft: rgba(20, 184, 166, 0.35); }
.main_menu_side .side-menu > li:nth-child(8n+6) { --item-accent: #06b6d4; --item-accent-soft: rgba(6, 182, 212, 0.35); }
.main_menu_side .side-menu > li:nth-child(8n+7) { --item-accent: #22c55e; --item-accent-soft: rgba(34, 197, 94, 0.35); }
.main_menu_side .side-menu > li:nth-child(8n+8) { --item-accent: #6366f1; --item-accent-soft: rgba(99, 102, 241, 0.35); }

.main_menu_side .side-menu > li > a,
.main_menu_side .side-menu > li > a:link {
  color: var(--mt-sidebar-text);
  border-radius: var(--mt-radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, padding-left 0.18s ease;
}

.main_menu_side .side-menu > li > a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--mt-sidebar-text-active);
  padding-left: 18px;
}

.main_menu_side .side-menu > li.active > a {
  background: linear-gradient(90deg, var(--item-accent-soft), transparent);
  color: var(--mt-sidebar-text-active);
  font-weight: 600;
}

/* Neutralize the legacy theme's teal right-border active indicator
   (custom.css: .nav.side-menu > li.active { border-right: 5px solid #1ABB9C }))
   so the new blue left accent bar is the only active indicator. */
.main_menu_side .side-menu > li.current-page,
.main_menu_side .side-menu > li.active {
  border-right: none;
}

.main_menu_side .side-menu > li.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--item-accent);
}

.main_menu_side .side-menu > li > a i {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  border-radius: 8px;
  background: var(--item-accent-soft);
  color: var(--mt-sidebar-text-active);
  opacity: 0.85;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.main_menu_side .side-menu > li > a:hover i,
.main_menu_side .side-menu > li.active > a i {
  background: var(--item-accent);
  color: #ffffff;
  opacity: 1;
}

/* Pre-existing bug in the legacy theme's collapsed "icon rail" mode
   (body.nav-sm, toggled by the hamburger): it narrows the sidebar to
   70px but never actually hides the menu item labels — custom.css just
   shrinks them to font-size:10px, which still doesn't fit a 70px rail
   and overflows out, visible as ghost text bleeding over the page
   content next to it. Collapse the labels to true icon-only instead. */
.nav-sm .main_menu_side .side-menu > li > a {
  font-size: 0 !important;
  white-space: nowrap;
  overflow: hidden;
}

.nav-sm .main_menu_side .side-menu > li > a i {
  font-size: 1.05rem !important;
  margin-right: 0;
}

/* In collapsed icon-rail mode, a submenu (e.g. Catalogue) opens as a
   flyout panel next to the rail instead of expanding inline. custom.css
   gives it a hardcoded legacy slate-blue (#3E5367) that doesn't match
   this theme's dark sidebar at all, and no shadow/radius to visually
   separate it from the rail it springs out of. */
.nav-sm ul.nav.child_menu {
  background: var(--mt-sidebar-bg-active) !important;
  border-radius: 0 var(--mt-radius) var(--mt-radius) 0;
  box-shadow: var(--mt-shadow-md);
  padding: 8px 0;
  border-left: 3px solid var(--mt-primary);
}

.nav-sm ul.nav.child_menu li a {
  color: var(--mt-sidebar-text);
}

.nav-sm ul.nav.child_menu li a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--mt-sidebar-text-active);
}

.main_menu_side .side-menu .child_menu {
  margin: 2px 8px 6px 30px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 10px;
}

.main_menu_side .side-menu .child_menu li a {
  color: var(--mt-sidebar-text);
  border-radius: var(--mt-radius-sm);
  padding: 7px 10px;
  font-size: 0.85rem;
  display: block;
  transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.main_menu_side .side-menu .child_menu li a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--mt-sidebar-text-active);
  padding-left: 14px;
}

/* Submenu items (Catalogue, Reports, etc.): color the theme's existing
   bullet-dot marker per item, cycling independently within each submenu
   list so e.g. Catalogue's "Add Books" and Reports' "Book" both start
   from the same palette. */
.main_menu_side .side-menu .child_menu > li { --item-accent: var(--mt-primary); }
.main_menu_side .side-menu .child_menu > li:nth-child(8n+1) { --item-accent: #3d5ee1; }
.main_menu_side .side-menu .child_menu > li:nth-child(8n+2) { --item-accent: #8b5cf6; }
.main_menu_side .side-menu .child_menu > li:nth-child(8n+3) { --item-accent: #ec4899; }
.main_menu_side .side-menu .child_menu > li:nth-child(8n+4) { --item-accent: #f59e0b; }
.main_menu_side .side-menu .child_menu > li:nth-child(8n+5) { --item-accent: #14b8a6; }
.main_menu_side .side-menu .child_menu > li:nth-child(8n+6) { --item-accent: #06b6d4; }
.main_menu_side .side-menu .child_menu > li:nth-child(8n+7) { --item-accent: #22c55e; }
.main_menu_side .side-menu .child_menu > li:nth-child(8n+8) { --item-accent: #6366f1; }

.nav-md ul.nav.child_menu li:before {
  background: var(--item-accent) !important;
  box-shadow: 0 0 6px color-mix(in srgb, var(--item-accent) 70%, transparent);
}

/* A submenu nested two levels deep (e.g. Reports > Book > ...) compounds
   the indent of both levels, leaving very little width for the label and
   forcing it onto 2-3 cramped lines. Claw back width at the second level:
   smaller indent, tighter font, and a capped height with its own scroll
   so a long nested list doesn't balloon the whole sidebar/page height. */
.main_menu_side .side-menu .child_menu .child_menu {
  margin: 2px 4px 4px 10px;
  padding-left: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.main_menu_side .side-menu .child_menu .child_menu li a {
  padding: 6px 8px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.main_menu_side .side-menu .child_menu .child_menu li:before {
  left: -8px;
}

.nav.child_menu li:hover,
.nav.child_menu li.active {
  background-color: transparent !important;
}

/* A rare deeper sub-item (e.g. Reports > Book) can carry its own icon
   instead of a plain dot — style it like a smaller version of the
   top-level icon chips, using the same per-item accent. Many of these
   <i> tags are emitted empty (no actual fa-* class, just a DB-driven
   placeholder) — without any glyph or text inside, the empty inline-flex
   box has no intrinsic width to constrain it and stretches to fill the
   row, painting a full-width accent-colored bar instead of a small chip.
   Only style icons that actually have content. */
.main_menu_side .side-menu .child_menu > li > a > i:not(:empty) {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  border-radius: 6px;
  background: var(--item-accent);
  color: #ffffff;
  font-size: 0.75rem;
}

.main_menu_side .side-menu .child_menu > li > a > i:empty {
  display: none;
}

/* ---------- Top navigation ---------- */
.top_nav {
  background: var(--mt-surface);
  border-bottom: 1px solid var(--mt-border);
  box-shadow: var(--mt-shadow);
}

/* padding-left gives the hamburger breathing room from the sidebar
   edge. Matters most in the collapsed icon-rail state, where custom.css
   (.nav-sm .main_container .top_nav { margin-left: 70px }) puts the top
   nav flush against the narrow 70px sidebar, otherwise leaving the
   hamburger touching the sidebar's edge right under the logo. */
.nav_menu {
  background: transparent;
  border-bottom: none;
  display: flex;
  align-items: center;
  min-height: 62px;
  padding-left: 20px;
}

.nav_menu .nav.toggle {
  display: flex;
  align-items: center;
}

#menu_toggle {
  color: var(--mt-text-muted);
  font-size: 1.1rem;
  padding: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center;
}

.nav_menu .nav.navbar-nav {
  flex: 1 1 auto;
  min-width: 0;
}

/* The legacy theme lays the top-right nav (info chips + avatar dropdown)
   out with float:right, which never wraps — on a narrower window the
   avatar toggle silently overflows off-screen instead of reflowing,
   which is also why its dropdown could appear detached/misaligned.
   Replace with flexbox + wrap so everything stays reachable. */
.top_nav .navbar-right {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  float: none !important;
  width: 100%;
  gap: 6px;
}

/* Page title (lblHeading) is the first child of .navbar-right; push
   everything else (info chips + avatar) to the right of it instead of
   letting flex-end crowd the title in next to them. It also ships with
   font-size:24px + its own margin tuned for the legacy fixed-height bar,
   which sits visibly lower than the hamburger icon — normalize both so
   it vertically centers against it instead. */
.top_nav .navbar-right > .h4 {
  margin: 0 auto 0 0 !important;
  float: none !important;
  order: -1;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
}

.top_nav .navbar-right li {
  float: none !important;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Inside the profile <li>, the avatar link and the info chips are
   siblings in this DOM order: avatar, dropdown-menu, chip, chip, chip
   — which visually put the avatar left of the chips instead of at the
   far right corner like a profile icon normally sits. Reorder with
   flexbox so the chips come first and the avatar lands last (rightmost). */
.top_nav .nav-item.dropdown {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.top_nav .nav-item.dropdown > .user-profile {
  order: 10;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
}

.top_nav .nav-item.dropdown {
  margin-right: 20px;
}

/* The avatar <img> (a placeholder brand icon when no profile photo is
   set) was rendered at a non-square size with no breathing room from
   the window edge. Give it a consistent rounded-badge treatment that
   matches the sidebar brand mark. */
.top_nav .user-profile img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--mt-primary);
  flex-shrink: 0;
}

/* Top-bar info chips (Ctrl+G hint, Academic Year, live clock) */
.topbar-chip {
  align-items: center;
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: 999px;
  color: var(--mt-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  gap: 4px;
  margin-left: 8px;
  padding: 6px 14px;
  white-space: nowrap;
}

.topbar-chip i {
  color: var(--mt-primary);
}

/* Dashboard stat-tile carousel (Swiper) */
.swiper-slide .card.animate-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.swiper-slide .card.animate-card:hover {
  box-shadow: var(--mt-shadow-md);
  transform: translateY(-2px);
}

/* User-profile dropdown (top nav): the toggle's dropdown-menu is a
   sibling of several unrelated .topbar-chip elements inside the same
   <li>, so a CSS rule positioned "relative to the li" ends up offset by
   the chips' width instead of the toggle. Bootstrap 5's Popper-based
   placement anchors to the toggle element itself (ignoring sibling
   width), which is correct here — we only needed the flex-wrap fix
   below so the toggle itself never overflows off-screen. */

.dropdown-menu {
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow-md);
}

/* ---------- Cards / panels (x_panel is Gentelella's card component) ---------- */
.x_panel {
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow);
  padding: 18px 20px;
  margin-bottom: 22px;
}

.x_title {
  border-bottom: 1px solid var(--mt-border);
  margin-bottom: 14px;
  padding-bottom: 10px;
}

.x_title h2 {
  font-weight: 600;
  color: var(--mt-text);
}

.card {
  background: var(--mt-surface);
  color: var(--mt-text);
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow);
}

/* Many legacy Staff pages use the raw Bootstrap utility combo
   ".border.rounded" (sometimes with "p-2"/"p-3") as a makeshift panel
   wrapper around a filter row or form, instead of a proper .card. Give it
   the same modern surface/shadow/radius so it reads as a card everywhere
   it's used, without touching markup on ~30 pages. */
.right_col .border.rounded:not(.card):not(.form-control):not(.btn) {
  background: var(--mt-surface);
  border-color: var(--mt-border) !important;
  border-radius: var(--mt-radius) !important;
  box-shadow: var(--mt-shadow);
}

/* Higher-specificity override so page-level stylesheets loaded after this
   file (e.g. styleDashboard.css on frmMyDashboard.aspx) still match this
   site's card radius/shadow instead of their own .card defaults. */
.right_col .card {
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--mt-radius-sm);
  font-weight: 500;
}

.btn-primary,
.btn.btn-primary {
  background-color: var(--mt-primary);
  border-color: var(--mt-primary);
}

.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--mt-primary-dark);
  border-color: var(--mt-primary-dark);
}

/* Main action buttons app-wide (Save/Search/Edit/Refresh/Create/...) use
   Bootstrap's btn-warning class; restyle it as a modern gradient pill
   instead of the flat amber default, using the app's primary blue (same
   accent as the sidebar's "About Institution" item). Color/shape only —
   no class renames, no markup changes. */
.btn-warning,
.btn.btn-warning {
  background: linear-gradient(135deg, var(--mt-primary), #6a7cf0);
  border-color: transparent;
  color: #ffffff;
  border-radius: var(--mt-radius-sm);
  padding: 8px 20px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(61, 94, 225, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-warning:hover,
.btn.btn-warning:hover {
  background: linear-gradient(135deg, var(--mt-primary-dark), var(--mt-primary));
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(61, 94, 225, 0.5);
}

.btn-warning:active,
.btn.btn-warning:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(61, 94, 225, 0.4);
}

.btn-warning:disabled,
.btn.btn-warning:disabled {
  background: #b7c0e8;
  box-shadow: none;
  color: #ffffff;
}

/* Global card headers: consistent spacing/border/weight site-wide,
   independent of any page-specific icon-badge markup (pages that add
   .card-icon-badge spans get the richer look; everyone else still gets
   clean, consistent spacing instead of the plain default grey bar). */
.card-header {
  background: var(--mt-surface);
  border-bottom: 1px solid var(--mt-border);
  padding: 14px 18px;
}

.card-header .card-title,
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--mt-text);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Opt-in gradient banner header — add class="card-header card-header-gradient"
   to any .card-header to use this instead of the plain white default.
   The icon badge keeps its own color but gets a translucent white ring
   so it still pops against the gradient; title/text switch to white. */
.card-header.card-header-gradient {
  /* A header bar is much wider than it is tall, so a diagonal gradient
     barely shows any visible change across it — go left-to-right instead,
     with enough contrast between the stops to actually read as a
     gradient rather than a flat color. */
  background: linear-gradient(90deg, #6a7cf0 0%, var(--mt-primary-dark) 100%);
  border-bottom: none;
  padding: 18px 20px;
  color: #ffffff;
}

/* Not every page's header title is a proper .card-title/h1-h6 — some are
   just a plain <span> — so set color on the container itself (inherited
   by default) and reassert it explicitly on the common cases too, since
   .card-header .card-title elsewhere sets color: var(--mt-text) with the
   same specificity and source order alone wouldn't reliably win. */
.card-header.card-header-gradient .card-title,
.card-header.card-header-gradient h1, .card-header.card-header-gradient h2,
.card-header.card-header-gradient h3, .card-header.card-header-gradient h4,
.card-header.card-header-gradient h5, .card-header.card-header-gradient h6,
.card-header.card-header-gradient span {
  color: #ffffff;
}

/* Keep the badge's own color (badge-blue/pink/etc.) on gradient headers
   instead of flattening it to translucent white — just add a soft ring
   so it still stands out against the gradient background. */
.card-header.card-header-gradient .card-icon-badge {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Lightweight section divider for grouping a long flat field grid inside
   a single card body (e.g. "Personal Info" / "Contact Info" / "Status")
   without needing a separate nested .card per group. */
.form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mt-primary);
  margin: 22px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mt-border);
}
.form-section-title:first-child {
  margin-top: 0;
}
.form-section-title i {
  font-size: 0.85rem;
}

/* Colored icon badge for card/section headers — available globally so
   any page can opt in with <span class="card-icon-badge badge-xxx"><i
   class="fa ..."></i></span> inside its .card-title. */
.card-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: #ffffff;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.card-icon-badge.badge-blue { background: linear-gradient(135deg, #3d5ee1, #6a7cf0); }
.card-icon-badge.badge-purple { background: linear-gradient(135deg, #8b5cf6, #a78cfa); }
.card-icon-badge.badge-pink { background: linear-gradient(135deg, #ec4899, #f472b6); }
.card-icon-badge.badge-amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.card-icon-badge.badge-teal { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }
.card-icon-badge.badge-green { background: linear-gradient(135deg, #22c55e, #4ade80); }

/* ---------- Forms ---------- */
.form-control {
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-sm);
  padding: 8px 12px;
}

.form-control:focus {
  border-color: var(--mt-primary);
  box-shadow: 0 0 0 3px rgba(61, 94, 225, 0.15);
}

/* ---------- Select2 (modernized dropdowns) ----------
   Native <select> open-lists are OS/browser-rendered and can't be
   restyled with CSS alone, so dropdowns site-wide are progressively
   enhanced with Select2 (see the init script in each master page).
   This themes Select2's own markup to match .form-control sizing
   (39px tall, 6px radius) and the app's primary blue instead of its
   default plain grey/blue skin. */
.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--single {
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-sm);
  height: 39px;
  background: var(--mt-surface);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  /* custom.min.css (legacy Gentelella theme) ships its own Select2
     override with padding-top:5px, sized for a different box height.
     Same selector specificity, so it wins on any property we don't
     explicitly reset here — zero out top/bottom so line-height alone
     centers the text. */
  padding-top: 0;
  padding-bottom: 0;
  line-height: 37px;
  padding-left: 12px;
  padding-right: 28px;
  color: var(--mt-text);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #8a8f9c;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 37px;
  right: 8px;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--mt-primary);
  box-shadow: 0 0 0 3px rgba(61, 94, 225, 0.15);
}

.select2-dropdown {
  /* Select2's default z-index (1051) sits below AjaxControlToolkit's
     ModalPopupExtender, which assigns its popup panel a dynamic z-index
     well above that (observed at 10002) — so a Select2 dropdown opened
     inside a search/edit popup rendered mostly hidden behind the modal
     itself. Push it above any popup the app uses, including our own
     fixed-position progress bar (z-index 10000). */
  z-index: 10050;
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-sm);
  box-shadow: var(--mt-shadow-md);
  overflow: hidden;
}

.select2-results__option {
  color: var(--mt-text);
}

/* ---------- Modern alert() replacement ----------
   window.alert() is overridden (see the inline script in each master
   page's <head>) to show this styled modal instead of the native
   browser dialog, which cannot be restyled with CSS at all. */
.mt-alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 26, 0.45);
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.mt-alert-box {
  background: var(--mt-surface);
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow-md);
  max-width: 420px;
  width: 100%;
  padding: 28px;
  animation: mt-alert-pop 0.15s ease-out;
  display: flex;
  gap: 16px;
}

@keyframes mt-alert-pop {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.mt-alert-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.mt-alert-icon.mt-alert-success {
  background: #e3f9ed;
  color: #1aa260;
}

.mt-alert-icon.mt-alert-error {
  background: #fde8e8;
  color: #d9414b;
}

.mt-alert-icon.mt-alert-info {
  background: #e9edfc;
  color: var(--mt-primary);
}

.mt-alert-body {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
}

.mt-alert-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--mt-text);
  margin-bottom: 4px;
}

.mt-alert-message {
  color: var(--mt-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.mt-alert-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

.mt-alert-ok {
  background: linear-gradient(90deg, var(--mt-primary), #6a7cf0);
  border: none;
  color: #ffffff;
  font-weight: 600;
  padding: 8px 24px;
  border-radius: var(--mt-radius-sm);
  cursor: pointer;
}

.mt-alert-ok:focus {
  outline: 3px solid rgba(61, 94, 225, 0.3);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-sm);
  padding: 6px 10px;
  background: var(--mt-surface);
  color: var(--mt-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--mt-primary);
  color: #ffffff;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--mt-bg);
  color: var(--mt-text);
}

label,
.control-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--mt-text-muted);
  margin-bottom: 4px;
}

/* Native checkboxes/radios render inconsistently per-browser with no
   theme color; accent-color re-themes them everywhere (TreeViews,
   CheckBoxLists, RadioButtonLists) with zero markup changes needed. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--mt-primary);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ---------- Tables ---------- */
.table,
table.dataTable {
  background: var(--mt-surface);
}

.table thead th,
table.dataTable thead th {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mt-primary-dark);
  border-bottom: 2px solid var(--mt-primary);
  background: linear-gradient(180deg, #f2f4fc 0%, #e9ecfa 100%);
  padding: 12px 14px;
}

.table-hover tbody tr:hover,
table.dataTable tbody tr:hover {
  background-color: #f6f8fc;
}

/* Plain asp:GridView output (no "table" CssClass set) rendered inside the
   content area — style generically by context so no markup/CssClass
   changes are needed across the ~55 pages that use GridView. */
.right_col table {
  width: 100%;
  background: var(--mt-surface);
  border-collapse: collapse;
}

.right_col table th {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mt-primary-dark);
  text-align: left;
  padding: 12px 14px;
  background: linear-gradient(180deg, #f2f4fc 0%, #e9ecfa 100%);
  border-bottom: 2px solid var(--mt-primary);
}

.right_col table th:first-child {
  border-top-left-radius: var(--mt-radius-sm);
}

.right_col table th:last-child {
  border-top-right-radius: var(--mt-radius-sm);
}

.right_col table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--mt-border);
  vertical-align: middle;
}

.right_col table tbody tr:hover {
  background-color: #f6f8fc;
}

/* ---------- Alerts / badges ---------- */
.alert {
  border-radius: var(--mt-radius-sm);
  border: 1px solid transparent;
}

.label,
.badge {
  border-radius: var(--mt-radius-sm);
  font-weight: 500;
}

/* ---------- Footer ---------- */
/* footer is a sibling of .right_col, not nested inside it, so it never
   inherits .right_col's horizontal padding — match it here so the text
   doesn't sit flush against the viewport edge. */
footer {
  color: var(--mt-text-muted);
  padding: 14px 28px;
  margin-top: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .right_col {
    padding: 16px;
  }

  footer {
    padding: 14px 16px;
  }

  .x_panel {
    padding: 14px 16px;
  }

  /* Most pages only use col-sm-*/col-md-*/col-lg-*/col-xl-*/col-xxl-*
     (no col-12 fallback), so below the sm breakpoint Bootstrap has no
     grid rule for them at all — they keep their natural content width
     instead of stacking, which crams a whole field/card row into one
     line and forces horizontal scroll. Force every such column to stack
     to full width here, site-wide, without touching markup on every page. */
  .right_col .row > [class*="col-sm-"],
  .right_col .row > [class*="col-md-"],
  .right_col .row > [class*="col-lg-"],
  .right_col .row > [class*="col-xl-"],
  .right_col .row > [class*="col-xxl-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* The sidebar has no mobile breakpoint at all — it sits at its full
     230px desktop width permanently, which eats most of a phone screen
     and crushes the content next to it. Make it an off-canvas overlay
     below this breakpoint instead: hidden by default, slid in on tap.

     This deliberately does NOT reuse the existing nav-sm/nav-md toggle:
     nav-sm already means "desktop icon-only collapsed rail" and drags in
     a whole set of unrelated rules (narrow fixed width, centered 10px
     icon-only labels, position:absolute, z-index:9999, etc.) that fight
     this mobile overlay and produce a broken hybrid (narrow rail + ghost
     overlapping label text + no dimming). A dedicated class keeps mobile
     and desktop collapse completely independent. */
  .left_col {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -230px !important;
    z-index: 1000 !important;
    width: 230px !important;
    min-height: 0 !important;
    transition: left 0.25s ease;
    box-shadow: var(--mt-shadow-md);
  }

  body.mobile-sidebar-open .left_col {
    left: 0 !important;
  }

  .top_nav,
  .container.body .right_col {
    margin-left: 0 !important;
  }

  /* Dim the page behind the open sidebar so it reads as an overlay and
     gives an obvious tap target to close it again. */
  body.mobile-sidebar-open::before {
    content: "";
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 26, 0.45);
    z-index: 999;
  }
}

/* ---------- AjaxControlToolkit TabContainer ---------- */
/* The toolkit's bundled skin draws tabs with background-image sprites on
   .ajax__tab_outer/.ajax__tab_inner/.ajax__tab_tab (the classic boxed-button
   look). Flatten all of it with !important so only our underline style shows. */
.ajax__tab_outer,
.ajax__tab_inner,
.ajax__tab_tab {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}
.ajax__tab_header {
  background: transparent;
  border-bottom: none;
  box-shadow: 0 1px 0 0 var(--mt-border);
  margin-bottom: 12px;
  height: auto !important;
  min-height: 43px;
  display: block;
}
.ajax__tab_tabs,
.ajax__tab_header .ajax__tab {
  height: auto !important;
}
.ajax__tab_tabs {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  gap: 4px;
}
.ajax__tab_tab {
  color: var(--mt-text-muted) !important;
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  padding: 9px 16px !important;
  margin: 0 0 6px !important;
  border-bottom: none !important;
  border-radius: var(--mt-radius-sm);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.ajax__tab_tab i {
  color: inherit;
  margin-right: 6px;
  font-size: 0.85rem;
  opacity: 0.75;
}
.ajax__tab_tab:hover {
  color: var(--mt-primary) !important;
  background: rgba(61, 94, 225, 0.07) !important;
}
.ajax__tab_active .ajax__tab_tab {
  color: var(--mt-primary) !important;
  background: rgba(61, 94, 225, 0.1) !important;
  font-weight: 600;
}
.ajax__tab_active .ajax__tab_tab i {
  opacity: 1;
}
.ajax__tab_body {
  border: none !important;
  padding: 0;
  background: transparent;
}
.ajax__tab_body .ajax__tab_panel {
  border: none !important;
}
.ajax__tab_body .ajax__tab_panel,
.ajax__tab_body .TabPanel {
  height: auto !important;
  min-height: 460px;
  max-height: 70vh;
  overflow-y: auto !important;
}

/* ==========================================================================
   Dark mode — explicit overrides.
   Most rules above already use var(--mt-*), which [data-theme="dark"]
   near the top of this file already remaps — those re-theme for free.
   This section only covers spots that hardcode a literal color instead
   (so the variable remap can't reach them) and third-party/Bootstrap
   components this file never themed in the first place (inputs, tables,
   modals, dropdowns) because their light-mode defaults were acceptable.
   ========================================================================== */
:root[data-theme="dark"] body {
  color-scheme: dark;
}

/* Table header gradient + row hover used a light-blue literal gradient
   that doesn't track the surface/border variables. */
:root[data-theme="dark"] .table thead th,
:root[data-theme="dark"] table.dataTable thead th,
:root[data-theme="dark"] .right_col table th {
  background: linear-gradient(180deg, #232a3d 0%, #1c2231 100%);
}

:root[data-theme="dark"] .table-hover tbody tr:hover,
:root[data-theme="dark"] table.dataTable tbody tr:hover,
:root[data-theme="dark"] .right_col table tbody tr:hover {
  background-color: #222838;
}

:root[data-theme="dark"] .right_col table,
:root[data-theme="dark"] .table,
:root[data-theme="dark"] table.dataTable {
  color: var(--mt-text);
}

/* Legacy table styling elsewhere hardcodes black cell text AND a white
   cell background with higher specificity than the rules above can
   out-specificity — force both. */
:root[data-theme="dark"] .right_col table td,
:root[data-theme="dark"] .right_col table td span,
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table td span {
  color: var(--mt-text) !important;
  background-color: var(--mt-surface) !important;
}

:root[data-theme="dark"] .right_col table tbody tr,
:root[data-theme="dark"] .table tbody tr {
  background-color: var(--mt-surface) !important;
}

/* mt-alert icon chips: swap the light pastel tints for dark-friendly
   translucent versions of the same hue. */
:root[data-theme="dark"] .mt-alert-icon.mt-alert-success {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}

:root[data-theme="dark"] .mt-alert-icon.mt-alert-error {
  background: rgba(220, 53, 69, 0.18);
  color: #f87171;
}

:root[data-theme="dark"] .mt-alert-icon.mt-alert-info {
  background: rgba(106, 124, 240, 0.18);
}

/* Bootstrap form controls, selects and textareas default to a white
   background with dark text — neither is themed by this file normally
   because the light default already matched .mt-surface. */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background-color: var(--mt-surface);
  color: var(--mt-text);
  border-color: var(--mt-border);
}

:root[data-theme="dark"] .form-control::placeholder,
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: var(--mt-text-muted);
  opacity: 0.8;
}

:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-control[readonly] {
  background-color: #262c3b;
  color: var(--mt-text-muted);
}

/* Bootstrap dropdown menus (the user-profile menu, etc.) and modal
   content default to white. */
:root[data-theme="dark"] .dropdown-menu {
  background-color: var(--mt-surface);
  color: var(--mt-text);
}

:root[data-theme="dark"] .dropdown-item {
  color: var(--mt-text);
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--mt-sidebar-bg-active);
  color: var(--mt-text);
}

:root[data-theme="dark"] .modal-content {
  background-color: var(--mt-surface);
  color: var(--mt-text);
}

/* AjaxControlToolkit ModalPopupExtender panels and PopUp.ascx use plain
   Bootstrap utility classes (bg-white, border) rather than this file's
   card classes. */
:root[data-theme="dark"] .right_col .bg-white,
:root[data-theme="dark"] .right_col .border.rounded {
  background-color: var(--mt-surface) !important;
  border-color: var(--mt-border) !important;
  color: var(--mt-text);
}

/* Labels/plain text inside the content area default to Bootstrap's near
   -black body color, which this file leaves alone in light mode since
   it already reads fine on a white card. */
:root[data-theme="dark"] .right_col,
:root[data-theme="dark"] .right_col label,
:root[data-theme="dark"] .right_col .control-label,
:root[data-theme="dark"] .right_col h1,
:root[data-theme="dark"] .right_col h2,
:root[data-theme="dark"] .right_col h3,
:root[data-theme="dark"] .right_col h4,
:root[data-theme="dark"] .right_col h5,
:root[data-theme="dark"] .right_col h6,
:root[data-theme="dark"] .right_col p,
:root[data-theme="dark"] .right_col span:not([class*="badge"]):not(.card-icon-badge i) {
  color: var(--mt-text);
}

:root[data-theme="dark"] .right_col .text-muted,
:root[data-theme="dark"] .right_col .control-label {
  color: var(--mt-text-muted);
}

/* Theme toggle button in the top bar. */
.mt-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--mt-border);
  background: var(--mt-surface);
  color: var(--mt-text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.mt-theme-toggle:hover {
  color: var(--mt-primary);
}

.mt-theme-toggle .fa-sun-o {
  display: none;
}

:root[data-theme="dark"] .mt-theme-toggle .fa-moon-o {
  display: none;
}

:root[data-theme="dark"] .mt-theme-toggle .fa-sun-o {
  display: inline;
}

/* The dashboard template (styleDashboard.css) ships its own pastel
   "soft" background utilities (bg-success-transparent, bg-light-500,
   etc.) with literal light-mode hex values — catch any of them
   generically rather than enumerating every color variant, and force
   readable text inside. */
:root[data-theme="dark"] [class*="-transparent"] {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme="dark"] [class*="-transparent"],
:root[data-theme="dark"] [class*="-transparent"] * {
  color: var(--mt-text) !important;
}

:root[data-theme="dark"] [class*="-transparent"] .text-default {
  color: var(--mt-text-muted) !important;
}

:root[data-theme="dark"] .bg-light-500,
:root[data-theme="dark"] .bg-light {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---------- User profile dropdown (top-nav avatar menu) ---------- */
.mt-user-menu {
  min-width: 250px;
  padding: 0;
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow-md);
  overflow: hidden;
}

.mt-user-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, var(--mt-primary), #6a7cf0);
}

.mt-user-menu-avatar {
  position: relative;
  flex-shrink: 0;
}

.mt-user-menu-avatar img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.mt-user-menu-status {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #ffffff;
}

.mt-user-menu-identity {
  min-width: 0;
}

.mt-user-menu-name {
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-user-menu-role {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

.mt-user-menu-items {
  padding: 8px;
}

.mt-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--mt-radius-sm);
  color: var(--mt-text);
  font-weight: 500;
  font-size: 0.9rem;
  transition: background-color 0.15s ease;
}

.mt-user-menu-item:hover,
.mt-user-menu-item:focus {
  background: var(--mt-bg);
  color: var(--mt-text);
}

.mt-user-menu-item-danger {
  margin: 0 8px 8px;
  color: #dc3545;
}

.mt-user-menu-item-danger:hover {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.mt-user-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  font-size: 0.8rem;
}

.mt-user-menu-icon-blue {
  background: rgba(61, 94, 225, 0.12);
  color: var(--mt-primary);
}

.mt-user-menu-icon-purple {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
}

.mt-user-menu-icon-red {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}

.mt-user-menu-divider {
  height: 1px;
  background: var(--mt-border);
  margin: 0 8px;
}