/* ============================================================================
   Isidorean Portal — base design system (loaded last, overrides MaterialPro)
   Light, calm, data-first. Headings: Plus Jakarta Sans. Body/data: Inter.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --bg:#fbfbfb; --surface:#ffffff; --surface-2:#f7f9fc;
  --ink:#3f4e5e; --muted:#64748b; --faint:#9aa7b6; --border:#e5eaf1;
  --brand-700:#0964bd; --brand-600:#1574d6; --brand-500:#3b99f7; --brand-100:#e8f0fe;
  --ok-bg:#e6f4ea; --ok-fg:#137333; --warn-bg:#fef3e0; --warn-fg:#9a5b00; --danger-fg:#dc2626;
  --r:10px; --r-lg:14px; --r-pill:999px;
  /* Flat design — no shadows anywhere */
  --sh-1:none; --sh-2:none;
}
/* Kill every shadow across the app (separation via borders, not shadows) */
*, *::before, *::after { box-shadow:none !important; }

html, body { background:var(--bg) !important; background-image:none !important; }
/* User preference: never pure-black text — soften any inline black to dark slate */
[style*="color:#000"], [style*="color: #000"], [style*="color:#000000"],
[style*="color:black"], [style*="color: black"] { color:#3f4e5e !important; }
body {
  color:#3f4e5e;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13px; line-height:1.5;
}
h1,h2,h3,h4,h5,h6,.navbar-brand,.text-themecolor {
  font-family:"Plus Jakarta Sans","Inter",sans-serif; color:#3f4e5e; letter-spacing:-.01em;
}
h1{font-size:1.5rem} h2{font-size:1.3rem} h3{font-size:1.12rem}
h4{font-size:1rem} h5{font-size:.92rem} h6{font-size:.82rem}
small,.small{font-size:.78rem}

:root { --sidebar-w:248px; --sidebar-w-collapsed:68px; --topbar-h:56px; }

/* ---------------------------------------------------------------- Sidebar */
.app-sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:var(--surface); border-right:1px solid var(--border); z-index:1030;
  display:flex; flex-direction:column; overflow:hidden; transition:width .2s, transform .2s; }
.app-sidebar-brand { display:flex; align-items:center; gap:.5rem; height:var(--topbar-h);
  padding:0 1.1rem; border-bottom:1px solid var(--border); flex-shrink:0; text-decoration:none; }
.app-sidebar-brand .brand-icon { height:26px; } .app-sidebar-brand .brand-text { height:35px; }
.app-sidebar-nav { flex:1; overflow-y:auto; padding:.7rem .6rem 1.5rem; }
.app-sidebar-nav::-webkit-scrollbar { width:6px; }
.app-sidebar-nav::-webkit-scrollbar-thumb { background:#dfe6ee; border-radius:3px; }
.side-link { display:flex; align-items:center; gap:.7rem; padding:.55rem .7rem; border-radius:9px;
  color:var(--muted); font-size:.82rem; font-weight:500; white-space:nowrap; text-decoration:none; margin-bottom:2px; }
.side-link i:first-child { width:18px; text-align:center; font-size:.95rem; color:var(--faint); flex-shrink:0; }
.side-link:hover { background:var(--surface-2); color:var(--brand-700); }
.side-link:hover i:first-child { color:var(--brand-500); }
.side-link.active { background:var(--brand-100); color:var(--brand-700); font-weight:600; }
.side-link.active i:first-child { color:var(--brand-700); }
.side-group .chev { margin-left:auto; font-size:.8rem; color:var(--faint); transition:transform .2s; }
.side-group.open .chev { transform:rotate(180deg); }
.side-sub { display:none; margin-bottom:2px; }
.side-sub.show { display:block; }
.side-sublink { display:block; padding:.4rem .7rem .4rem 2.7rem; border-radius:9px;
  color:var(--muted); font-size:.8rem; text-decoration:none; margin-bottom:1px; }
.side-sublink:hover { background:var(--surface-2); color:var(--brand-700); }
.side-sublink.active { color:var(--brand-700); font-weight:600; background:var(--brand-100); }

/* ---------------------------------------------------------------- Topbar */
.app-topbar { position:fixed; top:0; left:var(--sidebar-w); right:0; height:var(--topbar-h);
  background:var(--surface); border-bottom:1px solid var(--border); z-index:1020;
  display:flex; align-items:center; gap:1rem; padding:0 1.3rem; transition:left .2s; }
.app-sidebar-toggle { border:none; background:transparent; color:var(--muted); font-size:1.05rem;
  padding:.35rem .55rem; border-radius:8px; line-height:1; }
.app-sidebar-toggle:hover { background:var(--surface-2); color:var(--brand-700); }
.app-page-title { font-family:"Plus Jakarta Sans","Inter",sans-serif; font-size:1.05rem;
  font-weight:700; color:#3f4e5e; margin:0; letter-spacing:-.01em; }
.app-topbar-right { margin-left:auto; display:flex; align-items:center; gap:1.1rem; }

/* ---------------------------------------------------------------- User chip */
.user-toggle { display:flex; align-items:center; gap:.5rem; color:#3f4e5e; padding:.3rem .2rem; text-decoration:none; }
.user-toggle::after { color:var(--faint); }
.user-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; border:1px solid var(--border); }
.user-meta { display:flex; flex-direction:column; line-height:1.15; }
.user-name { font-weight:600; font-size:.78rem; color:#3f4e5e; }
.user-role { font-size:.66rem; color:var(--muted); }
.user-menu { border:1px solid var(--border); box-shadow:0 4px 16px rgba(9,100,189,.08); border-radius:12px; min-width:250px; overflow:hidden; padding:0; }
.user-card { display:none; }
.um-header { padding:1.1rem 1rem .9rem; display:flex; align-items:center; gap:.75rem; background:linear-gradient(135deg,#f0f6ff 0%,#e8f0fe 100%); }
.um-avatar { width:42px; height:42px; border-radius:50%; background:var(--brand-700); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:700; flex-shrink:0; letter-spacing:.02em; }
.um-info { min-width:0; }
.um-name { font-weight:700; color:#3f4e5e; font-size:.85rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.um-role { font-size:.65rem; color:var(--brand-700); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin:.1rem 0; }
.um-email { font-size:.7rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.um-actions { padding:.4rem .45rem .45rem; }
.um-item { display:flex; align-items:center; gap:.55rem; padding:.5rem .7rem; border-radius:8px; font-size:.8rem; color:#3f4e5e; text-decoration:none; font-weight:500; transition:background .1s,color .1s; }
.um-item:hover { background:var(--surface-2); color:#3f4e5e; text-decoration:none; }
.um-item i { width:15px; text-align:center; color:var(--muted); font-size:.82rem; flex-shrink:0; }
.um-item:hover i { color:var(--brand-700); }
.um-item-danger { color:#dc2626; }
.um-item-danger i { color:#dc2626; }
.um-item-danger:hover { background:#fef2f2; color:#b91c1c; }
.um-item-danger:hover i { color:#b91c1c; }
.app-topbar .clock { color:var(--muted) !important; font-size:.82rem; }

/* ---------------------------------------------------------------- Layout */
#main-wrapper .page-wrapper { margin-left:var(--sidebar-w); padding-top:var(--topbar-h);
  min-height:100vh; background:var(--bg); transition:margin-left .2s; }
.footer { left:var(--sidebar-w) !important; background:transparent; color:var(--muted); transition:left .2s; }
.app-sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(15,37,64,.4); z-index:1025; }

/* collapsed (desktop, icon-only) */
#main-wrapper.sidebar-collapsed .app-sidebar { width:var(--sidebar-w-collapsed); }
#main-wrapper.sidebar-collapsed .app-sidebar-brand .brand-text,
#main-wrapper.sidebar-collapsed .side-link span,
#main-wrapper.sidebar-collapsed .side-group .chev,
#main-wrapper.sidebar-collapsed .side-sub { display:none; }
#main-wrapper.sidebar-collapsed .app-sidebar-brand { justify-content:center; padding:0; }
#main-wrapper.sidebar-collapsed .side-link { justify-content:center; padding:.6rem; gap:0; }
#main-wrapper.sidebar-collapsed .app-topbar { left:var(--sidebar-w-collapsed); }
#main-wrapper.sidebar-collapsed .page-wrapper { margin-left:var(--sidebar-w-collapsed); }
#main-wrapper.sidebar-collapsed .footer { left:var(--sidebar-w-collapsed) !important; }

/* ---------------------------------------------------------------- Topnav mode (faculty) */
body.topnav-mode .app-sidebar,
body.topnav-mode .app-topbar,
body.topnav-mode .app-sidebar-backdrop { display:none !important; }
body.topnav-mode #main-wrapper .page-wrapper { margin-left:0 !important; padding-top:var(--topbar-h) !important; }
body.topnav-mode .footer { left:0 !important; }

/* topnav bar — same height as sidebar topbar */
.modern-topbar { position:fixed; top:0; left:0; right:0; z-index:1030;
  background:var(--surface); height:var(--topbar-h) !important; overflow:visible; }
/* ::after draws the border ON TOP of all children — avoids border-box overflow hiding it */
.modern-topbar::after { content:''; position:absolute; bottom:0; left:0; right:0;
  height:1px; background:var(--border); z-index:10; pointer-events:none; }
/* override style.css .topbar .top-navbar min-height/padding */
.modern-topbar .top-navbar { height:var(--topbar-h) !important; min-height:0 !important;
  padding:0 1rem !important; flex-wrap:nowrap; align-items:center; }
.modern-topbar .navbar-collapse { align-items:center; }
/* override style.css line-height:45px on navbar-header */
.modern-topbar .navbar-header { display:flex; align-items:center; height:100%;
  line-height:normal !important; padding-right:.8rem; border-right:1px solid var(--border); flex-shrink:0; }
/* override style.css line-height:40px font-size:15px on nav-item links */
.modern-topbar .top-navbar .navbar-nav > .nav-item > .nav-link { line-height:normal !important; font-size:.82rem !important; }
body.topnav-mode #main-wrapper .page-wrapper { padding-top:var(--topbar-h) !important; }
.modern-topbar .navbar-brand { display:flex; align-items:center; gap:.45rem; padding:0; text-decoration:none; }
.modern-topbar .brand-icon { height:22px; }
.modern-topbar .brand-text { height:22px; }
/* nav links — mirror .side-link: ink default, brand-100 active */
.modern-topbar .main-nav { gap:.35rem; margin-left:.75rem; }
.modern-topbar .main-nav .nav-link { color:#3f4e5e; font-size:.82rem; font-weight:500;
  padding:.42rem .7rem; display:flex; align-items:center; gap:.4rem; border-radius:9px;
  white-space:nowrap; transition:background .12s,color .12s; line-height:1.3; text-decoration:none; }
.modern-topbar .main-nav .nav-link:hover { background:var(--surface-2); color:var(--brand-700); }
.modern-topbar .main-nav .nav-link.active { background:var(--brand-100); color:var(--brand-700); font-weight:600; }
.modern-topbar .main-nav .nav-link i { font-size:.88rem; width:16px; text-align:center; color:var(--faint); flex-shrink:0; }
.modern-topbar .main-nav .nav-link:hover i,
.modern-topbar .main-nav .nav-link.active i { color:var(--brand-700); }
.modern-topbar .navbar-toggler { border:none; background:transparent; color:var(--muted); padding:.3rem .5rem; font-size:1rem; }
/* mega dropdown */
.modern-topbar .mega-menu { padding:.45rem .35rem; min-width:300px; border:1px solid var(--border); border-radius:var(--r); margin-top:2px; }
.modern-topbar .mega-cols { display:flex; gap:.4rem; }
.modern-topbar .mega-col { flex:1; }
.modern-topbar .mega-col-title { font-size:.64rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:600; padding:.2rem .55rem .08rem; margin:0; }
.modern-topbar .mega-menu .dropdown-item { font-size:.79rem; padding:.28rem .55rem; border-radius:6px; color:#3f4e5e; }
.modern-topbar .mega-menu .dropdown-item:hover,
.modern-topbar .mega-menu .dropdown-item.active { background:var(--brand-100); color:var(--brand-700); }
/* user nav — same chip as sidebar topbar */
.modern-topbar .user-nav { flex-shrink:0; margin-left:auto; }
.modern-topbar .user-toggle { color:#3f4e5e; gap:.45rem; padding:.25rem .2rem; }
.modern-topbar .clock { color:var(--muted); font-size:.8rem; }

/* ---- mobile: hamburger row stays 56px, menu panels drops below as overlay ---- */
@media(max-width:767px) {
  /* topbar stays fixed-height; overflow:visible lets absolute collapse escape */
  .modern-topbar { height:var(--topbar-h) !important; overflow:visible; }
  /* hide the brand separator on mobile — nav is below, not beside */
  .modern-topbar .navbar-header { border-right:none; padding-right:0; }
  /* collapse panel: absolutely positioned below the bar (visibility via inline style from custom JS) */
  .modern-topbar .navbar-collapse {
    position:absolute; top:var(--topbar-h); left:0; right:0;
    background:var(--surface); border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:.6rem .75rem .75rem; z-index:1031;
    flex-direction:column; align-items:stretch;
  }
  /* nav links: full-width, stack vertically */
  .modern-topbar .navbar-collapse .main-nav {
    flex-direction:column; width:100%; gap:.1rem; margin-left:0;
  }
  .modern-topbar .navbar-collapse .main-nav .nav-link {
    white-space:normal; width:100%; padding:.5rem .65rem;
  }
  /* mega dropdown on mobile: static, not floating */
  .modern-topbar .navbar-collapse .mega-dropdown .mega-menu {
    position:static; float:none; width:100%; border:none;
    padding:.2rem 0 .2rem .9rem; border-radius:0; margin-top:0;
  }
  .modern-topbar .navbar-collapse .mega-cols { flex-direction:column; gap:0; }
  /* user section: below nav links, with separator */
  .modern-topbar .navbar-collapse .user-nav {
    flex-direction:row; align-items:center; width:100%; margin-left:0;
    padding-top:.6rem; margin-top:.4rem; border-top:1px solid var(--border);
  }
  /* user dropdown on mobile: full-width panel */
  .modern-topbar .navbar-collapse .user-nav .user-menu {
    position:static; width:100%; border:none; padding:0;
  }
  body.topnav-mode #main-wrapper .page-wrapper { padding-top:var(--topbar-h) !important; }
}

/* ---- tablet (md): all items visible, compact spacing ---- */
@media(min-width:768px) and (max-width:991px) {
  .modern-topbar .main-nav { gap:.1rem; margin-left:.4rem; }
  .modern-topbar .main-nav .nav-link { padding:.38rem .45rem; font-size:.78rem; }
  .modern-topbar .main-nav .nav-link i { display:none; }
  .modern-topbar .user-name { font-size:.72rem; }
  .modern-topbar .user-role { font-size:.62rem; }
}

/* ---------------------------------------------------------------- Page header */
.page-titles { background:transparent; border:none; box-shadow:none; padding:.2rem .15rem; margin:.6rem 0 .3rem; }
.page-titles .text-themecolor { font-size:.95rem; font-weight:700; color:#3f4e5e; margin:0; }

/* ---------------------------------------------------------------- Cards */
.card { border:1px solid var(--border) !important; border-radius:var(--r-lg) !important; box-shadow:var(--sh-1) !important; background:var(--surface); }
.card > .card-body { padding:1.1rem 1.2rem; }
.card .card-body.bg-light { background:var(--surface-2) !important; border-radius:var(--r-lg) var(--r-lg) 0 0; }
/* Ensure dropdowns float above sibling cards (which create stacking contexts via box-shadow) */
.dropdown-menu {
  z-index:9999 !important;
  /* border:1px solid var(--border) !important; */
  border-radius:var(--r) !important;
  padding:.25rem !important;
  min-width:160px;
  box-shadow:var(--sh-2) !important;
  font-size:.82rem;
}
.dropdown-item {
  border-radius:6px !important;
  padding:.32rem .65rem !important;
  font-size:.82rem;
  color:#3f4e5e !important;
  display:flex;
  align-items:center;
  gap:.45rem;
  text-transform:none !important;
  letter-spacing:normal !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background:var(--brand-100) !important;
  color:var(--brand-700) !important;
}
.dropdown-item i { color:var(--muted); width:14px; text-align:center; font-size:.78rem; }
.dropdown-item:hover i, .dropdown-item:focus i { color:var(--brand-700); }

/* ---------------------------------------------------------------- Tables */
.table { font-variant-numeric:tabular-nums; margin-bottom:0; --bs-table-bg:transparent; color:#3f4e5e; font-size:.8rem; }
.table tbody td { color:#3f4e5e; }
.table > :not(caption) > * > * { padding:.5rem .7rem; }
.table thead th { background:var(--surface-2); color:var(--muted); font-weight:600;
  font-size:.66rem; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--border); border-top:none; vertical-align:middle; }
.table:not(.stylish-table) thead th { position:sticky; top:0; z-index:2; }
.table tbody td { border-top:1px solid #eef2f7; vertical-align:middle; }
.table tbody tr:hover { background:var(--surface-2); }

/* ---------------------------------------------------------------- Buttons */
/* Uniform shape (rounded, padding, shadow); each variant keeps its color identity.
   FILLED = solid color + white content. OUTLINE = white + colored content + tinted hover. */
.btn, .btn-lg, .btn-sm { border-radius:9px !important; font-weight:600;
  transition:background .15s, border-color .15s, box-shadow .15s, color .15s; }
.btn-rounded { border-radius:50px !important; }
.btn { padding:.42rem .85rem; font-size:.8rem; }
.btn-lg { padding:.42rem .85rem !important; font-size:.8rem !important; }
.btn-sm { padding:.3rem .55rem; font-size:.74rem; }
.btn i { color:inherit; }
.btn:hover { box-shadow:none !important; }
.btn:focus { box-shadow:none !important; }
.btn:focus-visible { outline:2px solid var(--brand-500); outline-offset:1px; }

/* --- filled --- */
.btn-info, .btn-primary { background:var(--brand-700) !important; border:1px solid var(--brand-700) !important; color:#fff !important; box-shadow:0 2px 6px rgba(9,100,189,.2); }
.btn-info:hover, .btn-primary:hover, .btn-info:focus, .btn-primary:focus { background:var(--brand-600) !important; border-color:var(--brand-600) !important; color:#fff !important; }
.btn-danger { background:#dc2626 !important; border:1px solid #dc2626 !important; color:#fff !important; }
.btn-danger:hover, .btn-danger:focus { background:#bd1f1f !important; border-color:#bd1f1f !important; color:#fff !important; }
.btn-success { background:#16a34a !important; border:1px solid #16a34a !important; color:#fff !important; }
.btn-success:hover, .btn-success:focus { background:#138a3e !important; border-color:#138a3e !important; color:#fff !important; }
.btn-warning { background:#e0a458 !important; border:1px solid #e0a458 !important; color:#fff !important; }
.btn-warning:hover, .btn-warning:focus { background:#cf9347 !important; border-color:#cf9347 !important; color:#fff !important; }
.btn-dark { background:#334155 !important; border:1px solid #334155 !important; color:#fff !important; }
.btn-dark:hover, .btn-dark:focus { background:#283443 !important; border-color:#283443 !important; color:#fff !important; }
.btn-info .text-white, .btn-danger .text-white, .btn-success .text-white, .btn-dark .text-white { color:#fff !important; }

/* --- outline / ghost (white, colored content, tinted hover) --- */
.btn-outline-info, .btn-outline-primary { background:var(--surface) !important; border:1px solid var(--border) !important; color:var(--brand-700) !important; box-shadow:var(--sh-1); }
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-primary:hover, .btn-outline-primary:focus { background:var(--brand-100) !important; border-color:#bcd8f6 !important; color:var(--brand-700) !important; }
.btn-outline-danger { background:var(--surface) !important; border:1px solid var(--border) !important; color:#dc2626 !important; box-shadow:var(--sh-1); }
.btn-outline-danger:hover { background:#fdecec !important; border-color:#f1c4c4 !important; color:#dc2626 !important; }
.btn-outline-secondary, .btn-outline-dark { background:var(--surface) !important; border:1px solid var(--border) !important; color:var(--muted) !important; box-shadow:var(--sh-1); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-dark:hover, .btn-outline-dark:focus { background:#f1f5f9 !important; border-color:#cbd5e1 !important; color:var(--muted) !important; }

.btn-link { background:transparent !important; border:none !important; box-shadow:none !important; color:var(--muted) !important;}
.btn-link:hover { color:var(--brand-700) !important; background:#f1f3f5 !important; text-decoration:none !important; border-radius:50px !important; -webkit-border-radius:50px !important; -moz-border-radius:50px !important; -ms-border-radius:50px !important; -o-border-radius:50px !important; }

/* Add button relocated into the card header — front (left) */
.card-add-btn { margin-right:auto; align-self:center; padding:.45rem .95rem !important; font-size:.84rem !important; }

/* CRUD card header that is a Bootstrap .row and received the Add button:
   force a single aligned line — Add + selector left, search pushed right. */
.card-body > .row:has(.card-add-btn) { flex-wrap:nowrap !important; align-items:center !important; gap:.7rem; }
.card-body > .row:has(.card-add-btn) > div { width:auto !important; max-width:none !important; flex:0 0 auto; }
.card-body > .row:has(.card-add-btn) > div:last-child { margin-left:auto; flex:0 1 auto; }
.card-body > .row:has(.card-add-btn) .select2-container { width:auto !important; min-width:210px; }
.card-body > .row:has(.card-add-btn) .search-wrapper { min-width:250px; }
.card-body > .row:has(.card-add-btn) .d-flex.justify-content-end { justify-content:flex-end !important; }

/* Table action buttons: uniform OUTLINE (white + colored icon), color by type */
.table .btn-info, .table .btn-primary, .table .btn-dark, .table .btn-outline-secondary,
.table .btn-success, .table .btn-danger, .table .btn-warning {
  background:var(--surface) !important; border:1px solid var(--border) !important; box-shadow:none; }
.table .btn-info, .table .btn-primary { color:var(--brand-700) !important; }
.table .btn-info:hover, .table .btn-primary:hover { background:var(--brand-100) !important; border-color:#bcd8f6 !important; color:var(--brand-700) !important; }
.table .btn-danger { color:#dc2626 !important; }
.table .btn-danger:hover { background:#fdecec !important; border-color:#f1c4c4 !important; color:#dc2626 !important; }
.table .btn-success { color:#16a34a !important; }
.table .btn-success:hover { background:#e6f4ea !important; border-color:#c2e3cc !important; color:#16a34a !important; }
.table .btn-warning { color:var(--warn-fg) !important; }
.table .btn-warning:hover { background:var(--warn-bg) !important; border-color:#f0d8a8 !important; color:var(--warn-fg) !important; }
.table .btn-dark, .table .btn-outline-secondary { color:var(--muted) !important; }
.table .btn-dark:hover, .table .btn-dark:focus, .table .btn-outline-secondary:hover, .table .btn-outline-secondary:focus { background:#f1f5f9 !important; color:var(--muted) !important; }
/* space out action buttons — split joined .btn-group so each is separate + rounded */
.table .btn-group { gap:.4rem; display:inline-flex; }
.table .btn-group > .btn,
.table .btn-group > .btn:not(:first-child),
.table .btn-group > .btn:not(:last-child) { margin:0 !important; border-radius:9px !important; }
.table td .d-flex.gap-1 { gap:.4rem !important; }

/* ---------------------------------------------------------------- Forms */
.form-control, .form-select { border-radius:8px; border-color:var(--border); color:#3f4e5e; }
.form-control:focus, .form-select:focus { border-color:var(--brand-500); box-shadow:0 0 0 .2rem rgba(59,153,247,.15); }
.form-label, label { color:#3f4e5e; font-weight:500; }
.form-label small, label small { color:var(--muted); font-weight:400; }

/* ---- Select2 (uniform with form controls) ---- */
.select2-container { width:100% !important; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height:calc(1.5em + .7rem + 2px) !important; border:1px solid var(--border) !important;
  border-radius:8px !important; background:var(--surface) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height:calc(1.5em + .7rem) !important; color:#3f4e5e; padding-top:0 !important; padding-left:.75rem; padding-right:2rem; font-size:.82rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height:100% !important; right:6px; }
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color:var(--brand-500) !important; box-shadow:0 0 0 .2rem rgba(59,153,247,.15); }
.select2-dropdown { border:1px solid var(--border) !important; border-radius:8px; box-shadow:var(--sh-2); min-width:160px !important; }
.select2-results__option { font-size:.82rem; padding:.4rem .75rem; color:#3f4e5e; }
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background:var(--brand-700) !important; color:#fff !important; }
.select2-container--default .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
  background:var(--brand-100) !important; color:var(--brand-700) !important; font-weight:600; }
.select2-container--default .select2-search--dropdown .select2-search__field { border-radius:6px; border:1px solid var(--border); }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color:var(--faint); }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background:var(--brand-100); border:none; color:var(--brand-700); border-radius:6px; font-size:.78rem; }

/* Student picker with avatar (class_list.js "Add Students to Section" — replaces select2) */
.stud-picker { position:relative; }
.stud-picker-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.4rem; }
.stud-picker-chips:empty { margin-bottom:0; }
.stud-chip {
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--brand-100); color:var(--brand-700); border-radius:6px;
  font-size:.78rem; padding:.15rem .5rem .15rem .15rem; }
.stud-chip img { width:20px; height:20px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--surface-2); }
.stud-chip-remove {
  border:none; background:none; padding:0 0 0 .15rem; color:var(--brand-700);
  opacity:.65; cursor:pointer; font-size:.7rem; line-height:1; }
.stud-chip-remove:hover { opacity:1; }
.stud-picker-input {
  min-height:calc(1.5em + .7rem + 2px) !important; border:1px solid var(--border) !important;
  border-radius:8px !important; background:var(--surface) !important; font-size:.82rem; }
.stud-picker-results {
  display:none; position:fixed; z-index:2000; /* fixed: escapes .modal-dialog-scrollable's clipped/scrollable ancestors */
  background:var(--surface); border:1px solid var(--border) !important; border-radius:8px;
  box-shadow:var(--sh-2); max-height:220px; overflow-y:auto; }
.stud-picker-row { display:flex; align-items:center; gap:.5rem; padding:.4rem .75rem; font-size:.82rem; color:#3f4e5e; cursor:pointer; }
.stud-picker-row:hover { background:var(--brand-700); color:#fff; }
.stud-picker-row img { width:24px; height:24px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--surface-2); }
.stud-picker-empty { padding:.5rem .75rem; font-size:.8rem; color:var(--muted); }

/* ---------------------------------------------------------------- Modals */
.modal-content { border:none; border-radius:var(--r-lg); }
.modal-header { border-bottom:1px solid var(--border); }
.modal-header .modal-title { font-weight:700; color:#3f4e5e; }
.modal-footer { border-top:1px solid var(--border); }
/* Confirmation dialogs — prevent Bootstrap modal-dialog-centered min-height from stretching */
#archive .modal-dialog, #retrieve .modal-dialog, #delete .modal-dialog { min-height:0 !important; }
/* Global: Close/Cancel buttons in modal footers match adjacent primary (rounded, outline, same padding) */
.modal-footer [data-bs-dismiss="modal"],
.modal-footer .btn-link {
    border:1px solid var(--border) !important;
    background:var(--surface) !important;
    color:var(--muted) !important;
    border-radius:50px !important;
    padding:.375rem 1.25rem !important;
    text-decoration:none !important;
    line-height:1.5 !important;
    font-size:.875rem !important;
}
.modal-footer [data-bs-dismiss="modal"]:hover,
.modal-footer [data-bs-dismiss="modal"]:focus,
.modal-footer .btn-link:hover,
.modal-footer .btn-link:focus {
    background:#f1f5f9 !important;
    color:var(--muted) !important;
    border-color:#cbd5e1 !important;
    text-decoration:none !important;
}
/* Same, but for Cancel/Close buttons outside .modal-footer (custom action rows) —
   match the size of a sibling .btn-lg primary action wherever it appears. */
.btn-link:has(~ .btn-lg) {
    border:1px solid var(--border) !important;
    background:var(--surface) !important;
    color:var(--muted) !important;
    border-radius:50px !important;
    padding:.42rem .85rem !important;
    text-decoration:none !important;
    line-height:1.5 !important;
    font-size:.8rem !important;
}
.btn-link:has(~ .btn-lg):hover,
.btn-link:has(~ .btn-lg):focus {
    background:#f1f5f9 !important;
    color:var(--muted) !important;
    border-color:#cbd5e1 !important;
    text-decoration:none !important;
}

/* Neutralize MaterialPro form-material — full bordered inputs, NO underline,
   NO focus layout-shift (constant 1px border, box-shadow ring on focus). */
.form-material .form-control, .form-material .form-select,
.form-material input, .form-material textarea, .form-material select {
  border:1px solid var(--border) !important; border-radius:8px !important;
  background-image:none !important; background:var(--surface) !important;
  box-shadow:none !important; padding:.42rem .7rem !important; }
.form-material .form-control:focus, .form-material .form-select:focus,
.form-material input:focus, .form-material textarea:focus, .form-material select:focus {
  border-color:var(--brand-500) !important; box-shadow:0 0 0 .2rem rgba(59,153,247,.15) !important;
  background:var(--surface) !important; }
.form-material .form-line, .form-line:after, .form-line:before { display:none !important; }
.form-control[readonly], .form-material .form-control[readonly] { background:var(--surface-2) !important; }
/* prevent any focus border-width jump globally */
.form-control, .form-select { border-width:1px !important; }
.form-control:focus, .form-select:focus { border-width:1px !important; }

/* ---- View/Edit learner modal — profile-editor layout (scoped to #view) ---- */
#view .modal-dialog { max-width:1080px; }
#view .modal-content { overflow:hidden; }
#view .modal-body { padding:0 !important; display:grid; grid-template-columns:240px 1fr;
  grid-template-areas:"head head" "nav content"; align-items:stretch; }
/* gradient profile header band (full-bleed) */
#view .lp-head { grid-area:head; display:flex; align-items:center; gap:1rem; padding:1.2rem 1.5rem;
  background:linear-gradient(120deg, var(--brand-700), var(--brand-500)); color:#fff; }
#view .lp-avatar { width:58px; height:58px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.2rem;
  font-family:"Plus Jakarta Sans","Inter",sans-serif; }
#view .lp-head .learner_name { color:#fff !important; margin:0 !important; line-height:1.2;
  font-family:"Plus Jakarta Sans","Inter",sans-serif; font-size:1.3rem; font-weight:800; }
#view .lp-meta { opacity:.92; font-size:.82rem; margin-top:.15rem; }
#view .lp-chips { margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap; }
#view .lp-chip { background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4); color:#fff;
  padding:.3rem .7rem; border-radius:999px; font-size:.72rem; font-weight:600; white-space:nowrap; }
/* learners modal: photo avatar, close button, department chips */
#view .lp-head { position:relative; }
#view .lp-avatar-wrap { position:relative; flex-shrink:0; width:58px; height:58px; }
#view .lp-avatar-wrap .lp-avatar { width:100%; height:100%; }
#view .lp-cam-btn { position:absolute; bottom:-3px; right:-3px; width:22px; height:22px;
  border-radius:50%; background:var(--brand-700,#0964bd); border:2px solid #fff; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.6rem;
  box-shadow:0 1px 4px rgba(0,0,0,.3); transition:background .15s; padding:0; }
#view .lp-cam-btn:hover { background:var(--brand-500,#1a7ae0); }
#view .lp-del-btn { background:none; border:none; color:rgba(255,255,255,.8); font-size:.72rem;
  cursor:pointer; padding:.2rem .5rem; border-radius:6px; transition:all .15s; }
#view .lp-del-btn:hover { color:#fff; background:rgba(255,255,255,.2); }
#view .lp-avatar { overflow:hidden; padding:0; position:relative; }
#view .lp-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
/* crop shape preview */
#lp-crop-modal.crop-circle .cropper-view-box,
#lp-crop-modal.crop-circle .cropper-face { border-radius:50%; }
/* crop modal control buttons — ghost, no bg fill on any state */
.lp-crop-ctrl { background:none; border:none; color:var(--muted,#64748b); font-size:.8rem;
  padding:.3rem .55rem; border-radius:6px; cursor:pointer; transition:color .15s; }
.lp-crop-ctrl:hover { color:var(--ink,#3f4e5e); background:none; }
.lp-crop-ctrl:active, .lp-crop-ctrl:focus { background:none !important; outline:none; box-shadow:none; }
.lp-crop-ctrl.active { color:var(--brand-700,#0964bd); font-weight:600; text-decoration:underline; }
.lp-crop-divider { display:inline-block; width:1px; height:1.2rem; background:var(--border,#e2e8f0); margin:0 .25rem; vertical-align:middle; }
/* Header avatar photo — clickable to enlarge */
#view .lp-avatar.lp-avatar-clickable { cursor:pointer; transition:transform .15s; }
#view .lp-avatar.lp-avatar-clickable:hover { transform:scale(1.05); outline:2px solid rgba(255,255,255,.7); outline-offset:1px; }
#view .lp-avatar .stud_img_initials { color:#fff; font-weight:800; font-size:1.2rem; }
#view .lp-avatar .loading-indicator { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; }
#view .lp-meta b { color:#fff; font-weight:700; }
#view .lp-close { position:absolute; top:1rem; right:1.2rem; width:30px; height:30px; border-radius:8px;
  border:none; background:rgba(255,255,255,.2); color:#fff; font-size:1.35rem; line-height:1; padding:0; }
#view .lp-close:hover { background:rgba(255,255,255,.34); }
#view .lp-edit { position:absolute; top:1rem; right:3.6rem; height:30px; padding:0 .85rem; border-radius:8px;
  border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.18); color:#fff !important;
  font-size:.78rem; font-weight:600; white-space:nowrap; }
#view .lp-edit:hover { background:rgba(255,255,255,.32); }
#view .lp-edit i { margin-right:.35rem; }
/* global student photo preview modal */
#img_preview .img-preview-content { background:transparent; border:none; box-shadow:none !important; align-items:center; overflow:visible; }
#img_preview .img-preview-pic { width:100%; max-height:82vh; object-fit:contain; border-radius:14px; background:#fff; }
#img_preview .img-preview-close { position:absolute; top:-14px; right:-14px; width:36px; height:36px; border-radius:50%;
  border:none; background:#fff; color:#3f4e5e; font-size:1.45rem; line-height:1; padding:0; z-index:5; }
#img_preview .img-preview-close:hover { background:#eef2f7; }
#view .lp-chips .level_sec { display:inline-flex; gap:.4rem; flex-wrap:wrap; }
#view .lp-chips .badge-department { background:rgba(255,255,255,.18) !important; border:1px solid rgba(255,255,255,.4) !important;
  color:#fff !important; padding:.32rem .7rem; border-radius:999px; font-size:.72rem; font-weight:600; white-space:nowrap; }
/* left icon rail */
#view .modal-body > .bg-light { grid-area:nav; background:#fafcff !important; border:none;
  border-right:1px solid var(--border); border-radius:0 !important; padding:1rem .8rem !important; }
#view .small-tabs { flex-direction:column !important; flex-wrap:nowrap !important; align-items:stretch !important;
  justify-content:flex-start !important; gap:.15rem !important; background:transparent !important;
  padding:0 !important; overflow:visible !important; }
#view .small-tabs .nav-item { width:100%; }
#view .small-tabs .nav-link { display:flex !important; align-items:center; width:100%;
  justify-content:flex-start !important; text-align:left; border-radius:10px !important;
  padding:.6rem .8rem !important; font-size:.82rem !important; color:var(--muted) !important;
  background:transparent !important; white-space:normal; line-height:1.2; }
#view .small-tabs .nav-link::before { font-family:"FontAwesome"; width:18px; flex-shrink:0;
  display:inline-block; text-align:center; margin-right:.6rem; color:var(--faint); font-size:.95rem; }
#view .small-tabs .nav-item:nth-child(1) .nav-link::before { content:"\f007"; }
#view .small-tabs .nav-item:nth-child(2) .nav-link::before { content:"\f0c0"; }
#view .small-tabs .nav-item:nth-child(3) .nav-link::before { content:"\f0f0"; }
#view .small-tabs .nav-item:nth-child(4) .nav-link::before { content:"\f015"; }
#view .small-tabs .nav-item:nth-child(5) .nav-link::before { content:"\f095"; }
#view .small-tabs .nav-item:nth-child(6) .nav-link::before { content:"\f19c"; }
#view .small-tabs .nav-item:nth-child(7) .nav-link::before { content:"\f21e"; }
#view .small-tabs .nav-item:nth-child(8) .nav-link::before { content:"\f0ea"; }
#view .small-tabs .nav-item:nth-child(9) .nav-link::before { content:"\f132"; }
/* Incident Reports tab — target by href so it keeps its icon regardless of position */
#view .small-tabs .nav-link[href="#tab_incident"]::before { content:"\f0f6" !important; }
#view .small-tabs .nav-link:hover { background:#eef4fd !important; color:var(--brand-700) !important; }
#view .small-tabs .nav-link:hover::before { color:var(--brand-500); }
#view .small-tabs .nav-link.active { background:var(--brand-700) !important; color:#fff !important; }
#view .small-tabs .nav-link.active::before { color:#fff; }
/* content pane */
#view .modal-body > .tab-content { grid-area:content; padding:1.4rem 1.6rem !important; }
@media (max-width:767px){
  #view .modal-body { grid-template-columns:1fr; grid-template-areas:"head" "nav" "content"; }
  #view .lp-chips { display:none; }
  #view .modal-body > .bg-light { border-right:none; border-bottom:1px solid var(--border); }
  #view .small-tabs { flex-direction:row !important; flex-wrap:wrap !important; }
  #view .small-tabs .nav-item { width:auto; }
}

/* ====================== CRUD form modals (#modal_add / #modal_edit) ====================== */
#modal_add .modal-content, #modal_edit .modal-content {
  border-radius:16px; overflow:hidden; border-top:3px solid var(--brand-700); }
#modal_add .modal-header, #modal_edit .modal-header {
  padding:1.1rem 1.4rem .9rem; border-bottom:1px solid var(--border); align-items:center; }
#modal_add .modal-title, #modal_edit .modal-title {
  font-family:"Plus Jakarta Sans","Inter",sans-serif; font-weight:700 !important; font-size:1.1rem;
  color:#3f4e5e !important; background:none !important; -webkit-text-fill-color:initial !important; }
#modal_add .modal-header .close, #modal_edit .modal-header .close {
  border:none; background:var(--surface-2); width:30px; height:30px; border-radius:8px;
  color:var(--muted); font-size:1.2rem; line-height:1; opacity:1; }
#modal_add .modal-header .close:hover, #modal_edit .modal-header .close:hover {
  background:#fdecec; color:#dc2626; }
#modal_add .modal-body, #modal_edit .modal-body { padding:1.4rem 1.5rem; }
#modal_add .form-group, #modal_edit .form-group { margin-bottom:1rem; }
#modal_add .form-label, #modal_edit .form-label,
#modal_add .form-group > label, #modal_edit .form-group > label {
  font-size:.76rem !important; font-weight:600 !important; color:var(--muted) !important;
  margin-bottom:.35rem; text-transform:none; }
#modal_add .form-control, #modal_edit .form-control,
#modal_add .form-select, #modal_edit .form-select {
  border:1px solid var(--border) !important; border-radius:9px !important; padding:.5rem .75rem !important;
  font-size:.85rem; background:var(--surface) !important; }
#modal_add .form-control:focus, #modal_edit .form-control:focus {
  border-color:var(--brand-500) !important; }
/* in-body action row -> proper footer */
#modal_add .text-right, #modal_add .text-end, #modal_edit .text-right, #modal_edit .text-end {
  margin:1.4rem -1.5rem -1.4rem; padding:1rem 1.5rem; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:.6rem; align-items:center; }

/* ---------------------------------------------------------------- Badges */
.badge { font-weight:600; border-radius:6px; padding:.4em .6em; letter-spacing:.02em; }

/* ---------------------------------------------------------------- Enrollee / learner card (shared) */
:is(.enrollee-card, .learner-card) { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:1rem 1.1rem; transition:border-color .18s, transform .18s; }
:is(.enrollee-card, .learner-card):hover { border-color:#cfe0f5; transform:translateY(-2px); }
:is(.enrollee-card, .learner-card) .card-header-section { display:flex; align-items:center; gap:.7rem;
  padding-bottom:.7rem; margin-bottom:.6rem; border-bottom:1px solid var(--border); }
:is(.enrollee-card, .learner-card) .avatar-md,
:is(.enrollee-card, .learner-card) .avatar-initials,
:is(.enrollee-card, .learner-card) .avatar-container img {
  width:46px !important; height:46px !important; border-radius:50% !important;
  font-weight:700; font-size:1rem; color:#fff; object-fit:cover; flex-shrink:0; }
:is(.enrollee-card, .learner-card) .header-info { min-width:0; }
:is(.enrollee-card, .learner-card) .student-name { font-family:"Plus Jakarta Sans","Inter",sans-serif; font-weight:700;
  font-size:.95rem; color:#3f4e5e; line-height:1.2; margin:0; }
:is(.enrollee-card, .learner-card) .student-id { font-size:.76rem; color:var(--brand-700) !important; font-weight:600; margin-top:.1rem; }
:is(.enrollee-card, .learner-card) .student-info { display:flex; flex-direction:column; }
:is(.enrollee-card, .learner-card) .student-info > div { display:flex; justify-content:space-between; align-items:center;
  font-size:.8rem; padding:.28rem 0; border-bottom:1px solid #f1f4f8; }
:is(.enrollee-card, .learner-card) .student-info > div:last-child { border-bottom:none; }
:is(.enrollee-card, .learner-card) .student-info > div > span:first-child { color:var(--muted); }
:is(.enrollee-card, .learner-card) .student-info > div > span:last-child:not(.label):not(.badge) { color:#3f4e5e; font-weight:600; text-align:right; }
:is(.enrollee-card, .learner-card) .label, :is(.enrollee-card, .learner-card) .badge { border-radius:6px; padding:.26em .6em; font-size:.66rem; font-weight:600; }
:is(.enrollee-card, .learner-card) .label-light-info { background:var(--brand-700) !important; color:#fff !important; }
:is(.enrollee-card, .learner-card) .label-light-success { background:var(--ok-bg) !important; color:var(--ok-fg) !important; }
:is(.enrollee-card, .learner-card) .student-status .badge-info { background:var(--brand-700) !important; color:#fff !important; }
:is(.enrollee-card, .learner-card) .student-status .badge-success { background:var(--ok-bg) !important; color:var(--ok-fg) !important; }
:is(.enrollee-card-actions, .learner-card-actions) { display:flex; justify-content:flex-end; gap:.4rem;
  margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--border); }
:is(.enrollee-card-actions, .learner-card-actions) .btn { box-shadow:none !important; }

/* ---------------------------------------------------------------- Search box */
.search-wrapper {
  display:flex !important; align-items:center; gap:.4rem;
  padding:.375rem .75rem !important;
  border-radius:8px !important; border:1px solid var(--border) !important;
  background:var(--surface) !important; box-shadow:none !important;
  transition:border-color .15s; min-height:38px;
}
.search-wrapper:focus-within { border-color:var(--brand-700) !important; }
.search-wrapper .search-icon {
  position:static !important; transform:none !important;
  color:var(--muted) !important; font-size:.8rem; flex-shrink:0;
}
.search-wrapper .search-input {
  border:none !important; background:transparent !important;
  box-shadow:none !important; outline:none !important;
  font-size:.8rem; color:#3f4e5e !important;
  padding:0 !important; width:100%;
}

/* ---------------------------------------------------------------- DataTables */
.dataTables_wrapper .dataTables_filter input {
    border-radius:8px; border:1px solid var(--border); padding:.3rem .65rem;
    font-size:.8rem; color:#3f4e5e; background:var(--surface); box-shadow:none; outline:none;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color:var(--brand-700); box-shadow:none; outline:none;
}
.dataTables_wrapper .dataTables_length select { border-radius:8px; border:1px solid var(--border); padding:.3rem .5rem; font-size:.8rem; color:#3f4e5e; }
/* The outer <li> carries both .page-item and .paginate_button — strip its box so
   it's NOT a second button; only the inner .page-link is the button. */
.pagination .page-item,
.pagination .page-item.paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background:transparent !important; border:none !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; }

/* Bootstrap-style DataTables pagination (.pagination > .page-item > .page-link) */
.pagination { gap:6px; margin:0; }
.pagination .page-item .page-link {
  border:1px solid var(--border) !important; border-radius:9px !important; margin:0 !important;
  height:30px; min-width:30px; padding:0 .5rem !important;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600 !important; font-size:.74rem !important; line-height:1;
  background:var(--surface) !important; color:var(--brand-700) !important; box-shadow:none !important;
  transition:background .15s, border-color .15s, color .15s; }
.pagination .page-item .page-link:hover {
  background:var(--brand-100) !important; color:var(--brand-700) !important; border-color:#bcd8f6 !important; box-shadow:none !important; }
.pagination .page-item.active .page-link {
  background:var(--brand-700) !important; color:#fff !important; border-color:var(--brand-700) !important; box-shadow:none !important; }
.pagination .page-item.active .page-link:hover {
  background:var(--brand-600) !important; border-color:var(--brand-600) !important; box-shadow:none !important; }
.pagination .page-item.disabled .page-link {
  background:var(--surface) !important; color:var(--faint) !important; border-color:var(--border) !important; box-shadow:none !important; }
/* kill focus ring / active glow that lingers behind the current page */
.pagination .page-item .page-link:focus,
.pagination .page-item .page-link:focus-visible,
.pagination .page-item .page-link:active,
.pagination .page-item.active .page-link:focus {
  box-shadow:none !important; outline:none !important; }
/* strip any box on the paginate wrapper / list */
.dataTables_wrapper .dataTables_paginate,
.pagination { background:transparent !important; border:none !important; box-shadow:none !important; }
.dataTables_wrapper .dataTables_info { color:var(--muted); font-size:.85rem; padding-top:.6rem; }
/* pagination aligned to the right (info left, page numbers far right) */
.dataTables_wrapper .dataTables_paginate { margin-left:auto; float:none; }
.dataTables_paginate .pagination, .pagination-wrapper .pagination { justify-content:flex-end !important; margin:0; }
.card-pagination-controls .pagination-wrapper { width:100%; }
.card-pagination-controls .dataTables_info { order:0; margin-right:auto; }
.card-pagination-controls .dataTables_paginate { order:1; margin-left:auto; }

/* ============================ DataTables — redesigned look ============================ */
/* App uses its own search box; hide DataTables' default length+filter controls AND the
   wrapper row that holds them, so there's NO extra padding above the table. */
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { display:none !important; }
.dataTables_wrapper > .row:has(.dataTables_length),
.dataTables_wrapper > .row:has(.dataTables_filter) { display:none !important; }

table.dataTable { border-collapse:separate !important; border-spacing:0; width:100% !important; }
table.dataTable tbody td, table.dataTable thead th, table.dataTable thead td,
.table tbody td, .table thead th { text-align:left !important; }
/* header: airy, uppercase, 2px brand-tinted underline, no cell borders */
table.dataTable thead th, table.dataTable thead td {
  background:#eef2f7 !important; border:none !important; border-bottom:1px solid #dde4ec !important;
  color:#5b6b7f !important; font-size:.66rem !important; font-weight:700 !important; white-space:nowrap;
  text-transform:uppercase; letter-spacing:.05em; padding:.5rem .75rem !important; vertical-align:middle; }
/* body: compact borderless rows with hairline dividers */
table.dataTable tbody td { border:none !important; border-bottom:1px solid #eef2f7 !important;
  padding:.45rem .9rem !important; font-size:.82rem; color:#3f4e5e; vertical-align:middle; line-height:1.4; }
/* action column: shrink to fit + hug the right (no trailing empty space) */
table.dataTable td:last-child, table.dataTable th:last-child {
  width:1% !important; white-space:nowrap; text-align:right !important; padding-right:.9rem !important; }
table.dataTable td:last-child .d-flex, table.dataTable td:last-child .btn-group { justify-content:flex-end; }
table.dataTable tbody tr { background:transparent !important; transition:background .12s; }
table.dataTable tbody tr:hover { background:#f3f8ff !important; }
table.dataTable tbody tr:hover > td:first-child { box-shadow:inset 3px 0 0 var(--brand-700); }
table.dataTable tbody tr:last-child > td { border-bottom:none !important; }
table.dataTable.no-footer { border-bottom:none !important; }

/* single sort icon INLINE beside the header text (DataTables 1.11 puts two arrows
   absolutely at bottom-right — kill :before, force :after inline) */
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
  cursor:pointer; background-image:none !important; }
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before { display:none !important; content:"" !important; }
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  position:static !important; display:inline-block !important; font-family:"FontAwesome" !important;
  margin-left:.4rem; font-size:.6rem; opacity:.4; right:auto !important; bottom:auto !important; top:auto !important; }
table.dataTable thead .sorting::after { content:"\f0dc" !important; }
table.dataTable thead .sorting_asc::after { content:"\f0de" !important; opacity:1; color:var(--brand-700) !important; }
table.dataTable thead .sorting_desc::after { content:"\f0dd" !important; opacity:1; color:var(--brand-700) !important; }
/* empty state */
table.dataTable td.dataTables_empty { color:var(--muted); padding:2rem !important; font-style:normal; text-align:center !important; }

/* outer border around the whole table — clip corners so it's clean (skip class-record plugin) */
.table-responsive:not(.sticky-table) { /* border:1px solid #dde4ec; border-radius:12px;  */overflow:hidden; }
.table-responsive:not(.sticky-table) > table.dataTable { margin:0 !important; }
table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after { white-space:nowrap; }

/* ------------------------------------------ Neutralize loud solid blocks */
/* Convert solid-color stat blocks (bg-info/primary/success card bodies) into
   clean white cards with a blue accent + readable ink/brand text. */
.card-body.bg-info, .card-body.bg-primary, .card-body.bg-success, .card-body.bg-warning {
  background:var(--surface) !important; border-left:3px solid var(--brand-700);
  border-radius:var(--r-lg); }
.card-body.bg-info .text-white, .card-body.bg-primary .text-white,
.card-body.bg-success .text-white, .card-body.bg-warning .text-white { color:var(--muted) !important; }
.card-body.bg-info h1.text-white, .card-body.bg-info h2.text-white, .card-body.bg-info h3.text-white,
.card-body.bg-info h4.text-white, .card-body.bg-info .semi-bold.text-white,
.card-body.bg-primary h2.text-white, .card-body.bg-primary .semi-bold.text-white {
  color:var(--brand-700) !important; }
.card-body.bg-info .border-end, .card-body.bg-info .b-r,
.card-body.bg-info .border-start { border-color:var(--border) !important; }

/* ---------------------------------------------------------------- Misc */
a { color:var(--brand-700); }
.text-info, .text-primary { color:var(--brand-700) !important; }
.badge.bg-info, .badge.badge-info,
.badge.bg-primary, .badge.badge-primary { background:var(--brand-700) !important; color:#fff !important; }
/* nav-pills active */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color:var(--brand-700) !important; }
/* checkboxes / radios */
.form-check-input:checked { background-color:var(--brand-700) !important; border-color:var(--brand-700) !important; }
.form-check-input:focus { box-shadow:0 0 0 .2rem rgba(9,100,189,.2) !important; border-color:var(--brand-500) !important; }
/* bg-primary surfaces */
.bg-primary { background-color:var(--brand-700) !important; }
/* link-primary */
.link-primary { color:var(--brand-700) !important; }
::selection { background:var(--brand-100); }

/* ---------------------------------------------------------------- Toastr — white card, color-coded accent */
#toast-container.toast-bottom-left { bottom:24px !important; left:16px !important; }
#toast-container > div {
    background-color:#fff !important;
    color:#3f4e5e !important;
    border-radius:10px !important;
    box-shadow:0 4px 20px rgba(0,0,0,.10) !important;
    padding:13px 16px 13px 52px !important;
    border-left:4px solid transparent !important;
    opacity:1 !important;
    min-width:260px !important;
    max-width:360px !important;
    font-family:"Inter","Plus Jakarta Sans",sans-serif !important;
    position:relative !important;
}
#toast-container > .toast-success { border-left-color:#22c55e !important; }
#toast-container > .toast-error   { border-left-color:#ef4444 !important; }
#toast-container > .toast-warning { border-left-color:#f59e0b !important; }
#toast-container > .toast-info    { border-left-color:#3b82f6 !important; }

/* title */
#toast-container > div .toast-title {
    font-size:.78rem !important; font-weight:700 !important; color:#3f4e5e !important;
    margin-bottom:.15rem !important;
}
/* message */
#toast-container > div .toast-message {
    font-size:.75rem !important; color:#3f4e5e !important; line-height:1.45 !important;
}
/* icon (background-image → replaced with ::before pseudo icon) */
#toast-container > div::before {
    content:''; position:absolute; left:14px; top:50%; transform:translateY(-50%);
    width:22px; height:22px; border-radius:50%;
    background-repeat:no-repeat; background-position:center; background-size:13px;
}
#toast-container > .toast-success::before {
    background-color:#dcfce7;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
#toast-container > .toast-error::before {
    background-color:#fee2e2;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23dc2626'%3E%3Cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
#toast-container > .toast-warning::before {
    background-color:#fef3c7;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23d97706'%3E%3Cpath fill-rule='evenodd' d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
#toast-container > .toast-info::before {
    background-color:#dbeafe;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232563eb'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
/* hide default toastr bg images */
#toast-container > .toast-success,
#toast-container > .toast-error,
#toast-container > .toast-warning,
#toast-container > .toast-info { background-image:none !important; }
/* close btn */
#toast-container > div .toast-close-button {
    color:#94a3b8 !important; font-size:1rem !important; top:6px !important; right:8px !important;
}
#toast-container > div .toast-close-button:hover { color:#3f4e5e !important; }
/* progress bar */
#toast-container > div .toast-progress {
    background-color:rgba(0,0,0,.06) !important; height:3px !important; border-radius:0 0 10px 10px !important;
}

/* ---------------------------------------------------------------- Shared action buttons (modals, toolbars) */
.ac-btn-primary {
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    background:var(--brand-700); color:#fff; border:1px solid var(--brand-700); border-radius:8px;
    padding:.48rem 1rem; font-size:.82rem; font-weight:600; font-family:inherit;
    text-decoration:none; cursor:pointer; white-space:nowrap;
    transition:background .13s, border-color .13s;
}
.ac-btn-primary:hover, .ac-btn-primary:focus { background:#074f96; border-color:#074f96; color:#fff; outline:none; }
.ac-btn-primary:disabled { opacity:.55; pointer-events:none; }

.ac-btn-outline {
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    background:#fff; color:#64748b; border:1px solid #e2e8f0; border-radius:8px;
    padding:.48rem 1rem; font-size:.82rem; font-weight:500; font-family:inherit;
    text-decoration:none; cursor:pointer; white-space:nowrap;
    transition:background .13s, border-color .13s, color .13s;
}
.ac-btn-outline:hover, .ac-btn-outline:focus { border-color:var(--brand-700); color:var(--brand-700); background:var(--brand-100); outline:none; }
.ac-btn-outline:disabled { opacity:.55; pointer-events:none; }
/* full-width only inside modals */
.modal .ac-btn-primary, .modal .ac-btn-outline { width:100%; }

/* ---------------------------------------------------------------- Faculty tables — student names uppercase */
td.ac-name, td.cr-name, td.rs-name, td.l-name { text-transform:uppercase !important; }

/* ---------------------------------------------------------------- Parsley validation — red border only, no text/bg */
input.parsley-error, select.parsley-error, textarea.parsley-error,
input.parsley-error:focus, select.parsley-error:focus, textarea.parsley-error:focus {
    color:inherit !important; background-color:inherit !important;
    border-color:#ef4444 !important; box-shadow:0 0 0 2px rgba(239,68,68,.2) !important;
}
input.parsley-success, select.parsley-success, textarea.parsley-success {
    color:inherit !important; background-color:inherit !important;
    border-color:#e2e8f0 !important; box-shadow:none !important;
}
.parsley-errors-list { display:none !important; }

/* Bootstrap invalid feedback — same treatment */
.form-control.is-invalid, .form-select.is-invalid {
    border-color:#ef4444 !important; background-image:none !important;
    box-shadow:0 0 0 2px rgba(239,68,68,.15) !important;
}
.invalid-feedback { display:none !important; }
/* Select2 — error/valid state via class on container (beats theme !important) */
.select2-container.s2-error .select2-selection { border-color:#ef4444 !important; box-shadow:0 0 0 2px rgba(239,68,68,.15) !important; }
.select2-container.s2-valid .select2-selection { border-color:#e2e8f0 !important; box-shadow:none !important; }
/* Parsley error text in #err_type (radio group) */
#err_type .parsley-errors-list { display:block !important; list-style:none; padding:0; margin:0; }
#err_type .parsley-errors-list li { font-size:.73rem; color:#ef4444; }

/* ---------------------------------------------------------------- Mobile */
@media (max-width:991px){
  .app-sidebar { transform:translateX(-100%); width:var(--sidebar-w); box-shadow:var(--sh-2); }
  .app-topbar { left:0; }
  #main-wrapper .page-wrapper { margin-left:0; }
  .footer { left:0 !important; }
  #main-wrapper.sidebar-open .app-sidebar { transform:translateX(0); }
  #main-wrapper.sidebar-open .app-sidebar-backdrop { display:block; }
  /* collapse class is a no-op on mobile */
  #main-wrapper.sidebar-collapsed .app-sidebar { width:var(--sidebar-w); }
  #main-wrapper.sidebar-collapsed .side-link span,
  #main-wrapper.sidebar-collapsed .app-sidebar-brand .brand-text { display:inline; }
}

/* ================================================================ Auth pages */
body.portal #wrapper.login-wrapper { background:#fff; }
body.portal .login-register { padding:0 !important; align-items:stretch !important; min-height:100vh; }
.rg-wrap { display:flex; min-height:100vh; width:100%; }
.rg-brand {
  width:42%; flex-shrink:0;
  background:linear-gradient(160deg,#0b4fa0 0%,#0964bd 55%,#1a7fd4 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:3rem 2.5rem; position:relative; overflow:hidden;
}
.rg-brand::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 80%,rgba(255,255,255,.08) 0%,transparent 60%),
             radial-gradient(ellipse at 80% 10%,rgba(255,255,255,.06) 0%,transparent 50%);
  pointer-events:none;
}
.rg-brand-logo  { height:72px; margin-bottom:2rem; filter:brightness(0) invert(1); opacity:.95; }
.rg-brand-title { font-size:1.5rem; font-weight:800; color:#fff; text-align:center; line-height:1.25; margin-bottom:.5rem; }
.rg-brand-sub   { font-size:.85rem; color:rgba(255,255,255,.75); text-align:center; margin-bottom:2.5rem; line-height:1.55; }
.rg-features    { list-style:none; padding:0; margin:0; width:100%; max-width:280px; }
.rg-features li { display:flex; align-items:center; gap:.75rem; color:rgba(255,255,255,.9); font-size:.83rem; font-weight:500; padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.1); }
.rg-features li:last-child { border-bottom:none; }
.rg-features li i { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:.75rem; flex-shrink:0; }
.rg-brand-footer { position:absolute; bottom:1.25rem; font-size:.7rem; color:rgba(255,255,255,.45); }
.rg-form-panel  { flex:1; display:flex; align-items:center; justify-content:center; padding:3rem 2rem; background:#fff; }
.rg-form-inner  { width:100%; max-width:400px; }
.rg-form-heading { font-size:1.5rem; font-weight:800; color:#3f4e5e; margin-bottom:.3rem; }
.rg-form-sub    { font-size:.82rem; color:#64748b; margin-bottom:2rem; }
.rg-field       { margin-bottom:1.1rem; }
.rg-label       { display:block; font-size:.75rem; font-weight:700; color:#3f4e5e; margin-bottom:.3rem; letter-spacing:.01em; }
.rg-input       { width:100%; border:1.5px solid #e5eaf1; border-radius:9px; padding:.6rem .85rem; font-size:.875rem; color:#3f4e5e; background:#f7f9fc; outline:none; transition:border-color .15s,background .15s; }
.rg-input:focus { border-color:#0964bd; background:#fff; }
.rg-input::placeholder { color:#9aa7b6; }
.rg-input-wrap  { position:relative; }
.rg-input-wrap .rg-input { padding-right:2.5rem; }
.rg-eye         { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); cursor:pointer; color:#94a3b8; font-size:.85rem; }
.rg-eye:hover   { color:#3f4e5e; }
.rg-err         { font-size:.72rem; color:#dc2626; margin-top:.2rem; display:block; }
.rg-btn         { display:block; width:100%; background:#0964bd; border:none; border-radius:9px; color:#fff; padding:.7rem; font-size:.875rem; font-weight:700; letter-spacing:.01em; cursor:pointer; transition:background .15s; margin-top:1.5rem; }
.rg-btn:hover   { background:#074f96; }
.rg-btn:disabled { opacity:.6; cursor:default; }
.rg-links       { display:flex; justify-content:space-between; align-items:center; margin-top:1.25rem; flex-wrap:wrap; gap:.5rem; }
.rg-links a     { font-size:.8rem; color:#64748b; text-decoration:none; }
.rg-links a:hover { color:#0964bd; }
.rg-links a.primary { color:#0964bd; font-weight:600; }
.rg-signin      { text-align:center; margin-top:1.25rem; font-size:.8rem; color:#64748b; }
.rg-signin a    { color:#0964bd; font-weight:600; text-decoration:none; }
@media(max-width:768px){
  .rg-wrap { flex-direction:column; }
  .rg-brand { width:100%; padding:2rem 1.5rem; min-height:auto; }
  .rg-features, .rg-brand-footer { display:none; }
  .rg-brand-sub { margin-bottom:0; }
  .rg-brand-logo { height:52px; margin-bottom:1rem; }
  .rg-brand-title { font-size:1.15rem; }
  .rg-form-panel { padding:2rem 1.5rem; }
}

/* ── a-card design system ─────────────────────────────────── */
.a-card  { border:1px solid #e2e8f0; border-radius:8px; background:#fff; overflow:hidden; margin-bottom:.75rem; }
.a-head  { padding:.5rem .9rem; border-bottom:1px solid #e2e8f0; background:#f8fafc; display:flex; align-items:center; justify-content:space-between; min-height:38px; }
.a-title { font-size:.78rem; font-weight:700; color:#3f4e5e; }
.a-body  { padding:.75rem .9rem; }
.a-lbl   { font-size:.72rem; font-weight:600; color:#64748b; }