/* ==========================================================================
   ERP DESIGN SYSTEM: GLOBAL TYPOGRAPHY (POPPINS & ROBOTO) & BACKGROUND SETTINGS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,600&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500&display=swap');

:root {
  --font-roboto: 'Roboto', Verdana, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-poppins: 'Poppins', 'Roboto', Verdana, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-verdana: Verdana, 'Roboto', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --erp-font-heading: 'Poppins', 'Roboto', Verdana, sans-serif;
  --erp-font-body: 'Roboto', Verdana, 'Poppins', sans-serif;
  --bs-font-sans-serif: 'Roboto', Verdana, 'Poppins', sans-serif;
  --bs-body-font-family: 'Roboto', Verdana, 'Poppins', sans-serif;
  --erp-bg-body: #f8fafc;
  --erp-bg-page: #f8fafc;
  --erp-card-bg: #ffffff;
  --erp-border-subtle: #e2e8f0;
  --bs-border-radius: 4px !important;
  --bs-border-radius-sm: 4px !important;
  --bs-border-radius-lg: 4px !important;
  --bs-border-radius-xl: 4px !important;
  --bs-border-radius-2xl: 4px !important;
  --bs-border-radius-pill: 4px !important;
  --erp-radius: 4px !important;
}

/* ==========================================================================
   UNIVERSAL ERP DESIGN SYSTEM: 4PX BORDER RADIUS SETUP
   ========================================================================== */
.card,
.card-header,
.card-footer,
.erp-section-card,
.erp-card,
.erp-icon-box,
.btn,
.btn-sm,
.btn-lg,
.btn-group,
.btn-group > .btn,
.form-control,
.form-select,
.erp-form-control,
.input-group,
.input-group-text,
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text,
.badge,
.dropdown-menu,
.dropdown-item,
.modal-content,
.modal-header,
.modal-footer,
.table-responsive,
.table-bordered,
.table-bordered > :not(caption) > * > *,
.select2-container--bootstrap4 .select2-selection,
.select2-dropdown,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.flatpickr-calendar,
.alert,
.pagination .page-link,
.page-item:first-child .page-link,
.page-item:last-child .page-link,
.accordion-item,
.accordion-button,
.nav-pills .nav-link,
.nav-tabs .nav-link,
.nav-tabs,
.swal2-popup,
.swal2-confirm,
.swal2-cancel,
.class-icon-box {
  border-radius: 4px !important;
}

/* Utility classes normalized to enterprise 4px */
.rounded,
.rounded-1,
.rounded-2,
.rounded-3,
.rounded-4,
.rounded-top,
.rounded-bottom,
.rounded-start,
.rounded-end,
.rounded-pill {
  border-radius: 4px !important;
}

/* Preserve 50% circle for avatars and user icons */
.rounded-circle,
.user-img,
.user-avatar,
.avatar-circle,
.img-circle {
  border-radius: 50% !important;
}

/* Global HTML, Body & ERP Foundation */
html,
body {
  font-family: var(--font-roboto) !important;
  background-color: var(--erp-bg-body) !important;
  color: #334155;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-wrapper {
  background-color: var(--erp-bg-page) !important;
}

/* Typography Utility Classes */
.font-roboto {
  font-family: var(--font-roboto) !important;
}

.font-poppins {
  font-family: var(--font-poppins) !important;
}

.font-heading {
  font-family: var(--font-poppins) !important;
}

.font-body {
  font-family: var(--font-roboto) !important;
}

/* Headings & Prominent Titles (Poppins, Roboto, Verdana) */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.card-title,
.card-header h5,
.card-header h6,
.modal-title,
.page-title,
.logo-text,
.breadcrumb-title,
.brand-title {
  font-family: 'Poppins', 'Roboto', Verdana, sans-serif !important;
  letter-spacing: -0.015em;
}

/* Navigation, Buttons, Badges, Tabs & Action Controls (Poppins, Roboto, Verdana) */
.metismenu a,
.sidebar-header,
.topbar,
.navbar,
.btn,
.badge,
.nav-pills,
.nav-tabs,
.nav-pill-link,
.status-pill-selector,
.bulk-pill-btn,
.dropdown-item,
.dropdown-menu,
.pagination,
.sidebar-session-strip,
.swal2-title,
.swal2-confirm,
.swal2-cancel {
  font-family: 'Poppins', 'Roboto', Verdana, sans-serif !important;
}

/* Data, Forms, Tables, Labels, and Reading Content (Roboto, Verdana, Poppins) */
table,
.table,
.table th,
.table td,
.form-control,
.form-select,
.erp-form-control,
.form-check-label,
.input-group,
.input-group-text,
.select2-container,
.flatpickr-calendar,
.swal2-popup,
.swal2-html-container,
p,
small,
label,
.form-label,
.erp-form-label,
input,
textarea,
select,
.card-body,
.page-footer {
  font-family: 'Roboto', Verdana, 'Poppins', sans-serif !important;
}

/* =======================================================
   UNIVERSAL 5PX GAP & SPACING SYSTEM FOR ERP CARDS/BLOCKS
   ======================================================= */
.block-gap-5px {
  margin-bottom: 5px !important;
}

.cards-gap-5px {
  gap: 5px !important;
}

.row-gap-5px {
  --bs-gutter-x: 5px !important;
  --bs-gutter-y: 5px !important;
}

.gap-5px {
  gap: 5px !important;
}

.pl175rem {
  padding-left: 1.75rem !important;
}

.pl2rem {
  padding-left: 2rem !important;
}

.pl225rem {
  padding-left: 2.25rem !important;
}

.w50 {
  width: 50px !important;
}

.w75 {
  width: 75px !important;
}

.w100 {
  width: 100px !important;
}

.w125 {
  width: 125px !important;
}

.w150 {
  width: 150px !important;
}

.w175 {
  width: 175px !important;
}

.w200 {
  width: 200px !important;
}

.border1-gray {
  border: 1px solid #e2e2e2 !important;
}

.select2-selection__choice {
  padding: 0.25em !important;
}

.form-select:focus,
.form-control:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 0.1rem rgba(220, 38, 38, 0.18) !important;
}

/* For WebKit browsers (Chrome, Safari, Edge, Opera) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

p.error {
  line-height: 12px !important;
}

.page-footer {
  position: fixed !important;
  left: 255px !important;
  right: 0 !important;
  bottom: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  height: 34px !important;
  padding: 0 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.74rem !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04) !important;
  z-index: 1020 !important;
}

.wrapper.toggled .page-footer {
  left: 75px !important;
  margin-left: 0 !important;
}

@media (max-width: 991px) {
  .page-footer {
    left: 0 !important;
    margin-left: 0 !important;
  }
}

.btn i {
  margin-right: 0px !important;
}

/* =======================================================
   ADVANCED SPACE-SAVING & INSTANT ERP PORTAL STYLES
   ======================================================= */

/* Space-saving Page & Content Padding with 5px Sidebar Separation Gap */
.page-wrapper {
  margin-top: 60px !important;
  margin-bottom: 0 !important;
  margin-left: 255px !important; /* 5px extra separation gap from 250px sidebar */
  transition: margin-left 0.2s ease;
  min-height: calc(100vh - 60px) !important;
}

.page-content {
  padding: 5px 8px 44px 8px !important; /* 5px uniform padding around content with 44px bottom clearance for fixed footer */
}

/* =======================================================
   GLOBAL SEARCH INPUT WITH ICON FIX
   ======================================================= */
.search-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.search-input-wrap .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: #94a3b8;
  pointer-events: none;
  z-index: 5;
  line-height: 1;
}

.search-input-wrap input.form-control {
  padding-left: 30px !important;
}

/* Fix for position-relative wrappers used with bx-search icon */
.position-relative .bx-search,
.position-relative .bx-search-alt {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: #94a3b8;
  pointer-events: none;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


/* Advanced Space-Saving Sidebar */
.sidebar-wrapper {
  width: 250px;
  background: #ffffff !important;
  box-shadow: 2px 0 12px rgba(15, 23, 42, 0.04) !important;
  border-right: 1px solid #e2e8f0 !important;
  will-change: transform;
}

.sidebar-wrapper .sidebar-header {
  height: 60px !important;
  padding: 0 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
}

.sidebar-wrapper .sidebar-header .logo-text {
  font-family: var(--font-poppins) !important;
  font-size: 11.8px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: 0.4px !important;
  margin-left: 6px !important;
}

.sidebar-wrapper .sidebar-header .logo-badge img {
  width: 28px !important;
  height: 28px !important;
}

.sidebar-wrapper .sidebar-header .toggle-icon {
  font-size: 18px !important;
}

.sidebar-wrapper .metismenu {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 4px 0 20px 0 !important;
  font-family: var(--font-poppins) !important;
}

/* Compact Menu Items - 20% Smaller Font & Icons */
.sidebar-wrapper .metismenu a {
  padding: 4px 8px !important;
  font-size: 11.2px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  margin: 1px 6px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  font-family: var(--font-poppins) !important;
  transition: background-color 0.12s ease, color 0.12s ease !important;
}

.sidebar-wrapper .metismenu a .parent-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 5px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  margin-right: 8px !important;
  transition: all 0.15s ease !important;
}

.sidebar-wrapper .metismenu a .menu-title {
  font-size: 11.2px !important;
  margin-left: 0 !important;
  font-family: var(--font-poppins) !important;
  letter-spacing: -0.01em !important;
}

/* Hover & Active Highlight */
.sidebar-wrapper .metismenu a:hover {
  background-color: #f8fafc !important;
  color: #1e40af !important;
}

.sidebar-wrapper .metismenu a:hover .parent-icon {
  background-color: #e0e7ff !important;
  color: #1e40af !important;
}

.sidebar-wrapper .metismenu li.mm-active>a,
.sidebar-wrapper .metismenu .mm-active>a {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  font-weight: 600 !important;
  border-color: #dbeafe !important;
}

.sidebar-wrapper .metismenu li.mm-active>a .parent-icon,
.sidebar-wrapper .metismenu .mm-active>a .parent-icon {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3) !important;
}

/* Compact Section Dividers - 20% Smaller */
.sidebar-wrapper .metismenu li.menu-label,
.menu-label {
  padding: 8px 12px 2px 10px !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  font-family: var(--font-poppins) !important;
}

/* Modern, Compact Submenu - Reduced Left Padding & Professional Visibility */
.sidebar-wrapper .metismenu ul {
  padding: 3px 0 !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border-radius: 6px !important;
  margin: 3px 8px 5px 12px !important;
  border-left: 2px solid rgba(255, 255, 255, 0.12) !important;
  list-style: none !important;
}

.sidebar-wrapper .metismenu ul a {
  display: flex !important;
  align-items: center !important;
  padding: 6px 10px 6px 11px !important; /* Reduced left padding from 26px to 11px for better text visibility */
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  margin: 1px 4px !important;
  border-radius: 5px !important;
  color: #cbd5e1 !important;
  font-family: inherit !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
  transition: all 0.16s ease-in-out !important;
}

.sidebar-wrapper .metismenu ul a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  padding-left: 14px !important;
}

.sidebar-wrapper .metismenu ul li.mm-active > a {
  background-color: rgba(220, 38, 38, 0.22) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--erp-red, #dc2626) !important;
  border-radius: 0 5px 5px 0 !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2) !important;
}

.sidebar-wrapper .metismenu ul a i {
  font-size: 14px !important;
  min-width: 18px !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 8px !important;
  color: #94a3b8 !important;
  transition: color 0.16s ease, transform 0.16s ease !important;
  flex-shrink: 0 !important;
}

.sidebar-wrapper .metismenu ul a:hover i {
  color: #ffffff !important;
  transform: translateX(1px);
}

.sidebar-wrapper .metismenu ul li.mm-active > a i {
  color: #fca5a5 !important;
}

.sidebar-wrapper .metismenu .has-arrow:after {
  width: 5px !important;
  height: 5px !important;
  right: 10px !important;
}

/* Compact, Clean Card & Table Design */
.card {
  border-radius: 4px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* GLOBAL 4PX BORDER RADIUS ENFORCEMENT */
.card,
.card-header,
.card-footer,
.table-responsive,
.table-bordered,
.modal-content,
.dashboard-action-toolbar,
.kpi-metric-card,
.stat-icon-box,
.alert,
.flatpickr-calendar,
.btn:not(.rounded-circle):not(.rounded-pill),
.form-control:not(.rounded-pill),
.form-select:not(.rounded-pill),
.input-group-text:not(.rounded-pill),
.dropdown-menu,
.badge:not(.rounded-pill) {
  border-radius: 4px !important;
}

.table {
  border-radius: 4px !important;
  overflow: hidden;
}

/* SUBTLE 2PX MAX BOX SHADOW FOR HOVER & ACTIVE STATES */
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.card:hover,
.kpi-metric-card:hover,
.status-pill-btn:hover,
.status-pill-btn.active,
.console-tab-btn.active,
.console-tab-btn:hover,
.wing-filter-btn:hover,
.wing-filter-btn.active,
.form-control:focus,
.form-select:focus,
.dropdown-menu,
.shadow-sm,
.shadow,
.shadow-lg,
.shadow-xs {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.btn.active,
.btn:active {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08) !important;
}

/* COMPACT SMALL INPUTS AND BUTTONS VARIANTS */
.form-control,
.form-select,
.input-group-text {
  padding: 0.28rem 0.65rem !important;
  font-size: 0.82rem !important;
  min-height: 32px !important;
  border-radius: 4px !important;
}

.form-control-sm,
.form-select-sm {
  padding: 0.22rem 0.55rem !important;
  font-size: 0.78rem !important;
  min-height: 28px !important;
  border-radius: 4px !important;
}

.btn {
  padding: 0.32rem 0.75rem !important;
  font-size: 0.82rem !important;
  border-radius: 4px !important;
}

.btn-sm {
  padding: 0.25rem 0.6rem !important;
  font-size: 0.78rem !important;
  border-radius: 4px !important;
}

/* =======================================================
   CUSTOM DUAL-PANE DATE & DATE-RANGE PICKER (IMAGE MATCH)
   ======================================================= */
.flatpickr-calendar {
  font-family: inherit !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.flatpickr-calendar.hasPresets {
  display: grid !important;
  grid-template-columns: 135px 310px !important;
  grid-template-rows: auto 1fr auto !important;
  grid-template-areas:
    "sidebar months"
    "sidebar body"
    "footer  footer" !important;
  width: 445px !important;
  min-width: 445px !important;
  max-width: 445px !important;
  box-sizing: content-box !important;
  overflow: hidden !important;
}

/* LEFT SIDEBAR PRESETS LIST */
.flatpickr-calendar.hasPresets .flatpickr-presets-sidebar,
.flatpickr-presets-sidebar {
  grid-area: sidebar !important;
  width: 135px !important;
  min-width: 135px !important;
  max-width: 135px !important;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  padding: 10px 6px;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
}

.flatpickr-presets-sidebar button {
  background: transparent;
  border: none;
  text-align: left;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #525252;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}

.flatpickr-presets-sidebar button:hover,
.flatpickr-presets-sidebar button.active {
  background: #f1f5f9;
  color: #0284c7;
  font-weight: 700;
}

.flatpickr-calendar.hasPresets .flatpickr-months {
  grid-area: months !important;
  width: 310px !important;
  min-width: 310px !important;
  max-width: 310px !important;
  box-sizing: border-box !important;
}

.flatpickr-calendar.hasPresets .flatpickr-innerContainer {
  grid-area: body !important;
  width: 310px !important;
  min-width: 310px !important;
  max-width: 310px !important;
  box-sizing: border-box !important;
  display: block !important;
}

.flatpickr-calendar.hasPresets .flatpickr-rContainer {
  width: 310px !important;
  min-width: 310px !important;
  max-width: 310px !important;
  box-sizing: border-box !important;
}

.flatpickr-calendar.hasPresets .flatpickr-weekdays {
  width: 310px !important;
  box-sizing: border-box !important;
}

.flatpickr-calendar.hasPresets .flatpickr-days {
  width: 310px !important;
  box-sizing: border-box !important;
}

.flatpickr-calendar.hasPresets .dayContainer {
  width: 308px !important;
  min-width: 308px !important;
  max-width: 308px !important;
  box-sizing: border-box !important;
}

.flatpickr-calendar.hasPresets .flatpickr-action-footer {
  grid-area: footer !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* CALENDAR MONTH & NAVIGATION */
.flatpickr-months {
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 6px 4px !important;
  border-bottom: 1px solid #f8fafc;
}

.flatpickr-months .flatpickr-month {
  color: #0f172a !important;
  fill: #0f172a !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #64748b !important;
  fill: #64748b !important;
  padding: 6px 10px !important;
}

.flatpickr-current-month {
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  color: #0f172a !important;
}

.flatpickr-weekday {
  background: #ffffff !important;
  color: #737373 !important;
  font-weight: 600 !important;
  font-size: 0.74rem !important;
}

.flatpickr-day {
  border-radius: 6px !important;
  color: #262626 !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  margin: 1px !important;
}

.flatpickr-day.today {
  border: 2px solid #10b981 !important;
  color: #047857 !important;
  background: #ecfdf5 !important;
  font-weight: 700 !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.3) !important;
  font-weight: 700 !important;
}

.flatpickr-day.inRange {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}

.flatpickr-day:hover {
  background: #f5f5f5 !important;
  color: #0f172a !important;
}

/* FOOTER ACTIONS BAR */
.flatpickr-action-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid #f1f5f9;
  background: #ffffff;
}

.flatpickr-action-footer .date-readout {
  font-size: 0.78rem;
  font-weight: 600;
  color: #525252;
  font-family: monospace;
}

.flatpickr-action-footer .footer-btns {
  display: flex;
  gap: 6px;
}

.flatpickr-action-footer .btn-cancel {
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #525252;
  background: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  cursor: pointer;
}

.flatpickr-action-footer .btn-apply {
  padding: 4px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffffff;
  background: #10b981;
  border: 1px solid #10b981;
  border-radius: 6px;
  cursor: pointer;
}

.card .card-header {
  padding: 0.75rem 1rem !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.card .card-body {
  padding: 1rem !important;
}

.table> :not(caption)>*>* {
  padding: 0.6rem 0.75rem !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
}

.table th {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: #64748b !important;
  background-color: #f8fafc !important;
}

/* Instant-feel micro animations */
* {
  -webkit-font-smoothing: antialiased;
}

/* =======================================================
   10x ADVANCED MODERN ERP SYSTEM STYLES
   ======================================================= */

/* Topbar Refinements */
.topbar {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

/* Custom Pills to prevent Bootstrap !important background clashes */
.erp-session-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  letter-spacing: 0.01em;
}

.erp-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
}

.live-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 6px #10b981;
}

/* Modern Sidebar Toggle Button */
.sidebar-toggle-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.15rem;
  transition: all 0.2s ease !important;
}

.sidebar-toggle-btn:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.35) !important;
  transform: scale(1.05);
}

/* Modern Mobile Sidebar Close Button */
.mobile-sidebar-close-btn {
  display: none !important;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.35rem;
  padding: 0;
  line-height: 1;
  transition: all 0.2s ease !important;
}

.mobile-sidebar-close-btn:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.25) !important;
  transform: scale(1.05);
}

.mobile-sidebar-close-btn:active {
  transform: scale(0.95);
}

/* Base overlay styling with frosted glass blur */
.wrapper .overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(8px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(125%) !important;
  z-index: 1060 !important;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s ease;
}

/* =======================================================
   DESKTOP COLLAPSED SIDEBAR (>= 1025px)
   ======================================================= */
@media screen and (min-width: 1025px) {
  .mobile-sidebar-close-btn {
    display: none !important;
  }

  .sidebar-header .sidebar-toggle-btn {
    display: flex !important;
  }

  .wrapper .overlay,
  .wrapper.toggled .overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .wrapper.toggled .sidebar-wrapper {
    width: 70px !important;
  }

  .wrapper.toggled .sidebar-wrapper:hover {
    width: 70px !important;
  }

  .wrapper.toggled .sidebar-wrapper .sidebar-header {
    padding: 0 10px !important;
    justify-content: center !important;
  }

  .wrapper.toggled .sidebar-wrapper .sidebar-header .logo-badge,
  .wrapper.toggled .sidebar-wrapper .sidebar-header .logo-text,
  .wrapper.toggled .sidebar-wrapper .sidebar-header span {
    display: none !important;
  }

  .wrapper.toggled .sidebar-wrapper .sidebar-header .toggle-icon {
    display: flex !important;
    margin: 0 auto !important;
  }

  .wrapper.toggled .sidebar-wrapper .sidebar-toggle-btn i {
    transform: rotate(180deg);
  }

  .wrapper.toggled .sidebar-wrapper .metismenu a .menu-title,
  .wrapper.toggled .sidebar-wrapper .metismenu li.menu-label,
  .wrapper.toggled .sidebar-wrapper .metismenu .has-arrow:after {
    display: none !important;
  }

  .wrapper.toggled .sidebar-wrapper .metismenu a {
    justify-content: center !important;
    padding: 8px 0 !important;
    margin: 2px 8px !important;
  }

  .wrapper.toggled .sidebar-wrapper .metismenu a .parent-icon {
    margin-right: 0 !important;
  }

  .wrapper.toggled .page-wrapper {
    margin-left: 75px !important;
  }

  .wrapper.toggled .topbar {
    left: 70px !important;
  }

  .wrapper.toggled .page-footer {
    left: 70px !important;
  }
}

/* =======================================================
   MOBILE & TABLET SLIDE-OUT DRAWER SIDEBAR (<= 1024px)
   ======================================================= */
@media screen and (max-width: 1024px) {

  /* HIDE hamburger / toggle icon completely on mobile inside sidebar header */
  .sidebar-header .sidebar-toggle-btn,
  .sidebar-header .toggle-icon,
  .toggle-icon.sidebar-toggle-btn,
  .wrapper.toggled .sidebar-wrapper .sidebar-header .toggle-icon,
  .wrapper.toggled .sidebar-wrapper .sidebar-header .sidebar-toggle-btn {
    display: none !important;
  }

  /* Hide close btn by default; show ONLY when drawer is open */
  .sidebar-wrapper .sidebar-header .mobile-sidebar-close-btn {
    display: none !important;
  }

  /* SHOW close icon ONLY when sidebar drawer is open on mobile */
  .wrapper.toggled .sidebar-wrapper .sidebar-header .mobile-sidebar-close-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #dc2626 !important;
    cursor: pointer !important;
    font-size: 1.3rem !important;
    padding: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    transition: all 0.18s ease !important;
  }

  .wrapper.toggled .sidebar-wrapper .sidebar-header .mobile-sidebar-close-btn:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
  }

  /* ── Sidebar Wrapper: Full-height drawer ── */
  .sidebar-wrapper,
  #appSidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -300px !important;
    width: 280px !important;
    max-width: 88vw !important;
    height: 100vh !important;
    z-index: 1075 !important;
    box-shadow: none !important;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Sidebar Header: fixed height, border bottom */
  .sidebar-wrapper .sidebar-header,
  #appSidebar .sidebar-header {
    display: flex !important;
    padding: 0 14px !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 60px !important;
    min-height: 60px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
  }

  /* ── Open state ── */
  .wrapper.toggled .sidebar-wrapper,
  .wrapper.toggled #appSidebar {
    left: 0 !important;
    width: 280px !important;
    max-width: 88vw !important;
    box-shadow: 6px 0 30px rgba(15, 23, 42, 0.35) !important;
    z-index: 1075 !important;
  }

  .wrapper.toggled .sidebar-wrapper .sidebar-header {
    display: flex !important;
    padding: 0 14px !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 60px !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .wrapper.toggled .sidebar-wrapper .sidebar-header .logo-badge {
    display: flex !important;
  }

  .wrapper.toggled .sidebar-wrapper .sidebar-header .logo-text,
  .wrapper.toggled .sidebar-wrapper .sidebar-header span {
    display: block !important;
  }

  /* ── Metismenu Mobile Styles ── */
  .wrapper.toggled .sidebar-wrapper .metismenu a .menu-title {
    display: inline-block !important;
  }

  .wrapper.toggled .sidebar-wrapper .metismenu li.menu-label {
    display: block !important;
  }

  .wrapper.toggled .sidebar-wrapper .metismenu .has-arrow:after {
    display: block !important;
  }

  /* Touch-friendly menu items: taller, well-padded */
  .wrapper.toggled .sidebar-wrapper .metismenu a {
    justify-content: flex-start !important;
    padding: 11px 16px !important;
    min-height: 46px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    margin: 1px 8px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }

  /* Icon spacing */
  .wrapper.toggled .sidebar-wrapper .metismenu a .parent-icon {
    margin-right: 10px !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
  }

  /* Hover state */
  .wrapper.toggled .sidebar-wrapper .metismenu a:hover {
    background: #f8fafc !important;
    color: #dc2626 !important;
  }

  /* Active item highlight */
  .wrapper.toggled .sidebar-wrapper .metismenu li.mm-active > a {
    background: #fff1f2 !important;
    color: #dc2626 !important;
    font-weight: 600 !important;
  }

  /* Sub-menu items */
  .wrapper.toggled .sidebar-wrapper .metismenu ul a {
    padding: 8px 14px 8px 18px !important;
    min-height: 38px !important;
    font-size: 0.83rem !important;
    border-radius: 6px !important;
    margin: 1px 6px !important;
  }

  /* Menu section labels */
  .wrapper.toggled .sidebar-wrapper .metismenu li.menu-label {
    padding: 10px 18px 4px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
  }

  .wrapper.toggled .page-wrapper {
    margin-left: 0 !important;
  }

  .wrapper.toggled .topbar {
    left: 0 !important;
  }

  .wrapper.toggled .page-footer {
    left: 0 !important;
  }

  /* Frosted Glass Blurred Backdrop on mobile when toggled */
  .wrapper.toggled .overlay {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(6px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
    z-index: 1060 !important;
  }

  /* Mobile hamburger toggle button in navbar */
  .mobile-toggle-menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #f1f5f9;
    color: #1e293b;
    cursor: pointer;
    font-size: 22px;
    transition: background 0.18s ease, color 0.18s ease;
  }

  .mobile-toggle-menu:hover {
    background: #e2e8f0;
    color: #dc2626;
  }

  /* Session strip — keep it at the bottom */
  .sidebar-session-strip {
    flex-shrink: 0 !important;
    padding: 10px 16px !important;
    font-size: 0.75rem !important;
    border-top: 1px solid #f1f5f9 !important;
    background: #fafbfc !important;
    color: #64748b !important;
  }

  /* ── Base content layout: sidebar is an off-canvas drawer, so content is full width ── */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  .wrapper .page-wrapper,
  .page-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .wrapper .topbar,
  .topbar,
  .wrapper .page-footer,
  .page-footer {
    left: 0 !important;
  }

  .page-content {
    padding: 6px 8px !important;
    max-width: 100%;
  }
}

/* =======================================================
   RESPONSIVE KPI GRID CARDS (MOBILE TO DESKTOP)
   ======================================================= */
.pic2-kpi-col {
  flex: 0 0 50%;
  max-width: 50%;
}

@media screen and (min-width: 576px) {
  .pic2-kpi-col {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

@media screen and (min-width: 768px) {
  .pic2-kpi-col {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media screen and (min-width: 1260px) {
  .pic2-kpi-col {
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }
}

/* Mobile responsive adjustments for toolbar */
@media screen and (max-width: 767px) {
  .pic2-pill-btn {
    min-width: auto;
    min-height: 28px;
    padding: 3px 8px;
    font-size: 0.68rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .pic2-nav-tabs {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .pic2-card-val {
    font-size: 1.15rem !important;
  }

  .pic2-stat-card {
    padding: 8px 10px 6px !important;
  }
}

.sidebar-header .logo-badge {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.sidebar-header .logo-badge img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Scrollable nav area (between header and session strip) */
.sidebar-nav-scroll {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.sidebar-wrapper {
  display: flex;
  flex-direction: column;
}


/* Modern Dashboard Hero Banner */
.dashboard-hero-banner {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 45%, #2563eb 100%) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 25px -5px rgba(30, 58, 138, 0.35) !important;
  position: relative;
  overflow: hidden;
}

.dashboard-hero-banner::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero-motto-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  margin-bottom: 0.6rem;
}

/* Modern KPI Metric Cards */
.kpi-metric-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.25s ease !important;
  overflow: hidden;
}

.kpi-metric-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.08) !important;
}

.kpi-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.kpi-metric-card:hover .kpi-icon-box {
  transform: scale(1.08);
}

.kpi-icon-blue {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #dbeafe !important;
}

.kpi-icon-green {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}

.kpi-icon-teal {
  background: #f0fdfa !important;
  color: #0d9488 !important;
  border: 1px solid #99f6e4 !important;
}

.kpi-icon-amber {
  background: #fffbeb !important;
  color: #d97706 !important;
  border: 1px solid #fde68a !important;
}

/* Quick Launch Interactive Cards */
.quick-action-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem 0.85rem;
  text-align: center;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  color: #1e293b;
}

.quick-action-card:hover {
  border-color: #2563eb;
  background: #f8fafc;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
}

.quick-action-card .icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
  transition: transform 0.2s ease;
}

.quick-action-card:hover .icon-wrap {
  transform: scale(1.12);
}

/* Clean Student Code Pill */
.student-code-tag {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}

/* =======================================================
   STANDALONE FAIL-SAFE STAT ICON BOXES (100% CLEAR VISIBILITY)
   ======================================================= */
.stat-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.stat-icon-box.sm {
  width: 38px;
  height: 38px;
  font-size: 1.2rem;
  border-radius: 10px;
}

.stat-icon-box.lg {
  width: 52px;
  height: 52px;
  font-size: 1.6rem;
  border-radius: 14px;
}

.stat-icon-blue {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
}

.stat-icon-green {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}

.stat-icon-teal {
  background: #f0fdfa !important;
  color: #0d9488 !important;
  border: 1px solid #99f6e4 !important;
}

.stat-icon-amber {
  background: #fffbeb !important;
  color: #d97706 !important;
  border: 1px solid #fde68a !important;
}

.stat-icon-purple {
  background: #f5f3ff !important;
  color: #7c3aed !important;
  border: 1px solid #ddd6fe !important;
}

.stat-icon-rose {
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1px solid #fecdd3 !important;
}

/* TOPBAR REFINEMENTS & NOTIFICATION BELL */
.navbar-page-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.nav-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  color: #475569;
}

.nav-notif-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none !important;
}

.nav-notif-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
  transform: translateY(-1px);
}

.nav-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
}

/* NOTIFICATION DROPDOWN MENU */
.notif-dropdown-menu {
  width: 320px;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12) !important;
  padding: 0;
  overflow: hidden;
}

.notif-dropdown-header {
  padding: 0.85rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.notif-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f8fafc;
  transition: background-color 0.15s ease;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-decoration: none !important;
}

.notif-item:hover {
  background-color: #f8fafc;
}

.notif-item:last-child {
  border-bottom: none;
}

/* EXECUTIVE ACTION TOOLBAR FOR DATA-FRIENDLY DASHBOARD */
.dashboard-action-toolbar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0.85rem 1.15rem;
  margin-bottom: 1.15rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* =======================================================
   FAIL-SAFE ERP BADGES & SUBTLE PILLS (100% CONTRAST IMMUNE)
   ======================================================= */
.erp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.28rem 0.65rem;
  border-radius: 9999px;
  line-height: 1.2;
}

.erp-badge-success {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

.erp-badge-danger {
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}

.erp-badge-primary {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}

.erp-badge-warning {
  background-color: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

.erp-badge-info {
  background-color: #f0fdfa !important;
  color: #0f766e !important;
  border: 1px solid #99f6e4 !important;
}

.erp-badge-purple {
  background-color: #f5f3ff !important;
  color: #6d28d9 !important;
  border: 1px solid #ddd6fe !important;
}

.erp-badge-secondary {
  background-color: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

/* Fail-safe bg-light-* backgrounds for light theme */
.bg-light-primary {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
}

.bg-light-success {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
}

.bg-light-danger {
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
}

.bg-light-warning {
  background-color: #fffbeb !important;
  color: #b45309 !important;
}

.bg-light-info {
  background-color: #f0fdfa !important;
  color: #0f766e !important;
}

.bg-light-purple {
  background-color: #f5f3ff !important;
  color: #6d28d9 !important;
}

/* Wing / Section Pills & Tabs */
.wing-filter-btn {
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.95rem;
  transition: all 0.2s ease;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
}

.wing-filter-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

.wing-filter-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

/* =============================================
   SIDEBAR SESSION STRIP (Fixed at sidebar bottom)
   ============================================= */
.sidebar-session-strip {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 250px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  background: linear-gradient(90deg, #eff6ff 0%, #f0f9ff 100%) !important;
  border-top: 1px solid #e2e8f0 !important;
  font-size: 0.74rem !important;
  color: #475569 !important;
  z-index: 1060 !important;
  box-shadow: 0 -2px 6px rgba(15, 23, 42, 0.04) !important;
  transition: width 0.2s ease-out, left 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
}

.sidebar-session-strip i {
  font-size: 1.05rem !important;
  color: #2563eb !important;
  flex-shrink: 0 !important;
}

.sidebar-session-strip strong {
  color: #1e3a8a !important;
  font-weight: 700 !important;
}

/* Ensure menu items never get covered by the bottom strip */
.sidebar-wrapper .metismenu {
  padding-bottom: 52px !important;
}

/* Collapsed sidebar (desktop toggled — 70px icon only) */
.wrapper.toggled .sidebar-wrapper .sidebar-session-strip,
.wrapper.toggled .sidebar-session-strip {
  width: 70px !important;
  justify-content: center !important;
  padding: 0 !important;
}

.wrapper.toggled .sidebar-wrapper .sidebar-session-strip span,
.wrapper.toggled .sidebar-session-strip span {
  display: none !important;
}

/* Collapsed sidebar hover expansion */
.wrapper.toggled.sidebar-hovered .sidebar-wrapper .sidebar-session-strip,
.wrapper.toggled.sidebar-hovered .sidebar-session-strip {
  width: 250px !important;
  justify-content: flex-start !important;
  padding: 0 16px !important;
}

.wrapper.toggled.sidebar-hovered .sidebar-wrapper .sidebar-session-strip span,
.wrapper.toggled.sidebar-hovered .sidebar-session-strip span {
  display: inline !important;
}

/* Dark & Semi-Dark Theme Support */
html.dark-theme .sidebar-session-strip {
  background: #1e293b !important;
  border-top-color: #334155 !important;
  color: #94a3b8 !important;
}
html.dark-theme .sidebar-session-strip strong {
  color: #f1f5f9 !important;
}
html.dark-theme .sidebar-session-strip i {
  color: #60a5fa !important;
}

html.semi-dark .sidebar-session-strip {
  background: #0f172a !important;
  border-top-color: #1e293b !important;
  color: #94a3b8 !important;
}
html.semi-dark .sidebar-session-strip strong {
  color: #ffffff !important;
}
html.semi-dark .sidebar-session-strip i {
  color: #38bdf8 !important;
}

/* Mobile responsive drawer (<= 1024px) */
@media (max-width: 1024px) {
  .sidebar-session-strip {
    left: -290px !important;
    width: 280px !important;
    max-width: 85vw !important;
    z-index: 1080 !important;
  }
  .wrapper.toggled .sidebar-session-strip {
    left: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
  }
  .wrapper.toggled .sidebar-session-strip span {
    display: inline !important;
  }
}

/* =============================================
   USER DROPDOWN — fixed right-side card
   ============================================= */
.user-box .dropdown-menu {
  min-width: 260px !important;
  width: 260px !important;
  right: 0 !important;
  left: auto !important;
}

@media screen and (max-width: 576px) {
  .user-box .dropdown-menu {
    position: fixed !important;
    right: 8px !important;
    left: auto !important;
    top: 58px !important;
    width: calc(100vw - 16px) !important;
    max-width: 320px !important;
    transform: none !important;
  }
}

/* ==========================================================================
   RNTD ACADEMY — RED & NAVY THEME SYSTEM (MATCHING OFFICIAL DESIGN SPEC)
   ========================================================================== */
:root {
  --erp-red: #dc2626;
  --erp-red-dark: #b91c1c;
  --erp-red-light: #fee2e2;
  --erp-red-subtle: #fff5f5;
  --erp-navy-sidebar: #0b1329;
  --erp-navy-sidebar-hover: #131f3d;
  --erp-accent-amber: #f59e0b;
  --erp-accent-emerald: #10b981;
  --erp-accent-navy: #0f172a;
  --erp-accent-coral: #f43f5e;
}

/* --- Global Theme Buttons --- */
.btn-primary,
.btn-rntd-red {
  background-color: var(--erp-red) !important;
  border-color: var(--erp-red) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-rntd-red:hover,
.btn-rntd-red:focus {
  background-color: var(--erp-red-dark) !important;
  border-color: var(--erp-red-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35) !important;
}

.btn-outline-primary {
  color: var(--erp-red) !important;
  border-color: var(--erp-red) !important;
  font-weight: 600 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--erp-red) !important;
  border-color: var(--erp-red) !important;
  color: #ffffff !important;
}

/* --- Theme Sidebar System --- */
.sidebar-wrapper {
  background-color: var(--erp-navy-sidebar) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.sidebar-header {
  background-color: var(--erp-navy-sidebar) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.sidebar-header .logo-text {
  color: #ffffff !important;
}

.metismenu li.menu-label {
  color: #94a3b8 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

.metismenu a {
  color: #cbd5e1 !important;
  border-radius: 10px !important;
  margin: 2px 10px !important;
  padding: 8px 12px !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  transition: all 0.18s ease !important;
}

.metismenu a:hover {
  background-color: var(--erp-navy-sidebar-hover) !important;
  color: #ffffff !important;
}

/* Active Menu Pill - Red highlight like media_1791832650142.png */
.metismenu li.mm-active > a {
  background-color: var(--erp-red) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4) !important;
}

.metismenu li.mm-active > a .parent-icon i,
.metismenu li.mm-active > a i,
.metismenu li.mm-active > a .menu-title {
  color: #ffffff !important;
}

/* Active Submenu Item */
.metismenu ul {
  background: rgba(0, 0, 0, 0.22) !important;
  border-radius: 6px !important;
  margin: 3px 8px 5px 12px !important;
  padding: 3px 0 !important;
  border-left: 2px solid rgba(255, 255, 255, 0.12) !important;
}

.metismenu ul li.mm-active > a {
  background-color: rgba(220, 38, 38, 0.22) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--erp-red, #dc2626) !important;
  border-radius: 0 5px 5px 0 !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2) !important;
}

/* Session bottom bar in Red */
.sidebar-session-strip {
  background: var(--erp-red) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  margin: 10px 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
  border: none !important;
  font-size: 0.82rem !important;
}

.sidebar-session-strip strong,
.sidebar-session-strip i,
.sidebar-session-strip span {
  color: #ffffff !important;
}

/* --- Theme Navbar Styling --- */
.navbar-page-title i.text-primary,
.topbar .text-primary {
  color: var(--erp-red) !important;
}

.nav-date-pill {
  background: var(--erp-red-subtle) !important;
  border: 1px solid var(--erp-red-light) !important;
  color: var(--erp-red) !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 0.78rem !important;
}

.nav-date-pill i {
  color: var(--erp-red) !important;
}

.nav-notif-badge {
  background-color: var(--erp-red) !important;
  color: #ffffff !important;
}

/* --- Theme KPI Metric Cards (Matching Screenshot) --- */
.theme-kpi-card {
  background: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  padding: 14px 16px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.theme-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

.theme-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #ffffff !important;
  flex-shrink: 0;
}

.theme-kpi-icon.bg-red { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; }
.theme-kpi-icon.bg-coral { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important; }
.theme-kpi-icon.bg-amber { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; }
.theme-kpi-icon.bg-navy { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; }
.theme-kpi-icon.bg-emerald { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; }
.theme-kpi-icon.bg-blue { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; }

.theme-kpi-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #64748b !important;
  margin-bottom: 2px !important;
}

.theme-kpi-value {
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.1 !important;
}

.theme-kpi-pill {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  padding: 2px 10px !important;
}

.theme-kpi-pill.pill-red { background: #fee2e2; color: #dc2626; border: 1px solid #fecdd3; }
.theme-kpi-pill.pill-amber { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.theme-kpi-pill.pill-emerald { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.theme-kpi-pill.pill-navy { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }

/* --- Mobile App Optimization (<= 768px) --- */
@media (max-width: 768px) {
  .page-content {
    padding: 10px 10px 80px 10px !important;
  }

  /* KPI Card Mobile: tighter padding, smaller icon, reduced value font */
  .theme-kpi-card {
    padding: 10px 12px !important;
  }

  .theme-kpi-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    font-size: 1.1rem !important;
  }

  .theme-kpi-value {
    font-size: 1.2rem !important;
  }

  .theme-kpi-label {
    font-size: 0.6rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
  }

  /* Mobile App Card Layout */
  .mobile-app-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    position: relative !important;
  }

  /* Mobile Floating Action Button (FAB) */
  .mobile-fab-btn {
    position: fixed !important;
    bottom: 24px !important;
    right: 20px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: var(--erp-red) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    z-index: 1040 !important;
    text-decoration: none !important;
    border: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .mobile-fab-btn:active {
    transform: scale(0.92) !important;
  }

  /* Horizontal swipeable chip bar on mobile */
  .mobile-chip-scroll {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .mobile-chip-scroll::-webkit-scrollbar {
    display: none !important;
  }

  /* Touch-friendly card buttons */
  .mobile-touch-btn {
    min-height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
  }
}

/* ==========================================================================
   RNTD GLOBAL BOOTSTRAP PRIMARY → RED OVERRIDES
   Cascades the red/navy theme to every page that uses Bootstrap primary
   utilities without needing to touch each individual blade file.
   ========================================================================== */

/* Bootstrap CSS custom properties override (NOTE: !important is invalid on CSS vars) */
:root,
body {
  --bs-primary: #dc2626;
  --bs-primary-rgb: 220, 38, 38;
  --bs-link-color: #dc2626;
  --bs-link-color-rgb: 220, 38, 38;
  --bs-link-hover-color: #b91c1c;
  --bs-btn-bg: #dc2626;
  --bs-btn-border-color: #dc2626;
}

/* text-primary → red */
.text-primary,
a.text-primary:hover,
a.text-primary:focus {
  color: var(--erp-red) !important;
}

/* bg-primary → red */
.bg-primary {
  background-color: var(--erp-red) !important;
}

/* border-primary → red */
.border-primary {
  border-color: var(--erp-red) !important;
}

/* bg-primary-subtle → light red tint */
.bg-primary-subtle {
  background-color: #fff1f2 !important;
}

/* text-primary inside .bg-primary-subtle badges */
.bg-primary-subtle.text-primary,
.badge.bg-primary-subtle {
  color: var(--erp-red) !important;
  background-color: #fff1f2 !important;
}

/* border-primary-subtle */
.border-primary-subtle {
  border-color: #fecdd3 !important;
}

/* Form focus rings → red */
.form-select:focus,
.form-control:focus {
  border-color: var(--erp-red) !important;
  box-shadow: 0 0 0 0.15rem rgba(220, 38, 38, 0.15) !important;
}

/* Alert-info accent tweak (keep info blue, update primary) */
.alert-primary {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #9f1239 !important;
}

/* Nav-tabs active state → red underline */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--erp-red) !important;
  border-bottom-color: var(--erp-red) !important;
}

.nav-tabs .nav-link:hover {
  color: var(--erp-red) !important;
}

/* Nav-pills active → red pill */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--erp-red) !important;
  color: #ffffff !important;
}

/* Pagination active → red */
.page-item.active .page-link {
  background-color: var(--erp-red) !important;
  border-color: var(--erp-red) !important;
  color: #ffffff !important;
}

.page-link {
  color: var(--erp-red) !important;
}

.page-link:hover {
  color: var(--erp-red-dark) !important;
}

/* Progress bar primary → red */
.progress-bar.bg-primary,
.progress-bar {
  background-color: var(--erp-red) !important;
}

/* List group active → red */
.list-group-item.active {
  background-color: var(--erp-red) !important;
  border-color: var(--erp-red) !important;
}

/* Checkbox & Radio checked → red */
.form-check-input:checked {
  background-color: var(--erp-red) !important;
  border-color: var(--erp-red) !important;
}

/* Select2 focus ring → red */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--erp-red) !important;
  box-shadow: 0 0 0 0.15rem rgba(220, 38, 38, 0.15) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--erp-red) !important;
}

/* SweetAlert confirm button → red */
.swal2-confirm {
  background-color: var(--erp-red) !important;
  border-color: var(--erp-red) !important;
}

/* Breadcrumb active → red */
.breadcrumb-item.active,
.breadcrumb-item a {
  color: var(--erp-red) !important;
}

/* Switch / Toggle → red */
.form-switch .form-check-input:checked {
  background-color: var(--erp-red) !important;
  border-color: var(--erp-red) !important;
}

/* Spinner primary → red */
.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: var(--erp-red) !important;
}

/* Card border-top accent → red variant */
.card-top-accent.primary {
  background: linear-gradient(90deg, var(--erp-red) 0%, #f43f5e 100%) !important;
}

/* Flatpickr global → red selected day */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--erp-red) !important;
  border-color: var(--erp-red) !important;
  color: #ffffff !important;
}

.flatpickr-day.today {
  border-color: var(--erp-red) !important;
  color: var(--erp-red) !important;
}

.flatpickr-day.today.selected {
  color: #ffffff !important;
}

/* Topbar / Navbar brand accent → red */
.topbar .navbar-toggler-icon,
.topbar .hamburger-icon span {
  background-color: var(--erp-red) !important;
}

/* Dashboard quick-action icon bg */
.dash-icon-box.primary {
  background: linear-gradient(135deg, var(--erp-red) 0%, #f43f5e 100%) !important;
}

/* ==========================================================================
   RNTD SIDEBAR THEME v2 — FINAL OVERRIDE (navy + red accent)
   ID selectors (#appSidebar / #menu) intentionally win over older rule sets.
   ========================================================================== */
#appSidebar {
  background: linear-gradient(180deg, #0f1a36 0%, #0b1329 45%, #080f22 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 4px 0 24px rgba(2, 6, 23, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
  z-index: 1075 !important;
}

#appSidebar .sidebar-header {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  background: #0f1a36 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  z-index: 1100 !important;
  flex-shrink: 0 !important;
}

#appSidebar .sidebar-header .logo-badge {
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25) !important;
}

#appSidebar .sidebar-header .logo-text {
  color: #ffffff !important;
}

#appSidebar .sidebar-header .text-muted {
  color: #f87171 !important;
}

#appSidebar .sidebar-header .toggle-icon {
  color: #94a3b8 !important;
}

#appSidebar .sidebar-nav-scroll {
  flex: 1 1 auto !important;
  height: calc(100vh - 60px - 40px) !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#appSidebar .sidebar-nav-scroll::-webkit-scrollbar { width: 5px; }
#appSidebar .sidebar-nav-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }
#appSidebar .simplebar-scrollbar:before { background: rgba(255, 255, 255, 0.35) !important; }
#appSidebar .simplebar-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#appSidebar #menu,
#appSidebar .metismenu {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 16px !important;
}

/* Section labels - Clean and compact without excessive spaces */
#appSidebar #menu li.menu-label {
  color: #64748b !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 10px 16px 4px !important;
  margin-top: 0 !important;
}

/* Top-level items */
#appSidebar #menu > li > a {
  position: relative;
  display: flex !important;
  align-items: center !important;
  color: #cbd5e1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  margin: 2px 10px !important;
  padding: 8px 10px !important;
  min-height: 42px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

#appSidebar #menu a .menu-title {
  font-size: inherit !important;
  color: inherit !important;
}

#appSidebar #menu > li > a .parent-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 9px !important;
  margin-right: 10px !important;
  font-size: 1.05rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  transition: all 0.18s ease !important;
}

#appSidebar #menu > li > a .parent-icon i {
  color: inherit !important;
}

#appSidebar #menu > li > a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

#appSidebar #menu > li > a:hover .parent-icon {
  background: rgba(220, 38, 38, 0.18) !important;
  color: #f87171 !important;
}

/* Active top-level (no children) — red gradient pill */
#appSidebar #menu > li.mm-active > a:not(.has-arrow) {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 55%, #b91c1c 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 20px -6px rgba(220, 38, 38, 0.65) !important;
}

#appSidebar #menu > li.mm-active > a:not(.has-arrow) .parent-icon {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Active parent group (has children) — soft highlight + red rail */
#appSidebar #menu > li.mm-active > a.has-arrow {
  background: rgba(220, 38, 38, 0.12) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

#appSidebar #menu > li.mm-active > a.has-arrow::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
}

#appSidebar #menu > li.mm-active > a.has-arrow .parent-icon {
  background: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px -2px rgba(220, 38, 38, 0.6) !important;
}

#appSidebar #menu .has-arrow:after {
  border-color: #64748b !important;
}

#appSidebar #menu li.mm-active > .has-arrow:after,
#appSidebar #menu .has-arrow:hover:after {
  border-color: #ffffff !important;
}

/* Sub-menus (Navbar children options) */
#appSidebar #menu ul {
  position: relative;
  background: transparent !important;
  margin: 2px 8px 3px 10px !important;
  padding: 2px 0 2px 4px !important;
  border-left: none !important;
  border: none !important;
  border-radius: 0 !important;
  list-style: none !important;
}

#appSidebar #menu ul li a {
  position: relative;
  display: flex !important;
  align-items: center !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 4px !important;
  margin: 1px 0 !important;
  padding: 4px 8px !important;
  min-height: 28px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

#appSidebar #menu ul li a i {
  font-size: 0.88rem !important;
  margin-right: 6px !important;
  color: #64748b !important;
}

#appSidebar #menu ul li a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 4px !important;
}

#appSidebar #menu ul li a:hover i {
  color: #f87171 !important;
}

#appSidebar #menu ul li.mm-active > a {
  color: #ffffff !important;
  font-weight: 600 !important;
  background: rgba(220, 38, 38, 0.16) !important;
  border-radius: 4px !important;
}

#appSidebar #menu ul li.mm-active > a i {
  color: #f87171 !important;
}

#appSidebar #menu ul li.mm-active > a::before {
  display: none !important;
}

/* Session strip — in-flow footer of the sidebar column */
#appSidebar .sidebar-session-strip {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 12px 12px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
  color: #cbd5e1 !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
}

#appSidebar .sidebar-session-strip i {
  color: #f87171 !important;
  font-size: 1rem !important;
}

#appSidebar .sidebar-session-strip span { color: #cbd5e1 !important; }
#appSidebar .sidebar-session-strip strong { color: #ffffff !important; }

/* Desktop collapsed (icon-only) */
@media screen and (min-width: 1025px) {
  .wrapper.toggled #appSidebar #menu > li > a {
    justify-content: center !important;
    padding: 8px 0 !important;
    margin: 3px 12px !important;
  }

  .wrapper.toggled #appSidebar #menu > li > a .parent-icon {
    margin-right: 0 !important;
  }

  .wrapper.toggled #appSidebar #menu > li.mm-active > a.has-arrow::before {
    left: -12px;
  }

  .wrapper.toggled #appSidebar .sidebar-session-strip {
    justify-content: center !important;
    margin: 8px !important;
    padding: 10px 0 !important;
  }

  .wrapper.toggled #appSidebar .sidebar-session-strip span {
    display: none !important;
  }
}

/* Mobile drawer: larger touch targets */
@media screen and (max-width: 1024px) {
  .wrapper:not(.toggled) #appSidebar {
    box-shadow: none !important;
  }

  .wrapper.toggled #appSidebar {
    z-index: 1075 !important;
  }

  #appSidebar #menu > li > a {
    min-height: 46px !important;
    font-size: 0.88rem !important;
  }

  #appSidebar #menu ul li a {
    min-height: 40px !important;
    font-size: 0.82rem !important;
  }

  #appSidebar .sidebar-header .mobile-sidebar-close-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
  }

  #appSidebar .sidebar-header .mobile-sidebar-close-btn:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
  }

  /* Fixed footer would cover the last content row on small screens */
  .page-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 56px !important;
  }
}

/* Hero headings must stay white regardless of global heading colours */
.checkin-hero h5,
.checkin-hero .checkin-hero__name {
  color: #ffffff !important;
}

/* ==========================================================================
   UNIVERSAL ERP HERO HEADER & KPI STATS (MATCHING TEACHER ALLOCATION CONSOLE)
   ========================================================================== */
.ct-header {
  background: linear-gradient(135deg, #0b1329 0%, #dc2626 60%, #ef4444 100%) !important;
  border-radius: 4px !important;
  padding: 14px 18px !important;
  color: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

.ct-header::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.ct-header h1 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px;
}

.ct-header p {
  font-size: 0.72rem !important;
  margin: 3px 0 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.ct-header-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 6px 13px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  position: relative !important;
  z-index: 2 !important;
}

.ct-header-btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.ct-header-btn.solid {
  background: #ffffff !important;
  color: #dc2626 !important;
  border-color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.ct-header-btn.solid:hover {
  background: #f8fafc !important;
  color: #b91c1c !important;
}

/* Universal KPI Stats Bar */
.ct-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

@media (max-width: 991px) {
  .ct-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575px) {
  .ct-stats {
    grid-template-columns: 1fr !important;
  }
}

.ct-stat {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  min-height: 68px !important;
}

.ct-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  border-color: #cbd5e1 !important;
}

.ct-stat-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  flex-shrink: 0 !important;
}

.ct-stat-val {
  font-size: 1.30rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #0f172a !important;
}

.ct-stat-label {
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-top: 2px !important;
}


/* Category Filter Pills */
.erp-pill-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.erp-pill-btn {
  border-radius: 4px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #475569 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all 0.15s ease !important;
}

.erp-pill-btn:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.erp-pill-btn.active {
  background: #0b1329 !important;
  color: #ffffff !important;
  border-color: #0b1329 !important;
}

.erp-pill-btn.active-primary {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

.erp-pill-btn .pill-count {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.08);
}

.erp-pill-btn.active .pill-count,
.erp-pill-btn.active-primary .pill-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* ── High-End Clean Student Grid Card & Avatars ── */
.student-grid-card {
  border-radius: 4px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.student-grid-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04) !important;
  border-color: #cbd5e1 !important;
}

.card-top-accent {
  height: 3px !important;
  width: 100% !important;
}
.card-top-accent.active {
  background: linear-gradient(90deg, #10b981, #059669) !important;
}
.card-top-accent.inactive {
  background: linear-gradient(90deg, #f59e0b, #d97706) !important;
}

.student-avatar-box {
  width: 46px;
  height: 46px;
  border-radius: 4px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
  position: relative;
  flex-shrink: 0;
}
.student-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 4px !important;
  object-fit: cover;
}

.avatar-grad-0 { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important; }
.avatar-grad-1 { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important; }
.avatar-grad-2 { background: linear-gradient(135deg, #059669 0%, #047857 100%) !important; }
.avatar-grad-3 { background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important; }
.avatar-grad-4 { background: linear-gradient(135deg, #db2777 0%, #9d174d 100%) !important; }
.avatar-grad-5 { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important; }

.font-mono-code {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  letter-spacing: 0.2px;
}
.cursor-pointer { cursor: pointer !important; }

/* ── Modern Enterprise ERP Form Panels & Input System ── */
.erp-section-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  padding: 1.25rem 1.4rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.erp-section-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
}

.erp-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 0.75rem !important;
  margin-bottom: 1rem !important;
  border-bottom: 1px solid #eef2f6 !important;
}

.erp-sub-panel {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
  transition: all 0.15s ease !important;
}

.erp-sub-panel:hover {
  border-color: #cbd5e1 !important;
  background: #fbfcfe !important;
}

.erp-sub-panel:last-child {
  margin-bottom: 0 !important;
}

.erp-sub-panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #e9edf2 !important;
}

.erp-sub-panel-title {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
}

.erp-sub-panel-icon {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  font-size: 0.95rem !important;
}

.erp-sub-panel-badge {
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  padding: 2px 8px !important;
}

.erp-form-label {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.erp-form-label .text-danger {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

.erp-form-control, 
.form-select.erp-form-control {
  height: 36px !important;
  min-height: 36px !important;
  font-size: 0.82rem !important;
  border-radius: 4px !important;
  border: 1px solid #cbd5e1 !important;
  padding: 0.35rem 0.65rem !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  transition: all 0.15s ease-in-out !important;
}

.erp-form-control::placeholder {
  color: #94a3b8 !important;
  font-size: 0.80rem !important;
}

.erp-form-control:focus,
.form-select.erp-form-control:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  outline: none !important;
  background-color: #ffffff !important;
}

.input-group .input-group-text {
  height: 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px 0 0 4px !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #f8fafc !important;
  color: #64748b !important;
  font-size: 0.95rem !important;
}

.input-group > .erp-form-control,
.input-group > .form-select.erp-form-control {
  border-radius: 0 4px 4px 0 !important;
  border-left: 0 !important;
}

.input-group > .erp-form-control:focus,
.input-group > .form-select.erp-form-control:focus {
  border-left: 1px solid #2563eb !important;
}

textarea.erp-form-control {
  height: auto !important;
  min-height: 64px !important;
  border-radius: 4px !important;
  padding: 0.5rem 0.65rem !important;
}

.type-switcher-btn {
  border-radius: 4px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 0.35rem 0.9rem !important;
  transition: all 0.15s ease !important;
}

.type-switcher-btn:hover {
  background: #f1f5f9 !important;
}

.btn-check:checked + .type-switcher-btn {
  background: #0b1329 !important;
  color: #ffffff !important;
  border-color: #0b1329 !important;
}

/* Reusable table scroll container; sticky cells must scroll with this ancestor. */
.erp-table-scroll { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.table.erp-sticky-table { overflow: visible; border-collapse: separate !important; border-spacing: 0; }

/* Shared application pagination. */
.erp-pagination { max-width: 100%; }
.erp-pagination .pagination { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.erp-pagination .pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 6px 10px; margin: 0 !important; border: 1px solid #dce3ef !important; border-radius: 6px !important; background: #fff !important; color: #334155 !important; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.erp-pagination .pagination a.page-link:hover { background: #eef2ff !important; border-color: #a5b4cf !important; }
.erp-pagination .pagination .active .page-link { background: #101d40 !important; border-color: #101d40 !important; color: #fff !important; }
.erp-pagination .pagination .disabled .page-link { background: #f5f7fa !important; color: #94a3b8 !important; }
.erp-pagination .page-link:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; box-shadow: none; }
html.dark-theme .erp-pagination .pagination .page-link { background: #19263b !important; color: #e3eaf7 !important; border-color: #40516c !important; }
html.dark-theme .erp-pagination .pagination .active .page-link { background: #3157aa !important; color: #fff !important; }
html.dark-theme .erp-pagination .pagination .disabled .page-link { color: #8291aa !important; }


/* ===== RNTD-UI ===== */
/* ==========================================================================
   RNTD UI kit: animated toasts, custom confirm dialogs and progress overlay
   ========================================================================== */
:root {
    --rui-red: #b91c1c;
    --rui-red-dark: #7f1d1d;
    --rui-navy: #0b1329;
    --rui-green: #16a34a;
    --rui-amber: #d97706;
    --rui-blue: #2563eb;
    --rui-muted: #64748b;
}

/* ---------- Toasts (top right) ---------- */
.rui-toast-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 36px));
    pointer-events: none;
}

.rui-toast {
    --accent: var(--rui-green);
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 40px 16px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .35), 0 0 0 1px rgba(15, 23, 42, .06);
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
    pointer-events: auto;
    animation: ruiToastIn .55s cubic-bezier(.21, 1.02, .73, 1) forwards;
}

.rui-toast::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--accent);
}

.rui-toast.is-leaving { animation: ruiToastOut .4s ease forwards; }
.rui-toast.success { --accent: var(--rui-green); }
.rui-toast.error { --accent: var(--rui-red); }
.rui-toast.warning { --accent: var(--rui-amber); }
.rui-toast.info { --accent: var(--rui-blue); }

.rui-toast-icon {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.15rem;
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent);
    animation: ruiPulse 1.6s ease-out .3s 2, ruiPop .5s cubic-bezier(.34, 1.56, .64, 1);
}

.rui-toast-body { flex: 1; min-width: 0; color: #0f172a; font-size: .84rem; line-height: 1.4; }
.rui-toast-body strong { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 2px; }
.rui-toast-body ul { padding-left: 1rem; margin: 4px 0 0; }
.rui-toast-body p { margin: 0; color: #475569; }

.rui-toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 1.15rem;
    line-height: 1;
    padding: 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.rui-toast-close:hover { background: #f1f5f9; color: #0f172a; }

.rui-toast-timer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--accent);
    opacity: .55;
    transform-origin: left;
    animation: ruiTimer linear forwards;
}

.rui-toast:hover .rui-toast-timer { animation-play-state: paused; }

@keyframes ruiToastIn {
    from { opacity: 0; transform: translateX(110%) scale(.9); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes ruiToastOut {
    to { opacity: 0; transform: translateX(110%) scale(.9); height: 0; padding: 0; margin: 0; }
}

@keyframes ruiTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ruiPop { from { transform: scale(0) rotate(-45deg); } to { transform: scale(1) rotate(0); } }
@keyframes ruiPulse { to { box-shadow: 0 0 0 12px transparent; } }

/* ---------- Custom SweetAlert skin ---------- */
.rui-swal.swal2-popup {
    border-radius: 22px;
    padding: 1.9rem 1.6rem 1.6rem;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 30px 70px -20px rgba(15, 23, 42, .45);
}

.swal2-container.rui-swal-backdrop { backdrop-filter: blur(4px); background: rgba(15, 23, 42, .45) !important; }
.rui-swal .swal2-title { font-size: 1.35rem; font-weight: 700; color: var(--rui-navy); padding-top: .4rem; }
.rui-swal .swal2-html-container { font-size: .9rem; color: var(--rui-muted); margin-top: .5rem; }
.rui-swal .swal2-actions { gap: .6rem; margin-top: 1.4rem; }

.rui-swal-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    position: relative;
    animation: ruiPop .6s cubic-bezier(.34, 1.56, .64, 1);
}

.rui-swal-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: .25;
    animation: ruiRing 1.8s ease-out infinite;
}

.rui-swal-icon.success { color: var(--rui-green); background: #dcfce7; }
.rui-swal-icon.warning { color: var(--rui-amber); background: #fef3c7; }
.rui-swal-icon.error { color: var(--rui-red); background: #fee2e2; }
.rui-swal-icon.info, .rui-swal-icon.question { color: var(--rui-blue); background: #dbeafe; }

@keyframes ruiRing { from { transform: scale(.9); opacity: .45; } to { transform: scale(1.25); opacity: 0; } }

.rui-swal-dots { display: flex; justify-content: center; gap: 7px; margin: 10px 0 2px; }
.rui-swal-dots span { width: 5px; height: 5px; border-radius: 50%; animation: ruiDot 1.2s ease-in-out infinite; }
.rui-swal-dots span:nth-child(1) { background: #a855f7; }
.rui-swal-dots span:nth-child(2) { background: #3b82f6; animation-delay: .15s; }
.rui-swal-dots span:nth-child(3) { background: #f59e0b; animation-delay: .3s; }
.rui-swal-dots span:nth-child(4) { background: #22c55e; animation-delay: .45s; }
.rui-swal-dots span:nth-child(5) { background: #ec4899; animation-delay: .6s; }
@keyframes ruiDot { 50% { transform: translateY(-5px); } }

.rui-swal-stamp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 6px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: .78rem;
    color: #334155;
}

.rui-btn {
    border: 0;
    border-radius: 12px;
    padding: .65rem 1.5rem;
    font-weight: 600;
    font-size: .88rem;
    transition: transform .15s, box-shadow .2s, filter .2s;
}

.rui-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.rui-btn:active { transform: translateY(0) scale(.98); }
.rui-btn-confirm { color: #fff; background: linear-gradient(135deg, var(--rui-red), var(--rui-red-dark)); box-shadow: 0 10px 22px -8px rgba(185, 28, 28, .7); }
.rui-btn-confirm.is-success { background: linear-gradient(135deg, #16a34a, #15803d); box-shadow: 0 10px 22px -8px rgba(22, 163, 74, .7); }
.rui-btn-cancel { color: #334155; background: #f1f5f9; }

/* ---------- Progress overlay ---------- */
.rui-progress-overlay {
    position: fixed;
    inset: 0;
    z-index: 19999;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(5px);
    animation: ruiFade .25s ease;
}

.rui-progress-card {
    width: min(420px, calc(100vw - 32px));
    background: #fff;
    border-radius: 22px;
    padding: 1.8rem 1.6rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 30px 70px -20px rgba(15, 23, 42, .5);
    animation: ruiPop .45s cubic-bezier(.34, 1.56, .64, 1);
}

.rui-progress-spin {
    width: 62px;
    height: 62px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.9rem;
    color: var(--rui-red);
    background: #fee2e2;
}

.rui-progress-spin i { animation: ruiSpin 1.1s linear infinite; }
.rui-progress-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--rui-navy); margin: 0 0 4px; }
.rui-progress-card p { font-size: .82rem; color: var(--rui-muted); margin: 0 0 16px; min-height: 1.2em; }

.rui-progress-track {
    height: 12px;
    border-radius: 99px;
    background: #f1f5f9;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .12);
}

.rui-progress-bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #ef4444, #b91c1c, #f59e0b, #ef4444);
    background-size: 300% 100%;
    position: relative;
    transition: width .35s ease;
    animation: ruiGradient 2s linear infinite;
}

.rui-progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%);
    background-size: 18px 18px;
    animation: ruiStripes .7s linear infinite;
}

.rui-progress-bar.is-done { background: linear-gradient(90deg, #22c55e, #16a34a); }
.rui-progress-pct { margin-top: 8px; font-size: .78rem; font-weight: 600; color: #334155; }

@keyframes ruiSpin { to { transform: rotate(360deg); } }
@keyframes ruiFade { from { opacity: 0; } }
@keyframes ruiGradient { to { background-position: 300% 0; } }
@keyframes ruiStripes { to { background-position: 18px 0; } }

@media (prefers-reduced-motion: reduce) {
    .rui-toast, .rui-toast-icon, .rui-swal-icon, .rui-swal-icon::after, .rui-progress-card,
    .rui-progress-bar, .rui-progress-bar::after, .rui-progress-spin i, .rui-swal-dots span { animation: none !important; }
}


/* ===== DARK-THEME ===== */
html.dark-theme .switcher-wrapper {
  background: #12181a;
}

html.dark-theme body {
  color: #e4e5e6;
  background-color: #070d0e
}

html.dark-theme a {
  color: #fff;
  text-decoration: none;
}

html.dark-theme .text-option {
  color: #ffffff !important
}

html.dark-theme .h1,
html.dark-theme .h2,
html.dark-theme .h3,
html.dark-theme .h4,
html.dark-theme .h5,
html.dark-theme .h6,
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6 {
  color: #e4e5e6
}

html.dark-theme .card {
  background-color: #12181a;
  box-shadow: 0 0.1rem 0.7rem rgb(0 0 0 / 20%)
}

html.dark-theme .chat-list .list-group-item.active {
  background-color: #3e4348;
}

html.dark-theme .chat-tab-menu .nav-pills .nav-link.active,
html.dark-theme .chat-tab-menu .nav-pills .show>.nav-link {
  color: #ffffff;
  background-color: rgb(0 123 255 / 0%);
}

html.dark-theme .row.row-group>div {
  border-right: 1px solid rgb(255 255 255 / 12%);
}

html.dark-theme .card-header {
  border-bottom: 1px solid rgb(255 255 255 / 13%)
}

html.dark-theme .card-footer {
  border-top: 1px solid rgb(255 255 255 / 13%)
}

html.dark-theme .text-secondary {
  color: #a8adb0 !important
}

html.dark-theme .topbar {
  background-color: #12181a;
  border-bottom: 1px solid rgb(237 237 237 / 12%);
  box-shadow: 0 0.1rem 0.7rem rgb(0 0 0 / 20%)
}

html.dark-theme .user-box {
  border-left: 1px solid rgb(255 255 255 / .15);
  border-right: 1px solid rgb(255 255 255 / .15);
}

html.dark-theme .user-info .user-name {
  color: #e4e5e6
}

html.dark-theme .user-info .designattion {
  color: #b3b3b3
}

html.dark-theme .product-list .row {
  background-color: rgb(255 255 255 / 8%)
}

html.dark-theme .product-img {
  background-color: rgb(0 0 0 / 25%);
  border: 1px solid rgb(255 255 255 / 15%)
}

@media (min-width:992px) {
  html.dark-theme .product-list .row:hover {
    background-color: rgb(255 255 255 / 15%);
    margin-top: -.25rem;
    margin-bottom: .25rem;
    -webkit-box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .2);
    box-shadow: 0 .25rem .5rem 0 rgba(0, 0, 0, .2)
  }
}

html.dark-theme .recent-product-img {
  background-color: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 10%)
}

html.dark-theme .page-footer {
  background-color: #12181a;
  border-top: 1px solid rgb(237 237 237 / 12%)
}

html.dark-theme .mobile-toggle-menu {
  color: #e4e5e6
}

html.dark-theme .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%)
}

html.dark-theme .logo-icon {
  filter: invert(1) grayscale(100%) brightness(200%)
}

html.dark-theme .toggle-icon {
  color: #e7e9ec
}

html.dark-theme .topbar .navbar-nav .nav-link {
  border-left: 0 solid rgb(255 255 255 / 12%);
  color: #e4e5e6
}

html.dark-theme .topbar .navbar .dropdown-app .dropdown-menu .app-name {
  color: #e4e5e6
}

html.dark-theme .topbar .navbar .dropdown-app .dropdown-menu .app-box:hover {
  background-color: #32363a;
}


html.dark-theme .topbar .navbar .dropdown-menu {
  border: 1px solid rgb(241 241 241 / 15%);
}

html.dark-theme .dropdown-large .cart-product {
  border: 1px solid rgb(241 241 241 / 15%);
}


html.dark-theme .dropdown-large .cart-product-title {
  color: #e4e5e6
}

html.dark-theme .dropdown-large .cart-product-cancel {
  color: #e4e5e6;
  border: 1px solid rgb(241 241 241 / 15%);
  background-color: rgb(255 255 255 / 12%);
}


html.dark-theme .topbar .navbar .navbar-nav .nav-link:hover,
html.dark-theme .topbar .navbar .navbar-nav .nav-link:focus {
  background-color: rgb(255 255 255 / 12%);
  color: #ffffff;
}


html.dark-theme .search-bar input[disabled] {
  color: #e4e5e6;
  background-color: rgba(255, 255, 255, 0.08);
  border: 0px solid rgb(241 241 241 / 15%);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0%)
}


html.dark-theme .search-bar input::placeholder {
  color: #e4e5e6 !important;
  opacity: .5 !important
}

html.dark-theme::placeholder {
  color: #e4e5e6 !important;
  opacity: .5 !important
}


html.dark-theme .dropdown-menu {
  color: #e4e5e6;
  background-color: #12181a;
  box-shadow: 0 .5rem 1rem rgb(0 0 0 / .3)
}

html.dark-theme .dropdown-item {
  color: #acafb3
}

html.dark-theme .dropdown-menu .dropdown-item:hover {
  background-color: #303337
}

html.dark-theme .dropdown-divider {
  border-top: 1px solid rgb(255 255 255 / 12%)
}

html.dark-theme .dropdown-large .dropdown-menu .dropdown-item {
  border-bottom: 1px solid rgb(255 255 255 / 12%)
}

html.dark-theme .dropdown-large .msg-name {
  color: #fff
}

html.dark-theme .dropdown-large .msg-info {
  color: #80868c
}

html.dark-theme .dropdown-large .msg-time {
  color: #b1afaf
}

html.dark-theme .dropdown-large .msg-header {
  border-bottom: 1px solid rgb(255 255 255 / 15%);
  background: 0 0
}

html.dark-theme .dropdown-large .msg-header .msg-header-title {
  color: #e4e5e6
}

html.dark-theme .dropdown-large .msg-header .msg-header-clear {
  color: #999ea2
}

html.dark-theme .dropdown-large .msg-footer {
  color: #d1d7de;
  border-top: 1px solid rgb(255 255 255 / .15)
}

html.dark-theme .btn-white {
  color: #e4e5e6;
  background-color: #12181a;
  border-color: rgb(206 212 218 / 45%);
  border-top: 1px solid #63686f;
  border-left: 1px solid #63686f
}

html.dark-theme .user-img {
  border: 1px solid rgb(255 255 255 / 28%)
}

html.dark-theme .customers-contacts a {
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 14%);
  color: #fff
}

@media (min-width:992px) {
  html.dark-theme .customers-list .customers-list-item:hover {
    background-color: rgb(255 255 255 / 12%)
  }
}

html.dark-theme .order-actions a {
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 14%);
  color: #fff
}

html.dark-theme .alert {
  background-color: #161515
}

html.dark-theme .accordion-button {
  color: #bac0c6;
  border: 1px solid rgb(255 255 255 / 14%)
}

html.dark-theme .accordion-button:not(.collapsed) {
  background-color: rgb(255 255 255 / 12%)
}

html.dark-theme .nav-tabs .nav-link {
  color: #e3e4e5
}

html.dark-theme .nav-tabs .nav-item.show .nav-link,
html.dark-theme .nav-tabs .nav-link.active {
  color: #ffffff;
  background-color: #12181a;
}

html.dark-theme .nav-tabs {
  border-bottom: 1px solid rgb(255 255 255 / 14%)
}

html.dark-theme .nav-primary.nav-tabs .nav-link.active {
  border-color: rgb(255 255 255 / 12%) rgb(255 255 255 / 12%) rgb(255 255 255 / 14%)
}

html.dark-theme .nav-danger.nav-tabs .nav-link.active {
  border-color: #f41127 #f41127 rgb(255 255 255 / .14)
}

html.dark-theme .nav-success.nav-tabs .nav-link.active {
  border-color: #17a00e #17a00e rgb(255 255 255 / .14)
}

html.dark-theme .nav-warning.nav-tabs .nav-link.active {
  border-color: #ffc107 #ffc107 rgb(255 255 255 / .14)
}

html.dark-theme .nav-pills .nav-link {
  color: #e7e8ea
}

html.dark-theme .theme-icons {
  background-color: #12181a
}

html.dark-theme .pricing-table .card ul li.list-group-item {
  color: #e5dede
}

html.dark-theme .table {
  --bs-table-bg: transparent;
  --bs-table-striped-color: #e4e5e6;
  --bs-table-striped-bg: rgba(255, 255, 0255, 0.05);
  --bs-table-active-color: #e4e5e6;
  --bs-table-active-bg: rgba(255, 255, 255, 0.1);
  --bs-table-hover-color: #e4e5e6;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: #e4e5e6;
  vertical-align: top;
  border-color: rgb(255 255 255 / 12%)
}

html.dark-theme .table-light {
  --bs-table-bg: rgb(255 255 255 / 12%);
  color: #fff
}

html.dark-theme .table td,
html.dark-theme .table th {
  border-color: rgb(255 255 255 / 12%)
}

html.dark-theme .table thead th {
  border-bottom: 2px solid rgb(255 255 255 / 12%)
}

html.dark-theme .border {
  border: 1px solid rgb(255 255 255 / 12%) !important
}

html.dark-theme .border-end {
  border-right: 1px solid rgb(255 255 255 / 12%) !important
}

html.dark-theme .border-3 {
  border-width: 3px !important
}

html.dark-theme .topbar .navbar .dropdown-menu::after {
  background: #12181a;
  border-top: 1px solid rgb(241 241 241 / 15%);
  ;
  border-left: 1px solid rgb(241 241 241 / 15%);
}

html.dark-theme .topbar .navbar .dropdown-large .dropdown-menu::after {
  background: #12181a;
  border-top: 1px solid rgb(241 241 241 / 15%);
  ;
  border-left: 1px solid rgb(241 241 241 / 15%);
}




html.dark-theme .highcharts-background {
  fill: rgb(255 255 255 / 0%)
}

html.dark-theme .highcharts-title {
  fill: #e4e5e6 !important;
  font-size: 1.5em
}

html.dark-theme .highcharts-root text {
  fill: #8f949a
}

html.dark-theme .highcharts-grid-line {
  fill: none;
  stroke: rgb(255 255 255 / 12%)
}

html.dark-theme .sidebar-wrapper {
  background: #12181a;
  border-right: 1px solid rgb(255 255 255 / 12%);
  box-shadow: 0 0.1rem 0.7rem rgb(0 0 0 / 20%) !important;
}

html.dark-theme .sidebar-wrapper .sidebar-header {
  background: #12181a;
  border-right: 1px solid rgb(255 255 255 / 12%);
  border-bottom: 1px solid rgb(255 255 255 / 12%)
}

html.dark-theme .sidebar-wrapper .sidebar-header .logo-text {
  color: #e7e9ec
}

html.dark-theme .sidebar-wrapper .sidebar-header .toggle-btn {
  color: #e7e9ec
}

html.dark-theme .sidebar-wrapper .sidebar-header .toggle-btn:hover {
  color: #fff
}

html.dark-theme .sidebar-wrapper .sidebar-header .toggle-btn:active {
  color: #fff;
  background: rgb(255 255 255 / 25%)
}

html.dark-theme .sidebar-wrapper .metismenu a {
  color: #9ea4aa
}

html.dark-theme .sidebar-wrapper .metismenu .mm-active>a,
html.dark-theme .sidebar-wrapper .metismenu a:active,
html.dark-theme .sidebar-wrapper .metismenu a:focus,
html.dark-theme .sidebar-wrapper .metismenu a:hover {
  color: #fff;
  text-decoration: none;
  background-color: rgb(255 255 255 / 12%);
}

html.dark-theme .sidebar-wrapper .metismenu ul {
  border: 1px solid #ffffff00;
  background: rgb(255 255 255 / 0%)
}

html.dark-theme .simplebar-scrollbar:before {
  background: rgba(255, 255, 255, .4)
}

html.dark-theme .footer {
  background: #12181a;
  border-top: 1px solid rgb(255 255 255 / 12%)
}

html.dark-theme .btn-light-warning {
  color: #ff9305
}

html.dark-theme .btn-light-dark {
  color: #757c83
}

html.dark-theme .modal-content {
  background-color: #12181a
}

html.dark-theme .modal-header {
  border-bottom: 1px solid rgb(222 226 230 / 16%)
}

html.dark-theme .modal-footer {
  border-top: 1px solid rgb(222 226 230 / 16%)
}

html.dark-theme .email-wrapper {
  background: #12181a;
  box-shadow: 0 .1rem .7rem rgb(0 0 0 / 24%)
}

html.dark-theme .email-sidebar {
  background: #12181a;
  border-right: 1px solid rgb(255 255 255 / .12)
}

html.dark-theme .email-sidebar-header {
  background: #12181a;
  border-bottom: 1px solid rgb(255 255 255 / .12);
  border-right: 0 solid rgb(255 255 255 / 12%)
}

html.dark-theme .email-navigation {
  border-bottom: 1px solid rgb(255 255 255 / 13%)
}

html.dark-theme .email-navigation a.list-group-item {
  color: #e4e5e6;
  background-color: #12181a;
  border-bottom: 1px solid rgb(0 0 0 / 0%)
}

html.dark-theme .email-navigation a.list-group-item:hover {
  background-color: rgb(0 123 255 / 15%)
}

html.dark-theme .email-meeting a.list-group-item {
  color: #e4e5e6;
  background-color: #12181a;
  border-bottom: 1px solid rgb(0 0 0 / 0%)
}

html.dark-theme .email-meeting a.list-group-item:hover {
  background-color: rgb(0 123 255 / 15%)
}

html.dark-theme .list-group-item {
  background-color: #12181a;
  color: #fbfcfd;
  border: 1px solid rgb(255 255 255 / 13%)
}

html.dark-theme .list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: #008cff;
  border-color: #008cff;
}

html.dark-theme .list-group-item:hover {
  background-color: rgb(255 255 255 / 10%)
}

html.dark-theme .email-navigation a.list-group-item.active {
  color: #fbfcfd;
  font-weight: 600;
  background-color: rgb(13 110 253 / 14%)
}

html.dark-theme .list-group-flush>.list-group-item {
  border-width: 0 0 1px
}

html.dark-theme .border-top {
  border-top: 1px solid rgb(255 255 255 / 13%) !important
}

html.dark-theme .email-header {
  background: #12181a;
  border-bottom: 1px solid rgb(255 255 255 / 13%)
}

html.dark-theme .email-content {
  background: #12181a
}

html.dark-theme .email-list div.email-message {
  background: #12181a;
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  color: #e4e5e6
}

html.dark-theme .email-list div.email-message:hover {
  transition: all .2s ease-out;
  background: #434a50
}

html.dark-theme .bg-body {
  background-color: #12181a !important
}

html.dark-theme .email-time {
  font-size: 13px;
  color: #8c969e
}

html.dark-theme .chat-time {
  font-size: 13px;
  color: #8c969e
}

html.dark-theme .widgets-icons {
  color: #12181a
}

html.dark-theme .invoice {
  background-color: #12181a
}

html.dark-theme .chat-wrapper {
  background: #12181a;
  box-shadow: 0 .1rem .7rem rgb(0 0 0 / 22%)
}

html.dark-theme .chat-sidebar {
  background: #12181a;
  border-right: 1px solid rgb(255 255 255 / 13%)
}

html.dark-theme .chat-sidebar-header {
  background: #12181a;
  border-bottom: 1px solid rgb(255 255 255 / 13%);
  border-right: 0 solid rgb(255 255 255 / 13%)
}

html.dark-theme .chat-header {
  background: #12181a;
  border-bottom: 1px solid rgb(255 255 255 / 13%)
}

html.dark-theme .chat-tab-menu li a.nav-link {
  color: #c3c5c8
}

html.dark-theme .product-img-2 {
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 14%);
}

html.dark-theme .chat-title {
  color: #e4e5e6
}

html.dark-theme .chat-msg {
  font-size: 14px;
  color: #848992
}

html.dark-theme .chat-top-header-menu a {
  color: #c3c5c8;
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 15%)
}

html.dark-theme .chat-content-leftside .chat-left-msg {
  background-color: #12181a
}

html.dark-theme .chat-content-rightside .chat-right-msg {
  background-color: #41484e
}

html.dark-theme .chat-footer {
  background: #12181a;
  border-top: 1px solid rgb(255 255 255 / 13%)
}

html.dark-theme .chat-footer-menu a {
  color: #c3c5c8;
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 15%)
}

html.dark-theme .fm-menu .list-group a {
  color: #c3c5c8
}

html.dark-theme .fm-icon-box {
  background: #12181a;
  color: #fff
}

html.dark-theme .contacts-social a {
  background: #12181a;
  color: #fff
}

html.dark-theme .invoice table td,
html.dark-theme .invoice table th {
  background: rgb(255 255 255 / 12%);
  border-bottom: 1px solid rgb(255 255 255 / 12%)
}

html.dark-theme .invoice table .no {
  color: #fff;
  background: #007bff
}

html.dark-theme .invoice main .notices {
  background: #12181a
}

html.dark-theme .invoice footer {
  color: #e4e5e6;
  border-top: 1px solid rgb(255 255 255 / 12%)
}

html.dark-theme .fc-theme-standard td,
html.dark-theme .fc-theme-standard th {
  border: 1px solid rgb(255 255 255 / .12)
}

html.dark-theme .fc-theme-standard .fc-scrollgrid {
  border: 1px solid rgb(255 255 255 / 12%)
}

html.dark-theme .fc .fc-col-header-cell-cushion {
  color: #fff
}

html.dark-theme .fc .fc-daygrid-day-number {
  color: #fff
}

html.dark-theme .breadcrumb {
  background-color: rgb(33 37 41 / 0%);
}

html.dark-theme .breadcrumb-item.active {
  color: #8b969f
}

html.dark-theme .breadcrumb-title {
  border-right: 1.5px solid rgb(255 255 255 / 18%)
}

html.dark-theme .btn-outline-secondary {
  color: #c5cace;
  border-color: #c2c9ce
}

html.dark-theme .btn-light {
  color: #fff;
  background-color: rgb(255 255 255 / 15%);
  border-color: rgb(255 255 255 / 22%)
}

html.dark-theme .btn-light:hover {
  color: #fff;
  background-color: rgb(255 255 255 / 25%);
  border-color: rgb(255 255 255 / 32%)
}

html.dark-theme .btn-dark {
  color: #fff;
  background-color: #181e22;
  border-color: #181e22
}

html.dark-theme .btn-dark:hover {
  color: #fff;
  background-color: #13181b;
  border-color: #13181b
}

html.dark-theme .btn-outline-dark {
  color: #fff;
  border-color: #181e22
}

html.dark-theme .page-link {
  color: #b2b6ba;
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / .12)
}

html.dark-theme .page-item.disabled .page-link {
  color: #b0b6bc;
  background-color: rgb(255 255 255 / 28%);
  border-color: rgb(222 226 230 / 14%)
}

html.dark-theme .progress {
  background-color: rgb(255 255 255 / 14%)
}

html.dark-theme .chip {
  color: rgb(198 200 203);
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 15%)
}

html.dark-theme .bg-light {
  background-color: rgb(255 255 255 / 15%) !important
}

html.dark-theme ul.icons li {
  box-shadow: 0 1px 5px #13171a;
  background: #12181a
}

html.dark-theme ul.icons li i {
  color: #fff
}

html.dark-theme .icon-box {
  background: #12181a;
  box-shadow: 0 1px 5px #161a1e
}

html.dark-theme .pByfF i {
  color: #fff
}



/* select 2 */

html.dark-theme .select2-container--bootstrap-5 .select2-selection {
  color: #c0c8d1;
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 31%);
}

html.dark-theme .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  color: #c8c8c8;
  border: 1px solid rgb(255 255 255 / 26%);
}


html.dark-theme .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: #ffffff;
}

html.dark-theme .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  color: #ffffff;
  background-color: #4c4d53;
  border: 1px solid rgb(255 255 255 / 31%);
}

html.dark-theme .select2-container--bootstrap-5 .select2-dropdown {
  color: #d0d2d3;
}


html.dark-theme .form-control {
  color: #c0c8d1;
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 34%)
}

html.dark-theme .form-select {
  color: #c0c8d1;
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 34%)
}

html.dark-theme .form-control:focus {
  box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25)
}

html.dark-theme .form-select:focus {
  box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25)
}

html.dark-theme .form-control:disabled,
html.dark-theme .form-control[readonly] {
  background-color: rgb(255 255 255 / 22%)
}

html.dark-theme .form-control::placeholder {
  color: #e4e5e6 !important;
  opacity: .5 !important
}

html.dark-theme .picker__input {
  background-color: #12181a !important;
  border: 1px solid rgb(255 255 255 / 34%) !important
}

html.dark-theme .select2-container--bootstrap4 .select2-selection {
  background-color: rgb(255 255 255 / .14);
  border: 1px solid rgb(255 255 255 / .35)
}

html.dark-theme .select2-dropdown {
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 38%)
}

html.dark-theme .select2-search--dropdown .select2-search__field {
  border: 1px solid rgb(255 255 255 / 34%);
  background-color: rgb(255 255 255 / 14%);
  color: #e3dfdf
}

html.dark-theme .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
  color: #dee1e5;
  border: 1px solid rgb(255 255 255 / 55%);
  background: #12181a
}

html.dark-theme .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered .select2-search__field {
  background: 0 0;
  color: #e6e1e1
}

html.dark-theme .select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true] {
  background-color: rgb(255 255 255 / 20%)
}

html.dark-theme .ff_fileupload_wrap .ff_fileupload_dropzone {
  background-color: rgb(252 252 252 / 14%);
  border: 2px dashed rgb(255 255 255 / 50%)
}

html.dark-theme .imageuploadify {
  background-color: rgb(255 255 255 / 14%);
  border: 2px dashed rgb(255 255 255 / .5)
}

html.dark-theme .bootstrap-tagsinput {
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 35%);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 37%);
  color: #e5e0e0
}

html.dark-theme .input-group-text {
  color: #d1d7de;
  background-color: #3e464c;
  border: 1px solid rgb(255 255 255 / 35%)
}

html.dark-theme .table-bordered td,
html.dark-theme .table-bordered th {
  border: 1px solid rgb(255 255 255 / 12%)
}

html.dark-theme .table-dark {
  background-color: #1d2126
}

html.dark-theme .table .thead-light th {
  background-color: rgb(255 255 255 / 20%);
  border-color: #fff
}

html.dark-theme .table-bordered {
  border: 1px solid rgb(255 255 255 / 12%)
}

html.dark-theme .login-card {
  border-right: 1px solid rgb(255 255 255 / 12%) !important
}

html.dark-theme .border-bottom {
  border-bottom: 1px solid rgb(255 255 255 / 14%) !important
}

html.dark-theme .navbar-light .navbar-nav .nav-link {
  color: rgb(255 255 255 / 50%)
}

html.dark-theme .navbar-light .navbar-nav .active>.nav-link,
html.dark-theme .navbar-light .navbar-nav .nav-link.active,
html.dark-theme .navbar-light .navbar-nav .nav-link.show,
html.dark-theme .navbar-light .navbar-nav .show>.nav-link {
  color: rgb(255 255 255 / 90%)
}

html.dark-theme .bg-light-purple {
  background-color: rgb(130 128 255 / 32%) !important
}

html.dark-theme .bg-light-primary {
  background-color: rgb(103 58 183 / 33%) !important
}

html.dark-theme .bg-light-danger {
  background-color: rgb(220 53 69 / 33%) !important
}

html.dark-theme .bg-light-shineblue {
  background-color: rgb(1 215 255 / 33%) !important
}

html.dark-theme .bg-light-cyne {
  background-color: rgb(0 139 139 / 32%) !important
}

html.dark-theme .bg-light-warning {
  background-color: rgb(255 193 7 / 32%) !important
}

html.dark-theme .bg-light-success {
  background-color: rgb(40 167 69 / 33%) !important
}

html.dark-theme .bg-light-info {
  background-color: rgb(25 143 237 / 22%) !important
}

html.dark-theme .bg-light-sinata {
  background-color: rgb(165 43 187 / 33%) !important
}

html.dark-theme .bg-light-mehandi {
  background: rgb(131 152 56 / 32%) !important
}

html.dark-theme .logo-white {
  display: block
}

html.dark-theme .logo-dark {
  display: none
}

html.dark-theme .email-toggle-btn {
  color: #c9cbce;
  background-color: #ffffff00
}

html.dark-theme .chat-toggle-btn {
  color: #c9cbce;
  background-color: #ffffff00;
  border: 0 solid rgb(0 0 0 / 15%)
}

html.dark-theme .apexcharts-datalabel,
html.dark-theme .apexcharts-datalabel-label,
html.dark-theme .apexcharts-datalabel-value,
html.dark-theme .apexcharts-datalabels,
html.dark-theme .apexcharts-pie-label {
  fill: #fff
}

html.dark-theme .product-discount {
  color: #fff;
  background-color: rgb(255 255 255 / 12%)
}

@media screen and (max-width:1024px) {
  html.dark-theme .wrapper.toggled .overlay {
    background: #fff;
    opacity: .4
  }

  html.dark-theme .chat-toggled .overlay {
    background: #fff;
    opacity: .4
  }

  html.dark-theme .email-toggled .overlay {
    background: #fff;
    opacity: .4
  }


}

@media screen and (max-width:767px) {
  html.dark-theme .topbar .navbar-nav .nav-link {
    border-left: 0 solid #ededed
  }
}

/* ===== SEMI-DARK ===== */
html.semi-dark .sidebar-wrapper {
  background-color: #12181a;
  border-right: 1px solid #e4e4e400;
  box-shadow: 0 0.1rem 0.7rem rgb(0 0 0 / 32%) !important;
}

html.semi-dark .sidebar-wrapper .sidebar-header {
  background-color: #12181a;
  border-right: 1px solid #e4e4e400;
  border-bottom: 1px solid rgb(255 255 255 / 15%)
}

html.semi-dark .sidebar-wrapper .sidebar-header .logo-text {
  color: #e7e9ec
}

html.semi-dark .sidebar-wrapper .sidebar-header .toggle-icon {
  color: #e7e9ec
}

html.semi-dark .sidebar-wrapper .metismenu a {
  color: #9ea4aa
}

html.semi-dark .sidebar-wrapper .metismenu .mm-active>a,
html.semi-dark .sidebar-wrapper .metismenu a:active,
html.semi-dark .sidebar-wrapper .metismenu a:focus,
html.semi-dark .sidebar-wrapper .metismenu a:hover {
  color: #fff;
  text-decoration: none;
  background: rgb(255 255 255 / 12%)
}

html.semi-dark .sidebar-wrapper .metismenu ul {
  border: 1px solid #ffffff00;
  background: rgb(255 255 255 / 0%)
}

html.semi-dark .simplebar-scrollbar:before {
  background: rgba(255, 255, 255, .4)
}

html.semi-dark .logo-icon {
  filter: invert(1) grayscale(100%) brightness(200%)
}

html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-1,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-10,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-11,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-12,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-2,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-3,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-4,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-5,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-6,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-7,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-8,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-9 {
  color: inherit
}




html.minimal-theme .topbar {
  background: #f7f7ff;
  border-bottom: 1px solid #dee2e6;
  box-shadow: none !important
}

html.minimal-theme .sidebar-wrapper .metismenu ul {
  background: #f7f7ff;
  border-bottom: 1px solid #dee2e6;
  box-shadow: none !important
}

html.minimal-theme .topbar .search-control {
  background-color: #f7f7ff;
  border: 1px solid #dee2e6
}

html.minimal-theme .topbar .user-box {
  border-left: 1px solid #dee2e6
}

html.minimal-theme .sidebar-wrapper {
  background: #f7f7ff;
  border-right: 1px solid #dee2e6;
  box-shadow: none !important
}

html.minimal-theme .sidebar-header {
  background: #f7f7ff;
  border-bottom: 1px solid #dee2e6;
  background-clip: padding-box;
  border-right: 1px solid #dee2e6;
}

html.minimal-theme .page-footer {
  background: #f7f7ff;
}

@media screen and (min-width:1025px) {
  html.minimal-theme .wrapper.toggled.sidebar-hovered .sidebar-wrapper {
    box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .12) !important
  }
}

/* ===== HEADER-COLORS ===== */
html.color-header .topbar .navbar-nav .nav-link {
  color: #fff
}

html.color-header .search-bar input {
  color: #413f3f;
  background-color: #fff !important;
  border: 1px solid rgb(241 241 241 / 15%) !important;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0%)
}

html.color-header .search-bar input:focus {
  box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25)
}

html.color-header .search-bar input::placeholder {
  color: #08090a !important;
  opacity: .5 !important
}

html.color-header::placeholder {
  color: #08090a !important;
  opacity: .5 !important
}

html.color-header .search-show {
  color: #221f1f
}

html.color-header .user-info .user-name {
  color: #fff
}

html.color-header .user-info .designattion {
  color: #fff
}

html.color-header .user-box {
  border-left: 1px solid rgb(255 255 255 / .35) !important
}

html.color-header .mobile-toggle-menu {
  color: #fff
}

.switcher-body .headercolor1 {
  background: #0727d7 !important
}

.switcher-body .headercolor2 {
  background: #23282c !important
}

.switcher-body .headercolor3 {
  background: #e10a1f !important
}

.switcher-body .headercolor4 {
  background: #157d4c !important
}

.switcher-body .headercolor5 {
  background: #673ab7 !important
}

.switcher-body .headercolor6 {
  background: #795548 !important
}

.switcher-body .headercolor7 {
  background: #d3094e !important
}

.switcher-body .headercolor8 {
  background: #ff9800 !important
}

html.headercolor1 .topbar {
  background: #0727d7
}

html.headercolor2 .topbar {
  background: #23282c
}

html.headercolor3 .topbar {
  background: #e10a1f
}

html.headercolor4 .topbar {
  background: #157d4c
}

html.headercolor5 .topbar {
  background: #673ab7
}

html.headercolor6 .topbar {
  background: #795548
}

html.headercolor7 .topbar {
  background: #d3094e
}

html.headercolor8 .topbar {
  background: #ff9800
}



/* sidebar color */


html.color-sidebar .sidebar-wrapper {
  background-color: #171717;
  border-right: 1px solid rgb(228 228 228 / 0%);
}

html.color-sidebar .sidebar-header {
  background-color: transparent;
  border-right: 1px solid #e4e4e400;
  border-bottom: 1px solid rgb(255 255 255 / 15%);
  position: absolute;
}

html.color-sidebar .logo-icon {
  filter: invert(1) grayscale(100%) brightness(200%);
}

html.color-sidebar .menu-label {
  color: rgb(255 255 255 / 65%);
}

html.color-sidebar .sidebar-wrapper .sidebar-header .logo-text {
  color: #ffffff;
}

html.color-sidebar .sidebar-wrapper .sidebar-header .toggle-icon {
  color: #ffffff;
}

html.color-sidebar .simplebar-scrollbar:before {
  background: rgba(255, 255, 255, .4)
}

html.color-sidebar .sidebar-wrapper .metismenu .mm-active>a,
html.color-sidebar .sidebar-wrapper .metismenu a:active,
html.color-sidebar .sidebar-wrapper .metismenu a:focus,
html.color-sidebar .sidebar-wrapper .metismenu a:hover {
  color: #fff;
  text-decoration: none;
  background: rgb(255 255 255 / 15%);
}

html.color-sidebar .sidebar-wrapper .metismenu a {
  color: rgb(255 255 255 / 85%);
}

html.color-sidebar .sidebar-wrapper .metismenu ul {
  border: 1px solid #ffffff00;
  background: rgb(255 255 255 / 0%);
}


html.color-sidebar .sidebar-wrapper {
  background-size: 100% 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}


.switcher-wrapper .sidebarcolor1 {
  background-image: url(../images/bg-themes/1.png);
}

.switcher-wrapper .sidebarcolor2 {
  background-image: url(../images/bg-themes/2.png);
}

.switcher-wrapper .sidebarcolor3 {
  background-image: url(../images/bg-themes/3.png);
}

.switcher-wrapper .sidebarcolor4 {
  background-image: url(../images/bg-themes/4.png);
}

.switcher-wrapper .sidebarcolor5 {
  background-image: url(../images/bg-themes/5.png);
}

.switcher-wrapper .sidebarcolor6 {
  background-image: url(../images/bg-themes/6.png);
}

.switcher-wrapper .sidebarcolor7 {
  background-image: url(../images/bg-themes/7.png);
}

.switcher-wrapper .sidebarcolor8 {
  background-image: url(../images/bg-themes/8.png);
}




html.color-sidebar.sidebarcolor1 .sidebar-wrapper {
  background-image: url(../images/bg-themes/1.png);
}

html.color-sidebar.sidebarcolor2 .sidebar-wrapper {
  background-image: url(../images/bg-themes/2.png);
}

html.color-sidebar.sidebarcolor3 .sidebar-wrapper {
  background-image: url(../images/bg-themes/3.png);
}

html.color-sidebar.sidebarcolor4 .sidebar-wrapper {
  background-image: url(../images/bg-themes/4.png);
}

html.color-sidebar.sidebarcolor5 .sidebar-wrapper {
  background-image: url(../images/bg-themes/5.png);
}

html.color-sidebar.sidebarcolor6 .sidebar-wrapper {
  background-image: url(../images/bg-themes/6.png);
}

html.color-sidebar.sidebarcolor7 .sidebar-wrapper {
  background-image: url(../images/bg-themes/7.png);
}

html.color-sidebar.sidebarcolor8 .sidebar-wrapper {
  background-image: url(../images/bg-themes/8.png);
}

/* ===== RNTD-SHELL ===== */
/* ==========================================================================
   RNTD APP SHELL — sidebar + top navbar (loaded last; wins over theme layers)
   ========================================================================== */
:root {
    --sh-navy-1: #0c1633;
    --sh-navy-2: #0a1128;
    --sh-red: #ef3340;
    --sh-red-2: #d61f2c;
    --sh-side-ink: #c9d3e6;
    --sh-side-muted: #7d8bab;
    --sh-side-line: rgba(255, 255, 255, 0.07);
    --sh-ink: #101d40;
    --sh-muted: #65769a;
    --sh-border: #e3eaf6;
    --sh-soft: #f4f7fd;
}

/* ───────────────────────── SIDEBAR ───────────────────────── */
html body #appSidebar {
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(239, 51, 64, 0.10), transparent 60%),
        linear-gradient(180deg, var(--sh-navy-1) 0%, var(--sh-navy-2) 100%) !important;
    border-right: 0 !important;
    box-shadow: 6px 0 28px rgba(2, 6, 23, 0.18) !important;
}

/* Brand */
html body #appSidebar .sidebar-header {
    gap: 8px;
    padding: 0 12px 0 14px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--sh-side-line) !important;
}
#appSidebar .sb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; text-decoration: none; }
html body #appSidebar .sidebar-header .logo-badge {
    display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 11px !important; background: #fff !important;
    box-shadow: 0 0 0 3px rgba(239, 51, 64, 0.22), 0 6px 14px -6px rgba(0, 0, 0, 0.5) !important;
}
html body #appSidebar .sidebar-header .logo-badge img { width: 28px !important; height: 28px !important; }
#appSidebar .sb-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
html body #appSidebar .sidebar-header .logo-text { margin: 0 !important; color: #fff !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; white-space: nowrap; }
#appSidebar .sb-brand-sub { color: #ff8a92; font-size: 9.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
html body #appSidebar .sidebar-toggle-btn {
    width: 30px; height: 30px; flex: 0 0 30px; padding: 0;
    border-radius: 8px !important; background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--sh-side-line) !important; color: var(--sh-side-ink) !important; font-size: 18px !important;
}
html body #appSidebar .sidebar-toggle-btn:hover { background: var(--sh-red) !important; border-color: var(--sh-red) !important; color: #fff !important; transform: none; box-shadow: none !important; }
html body #appSidebar .sidebar-toggle-btn i { transition: transform 0.2s ease; }

/* Quick tools */
#appSidebar .sb-tools { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 6px; flex-shrink: 0; }
#appSidebar .sb-cta {
    display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px;
    border-radius: 10px; background: linear-gradient(135deg, var(--sh-red), var(--sh-red-2)); color: #fff;
    font-size: 12.5px; font-weight: 600; text-decoration: none;
    box-shadow: 0 10px 20px -10px rgba(239, 51, 64, 0.8); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#appSidebar .sb-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(239, 51, 64, 0.95); }
#appSidebar .sb-cta i { font-size: 18px; }
#appSidebar .sb-search {
    position: relative; display: flex; align-items: center; margin: 0; height: 34px;
    border-radius: 9px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--sh-side-line); cursor: text;
}
#appSidebar .sb-search:focus-within { border-color: rgba(255, 138, 146, 0.5); background: rgba(255, 255, 255, 0.08); }
#appSidebar .sb-search > i { position: absolute; left: 10px; color: var(--sh-side-muted); font-size: 15px; }
html body #appSidebar .sb-search input { width: 100%; height: 100% !important; min-height: 0 !important; padding: 0 30px 0 31px !important; border: 0 !important; background: transparent !important; color: #fff !important; font-size: 12px !important; box-shadow: none !important; outline: 0; }
html body #appSidebar .sb-search input::placeholder { color: #8f9cbb !important; opacity: 1; }
#appSidebar .sb-search input::-webkit-search-cancel-button { display: none; }
#appSidebar .sb-search kbd { position: absolute; right: 8px; padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); color: var(--sh-side-muted); font-size: 10px; line-height: 16px; box-shadow: none; }

/* Scroll area */
html body #appSidebar .simplebar-track.simplebar-vertical { width: 6px; background: transparent !important; }
html body #appSidebar .simplebar-scrollbar:before { background: rgba(255, 255, 255, 0.18) !important; }
html body #appSidebar .sidebar-nav-scroll { padding-top: 4px; height: auto !important; max-height: none !important; flex: 1 1 auto !important; min-height: 0; }

/* Section labels / Group headings */
html body #appSidebar #menu li.menu-label {
    display: block !important;
    color: #64748b !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 14px 16px 5px !important;
    margin-top: 4px !important;
    line-height: 1.2 !important;
    user-select: none;
}
html body #appSidebar #menu li.menu-label[hidden] {
    display: none !important;
}
html body .wrapper.toggled:not(.sidebar-hovered) #appSidebar #menu li.menu-label {
    display: none !important;
}
html body #appSidebar #menu li[hidden] { display: none !important; }

/* Top-level items */
html body #appSidebar #menu > li > a {
    min-height: 40px !important; margin: 2px 10px !important; padding: 5px 10px 5px 6px !important;
    border-radius: 10px !important; color: var(--sh-side-ink) !important; font-size: 12.5px !important; font-weight: 500 !important;
}
html body #appSidebar #menu > li > a .parent-icon {
    width: 30px !important; height: 30px !important; min-width: 30px !important; margin-right: 10px !important;
    border-radius: 8px !important; background: transparent !important; color: var(--sh-side-muted) !important; font-size: 18px !important;
}
html body #appSidebar #menu > li > a:hover { background: rgba(255, 255, 255, 0.05) !important; color: #fff !important; }
html body #appSidebar #menu > li > a:hover .parent-icon { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; }
#appSidebar #menu .sb-ext { margin-left: 4px; font-size: 11px; opacity: 0.6; }

/* Active: soft glass pill + red icon chip + rail */
html body #appSidebar #menu > li.mm-active > a:not(.has-arrow),
html body #appSidebar #menu > li.mm-active > a.has-arrow {
    background: linear-gradient(90deg, rgba(239, 51, 64, 0.20), rgba(239, 51, 64, 0.06)) !important;
    color: #fff !important; font-weight: 600 !important; box-shadow: inset 0 0 0 1px rgba(239, 51, 64, 0.22) !important;
}
html body #appSidebar #menu > li.mm-active > a .parent-icon {
    background: linear-gradient(135deg, var(--sh-red), var(--sh-red-2)) !important; color: #fff !important;
    box-shadow: 0 6px 14px -6px rgba(239, 51, 64, 0.9) !important;
}
/* Sub-menus: tree line */
html body #appSidebar #menu ul { margin: 2px 10px 6px 14px !important; padding: 0 !important; border: 0 !important; }
html body #appSidebar #menu ul li a {
    min-height: 34px !important; padding: 6px 10px 6px 12px !important; border-radius: 8px !important;
    color: var(--sh-side-muted) !important; font-size: 12px !important;
}
html body #appSidebar #menu ul li a i { font-size: 15px !important; margin-right: 8px !important; color: inherit !important; }
html body #appSidebar #menu ul li a:hover { color: #fff !important; background: rgba(255, 255, 255, 0.05) !important; padding-left: 12px !important; }
html body #appSidebar #menu ul li.mm-active > a {
    color: #fff !important; font-weight: 600 !important; background: rgba(255, 255, 255, 0.07) !important;
    border: 0 !important; border-radius: 8px !important; box-shadow: none !important;
}
html body #appSidebar #menu ul li.mm-active > a i { color: #ff8a92 !important; }
html body #appSidebar #menu ul li.mm-active > a::before { content: none !important; }
html body #appSidebar #menu > li > a::before { content: none !important; display: none !important; }
#appSidebar .sb-no-results { padding: 14px 18px; color: var(--sh-side-muted); font-size: 12px; }

/* Footer */
html body #appSidebar .sb-footer {
    display: flex !important; flex-direction: column; gap: 8px; flex-shrink: 0;
    padding: 10px 12px 12px !important; margin: 0 !important; border-top: 1px solid var(--sh-side-line) !important;
    background: rgba(0, 0, 0, 0.18) !important; color: var(--sh-side-ink) !important; font-size: 11.5px !important;
}
#appSidebar .sb-session { display: flex; align-items: center; gap: 7px; color: var(--sh-side-muted); font-size: 11px; }
#appSidebar .sb-session strong { color: #fff; font-weight: 600; }
#appSidebar .sb-session-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
#appSidebar .sb-user { display: flex; align-items: center; gap: 9px; padding: 7px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
#appSidebar .sb-user-avatar { position: relative; display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #3b4b77, #26335a); color: #fff; font-size: 11px; font-weight: 700; }
#appSidebar .sb-user-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#appSidebar .sb-user-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
#appSidebar .sb-user-text strong { overflow: hidden; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
#appSidebar .sb-user-text small { overflow: hidden; color: var(--sh-side-muted); font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
#appSidebar .sb-logout { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; color: var(--sh-side-muted); font-size: 17px; text-decoration: none; }
#appSidebar .sb-logout:hover { background: rgba(239, 51, 64, 0.18); color: #ff8a92; }

/* Desktop collapsed (icon rail) */
@media screen and (min-width: 1025px) {
    html body .wrapper.toggled #appSidebar .sidebar-header { justify-content: center !important; padding: 0 !important; }
    html body .wrapper.toggled #appSidebar .sb-brand { display: none; }
    html body .wrapper.toggled #appSidebar .sidebar-toggle-btn i { transform: rotate(180deg); }
    html body .wrapper.toggled #appSidebar .sb-tools { padding: 10px 12px 4px; }
    html body .wrapper.toggled #appSidebar .sb-cta span,
    html body .wrapper.toggled #appSidebar .sb-search,
    html body .wrapper.toggled #appSidebar .sb-session,
    html body .wrapper.toggled #appSidebar .sb-user-text,
    html body .wrapper.toggled #appSidebar .sb-logout { display: none !important; }
    html body .wrapper.toggled #appSidebar .sb-cta { height: 40px; padding: 0; }
    html body .wrapper.toggled #appSidebar #menu > li > a { justify-content: center !important; padding: 5px 0 !important; margin: 2px 10px !important; }
    html body .wrapper.toggled #appSidebar #menu > li > a .parent-icon { margin-right: 0 !important; }
    html body .wrapper.toggled #appSidebar #menu ul { display: none !important; }
    html body .wrapper.toggled #appSidebar .sb-user { justify-content: center; padding: 4px; background: transparent; }
}

/* Mobile drawer */
@media screen and (max-width: 1024px) {
    html body #appSidebar .sidebar-header { height: 64px !important; }
    html body #appSidebar .mobile-sidebar-close-btn { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--sh-side-line) !important; color: var(--sh-side-ink) !important; }
}

/* ───────────────────────── TOP NAVBAR ───────────────────────── */
html body .topbar {
    height: 64px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: saturate(160%) blur(14px) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
    border-bottom: 1px solid var(--sh-border) !important;
    box-shadow: 0 1px 0 rgba(16, 29, 64, 0.02), 0 8px 24px -18px rgba(16, 29, 64, 0.25) !important;
}
/* ── App layout: the window never scrolls; only the content area between navbar and footer does ── */
:root { --sh-topbar-h: 64px; --sh-footer-h: 34px; }
html, html body { height: 100%; overflow: hidden !important; }
html body .wrapper { height: 100vh; height: 100dvh; overflow: hidden; }
html body .page-wrapper {
    /* Pinned between navbar and footer so its height never depends on page flow; existing margin-left rules still offset it from the sidebar. */
    position: fixed; top: var(--sh-topbar-h); bottom: var(--sh-footer-h); left: 0; right: 0;
    height: auto !important; min-height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
}
html body .page-wrapper > .page-content { padding-bottom: 14px !important; }
html body .page-wrapper::-webkit-scrollbar { width: 8px; }
html body .page-wrapper::-webkit-scrollbar-thumb { background: #c9d4e6; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
html body .page-wrapper::-webkit-scrollbar-thumb:hover { background-color: #a9b7cf; }
html body .page-wrapper .page-content { min-height: 100%; }
html body .back-to-top { display: none !important; }
.topbar .nb-bar { --nb-h: 40px; display: flex; align-items: center; gap: 14px; height: 100%; padding: 0 18px 0 16px !important; }
.topbar .nb-bar .dropdown { display: flex; align-items: center; }

html body .topbar .mobile-toggle-menu {
    display: none; place-items: center; width: var(--nb-h); height: var(--nb-h); flex: 0 0 var(--nb-h); margin: 0;
    border: 1px solid var(--sh-border); border-radius: 10px; background: #fff; color: var(--sh-ink); font-size: 22px;
}
@media screen and (max-width: 1024px) { html body .topbar .mobile-toggle-menu { display: grid; } }

.nb-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nb-crumb { align-items: center; gap: 4px; color: var(--sh-muted); font-size: 12px; }
.nb-crumb a { color: var(--sh-muted); text-decoration: none; }
.nb-crumb a:hover { color: var(--sh-red); }
.nb-crumb i { font-size: 15px; opacity: 0.6; }
html body .topbar .navbar-page-title { overflow: hidden; margin: 0; color: var(--sh-ink); font-size: 16px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; letter-spacing: -0.01em; }

.nb-search { position: relative; align-items: center; flex: 1 1 auto; height: var(--nb-h); max-width: 440px; margin: 0 auto !important; padding: 0 !important; }
.nb-search > i { position: absolute; left: 12px; color: var(--sh-muted); font-size: 18px; pointer-events: none; }
.nb-search input { width: 100%; height: var(--nb-h) !important; margin: 0; padding: 0 70px 0 38px; border: 1px solid var(--sh-border); border-radius: 12px; background: var(--sh-soft); color: var(--sh-ink); font-size: 12.5px; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.nb-search input::placeholder { color: var(--sh-muted); }
.nb-search input:focus { outline: 0; background: #fff; border-color: #9cbcf0; box-shadow: 0 0 0 2px rgba(52, 123, 229, 0.2); }
.nb-search kbd { position: absolute; right: 10px; padding: 1px 6px; border: 1px solid var(--sh-border); border-radius: 6px; background: #fff; color: var(--sh-muted); font-size: 10px; box-shadow: none; }

.nb-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nb-chip { align-items: center; gap: 7px; height: var(--nb-h); padding: 0 12px; border: 1px solid var(--sh-border); border-radius: 10px; background: #fff; color: var(--sh-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.nb-chip i { color: var(--sh-muted); font-size: 15px; }
.nb-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16); }
.nb-chip-sep { width: 1px; height: 16px; background: var(--sh-border); }

html body .topbar .nb-new {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--nb-h) !important; min-height: 0 !important; margin: 0 !important; padding: 0 14px 0 11px !important;
    border: 1px solid var(--sh-red-2) !important; border-radius: 10px !important; background: var(--sh-red) !important;
    color: #fff !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; box-shadow: none !important;
}
html body .topbar .nb-new i { font-size: 17px; line-height: 1; }
html body .topbar .nb-new:hover, html body .topbar .nb-new[aria-expanded="true"] { background: var(--sh-red-2) !important; }
html body .topbar .nb-new:focus-visible { outline: 2px solid #347be5; outline-offset: 2px; }

.nb-icon-btn { position: relative; display: grid; place-items: center; width: var(--nb-h); height: var(--nb-h); padding: 0; border: 1px solid var(--sh-border); border-radius: 10px; background: #fff; color: var(--sh-ink); font-size: 19px; text-decoration: none; }
.nb-icon-btn:hover { background: var(--sh-soft); color: var(--sh-ink); }
.nb-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid #fff; border-radius: 999px; background: var(--sh-red); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 14px; text-align: center; }

html body .topbar .user-box { height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; flex-shrink: 0; }
html body .topbar .nb-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--nb-h);
    padding: 0 10px 0 5px !important;
    border: 1px solid var(--sh-border);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
html body .topbar .nb-user:hover { background: var(--sh-soft); border-color: #cbd5e1; }
html body .topbar .nb-user .user-img {
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 8px;
    object-fit: cover;
    border: 0 !important;
    box-shadow: none;
    flex-shrink: 0;
}
.nb-user .user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    max-width: 160px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
}
html body .topbar .nb-user .user-name {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: var(--sh-ink);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.01em;
}
html body .topbar .nb-user .designattion {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: var(--sh-muted);
    font-size: 10.5px;
    line-height: 1.2;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.nb-user-caret { color: var(--sh-muted); font-size: 15px; flex-shrink: 0; margin-left: 1px; }

@media (max-width: 991.98px) {
    .nb-user .user-info { max-width: 120px; }
}
@media (max-width: 767.98px) {
    .nb-user .user-info { max-width: 95px; }
}
@media (max-width: 575.98px) {
    html body .topbar .nb-user { padding: 0 4px !important; gap: 0; }
    .nb-user .user-info, .nb-user-caret { display: none !important; }
}

/* Dropdown menus */
.nb-menu { padding: 6px !important; border: 1px solid var(--sh-border) !important; border-radius: 14px !important; box-shadow: 0 18px 40px -16px rgba(16, 29, 64, 0.35) !important; font-size: 12.5px; }
.nb-menu .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--sh-ink); font-size: 12.5px; }
.nb-menu .dropdown-item > i { color: var(--sh-muted); font-size: 17px; }
.nb-menu .dropdown-item:hover { background: var(--sh-soft); color: var(--sh-ink); }
.nb-menu-head { padding: 8px 10px 6px; color: var(--sh-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; }
.nb-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #ffe8ea; color: var(--sh-red-2); font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; }

.nb-quick-menu { width: 270px; }
.nb-quick-item span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.nb-quick-item strong { font-size: 12.5px; font-weight: 600; }
.nb-quick-item small { color: var(--sh-muted); font-size: 10.5px; }
.nb-quick-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; font-size: 18px; }
.nb-quick-icon.is-red { background: #ffe8ea; color: var(--sh-red-2); }
.nb-quick-icon.is-green { background: #e2f7ed; color: #07853f; }
.nb-quick-icon.is-blue { background: #e4f2ff; color: #1265c4; }
.nb-quick-icon.is-amber { background: #fff3db; color: #9a5d00; }

.nb-notif-menu { width: 360px; max-width: calc(100vw - 24px); }
.nb-notif-list { max-height: 380px; overflow-y: auto; }
.nb-notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--sh-ink); text-decoration: none; }
.nb-notif-item:hover { background: var(--sh-soft); color: var(--sh-ink); }
.nb-notif-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nb-notif-top { display: flex; justify-content: space-between; gap: 8px; }
.nb-notif-top strong { overflow: hidden; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.nb-notif-top small { flex-shrink: 0; color: var(--sh-muted); font-size: 10.5px; }
.nb-notif-desc { overflow: hidden; color: var(--sh-muted); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.nb-notif-body .badge { align-self: flex-start; font-size: 10px; }
.nb-empty { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 26px 10px; color: var(--sh-muted); text-align: center; }
.nb-empty i { margin-bottom: 4px; color: #0aab6b; font-size: 30px; }
.nb-empty strong { color: var(--sh-ink); font-size: 13px; }
.nb-empty small { font-size: 11.5px; }
.nb-menu-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; padding: 9px; border-top: 1px solid var(--sh-border); color: #1265c4; font-size: 12px; font-weight: 600; text-decoration: none; }
.nb-menu-foot:hover { color: var(--sh-red); }

.nb-profile-menu { width: 270px; }
.nb-profile-head { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; padding: 12px; border-radius: 10px; background: linear-gradient(135deg, var(--sh-navy-1), #2a1730 70%, var(--sh-red-2)); color: #fff; }
.nb-profile-head img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.4); }
.nb-profile-head > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.nb-profile-head strong { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.nb-profile-head small { overflow: hidden; color: rgba(255, 255, 255, 0.7); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.nb-profile-head .nb-pill { align-self: flex-start; margin-top: 4px; background: rgba(255, 255, 255, 0.18); color: #fff; }
.nb-menu .nb-logout, .nb-menu .nb-logout > i { color: var(--sh-red-2) !important; font-weight: 600; }
.nb-menu .nb-logout:hover { background: #ffeef0; }

@media (max-width: 575.98px) {
    .topbar .nb-bar { gap: 8px; padding: 0 10px !important; }
    html body .topbar .navbar-page-title { font-size: 14.5px; }
    .nb-actions { gap: 6px; }
    html body .topbar .nb-new { width: var(--nb-h); padding: 0 !important; }
    .topbar .nb-bar { --nb-h: 38px; }
}

/* Dark theme */
html.dark-theme { --sh-ink: #e3eaf7; --sh-muted: #a1afc5; --sh-border: #30405a; --sh-soft: #21314b; }
html.dark-theme :is(.nb-chip, .nb-icon-btn, .nb-search kbd, .nb-user), html.dark-theme body .topbar .mobile-toggle-menu { background: #19263b; }
html.dark-theme .topbar .nb-user:hover { background: #233450; }
html.dark-theme .nb-menu { background: #19263b; }
html.dark-theme .nb-badge { border-color: #19263b; }

/* ───────────── SIDEBAR PALETTE v2 (navy + red, refined) ───────────── */
html body #appSidebar {
    --sb-bg-1: #0d1838;
    --sb-bg-2: #0a1230;
    --sb-bg-3: #070d24;
    --sb-text: #d5ddee;
    --sb-text-dim: #8d9abb;
    --sb-hover: rgba(148, 170, 230, 0.08);
    background:
        radial-gradient(90% 40% at 0% 0%, rgba(239, 51, 64, 0.16), transparent 70%),
        radial-gradient(80% 35% at 100% 100%, rgba(59, 108, 255, 0.14), transparent 70%),
        linear-gradient(180deg, var(--sb-bg-1) 0%, var(--sb-bg-2) 55%, var(--sb-bg-3) 100%) !important;
}
html body #appSidebar .sidebar-header { background: rgba(255, 255, 255, 0.015) !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; }

/* Items */
html body #appSidebar #menu > li > a { color: var(--sb-text) !important; font-weight: 500 !important; letter-spacing: 0.1px; }
html body #appSidebar #menu > li > a:hover { background: var(--sb-hover) !important; color: #fff !important; }

/* Tinted icon chips (each item keeps its own hue) */
html body #appSidebar #menu > li > a .parent-icon { --tone: #7aa2ff; background: color-mix(in srgb, var(--tone) 14%, transparent) !important; color: var(--tone) !important; border-radius: 9px !important; }
html body #appSidebar #menu > li > a:hover .parent-icon { background: color-mix(in srgb, var(--tone) 24%, transparent) !important; color: color-mix(in srgb, var(--tone) 70%, #fff) !important; }
#appSidebar .parent-icon.tone-blue { --tone: #6ea8ff; }
#appSidebar .parent-icon.tone-violet { --tone: #b391ff; }
#appSidebar .parent-icon.tone-teal { --tone: #3fd3c3; }
#appSidebar .parent-icon.tone-amber { --tone: #fbbf4d; }
#appSidebar .parent-icon.tone-sky { --tone: #5ec8ff; }
#appSidebar .parent-icon.tone-green { --tone: #4ade80; }
#appSidebar .parent-icon.tone-orange { --tone: #fb9a5b; }
#appSidebar .parent-icon.tone-indigo { --tone: #8b9cff; }
#appSidebar .parent-icon.tone-cyan { --tone: #38d6ee; }
#appSidebar .parent-icon.tone-pink { --tone: #f78fcf; }
#appSidebar .parent-icon.tone-emerald { --tone: #34d399; }
#appSidebar .parent-icon.tone-slate { --tone: #a9b6d3; }
#appSidebar .parent-icon.tone-rose { --tone: #ff7a85; }

/* Active page: solid brand-red pill */
html body #appSidebar #menu > li.mm-active > a:not(.has-arrow) {
    background: linear-gradient(135deg, #f0414d 0%, #d61f2c 100%) !important;
    color: #fff !important; font-weight: 600 !important;
    box-shadow: 0 10px 22px -12px rgba(239, 51, 64, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
html body #appSidebar #menu > li.mm-active > a:not(.has-arrow) .parent-icon { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; box-shadow: none !important; }

/* Open group (has children): soft surface, red icon */
html body #appSidebar #menu > li.mm-active > a.has-arrow { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; font-weight: 600 !important; box-shadow: none !important; }
html body #appSidebar #menu > li.mm-active > a.has-arrow .parent-icon { background: linear-gradient(135deg, #f0414d, #d61f2c) !important; color: #fff !important; box-shadow: 0 6px 14px -8px rgba(239, 51, 64, 0.9) !important; }
html body #appSidebar #menu .has-arrow:after { border-color: var(--sb-text-dim) !important; }
html body #appSidebar #menu li.mm-active > .has-arrow:after, html body #appSidebar #menu .has-arrow:hover:after { border-color: #fff !important; }

/* Children */
html body #appSidebar #menu ul { margin: 3px 10px 6px 14px !important; padding: 4px !important; border-radius: 10px !important; background: rgba(0, 0, 0, 0.16) !important; }
html body #appSidebar #menu ul li a { color: var(--sb-text-dim) !important; }
html body #appSidebar #menu ul li a:hover { color: #fff !important; background: var(--sb-hover) !important; }
html body #appSidebar #menu ul li.mm-active > a { color: #fff !important; background: rgba(239, 51, 64, 0.16) !important; }
html body #appSidebar #menu ul li.mm-active > a i { color: #ff7a85 !important; }

/* Tools + footer */
html body #appSidebar .sb-search { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.08); }
html body #appSidebar .sb-footer { background: rgba(0, 0, 0, 0.22) !important; border-top-color: rgba(255, 255, 255, 0.06) !important; }
html body #appSidebar .sb-user { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); }
html body #appSidebar .sb-user-avatar { background: linear-gradient(135deg, #f0414d, #8b1d3a); }

/* ───────── Global corner radius: one token, 4px everywhere (circles stay circles) ───────── */
:root { --rntd-radius: 4px; }
html body .topbar :is(.nb-search input, .nb-search kbd, .nb-chip, .nb-new, .nb-icon-btn, .nb-user, .nb-user .user-img, .mobile-toggle-menu),
html body :is(.nb-menu, .nb-menu .dropdown-item, .nb-quick-icon, .nb-profile-head, .nb-profile-head img, .nb-notif-item, .nb-pill),
html body #appSidebar :is(.logo-badge, .sidebar-toggle-btn, .mobile-sidebar-close-btn, .sb-cta, .sb-search, .sb-search kbd, .sb-user, .sb-logout),
html body #appSidebar #menu :is(a, ul, .parent-icon),
html body .student-directory-page :is(.sd-toolbar, .sd-results, .sd-stat, .sd-stat-icon, .sd-stat-badge, .sd-button, .sd-sync, .sd-sync-main, .sd-sync-toggle, .sd-sync-icon, .sd-sync-menu,
    .sd-tabs, .sd-tab, .sd-tab span, .sd-count, .sd-search input, .sd-select select, .sd-apply, .sd-search-clear, .sd-view-switch, .sd-view-switch button, .sd-chip, .sd-empty,
    .sa-card, .sa-status, .sa-icon-button, .sa-chip, .sa-foot a, .student-table-card, .sl-class, .sl-fee-btn, .page-link, .dropdown-menu),
html body .student-directory-page .sd-toolbar .sd-summary,
html body .student-directory-page .sd-results-body .sd-pagination,
html body .perm-page :is(.perm-toolbar, .perm-card, .perm-btn, .perm-search input, .perm-filters select, .perm-title-icon, .perm-avatar, .perm-menu-btn, .user-badge-role, .perm-checkbox, .page-link) {
    border-radius: var(--rntd-radius) !important;
}

/* Radius scale (real-world): 6px for controls, 10px for cards/panels */
:root { --rntd-radius: 6px; --rntd-radius-lg: 10px; }
html body .student-directory-page :is(.sd-toolbar, .sd-results, .sa-card, .student-table-card, .sd-empty),
html body .perm-page :is(.perm-toolbar, .perm-card),
html body :is(.nb-menu, .nb-profile-head),
html body #appSidebar .sb-user {
    border-radius: var(--rntd-radius-lg) !important;
}
html body .student-directory-page .sd-toolbar .sd-summary { border-radius: var(--rntd-radius-lg) var(--rntd-radius-lg) 0 0 !important; }
html body .student-directory-page .sd-results-body .sd-pagination { border-radius: 0 0 var(--rntd-radius-lg) var(--rntd-radius-lg) !important; }

/* One focus ring for every input in the app: 2px */
html body :is(.form-control, .form-select, .form-check-input):focus { box-shadow: 0 0 0 2px rgba(52, 123, 229, 0.2) !important; }


/* ===== STUDENT-DIRECTORY ===== */
.student-directory-page {
    --sd-navy: #0b1739;
    --sd-red: var(--erp-red, #ef233c);
    --sd-ink: #101d40;
    --sd-muted: #65769a;
    --sd-border: #e3eaf6;
    --sd-surface: #fff;
    --sd-soft: #f4f7fd;
    color: var(--sd-ink);
}
.student-directory-page .sd-content { padding: 16px; background: linear-gradient(135deg, #f8faff, #f2f6fc); min-height: 100%; }
.student-directory-page .sd-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 37px; padding: 0 12px; border: 1px solid transparent; border-radius: 7px; font: inherit; font-size: 11px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.student-directory-page .sd-button i { font-size: 17px; }
.student-directory-page .sd-button-red { background: var(--sd-red); color: #fff; }
.student-directory-page .sd-button-red:hover { background: #c81730; color: #fff; }
.student-directory-page .sd-button-navy { background: var(--sd-navy); color: #fff; }
.student-directory-page .sd-button-navy:hover { background: #25365c; color: #fff; }
.student-directory-page .sd-button-glass { background: var(--sd-surface); color: var(--sd-ink); border-color: var(--sd-border); }
.student-directory-page .sd-button-glass:hover { background: var(--sd-soft); }
.student-directory-page .sd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.student-directory-page .sa-card { display: flex; flex-direction: column; min-width: 0; background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: 12px; box-shadow: 0 3px 12px #17335a04; transition: box-shadow .15s, border-color .15s; }
.student-directory-page .sa-card:hover { border-color: #c9d8ee; box-shadow: 0 6px 18px #17335a0b; }
.student-directory-page .sa-card:focus-within { position: relative; z-index: 2; }
.student-directory-page .sa-head { display: flex; align-items: center; gap: 10px; padding: 14px; }
.student-directory-page .sa-avatar { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; background: linear-gradient(145deg, #dcecff, #eee4fa); color: #435c95; font-size: 19px; font-weight: 700; overflow: hidden; text-decoration: none; }
.student-directory-page .sa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.student-directory-page .sa-heading { flex: 1; min-width: 0; }
.student-directory-page .sa-heading h3 { font-size: 14px; font-weight: 700; line-height: 1.4; margin: 0 0 4px; overflow-wrap: anywhere; }
.student-directory-page .sa-heading h3 a { color: var(--sd-ink); text-decoration: none; }
.student-directory-page .sa-heading h3 a:hover { color: var(--sd-red); }
.student-directory-page .sd-code { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; overflow-wrap: anywhere; background: transparent; border: 0; padding: 0; color: var(--sd-muted); font-size: 10px; text-align: left; }
.student-directory-page .sa-status { align-self: flex-start; display: inline-flex; padding: 4px 9px; border-radius: 7px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.student-directory-page .sa-status.is-active { background: #dcf7e9; color: #07853f; }
.student-directory-page .sa-status.is-inactive { background: #ffe7ef; color: #c62551; }
.student-directory-page .sa-head .dropdown { align-self: flex-start; }
.student-directory-page .sa-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 30px; padding: 0; border-radius: 7px; border: 1px solid var(--sd-border); background: var(--sd-surface); color: var(--sd-muted); font-size: 18px; text-decoration: none; cursor: pointer; flex-shrink: 0; }
.student-directory-page .sa-icon-button:hover { background: var(--sd-soft); border-color: #bdcfe9; }
.student-directory-page .sa-body { display: flex; flex-direction: column; gap: 16px; flex: 1; padding: 0 14px 12px; }
.student-directory-page .sa-academics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.student-directory-page .sa-academic-item { display: flex; align-items: center; gap: 9px; min-width: 0; }
.student-directory-page .sa-academic-item > div { min-width: 0; }
.student-directory-page .sa-detail-icon { display: grid; place-items: center; width: 32px; height: 34px; flex: 0 0 32px; border-radius: 9px; background: var(--sd-soft); color: var(--sd-ink); font-size: 19px; }
.student-directory-page .sa-detail-icon.is-purple { color: #8538e9; background: #f5edff; }
.student-directory-page .sa-detail-icon.is-blue { color: #1188ef; background: #eaf5ff; }
.student-directory-page .sa-academic-item strong, .student-directory-page .sa-guardian-info strong { display: block; color: var(--sd-ink); font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
.student-directory-page .sa-academic-item small, .student-directory-page .sa-guardian-info :is(small, a) { display: block; color: var(--sd-muted); font-size: 10px; margin-top: 3px; text-decoration: none; }
.student-directory-page .sa-guardian { display: flex; align-items: center; gap: 9px; }
.student-directory-page .sa-guardian-info { flex: 1; min-width: 0; }
.student-directory-page .sa-contact-actions { display: flex; gap: 7px; }
.student-directory-page .sa-contact-actions .sa-icon-button { width: 32px; height: 32px; border-radius: 50%; }
.student-directory-page .sa-call { color: #3e83d9; }
.student-directory-page .sa-whatsapp { color: #07a54b; }
.student-directory-page .sa-fee-progress { --fee-color: #20b978; margin-top: auto; }
.student-directory-page .sa-fee-progress.is-partial { --fee-color: #d99000; }
.student-directory-page .sa-fee-progress.is-due { --fee-color: #f02742; }
.student-directory-page .sa-fee-progress.is-unbilled { --fee-color: #7283a0; }
.student-directory-page .sa-fee-line { display: flex; align-items: center; gap: 9px; }
.student-directory-page .sa-fee-label { display: inline-flex; align-items: center; gap: 7px; color: var(--fee-color); font-size: 11px; font-weight: 600; white-space: nowrap; }
.student-directory-page .sa-fee-label i { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--fee-color); color: #fff; font-size: 15px; }
.student-directory-page .sa-progress-track { flex: 1; min-width: 24px; height: 7px; border-radius: 8px; background: #eaf0fa; overflow: hidden; }
.student-directory-page .sa-progress-track > span { display: block; height: 100%; background: var(--fee-color); border-radius: inherit; }
.student-directory-page .sa-progress-value { min-width: 30px; color: var(--sd-ink); font-size: 10px; font-weight: 600; text-align: right; }
.student-directory-page .sa-fee-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; margin-top: 7px; color: var(--sd-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.student-directory-page .sa-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px 13px; }
.student-directory-page .sa-foot a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 6px; border-radius: 7px; font-size: 11px; font-weight: 600; text-decoration: none; }
.student-directory-page .sa-foot i { font-size: 17px; }
.student-directory-page .sa-profile { background: var(--sd-soft); border: 1px solid var(--sd-border); color: var(--sd-ink); }
.student-directory-page .sa-profile:hover { background: var(--sd-border); }
.student-directory-page .sa-fee-link { background: var(--sd-red); color: #fff; }
.student-directory-page .sa-fee-link:hover { background: #c81730; color: #fff; }
.student-directory-page .sd-empty { grid-column: 1 / -1; padding: 45px 20px; text-align: center; border: 1px dashed var(--sd-border); background: var(--sd-surface); border-radius: 12px; }
.student-directory-page .sd-empty > span { display: block; color: var(--sd-muted); font-size: 36px; margin-bottom: 10px; }
.student-directory-page .sd-empty h3 { font-size: 18px; color: var(--sd-ink); }
.student-directory-page .sd-empty p { color: var(--sd-muted); font-size: 12px; }
.student-directory-page .sd-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; color: var(--sd-muted); font-size: 11px; }
.student-directory-page .sd-pagination .pagination { margin-bottom: 0; gap: 4px; }
.student-directory-page .sd-pagination .page-link { border-radius: 6px; font-size: 11px; }
.student-directory-page .student-table-card { background: var(--sd-surface); border: 1px solid var(--sd-border) !important; border-radius: 12px; box-shadow: 0 1px 2px #1723390a !important; overflow: hidden; }
.student-directory-page .sl-table { min-width: 1040px; color: var(--sd-ink); }
.student-directory-page .sl-table th { position: sticky; top: 0; z-index: 1; background: var(--sd-soft) !important; color: var(--sd-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; padding: 12px 14px !important; white-space: nowrap; border-bottom: 1px solid var(--sd-border) !important; }
.student-directory-page .sl-table td { padding: 12px 14px !important; border-color: var(--sd-border) !important; background: var(--sd-surface); font-size: 12px; }
.student-directory-page .sl-table tbody tr { transition: background-color .15s; }
.student-directory-page .sl-table tbody tr:hover td { background: var(--sd-soft); }
.student-directory-page .sl-table tbody tr td:first-child { box-shadow: inset 3px 0 0 transparent; }
.student-directory-page .sl-table tbody tr.is-active:hover td:first-child { box-shadow: inset 3px 0 0 #0aab6b; }
.student-directory-page .sl-table tbody tr.is-inactive:hover td:first-child { box-shadow: inset 3px 0 0 #ee3569; }
.student-directory-page .sl-col-no { width: 52px; text-align: center; color: var(--sd-muted); font-size: 11px !important; font-variant-numeric: tabular-nums; }
.student-directory-page .sl-col-fee { min-width: 230px; }
.student-directory-page .sl-student { display: flex; align-items: center; gap: 11px; min-width: 0; }
.student-directory-page .sl-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: linear-gradient(145deg, #dcecff, #eee4fa); color: #435c95; font-size: 13px; font-weight: 700; overflow: hidden; text-decoration: none; }
.student-directory-page .sl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.student-directory-page .sl-student-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.student-directory-page .sl-name { color: var(--sd-ink); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.student-directory-page .sl-name:hover { color: var(--sd-red); }
.student-directory-page .sl-class { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: #f0e8ff; color: #6d2fc4; font-size: 11px; font-weight: 600; white-space: nowrap; }
.student-directory-page .sl-sub { display: block; margin-top: 3px; color: var(--sd-muted); font-size: 10.5px; text-decoration: none; }
.student-directory-page .sl-phone { font-variant-numeric: tabular-nums; }
.student-directory-page .sl-phone:hover { color: #3e83d9; }
.student-directory-page .sl-guardian { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 190px; }
.student-directory-page .sl-guardian-info { min-width: 0; }
.student-directory-page .sl-guardian-name { display: block; font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.student-directory-page .sl-guardian .sa-icon-button { width: 30px; height: 30px; border-radius: 50%; font-size: 16px; }
.student-directory-page .sl-actions { display: inline-flex; align-items: center; gap: 6px; }
.student-directory-page .sl-actions .sa-icon-button { width: 32px; height: 32px; }
.student-directory-page .sl-fee-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 7px; background: var(--sd-navy); color: #fff; font-size: 11px; font-weight: 600; text-decoration: none; }
.student-directory-page .sl-fee-btn:hover { background: #25365c; color: #fff; }
.student-directory-page .sl-fee-btn i { font-size: 15px; }
.student-directory-page .sl-empty { padding: 44px 16px !important; text-align: center; color: var(--sd-muted); }
.student-directory-page .sl-empty i { display: block; font-size: 34px; margin-bottom: 6px; }
.student-directory-page .sl-empty strong { display: block; color: var(--sd-ink); font-size: 13px; }
/* Sync split button */
.student-directory-page .sd-sync { display: inline-flex; align-items: stretch; border: 1px solid var(--sd-border); border-radius: 8px; background: var(--sd-surface); }
.student-directory-page .sd-sync-main { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 6px; min-height: 37px; border: 0; background: transparent; color: var(--sd-ink); border-radius: 8px; text-align: left; cursor: pointer; }
.student-directory-page .sd-sync-main:hover:not(:disabled) { background: var(--sd-soft); }
.student-directory-page .sd-sync-main:disabled { cursor: not-allowed; opacity: .7; }
.student-directory-page .sd-sync-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: #e4f2ff; color: #1685f8; font-size: 17px; }
.student-directory-page .sd-sync-text { display: flex; flex-direction: column; line-height: 1.15; }
.student-directory-page .sd-sync-text strong { font-size: 11px; font-weight: 600; white-space: nowrap; }
.student-directory-page .sd-sync-text small { display: inline-flex; align-items: center; gap: 4px; color: var(--sd-muted); font-size: 9.5px; white-space: nowrap; }
.student-directory-page .sd-sync-dot { width: 6px; height: 6px; border-radius: 50%; background: #0aab6b; }
.student-directory-page .sd-sync-main.is-syncing .sd-sync-icon i { animation: sd-spin .9s linear infinite; }
.student-directory-page .sd-sync-toggle { display: grid; place-items: center; width: 28px; height: 100%; border: 0; border-left: 1px solid var(--sd-border); background: transparent; color: var(--sd-muted); border-radius: 0 8px 8px 0; font-size: 18px; }
.student-directory-page .sd-sync-toggle:hover { background: var(--sd-soft); color: var(--sd-ink); }
.student-directory-page .sd-sync .dropdown { display: flex; }
.student-directory-page .sd-sync-menu { min-width: 240px; padding: 6px; border: 1px solid var(--sd-border); border-radius: 10px; font-size: 12px; }
.student-directory-page .sd-sync-menu .dropdown-item { border-radius: 6px; padding: 7px 10px; }
.student-directory-page .sd-sync-summary { padding: 6px 10px 8px; }
.student-directory-page .sd-sync-summary > span { display: block; color: var(--sd-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.student-directory-page .sd-sync-summary > strong { display: block; color: var(--sd-ink); font-size: 12px; }
.student-directory-page .sd-sync-summary > small { color: var(--sd-muted); font-size: 10.5px; }
.student-directory-page .sd-sync-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.student-directory-page .sd-sync-counts span { display: flex; flex-direction: column; align-items: center; padding: 5px 4px; border-radius: 6px; background: var(--sd-soft); color: var(--sd-muted); font-size: 9.5px; }
.student-directory-page .sd-sync-counts b { color: var(--sd-ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.student-directory-page .sd-sync-counts .is-added b { color: #0aab6b; }
.student-directory-page .sd-sync-counts .is-updated b { color: #1685f8; }
@keyframes sd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .student-directory-page .sd-sync-main.is-syncing .sd-sync-icon i { animation: none; } }
.student-directory-page .student-table-card .text-muted { color: var(--sd-muted) !important; }
.student-avatar-box { display: inline-flex; align-items: center; justify-content: center; background: #eef1f8; color: #35496c; overflow: hidden; font-weight: 600; flex-shrink: 0; }
.student-avatar-img { width: 100%; height: 100%; object-fit: cover; }
#quickStudentModal .student-avatar-box { border-radius: 18px; }
.student-directory-page :is(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid #347be5; outline-offset: 3px; }
html.dark-theme .student-directory-page { --sd-ink: #e3eaf7; --sd-muted: #a1afc5; --sd-border: #30405a; --sd-surface: #19263b; --sd-soft: #21314b; }
html.dark-theme .student-directory-page .sd-content { background: #111c30; }
html.dark-theme .student-directory-page :is(.sa-detail-icon.is-purple, .sa-detail-icon.is-blue) { background: #293b57; color: #bfcfff; }
html.dark-theme .student-directory-page .sa-status.is-active { background: #173c35; color: #8bd8b2; }
html.dark-theme .student-directory-page .sa-status.is-inactive { background: #412a3d; color: #ffaaa3; }
html.dark-theme .student-directory-page .sa-progress-track { background: #30405a; }
html.dark-theme .student-directory-page .student-table-card :is(td, tbody) { background: var(--sd-surface); color: var(--sd-ink); }
html.dark-theme .student-directory-page :is(.sl-class, .sl-avatar) { background: #293b57; color: #bfcfff; }
html.dark-theme .student-directory-page .sd-sync-icon { background: #21314b; color: #8cc4ff; }
html.dark-theme .student-directory-page .student-table-card .text-dark { color: var(--sd-ink) !important; }
@media (max-width: 1399.98px) {
    .student-directory-page .sa-head { gap: 7px; }
    .student-directory-page .sa-avatar { width: 44px; height: 44px; flex-basis: 44px; font-size: 16px; }
    .student-directory-page .sa-status { padding-inline: 6px; }
}
@media (max-width: 1199.98px) {
    .student-directory-page .sd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .student-directory-page .sd-content { padding: 12px 10px; }
    .student-directory-page .sd-sync { flex: 1 1 100%; }
    .student-directory-page .sd-sync-main { flex: 1; }
    .student-directory-page .sd-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .student-directory-page .sa-head { gap: 10px; }
    .student-directory-page .sa-heading h3 { font-size: 15px; }
    .student-directory-page .sd-pagination { justify-content: center; }
    .student-directory-page .student-table-card { border: 0 !important; background: transparent; overflow: visible; }
    .student-directory-page .student-table-card .table-responsive { overflow: visible; }
    .student-directory-page .student-table-card table { display: block; min-width: 0; }
    .student-directory-page .student-table-card thead { display: none; }
    .student-directory-page .student-table-card tbody { display: grid; gap: 12px; background: transparent !important; }
    .student-directory-page .student-table-card tr { display: block; padding: 8px 12px; border: 1px solid var(--sd-border); border-radius: 12px; background: var(--sd-surface); }
    .student-directory-page .student-table-card td { display: block; padding: 9px 0 !important; min-width: 0 !important; background: transparent; border-bottom: 1px solid var(--sd-border); text-align: left !important; }
    .student-directory-page .student-table-card td[data-label] { display: grid; grid-template-columns: 85px minmax(0, 1fr); gap: 5px 8px; align-items: center; }
    .student-directory-page .student-table-card td[data-label]::before { content: attr(data-label); color: var(--sd-muted); font-size: 10px; font-weight: 600; }
    .student-directory-page .student-table-card td[data-label='No.'] { display: none; }
    .student-directory-page .student-table-card td[data-label='Class / session'] > small { grid-column: 2; }
    .student-directory-page .student-table-card td:last-child { border: 0; }
    .student-directory-page .student-table-card td[data-label='Actions'] > div { flex-wrap: wrap; justify-content: flex-start; }
    .student-directory-page .student-table-card td[data-label='Student'] { display: block; }
    .student-directory-page .student-table-card td[data-label='Student']::before { content: none; }
    .student-directory-page .sl-guardian { min-width: 0; }
    .student-directory-page .student-table-card .sa-fee-line { flex-wrap: wrap; }
    .student-directory-page .student-table-card .sa-fee-label { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .student-directory-page * { transition: none !important; }
}
/* KPI cards */
.student-directory-page .sd-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.student-directory-page .sd-stat { --stat-color: #1685f8; --stat-tint: #e4f2ff; display: flex; align-items: center; gap: 8px; min-width: 0; height: 46px; padding: 0 10px 0 7px; border: 1px solid var(--sd-border); border-left: 3px solid var(--stat-color); border-radius: 10px; background: var(--sd-surface); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.student-directory-page .sd-stat-green { --stat-color: #0aab6b; --stat-tint: #e2f7ed; }
.student-directory-page .sd-stat-purple { --stat-color: #8b43ec; --stat-tint: #f0e8ff; }
.student-directory-page .sd-stat-amber { --stat-color: #de8b00; --stat-tint: #fff3db; }
.student-directory-page .sd-stat-pink { --stat-color: #ee3569; --stat-tint: #ffe8ef; }
.student-directory-page .sd-stat-cyan { --stat-color: #008ecb; --stat-tint: #e2f5ff; }
.student-directory-page a.sd-stat:hover { box-shadow: 0 6px 14px -10px var(--stat-color); border-color: color-mix(in srgb, var(--stat-color) 40%, var(--sd-border)); border-left-color: var(--stat-color); }
.student-directory-page .sd-stat-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; color: var(--stat-color); background: var(--stat-tint); font-size: 16px; }
.student-directory-page .sd-stat-num { color: var(--sd-ink); font-size: 17px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.student-directory-page .sd-stat-label { flex: 1; min-width: 0; overflow: hidden; color: var(--sd-muted); font-size: 11.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.student-directory-page .sd-stat-badge { flex-shrink: 0; padding: 1px 6px; border-radius: 999px; background: var(--stat-tint); color: var(--stat-color); font-size: 10px; font-weight: 600; white-space: nowrap; }

/* Directory toolbar */
.student-directory-page .sd-toolbar { margin-bottom: 12px; background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: 12px; }
.student-directory-page .sd-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; }
.student-directory-page .sd-toolbar-filters { border-top: 1px solid var(--sd-border); background: var(--sd-soft); border-radius: 0 0 12px 12px; }
.student-directory-page .sd-toolbar-title { display: flex; align-items: center; gap: 8px; }
.student-directory-page .sd-toolbar-title h2 { margin: 0; color: var(--sd-ink); font-size: 15px; font-weight: 700; }
.student-directory-page .sd-count { padding: 2px 8px; border-radius: 999px; background: #eef3fc; color: var(--sd-ink); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.student-directory-page .sd-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--sd-soft); border: 1px solid var(--sd-border); }
.student-directory-page .sd-tab { display: inline-flex; align-items: center; gap: 6px; height: 29px; padding: 0 11px; border-radius: 7px; color: var(--sd-muted); font-size: 11.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.student-directory-page .sd-tab:hover { color: var(--sd-ink); }
.student-directory-page .sd-tab span { padding: 0 6px; border-radius: 999px; background: #e3eaf6; color: var(--sd-ink); font-size: 10px; line-height: 17px; font-variant-numeric: tabular-nums; }
.student-directory-page .sd-tab.is-selected { background: var(--sd-surface); color: var(--sd-ink); box-shadow: 0 1px 3px #1723391f; }
.student-directory-page .sd-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: #0aab6b; }
.student-directory-page .sd-tab.is-inactive .sd-tab-dot { background: #ee3569; }
.student-directory-page .sd-tab.is-active.is-selected span { background: #e2f7ed; color: #07853f; }
.student-directory-page .sd-tab.is-inactive.is-selected span { background: #ffe8ef; color: #c62551; }
.student-directory-page .sd-directory-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.student-directory-page .sd-button-red { box-shadow: 0 4px 12px -6px var(--sd-red); }

.student-directory-page .sd-filters { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.student-directory-page .sd-search { position: relative; flex: 1 1 260px; min-width: 0; max-width: 460px; }
.student-directory-page :is(.sd-search, .sd-select) > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--sd-muted); font-size: 17px; pointer-events: none; }
.student-directory-page .sd-select { position: relative; }
.student-directory-page .sd-search input, .student-directory-page .sd-select select { height: 37px; border: 1px solid var(--sd-border); border-radius: 8px; background: var(--sd-surface); color: var(--sd-ink); font: inherit; font-size: 12px; }
.student-directory-page .sd-search input { width: 100%; padding: 0 10px 0 34px; }
.student-directory-page .sd-search input::placeholder { color: var(--sd-muted); opacity: 1; }
.student-directory-page .sd-select select { width: 170px; padding: 0 10px 0 33px; }
.student-directory-page :is(.sd-search input, .sd-select select):focus { outline: 0; border-color: #8fb5ef; box-shadow: 0 0 0 2px #347be522; }
.student-directory-page .sd-reset { display: inline-flex; align-items: center; gap: 3px; height: 37px; padding: 0 8px; color: var(--sd-muted); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.student-directory-page .sd-reset:hover { color: var(--sd-red); }
.student-directory-page .sd-reset i { font-size: 17px; }
.student-directory-page .sd-view-switch { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 9px; background: #e8eef8; }
.student-directory-page .sd-view-switch button { display: inline-flex; align-items: center; gap: 5px; height: 31px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--sd-muted); font-size: 11.5px; font-weight: 600; }
.student-directory-page .sd-view-switch button:hover { color: var(--sd-ink); }
.student-directory-page .sd-view-switch button.active { background: var(--sd-surface); color: var(--sd-ink); box-shadow: 0 1px 3px #1723391f; }
.student-directory-page .sd-view-switch i { font-size: 16px; }

html.dark-theme .student-directory-page :is(.sd-count, .sd-tab span) { background: #2a3b57; color: var(--sd-ink); }
html.dark-theme .student-directory-page .sd-view-switch { background: #21314b; }
html.dark-theme .student-directory-page .sd-stat-icon { background: var(--sd-soft); }

@media (max-width: 1199.98px) {
    .student-directory-page .sd-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .student-directory-page .sd-directory-actions { width: 100%; margin-left: 0; }
}
@media (max-width: 767.98px) {
    .student-directory-page .sd-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .student-directory-page .sd-stat-num { font-size: 15px; }
    .student-directory-page .sd-stat { height: 42px; }
    .student-directory-page .sd-tabs { width: 100%; }
    .student-directory-page .sd-tab { flex: 1; justify-content: center; padding: 0 6px; }
    .student-directory-page .sd-directory-actions > * { flex: 1 1 auto; }
    .student-directory-page .sd-sync { flex: 1 1 100%; }
    .student-directory-page .sd-sync-main { flex: 1; }
    .student-directory-page .sd-search { flex-basis: 100%; max-width: none; }
    .student-directory-page .sd-select { flex: 1; }
    .student-directory-page .sd-select select { width: 100%; }
    .student-directory-page .sd-view-switch { margin-left: 0; }
}

/* Unified header card: KPI strip + title/actions + filters, compact controls */
.student-directory-page .sd-toolbar .sd-summary { gap: 0; margin: 0; border-bottom: 1px solid var(--sd-border); border-radius: 12px 12px 0 0; overflow: hidden; background: linear-gradient(180deg, #fbfcff, var(--sd-surface)); }
.student-directory-page .sd-toolbar .sd-stat { height: 44px; padding: 0 12px; border: 0; border-right: 1px solid var(--sd-border); border-radius: 0; background: transparent; box-shadow: none; }
.student-directory-page .sd-toolbar .sd-stat:last-child { border-right: 0; }
.student-directory-page .sd-toolbar a.sd-stat:hover { background: var(--sd-soft); box-shadow: none; border-color: var(--sd-border); }
.student-directory-page .sd-toolbar .sd-stat-icon { width: 24px; height: 24px; flex-basis: 24px; border-radius: 7px; font-size: 14px; }
.student-directory-page .sd-toolbar .sd-stat-num { font-size: 15px; }
.student-directory-page .sd-toolbar .sd-stat-label { font-size: 11px; }
.student-directory-page .sd-toolbar-row { gap: 8px 12px; padding: 8px 12px; }
.student-directory-page .sd-toolbar-filters { border-radius: 0; }
.student-directory-page .sd-toolbar-title h2 { font-size: 14px; }
.student-directory-page .sd-toolbar .sd-tabs { padding: 2px; border-radius: 8px; }
.student-directory-page .sd-toolbar .sd-tab { height: 26px; padding: 0 9px; border-radius: 6px; font-size: 11px; }
.student-directory-page .sd-toolbar .sd-button { min-height: 32px; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 11.5px; gap: 5px; }
.student-directory-page .sd-toolbar .sd-button i { font-size: 15px; }
.student-directory-page .sd-toolbar .sd-button-red { box-shadow: none; }
.student-directory-page .sd-toolbar .sd-sync { border-radius: 8px; }
.student-directory-page .sd-toolbar .sd-sync-main { min-height: 32px; height: 32px; padding: 0 10px 0 4px; gap: 6px; }
.student-directory-page .sd-toolbar .sd-sync-icon { width: 24px; height: 24px; font-size: 15px; border-radius: 6px; }
.student-directory-page .sd-toolbar .sd-sync-text strong { font-size: 11px; }
.student-directory-page .sd-toolbar .sd-sync-text small { font-size: 9px; }
.student-directory-page .sd-toolbar .sd-sync-toggle { width: 26px; font-size: 16px; }
.student-directory-page .sd-toolbar .sd-search input, .student-directory-page .sd-toolbar .sd-select select { height: 32px; border-radius: 8px; font-size: 11.5px; }
.student-directory-page .sd-toolbar :is(.sd-search, .sd-select) > i { font-size: 15px; }
.student-directory-page .sd-toolbar .sd-search input { padding-left: 32px; }
.student-directory-page .sd-toolbar .sd-select select { width: 160px; padding-left: 30px; }
.student-directory-page .sd-toolbar .sd-reset { height: 32px; }
.student-directory-page .sd-toolbar .sd-view-switch { padding: 2px; border-radius: 8px; }
.student-directory-page .sd-toolbar .sd-view-switch button { height: 26px; padding: 0 9px; border-radius: 6px; font-size: 11px; }
.student-directory-page .sd-toolbar .sd-view-switch i { font-size: 14px; }
@media (max-width: 1199.98px) {
    .student-directory-page .sd-toolbar .sd-stat:nth-child(3n) { border-right: 0; }
    .student-directory-page .sd-toolbar .sd-stat:nth-child(-n+3) { border-bottom: 1px solid var(--sd-border); }
}
@media (max-width: 767.98px) {
    .student-directory-page .sd-toolbar .sd-stat { height: 40px; border-right: 1px solid var(--sd-border) !important; border-bottom: 1px solid var(--sd-border); }
    .student-directory-page .sd-toolbar .sd-stat:nth-child(2n) { border-right: 0 !important; }
    .student-directory-page .sd-toolbar .sd-stat:nth-last-child(-n+2) { border-bottom: 0; }
    .student-directory-page .sd-toolbar .sd-select select { width: 100%; }
}
html.dark-theme .student-directory-page .sd-toolbar .sd-summary { background: var(--sd-surface); }

/* Results card: filter bar + records + pagination */
.student-directory-page .sd-results { background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 29, 64, 0.04); }
.student-directory-page .sd-results-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--sd-border); }
.student-directory-page .sd-results .sd-filters { flex: 1; gap: 8px; }
.student-directory-page .sd-results .sd-search { flex: 1 1 320px; max-width: 520px; }
.student-directory-page .sd-results .sd-search input { height: 38px; padding: 0 36px 0 38px; border-radius: 10px; background: var(--sd-soft); font-size: 12.5px; transition: background .15s, border-color .15s, box-shadow .15s; }
.student-directory-page .sd-results .sd-search input:hover { border-color: #cdd9ec; }
.student-directory-page .sd-results .sd-search input:focus { background: var(--sd-surface); }
.student-directory-page .sd-results .sd-search input::-webkit-search-cancel-button { display: none; }
.student-directory-page .sd-results .sd-search > i { left: 13px; font-size: 18px; }
.student-directory-page .sd-search-clear { position: absolute; right: 8px; top: 50%; display: grid; place-items: center; width: 24px; height: 24px; transform: translateY(-50%); border-radius: 6px; color: var(--sd-muted); font-size: 17px; text-decoration: none; }
.student-directory-page .sd-search-clear:hover { background: #e6ecf6; color: var(--sd-red); }
.student-directory-page .sd-results .sd-select select { width: 180px; height: 38px; padding: 0 30px 0 34px; border-radius: 10px; background-color: var(--sd-surface); font-size: 12.5px; cursor: pointer; }
.student-directory-page .sd-results .sd-select > i { color: #8b43ec; }
.student-directory-page .sd-apply { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--sd-navy); color: #fff; font-size: 12.5px; font-weight: 600; }
.student-directory-page .sd-apply:hover { background: #25365c; }
.student-directory-page .sd-apply i { font-size: 16px; }
.student-directory-page .sd-results .sd-view-switch { margin-left: auto; padding: 3px; border-radius: 10px; }
.student-directory-page .sd-results .sd-view-switch button { height: 32px; padding: 0 11px; border-radius: 8px; font-size: 12px; }

.student-directory-page .sd-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--sd-border); background: #fbfcff; }
.student-directory-page .sd-active-label { margin-right: 2px; color: var(--sd-muted); font-size: 11px; font-weight: 600; }
.student-directory-page .sd-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 6px 0 9px; border: 1px solid #d6e3f8; border-radius: 999px; background: #eef5ff; color: #1d4f99; font-size: 11.5px; font-weight: 600; text-decoration: none; }
.student-directory-page .sd-chip > i:first-child { font-size: 13px; }
.student-directory-page .sd-chip-x { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 13px; }
.student-directory-page .sd-chip:hover { border-color: #f5b3b9; background: #fff1f2; color: var(--sd-red); }
.student-directory-page .sd-chip:hover .sd-chip-x { background: var(--sd-red); color: #fff; }
.student-directory-page .sd-clear-all { margin-left: 4px; color: var(--sd-muted); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.student-directory-page .sd-clear-all:hover { color: var(--sd-red); text-decoration: underline; }

.student-directory-page .sd-results-body { padding: 14px; }
.student-directory-page .sd-results-body .sa-card { box-shadow: none; }
.student-directory-page .sd-results-body .sd-empty { border-style: dashed; background: var(--sd-soft); }
.student-directory-page .sd-results-body .student-table-card { margin: -14px -14px 0; border: 0 !important; border-radius: 0; box-shadow: none !important; }
.student-directory-page .sd-results-body .sd-pagination { margin: 14px -14px -14px; padding: 10px 14px; border-top: 1px solid var(--sd-border); background: #fbfcff; border-radius: 0 0 12px 12px; }

html.dark-theme .student-directory-page :is(.sd-active-filters, .sd-results-body .sd-pagination) { background: var(--sd-surface); }
html.dark-theme .student-directory-page .sd-chip { background: #22324f; border-color: #34507a; color: #bcd3ff; }

@media (max-width: 767.98px) {
    .student-directory-page .sd-results-head { padding: 10px; }
    .student-directory-page .sd-results .sd-search { flex-basis: 100%; max-width: none; }
    .student-directory-page .sd-results .sd-select { flex: 1; }
    .student-directory-page .sd-results .sd-select select { width: 100%; }
    .student-directory-page .sd-results .sd-view-switch { margin-left: 0; width: 100%; }
    .student-directory-page .sd-results .sd-view-switch button { flex: 1; justify-content: center; }
    .student-directory-page .sd-results-body { padding: 10px; }
    .student-directory-page .sd-results-body .student-table-card { margin: 0; }
    .student-directory-page .sd-results-body .sd-pagination { margin: 10px -10px -10px; }
}

/* ───────── Student card v2 ───────── */
.student-directory-page .sd-grid { gap: 12px; }
.student-directory-page .sa-card { gap: 12px; padding: 14px; border: 1px solid var(--sd-border); border-radius: 14px; background: var(--sd-surface); box-shadow: 0 1px 2px rgba(16, 29, 64, 0.04); transition: border-color .15s, box-shadow .15s, transform .15s; }
.student-directory-page .sa-card:hover { border-color: #cfdcf0; box-shadow: 0 14px 28px -20px rgba(16, 29, 64, 0.45); transform: translateY(-1px); }
.student-directory-page .sa-card .sa-head { gap: 12px; padding: 0; align-items: center; }
.student-directory-page .sa-card .sa-avatar { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; padding: 3px; background: var(--av, linear-gradient(145deg, #dcecff, #eee4fa)); color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 14px -8px rgba(16, 29, 64, 0.5); }
.student-directory-page .sa-card .sa-avatar img { width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.student-directory-page .sa-card .sa-avatar span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); }
.student-directory-page .sa-av-0 { --av: linear-gradient(135deg, #8b5cf6, #c084fc); }
.student-directory-page .sa-av-1 { --av: linear-gradient(135deg, #f97366, #fb7185); }
.student-directory-page .sa-av-2 { --av: linear-gradient(135deg, #38bdf8, #3b82f6); }
.student-directory-page .sa-av-3 { --av: linear-gradient(135deg, #f472b6, #e11d48); }
.student-directory-page .sa-av-4 { --av: linear-gradient(135deg, #34d399, #059669); }
.student-directory-page .sa-av-5 { --av: linear-gradient(135deg, #fbbf24, #f97316); }
.student-directory-page .sa-card .sa-heading h3 { margin: 0 0 3px; font-size: 15.5px; font-weight: 700; line-height: 1.25; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.student-directory-page .sa-card .sd-code { font-size: 11.5px; font-weight: 500; }
.student-directory-page .sa-card .sa-status { align-self: flex-start; padding: 4px 10px; border-radius: 7px; font-size: 11px; }
.student-directory-page .sa-card .sa-menu { width: 30px; height: 30px; border-radius: 8px; font-size: 18px; }

.student-directory-page .sa-chip { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; font-size: 17px; }
.student-directory-page .sa-chip.is-purple { background: #f1e9ff; color: #7c3aed; }
.student-directory-page .sa-chip.is-blue { background: #e6f2ff; color: #1d7fe6; }
.student-directory-page .sa-chip.is-pink { background: #ffe8f1; color: #db2777; }
.student-directory-page .sa-chip.is-plain { background: var(--sd-soft); color: var(--sd-ink); }

.student-directory-page .sa-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.student-directory-page .sa-info-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.student-directory-page .sa-info-item > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.student-directory-page .sa-info-item strong { overflow: hidden; color: var(--sd-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.student-directory-page .sa-info-item small { color: var(--sd-muted); font-size: 11px; }

.student-directory-page .sa-card .sa-guardian { display: flex; align-items: center; gap: 10px; }
.student-directory-page .sa-card .sa-guardian-info { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.student-directory-page .sa-card .sa-guardian-info strong { overflow: hidden; color: var(--sd-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.student-directory-page .sa-card .sa-guardian-info :is(a, small) { color: var(--sd-muted); font-size: 11.5px; text-decoration: none; font-variant-numeric: tabular-nums; }
.student-directory-page .sa-card .sa-guardian-info a:hover { color: #1d7fe6; }
.student-directory-page .sa-card .sa-contact-actions { gap: 8px; }
.student-directory-page .sa-round { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--sd-border); border-radius: 50%; background: var(--sd-surface); font-size: 17px; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.student-directory-page .sa-round.sa-call { color: #2f6fd6; }
.student-directory-page .sa-round.sa-whatsapp { color: #07a54b; }
.student-directory-page .sa-round.sa-call:hover { background: #2f6fd6; border-color: #2f6fd6; color: #fff; }
.student-directory-page .sa-round.sa-whatsapp:hover { background: #07a54b; border-color: #07a54b; color: #fff; }

.student-directory-page .sa-fee { --fee-color: #16a34a; display: flex; align-items: center; gap: 8px; margin-top: auto; }
.student-directory-page .sa-fee.is-partial { --fee-color: #e19300; }
.student-directory-page .sa-fee.is-due { --fee-color: #e5293a; }
.student-directory-page .sa-fee.is-unbilled { --fee-color: #7283a0; }
.student-directory-page .sa-fee-icon { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: var(--fee-color); color: #fff; font-size: 14px; }
.student-directory-page .sa-fee-text { min-width: 58px; color: var(--fee-color); font-size: 12px; font-weight: 700; white-space: nowrap; }
.student-directory-page .sa-fee .sa-progress-track { flex: 1; height: 7px; border-radius: 99px; background: #e9eef6; overflow: hidden; }
.student-directory-page .sa-fee .sa-progress-track > span { display: block; height: 100%; border-radius: inherit; background: var(--fee-color); }
.student-directory-page .sa-fee .sa-progress-value { min-width: 34px; color: var(--sd-ink); font-size: 11.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.student-directory-page .sa-card .sa-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; }
.student-directory-page .sa-card .sa-foot a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border-radius: 9px; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.student-directory-page .sa-card .sa-foot a:only-child { grid-column: 1 / -1; }
.student-directory-page .sa-card .sa-profile { border: 1px solid var(--sd-border); background: var(--sd-soft); color: var(--sd-ink); }
.student-directory-page .sa-card .sa-profile:hover { background: #e8eef8; }
.student-directory-page .sa-card .sa-fee-link { background: #ef3340; color: #fff; box-shadow: 0 8px 16px -10px rgba(239, 51, 64, 0.9); }
.student-directory-page .sa-card .sa-fee-link:hover { background: #d61f2c; color: #fff; }

html.dark-theme .student-directory-page :is(.sa-chip.is-purple, .sa-chip.is-blue, .sa-chip.is-pink) { background: #293b57; }
html.dark-theme .student-directory-page .sa-fee .sa-progress-track { background: #30405a; }
html.dark-theme .student-directory-page .sa-round { background: var(--sd-soft); }
@media (max-width: 1399.98px) {
    .student-directory-page .sa-card .sa-avatar { width: 50px; height: 50px; flex-basis: 50px; font-size: 16px; }
}


/* ===== ADMISSION-FORM ===== */
/* ==========================================================================
   Student admission form (student/create) — scoped to .adm-page
   ========================================================================== */
.adm-page {
    --ad-ink: #101d40;
    --ad-muted: #65769a;
    --ad-border: #e3eaf6;
    --ad-soft: #f4f7fd;
    --ad-surface: #fff;
    --ad-red: #ef3340;
    --ad-red-2: #d61f2c;
    --ad-blue: #1685f8;
    --ad-green: #0aab6b;
    color: var(--ad-ink);
}
.adm-page .page-content { background: linear-gradient(135deg, #f8faff, #f2f6fc); min-height: 100%; padding-bottom: 16px !important; }

/* Header */
.adm-page .adm-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; padding: 14px 16px; border: 1px solid var(--ad-border); border-radius: 14px; background: var(--ad-surface); }
.adm-page .adm-header-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.adm-page .adm-back { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid var(--ad-border); border-radius: 10px; color: var(--ad-ink); font-size: 19px; text-decoration: none; }
.adm-page .adm-back:hover { background: var(--ad-soft); color: var(--ad-red); }
.adm-page .adm-header h1 { margin: 0; color: var(--ad-ink); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.adm-page .adm-header p { margin: 2px 0 0; color: var(--ad-muted); font-size: 12px; }
.adm-page .adm-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-page .adm-mode { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #e8eef8; }
.adm-page .adm-mode-btn { display: inline-flex; align-items: center; gap: 6px; margin: 0; height: 32px; padding: 0 12px; border-radius: 8px; color: var(--ad-muted); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; user-select: none; }
.adm-page .adm-mode-btn i { font-size: 16px; }
.adm-page .adm-mode-btn:hover { color: var(--ad-ink); }
.adm-page .btn-check:checked + .adm-mode-btn { background: var(--ad-surface); color: var(--ad-ink); box-shadow: 0 1px 3px rgba(23, 35, 57, 0.15); }
.adm-page .btn-check:checked + .adm-mode-btn i { color: var(--ad-red); }
.adm-page .btn-check:focus-visible + .adm-mode-btn { outline: 2px solid #347be5; outline-offset: 2px; }
.adm-page .adm-header-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid var(--ad-border); border-radius: 10px; background: var(--ad-surface); color: var(--ad-ink); font-size: 12px; font-weight: 600; text-decoration: none; }
.adm-page .adm-header-btn:hover { background: var(--ad-soft); color: var(--ad-ink); }
.adm-page .adm-header-btn i { font-size: 17px; }

/* Layout */
.adm-page .adm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.adm-page .adm-form { min-width: 0; }

/* Sections */
.adm-page .erp-section-card {
    position: relative; scroll-margin-top: 12px;
    padding: 18px 20px !important; margin-bottom: 14px !important;
    border: 1px solid var(--ad-border) !important; border-left-width: 1px !important; border-radius: 14px !important;
    background: var(--ad-surface) !important; box-shadow: 0 1px 2px rgba(16, 29, 64, 0.04) !important;
}
.adm-page .erp-section-card:hover { border-color: #d3deef !important; box-shadow: 0 8px 22px -16px rgba(16, 29, 64, 0.3) !important; }
.adm-page .erp-section-card:focus-within { border-color: #b9cdee !important; box-shadow: none !important; }
.adm-page .erp-section-header { margin-bottom: 14px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--ad-border) !important; }
.adm-page .erp-section-header h6 { color: var(--ad-ink) !important; font-size: 15px !important; font-weight: 700 !important; }
.adm-page .erp-section-header small { color: var(--ad-muted) !important; font-size: 11.5px !important; }
.adm-page .erp-section-header > .badge { display: none; }
.adm-page .erp-icon-box { display: grid !important; place-items: center; width: 40px !important; height: 40px !important; border: 0 !important; border-radius: 11px !important; font-size: 20px !important; }

.adm-page .erp-sub-panel { padding: 14px 16px !important; border: 1px solid var(--ad-border) !important; border-radius: 12px !important; background: #fafcff !important; }
.adm-page .erp-sub-panel:hover { background: #fafcff !important; border-color: #d7e2f2 !important; }
.adm-page .erp-sub-panel-header { margin-bottom: 12px !important; padding-bottom: 0 !important; border-bottom: 0 !important; }
.adm-page .erp-sub-panel-title { color: var(--ad-ink) !important; font-size: 11.5px !important; letter-spacing: 0.6px !important; }
.adm-page .erp-sub-panel-icon { border-radius: 7px !important; }
.adm-page .erp-sub-panel-badge { display: none !important; }

/* Fields */
.adm-page .erp-form-label { margin-bottom: 5px !important; color: #34446b !important; font-size: 11.5px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; }
.adm-page .form-control, .adm-page .form-select, .adm-page .erp-form-control {
    min-height: 40px; border: 1px solid #d9e2f0 !important; border-radius: 9px !important;
    background-color: var(--ad-surface) !important; color: var(--ad-ink) !important; font-size: 13px !important;
    box-shadow: none !important; transition: border-color 0.15s, box-shadow 0.15s;
}
.adm-page textarea.form-control { min-height: 76px; }
.adm-page .form-control::placeholder { color: #9aa8c2; }
.adm-page .form-control:hover, .adm-page .form-select:hover { border-color: #c3d1e6 !important; }
.adm-page .form-control:focus, .adm-page .form-select:focus { border-color: #8fb5ef !important; box-shadow: 0 0 0 2px rgba(52, 123, 229, 0.2) !important; }
.adm-page .form-control.is-invalid, .adm-page .form-select.is-invalid { border-color: #f08a94 !important; box-shadow: 0 0 0 2px rgba(239, 51, 64, 0.08) !important; }
.adm-page .input-group > .input-group-text {
    min-width: 40px; justify-content: center; border: 1px solid #d9e2f0 !important; border-right: 0 !important;
    border-radius: 9px 0 0 9px !important; background: var(--ad-soft) !important; color: var(--ad-muted) !important; font-size: 16px;
}
.adm-page .input-group > .form-control, .adm-page .input-group > .form-select { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.adm-page .input-group:focus-within > .input-group-text { border-color: #8fb5ef !important; color: var(--ad-blue) !important; background: #eef5ff !important; }
.adm-page p.error:empty { display: none; }
.adm-page p.error { font-size: 11.5px !important; }

/* Fee builder card */
.adm-page #feeStructureContainer { border: 1px solid var(--ad-border) !important; border-radius: 12px !important; }
.adm-page #recurringStudentSection { border: 1px solid #b9d6fb !important; border-radius: 14px !important; background: #f5f9ff !important; }

/* Sticky action bar */
.adm-page .adm-actionbar {
    position: sticky; bottom: 12px; z-index: 20;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 6px; padding: 10px 12px 10px 16px;
    border: 1px solid var(--ad-border); border-radius: 14px;
    background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 16px 34px -18px rgba(16, 29, 64, 0.45);
}
.adm-page .adm-actionbar-info { display: flex; align-items: center; gap: 7px; color: var(--ad-muted); font-size: 12px; }
.adm-page .adm-actionbar-info i { color: var(--ad-blue); font-size: 17px; }
.adm-page .adm-actionbar-buttons { display: flex; gap: 8px; }
.adm-page .adm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.adm-page .adm-btn i { font-size: 18px; }
.adm-page .adm-btn-ghost { border-color: var(--ad-border); background: var(--ad-surface); color: var(--ad-ink); }
.adm-page .adm-btn-ghost:hover { background: var(--ad-soft); color: var(--ad-ink); }
.adm-page .adm-btn-primary { background: linear-gradient(135deg, var(--ad-red), var(--ad-red-2)); color: #fff; box-shadow: 0 10px 20px -10px rgba(239, 51, 64, 0.85); }
.adm-page .adm-btn-primary:hover { filter: brightness(1.05); color: #fff; }
.adm-page .adm-btn-primary:disabled { opacity: 0.7; cursor: progress; }

/* Rail */
.adm-page .adm-rail { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
.adm-page .adm-rail-card { padding: 14px; border: 1px solid var(--ad-border); border-radius: 14px; background: var(--ad-surface); }
.adm-page .adm-rail-head { display: flex; justify-content: space-between; align-items: baseline; color: var(--ad-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.adm-page .adm-rail-head strong { color: var(--ad-ink); font-size: 15px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.adm-page .adm-progress { height: 6px; margin: 8px 0 12px; border-radius: 99px; background: #e8eef8; overflow: hidden; }
.adm-page .adm-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ad-green), #34d399); transition: width 0.3s ease; }
.adm-page .adm-steps { margin: 0; padding: 0; list-style: none; }
.adm-page .adm-steps a { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; color: var(--ad-muted); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.adm-page .adm-steps li + li a::before { content: ''; position: absolute; left: 19px; top: -6px; height: 10px; width: 2px; background: var(--ad-border); }
.adm-page .adm-steps a:hover { background: var(--ad-soft); color: var(--ad-ink); }
.adm-page .adm-steps a > i { margin-left: auto; color: var(--ad-green); font-size: 17px; opacity: 0; }
.adm-page .adm-step-no { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border: 2px solid var(--ad-border); border-radius: 50%; background: var(--ad-surface); color: var(--ad-muted); font-size: 11px; font-weight: 700; }
.adm-page .adm-steps a.is-current { background: #fff1f2; color: var(--ad-ink); font-weight: 600; }
.adm-page .adm-steps a.is-current .adm-step-no { border-color: var(--ad-red); color: var(--ad-red); }
.adm-page .adm-steps a.is-done .adm-step-no { border-color: var(--ad-green); background: var(--ad-green); color: #fff; }
.adm-page .adm-steps a.is-done > i { opacity: 1; }

.adm-page .adm-summary-student { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px dashed var(--ad-border); }
.adm-page .adm-summary-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: linear-gradient(145deg, #dcecff, #eee4fa); color: #435c95; font-size: 14px; font-weight: 700; }
.adm-page .adm-summary-student > div { display: flex; flex-direction: column; min-width: 0; }
.adm-page .adm-summary-student strong { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.adm-page .adm-summary-student small { color: var(--ad-muted); font-size: 11.5px; }
.adm-page .adm-summary-fees { display: grid; gap: 7px; margin: 0; }
.adm-page .adm-summary-fees > div { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.adm-page .adm-summary-fees dt { color: var(--ad-muted); font-weight: 500; }
.adm-page .adm-summary-fees dd { margin: 0; color: var(--ad-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.adm-page .adm-summary-fees .is-strong { margin-top: 3px; padding-top: 8px; border-top: 1px solid var(--ad-border); font-size: 13.5px; }
.adm-page .adm-summary-fees .is-strong dd { color: var(--ad-blue); font-weight: 700; }
.adm-page .adm-summary-fees .is-red { color: var(--ad-red-2); }
.adm-page .adm-summary-fees .is-green { color: #07853f; }
.adm-page .adm-summary-fees .is-amber { color: #9a5d00; }

@media (max-width: 1199.98px) {
    .adm-page .adm-layout { grid-template-columns: minmax(0, 1fr); }
    .adm-page .adm-rail { display: none; }
}
@media (max-width: 767.98px) {
    .adm-page .adm-header { padding: 12px; }
    .adm-page .adm-header h1 { font-size: 16px; }
    .adm-page .adm-header p { display: none; }
    .adm-page .adm-header-actions, .adm-page .adm-mode { width: 100%; }
    .adm-page .adm-mode-btn { flex: 1; justify-content: center; padding: 0 6px; }
    .adm-page .erp-section-card { padding: 14px !important; }
    .adm-page .erp-sub-panel { padding: 12px !important; }
    .adm-page .adm-actionbar { bottom: 8px; }
    .adm-page .adm-actionbar-info { display: none; }
    .adm-page .adm-actionbar-buttons { width: 100%; }
    .adm-page .adm-btn-primary { flex: 1; }
}

/* Dark theme */
html.dark-theme .adm-page { --ad-ink: #e3eaf7; --ad-muted: #a1afc5; --ad-border: #30405a; --ad-soft: #21314b; --ad-surface: #19263b; }
html.dark-theme .adm-page .page-content { background: #111c30; }
html.dark-theme .adm-page :is(.erp-sub-panel, .erp-sub-panel:hover, #recurringStudentSection) { background: #1c2a42 !important; }
html.dark-theme .adm-page :is(.form-control, .form-select, .erp-form-control) { border-color: #3a4c6b !important; }
html.dark-theme .adm-page .erp-form-label { color: #c3cee2 !important; }
html.dark-theme .adm-page .adm-actionbar { background: rgba(25, 38, 59, 0.92); }
html.dark-theme .adm-page .adm-mode { background: #21314b; }
html.dark-theme .adm-page .adm-steps a.is-current { background: #2a2235; }

/* ── Header status chip (edit page) ── */
.adm-page .adm-header-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 8px; font-size: 11.5px; font-weight: 600; }
.adm-page .adm-header-chip.is-active { background: #dcf7e9; color: #07853f; }
.adm-page .adm-header-chip.is-inactive { background: #ffe7ef; color: #c62551; }
.adm-page .adm-field-hint { display: block; margin-top: 4px; color: var(--ad-muted); font-size: 10.5px; line-height: 1.3; }

/* ── Fee builder: scrollable table that never clips ── */
.adm-page #feeStructureContainer { padding: 16px !important; background: var(--ad-surface) !important; }
.adm-page #feeStructureContainer > .d-flex:first-child { padding-bottom: 12px !important; margin-bottom: 12px !important; border-color: var(--ad-border) !important; }
.adm-page #feeStructureContainer h6 { font-size: 14px !important; }
.adm-page #feeStructureContainer #addFeeHeadDropdownBtn { height: 34px; padding: 0 12px; border: 0; border-radius: 9px !important; background: var(--ad-navy, #0c1633); font-size: 12px !important; box-shadow: none !important; }
.adm-page #feeStructureContainer .table-responsive { overflow-x: auto !important; overflow-y: visible; border: 1px solid var(--ad-border) !important; border-radius: 12px !important; }
.adm-page #feeHeadsTable { min-width: 820px; margin: 0; }
.adm-page #feeHeadsTable > thead th { padding: 9px 10px !important; background: var(--ad-soft) !important; color: var(--ad-muted) !important; font-size: 10.5px !important; letter-spacing: 0.4px !important; white-space: nowrap; border-bottom: 1px solid var(--ad-border) !important; }
.adm-page #feeHeadsTable > thead th:nth-child(3) { min-width: 240px !important; }
.adm-page #feeHeadsTable > thead th:nth-child(4) { width: 170px !important; }
.adm-page #feeHeadsTable > tbody td { padding: 10px !important; border-color: var(--ad-border) !important; }
.adm-page #feeHeadsTable > tbody td:nth-child(2) { min-width: 200px !important; }
.adm-page #feeHeadsTable > tbody td:nth-child(3) { min-width: 240px !important; }
.adm-page #feeHeadsTable > tbody td:nth-child(4) { width: 170px !important; }
.adm-page #feeHeadsTable .fee-head-priority { width: 100%; min-width: 150px; height: 34px !important; border-radius: 8px !important; font-family: inherit !important; font-size: 12px !important; }
.adm-page #feeHeadsTable .fee-icon-box { width: 36px !important; height: 36px !important; border: 0 !important; border-radius: 10px !important; }
.adm-page #feeHeadsTable .fee-head-name { font-size: 13px !important; }
.adm-page #feeHeadsTable .fee-head-amount { min-height: 34px; border-radius: 0 8px 8px 0 !important; }
.adm-page #feeHeadsTable .input-group-text { min-width: 32px !important; padding: 0 8px; border-radius: 8px 0 0 8px !important; }
.adm-page #feeHeadsTable tr.fee-head-row[data-admission="1"] { background: #fffaf5; }
.adm-page #feeStructureContainer .form-check-input { min-height: 0; }

/* Payment calculator panel */
.adm-page #feeStructureContainer .table-responsive + .p-3 { padding: 14px !important; border: 1px solid var(--ad-border) !important; border-radius: 12px !important; background: #fafcff !important; }

@media (max-width: 767.98px) {
    .adm-page #feeStructureContainer { padding: 12px !important; }
}

/* ── Layout fixes ── */
.adm-page .form-select { padding-right: 34px !important; background-position: right 12px center !important; }

/* Concession / transport toggle tiles */
.adm-page .adm-toggle-tile { gap: 6px; padding: 12px; border: 1px solid var(--ad-border); border-radius: 12px; background: var(--ad-surface); transition: border-color .15s, background .15s; }
.adm-page .adm-toggle-tile:has(.form-check-input:checked) { border-color: #b7e4cc; background: #f3fcf7; }
.adm-page .adm-toggle-tile .form-check { display: flex; align-items: center; gap: 8px; min-height: 0; margin: 0 !important; padding-left: 0; }
.adm-page .adm-toggle-tile .form-check-input { float: none; width: 34px; height: 19px; margin: 0; cursor: pointer; }
.adm-page .adm-toggle-tile .form-check-input:checked { background-color: var(--ad-green); border-color: var(--ad-green); }
.adm-page .adm-toggle-tile .form-check-label { font-size: 12.5px !important; line-height: 1.3; cursor: pointer; }
.adm-page .adm-toggle-tile small { color: var(--ad-muted) !important; font-size: 11px !important; line-height: 1.35; }
.adm-page .adm-toggle-tile > .d-flex { gap: 8px; }
.adm-page #transport_status { flex: 0 0 auto; width: 92px !important; min-height: 0 !important; height: 28px !important; padding: 0 26px 0 9px !important; background-position: right 8px center !important; border-radius: 7px !important; font-family: inherit !important; font-size: 11.5px !important; }

/* Fee heads table: fits the card; wraps instead of clipping */
.adm-page #feeHeadsTable { min-width: 760px; width: 100%; table-layout: auto; }
.adm-page #feeHeadsTable > thead th { white-space: normal !important; line-height: 1.3; vertical-align: middle !important; }
.adm-page #feeHeadsTable > thead th,
.adm-page #feeHeadsTable > tbody td { min-width: 0 !important; }
.adm-page #feeHeadsTable > thead th:nth-child(1), .adm-page #feeHeadsTable > tbody td:nth-child(1) { width: 44px !important; }
.adm-page #feeHeadsTable > thead th:nth-child(2), .adm-page #feeHeadsTable > tbody td:nth-child(2) { width: 30%; }
.adm-page #feeHeadsTable > thead th:nth-child(3), .adm-page #feeHeadsTable > tbody td:nth-child(3) { width: 30%; }
.adm-page #feeHeadsTable > thead th:nth-child(4), .adm-page #feeHeadsTable > tbody td:nth-child(4) { width: 170px !important; }
.adm-page #feeHeadsTable > thead th:nth-child(5), .adm-page #feeHeadsTable > tbody td:nth-child(5) { width: 140px !important; }
.adm-page #feeHeadsTable > thead th:nth-child(6), .adm-page #feeHeadsTable > tbody td:nth-child(6) { width: 52px !important; }
.adm-page #feeHeadsTable .fee-month-control .d-flex { flex-wrap: wrap; row-gap: 4px; }
.adm-page #feeHeadsTable .fee-head-priority { min-width: 0; padding-left: 10px !important; }
.adm-page #feeHeadsTable td:nth-child(5) .input-group { max-width: 124px !important; margin-left: auto; }
.adm-page #feeHeadsTable .badge { white-space: nowrap; }

/* ───────── Section 4: class + fees (simplified) ───────── */
.adm-page .adm-class-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 14px; }
.adm-page .adm-class-field .input-group { max-width: 100%; }
.adm-page .adm-class-rates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.adm-page .adm-class-rates > span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 7px; background: var(--ad-soft); color: var(--ad-muted); font-size: 11.5px; }
.adm-page .adm-class-rates strong { color: var(--ad-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.adm-page .adm-switches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 23px; }
.adm-page .adm-switch { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 6px 10px; border: 1px solid #d9e2f0; border-radius: 10px; background: var(--ad-surface); cursor: pointer; }
.adm-page .adm-switch:has(.form-check-input:checked) { border-color: #b7e4cc; background: #f3fcf7; }
.adm-page .adm-switch-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; margin: 0; cursor: pointer; }
.adm-page .adm-switch .form-check { display: flex; padding: 0; min-height: 0; }
.adm-page .adm-switch .form-check-input { float: none; width: 32px; height: 18px; margin: 0; cursor: pointer; }
.adm-page .adm-switch .form-check-input:checked { background-color: var(--ad-green); border-color: var(--ad-green); }
.adm-page .adm-switch-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.adm-page .adm-switch-text strong { color: var(--ad-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.adm-page .adm-switch-text small { color: var(--ad-muted); font-size: 10.5px; white-space: nowrap; }
.adm-page .adm-switch #transport_status { width: 84px !important; height: 28px !important; min-height: 0 !important; padding: 0 24px 0 8px !important; background-position: right 7px center !important; font-size: 11.5px !important; border-radius: 7px !important; }

.adm-page .adm-fee-card { padding: 0 !important; border: 1px solid var(--ad-border); border-radius: 12px; background: var(--ad-surface); }
.adm-page .adm-fee-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--ad-border); }
.adm-page .adm-fee-head h6 { margin: 0; color: var(--ad-ink); font-size: 14px; font-weight: 700; }
.adm-page .adm-fee-head small { color: var(--ad-muted); font-size: 11.5px; }
.adm-page .adm-fee-add { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 1px solid #d9e2f0; border-radius: 8px; background: var(--ad-surface); color: var(--ad-ink); font-size: 12px; font-weight: 600; }
.adm-page .adm-fee-add:hover, .adm-page .adm-fee-add[aria-expanded="true"] { border-color: var(--ad-red); color: var(--ad-red); }
.adm-page .adm-fee-add i { font-size: 16px; }

.adm-page .adm-fee-table { margin: 0 !important; border: 0 !important; border-radius: 0 !important; overflow-x: auto !important; }
.adm-page #feeHeadsTable { min-width: 680px; }
.adm-page #feeHeadsTable > thead th { padding: 8px 12px !important; background: var(--ad-soft) !important; color: var(--ad-muted) !important; font-size: 10.5px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.4px !important; border-bottom: 1px solid var(--ad-border) !important; }
.adm-page #feeHeadsTable > tbody td { height: 56px; padding: 8px 12px !important; border-bottom: 1px solid var(--ad-border) !important; background: transparent; }
.adm-page #feeHeadsTable > tbody tr:last-child td { border-bottom: 0 !important; }
.adm-page #feeHeadsTable tr.fee-head-row[data-admission="1"] { background: transparent; }
.adm-page #feeHeadsTable tr.fee-head-row:has(.fee-head-checkbox:not(:checked)) { opacity: 0.55; }
.adm-page #feeHeadsTable .adm-col-check { width: 40px !important; padding-right: 0 !important; text-align: center; }
.adm-page #feeHeadsTable .adm-col-action { width: 44px !important; text-align: center; }
.adm-page #feeHeadsTable > thead th:nth-child(2), .adm-page #feeHeadsTable > tbody td:nth-child(2) { width: auto; }
.adm-page #feeHeadsTable > thead th:nth-child(3), .adm-page #feeHeadsTable > tbody td:nth-child(3) { width: 230px; }
.adm-page #feeHeadsTable > thead th:nth-child(4), .adm-page #feeHeadsTable > tbody td:nth-child(4) { width: 150px !important; }
.adm-page #feeHeadsTable > thead th:nth-child(5), .adm-page #feeHeadsTable > tbody td:nth-child(5) { width: 130px !important; }
.adm-page #feeHeadsTable .fee-head-checkbox { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.adm-page #feeHeadsTable .fee-head-checkbox:checked { background-color: var(--ad-red); border-color: var(--ad-red); }

.adm-page .adm-fee-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-page .adm-fee-name > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.adm-page .adm-fee-name .fee-head-name { overflow: hidden; color: var(--ad-ink); font-size: 13px !important; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.adm-page .adm-fee-name small { color: var(--ad-muted); font-size: 11px; }
.adm-page .adm-fee-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; font-size: 16px; }
.adm-page .adm-fee-icon.is-blue { background: #e8f1ff; color: #1d6fe0; }
.adm-page .adm-fee-icon.is-sky { background: #e3f6ff; color: #0284c7; }
.adm-page .adm-fee-icon.is-amber { background: #fff3db; color: #b86e00; }
.adm-page .adm-fee-icon.is-green { background: #e2f7ed; color: #07853f; }
.adm-page .adm-fee-icon.is-purple { background: #f1e9ff; color: #7c3aed; }

.adm-page .adm-period { display: flex; align-items: center; gap: 10px; }
.adm-page .adm-once { color: var(--ad-muted); font-size: 12px; }
.adm-page .adm-stepper { display: inline-flex; align-items: center; height: 32px; border: 1px solid #d9e2f0; border-radius: 8px; overflow: hidden; background: var(--ad-surface); }
.adm-page .adm-stepper button { display: grid; place-items: center; width: 28px; height: 100%; padding: 0; border: 0; background: var(--ad-soft); color: var(--ad-muted); font-size: 15px; }
.adm-page .adm-stepper button:hover { background: #e8eef8; color: var(--ad-ink); }
.adm-page .adm-stepper .fee-head-months { width: 34px; height: 100%; padding: 0; border: 0; background: transparent; color: var(--ad-ink); font-size: 13px; font-weight: 700; text-align: center; -moz-appearance: textfield; }
.adm-page .adm-stepper .fee-head-months::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.adm-page .adm-period-text { display: flex; flex-direction: column; line-height: 1.2; }
.adm-page .adm-period-text .fee-months-display { color: var(--ad-ink); font-size: 12px; font-weight: 600; }
.adm-page .adm-period-text small { color: var(--ad-muted); font-size: 10.5px; }

.adm-page #feeHeadsTable .fee-head-priority { width: 100%; height: 32px !important; min-height: 0 !important; padding: 0 28px 0 10px !important; background-position: right 9px center !important; border-radius: 8px !important; font-size: 12px !important; }
.adm-page .adm-amount { display: flex; align-items: center; height: 32px; margin-left: auto; max-width: 120px; border: 1px solid #d9e2f0; border-radius: 8px; overflow: hidden; background: var(--ad-surface); }
.adm-page .adm-amount:focus-within { border-color: #8fb5ef; box-shadow: 0 0 0 2px rgba(52, 123, 229, 0.2); }
.adm-page .adm-amount > span { display: grid; place-items: center; width: 28px; height: 100%; background: var(--ad-soft); color: var(--ad-muted); font-size: 12px; font-weight: 600; }
.adm-page .adm-amount .fee-head-amount { flex: 1; width: 100%; height: 100%; min-width: 0; padding: 0 10px; border: 0; background: transparent; color: var(--ad-ink); font-size: 13px; font-weight: 700; text-align: right; outline: 0; font-variant-numeric: tabular-nums; }
.adm-page .adm-row-remove { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 auto; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #9aa8c2; font-size: 18px; }
.adm-page .adm-row-remove:hover { background: #ffeef0; color: var(--ad-red); }

/* Payment panel sits inside the fee card under the table */
.adm-page .adm-fee-card > .p-3 { margin: 0 !important; border: 0 !important; border-top: 1px solid var(--ad-border) !important; border-radius: 0 0 12px 12px !important; }

@media (max-width: 991.98px) {
    .adm-page .adm-class-panel { grid-template-columns: minmax(0, 1fr); }
    .adm-page .adm-switches { padding-top: 0; }
}
@media (max-width: 575.98px) {
    .adm-page .adm-switches { grid-template-columns: minmax(0, 1fr); }
    .adm-page .adm-fee-head { flex-wrap: wrap; }
}
html.dark-theme .adm-page :is(.adm-switch, .adm-stepper, .adm-amount, .adm-fee-add) { border-color: #3a4c6b; }

/* ID-level overrides so the simplified fee card wins over the earlier #feeStructureContainer rules */
.adm-page #feeStructureContainer.adm-fee-card { padding: 0 !important; background: var(--ad-surface) !important; }
.adm-page #feeStructureContainer .adm-fee-table { border: 0 !important; border-radius: 0 !important; }
.adm-page #feeStructureContainer .adm-fee-table + .p-3 { margin: 0 !important; padding: 14px !important; border: 0 !important; border-top: 1px solid var(--ad-border) !important; border-radius: 0 0 12px 12px !important; background: #fafcff !important; }

/* ───────── Small-variant controls + 4px radius (form-wide) ───────── */
.adm-page { --ad-r: var(--rntd-radius, 4px); --ad-h: 34px; }
.adm-page .form-control, .adm-page .form-select, .adm-page .erp-form-control { min-height: var(--ad-h) !important; height: var(--ad-h); padding-top: 0 !important; padding-bottom: 0 !important; font-size: 12.5px !important; border-radius: var(--ad-r) !important; }
.adm-page textarea.form-control, .adm-page textarea.erp-form-control { height: auto; min-height: 64px !important; padding-top: 7px !important; padding-bottom: 7px !important; }
.adm-page .input-group > .input-group-text { min-width: 34px; height: var(--ad-h); font-size: 14px; border-radius: var(--ad-r) 0 0 var(--ad-r) !important; }
.adm-page .input-group > .form-control, .adm-page .input-group > .form-select { border-radius: 0 var(--ad-r) var(--ad-r) 0 !important; }
.adm-page .erp-form-label, .adm-page .adm-field > label { margin-bottom: 4px !important; font-size: 11.5px !important; }
.adm-page :is(.erp-section-card, .erp-sub-panel, .adm-header, .adm-back, .adm-header-btn, .adm-mode, .adm-mode-btn, .adm-header-chip, .adm-rail-card, .adm-actionbar, .adm-btn,
    .adm-fee-card, .adm-fee-add, .adm-stepper, .adm-amount, .adm-row-remove, .adm-fee-icon, .adm-class-rates > span, .adm-switch, .adm-toggle-tile, .adm-summary-avatar, .erp-icon-box, .erp-sub-panel-icon,
    .adm-steps a, #recurringStudentSection, .adm-affix, .adm-pay-summary, .dropdown-menu) { border-radius: var(--ad-r) !important; }
.adm-page #feeStructureContainer.adm-fee-card { border-radius: var(--ad-r) !important; }
.adm-page .adm-btn, .adm-page .adm-header-btn, .adm-page .adm-back { height: var(--ad-h); }
.adm-page .adm-back { width: var(--ad-h); flex-basis: var(--ad-h); }
.adm-page .adm-mode-btn { height: 28px; }
.adm-page #feeHeadsTable :is(.fee-head-priority, .adm-stepper, .adm-amount) { height: 30px !important; }

/* Add fee head: always readable (theme dropdown-toggle styles were overriding it) */
.adm-page .adm-fee-add { height: 30px !important; padding: 0 10px !important; border: 1px solid #d9e2f0 !important; background: #fff !important; color: var(--ad-ink) !important; font-size: 12px !important; font-weight: 600 !important; box-shadow: none !important; }
.adm-page .adm-fee-add::after { margin-left: 4px; vertical-align: 2px; }
.adm-page .adm-fee-add:hover, .adm-page .adm-fee-add[aria-expanded="true"] { border-color: var(--ad-red) !important; background: #fff6f7 !important; color: var(--ad-red) !important; }

/* ───────── Payment panel ───────── */
.adm-page .adm-pay { padding: 14px; border-top: 1px solid var(--ad-border); background: #fafcff; border-radius: 0 0 var(--ad-r) var(--ad-r); }
.adm-page .adm-pay-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 12px 12px; align-items: start; }
.adm-page .adm-field { display: flex; flex-direction: column; min-width: 0; }
.adm-page .adm-field > label { overflow: hidden; color: #34446b; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.adm-page .adm-field .adm-field-hint { margin-top: 3px; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-page .adm-field.advance-box:not(.d-none), .adm-page .adm-field.partial-box:not(.d-none) { display: flex; }
.adm-page .adm-affix { display: flex; align-items: stretch; height: var(--ad-h); border: 1px solid #d9e2f0; background: #fff; overflow: hidden; }
.adm-page .adm-affix:focus-within { border-color: #8fb5ef; box-shadow: 0 0 0 2px rgba(52, 123, 229, 0.2); }
.adm-page .adm-affix > span { display: grid; place-items: center; min-width: 30px; padding: 0 6px; background: var(--ad-soft); color: var(--ad-muted); font-size: 12px; font-weight: 600; }
.adm-page .adm-affix.is-suffix > span { border-left: 1px solid #e3eaf6; }
.adm-page .adm-affix:not(.is-suffix) > span { border-right: 1px solid #e3eaf6; }
.adm-page .adm-affix .form-control { flex: 1; min-width: 0; height: 100% !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; font-variant-numeric: tabular-nums; }
.adm-page .adm-affix.is-strong .form-control { color: #07853f !important; font-weight: 700; }
.adm-page .adm-affix .form-control.is-invalid { color: var(--ad-red) !important; }

.adm-page .adm-pay-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 14px 0 0; border: 1px solid var(--ad-border); background: #fff; overflow: hidden; }
.adm-page .adm-pay-summary > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 12px; border-right: 1px solid var(--ad-border); }
.adm-page .adm-pay-summary > div:last-child { border-right: 0; }
.adm-page .adm-pay-summary dt { color: var(--ad-muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; }
.adm-page .adm-pay-summary dd { margin: 0; overflow: hidden; color: var(--ad-ink); font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.adm-page .adm-pay-summary .is-red dd { color: #d61f2c; }
.adm-page .adm-pay-summary .is-blue { background: #f3f8ff; }
.adm-page .adm-pay-summary .is-blue dd { color: #1d6fe0; }
.adm-page .adm-pay-summary .is-green dd { color: #07853f; }
.adm-page .adm-pay-summary .is-amber dd { color: #9a5d00; }

@media (max-width: 1199.98px) {
    .adm-page .adm-pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adm-page .adm-pay-grid .adm-field-wide { grid-column: 1 / -1; }
    .adm-page .adm-pay-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .adm-page .adm-pay-summary > div { border-bottom: 1px solid var(--ad-border); }
}
@media (max-width: 575.98px) {
    .adm-page .adm-pay-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html.dark-theme .adm-page :is(.adm-pay, .adm-pay-summary, .adm-affix) { background: var(--ad-surface); }

/* Radius: controls follow --rntd-radius (6px); cards and panels use the larger step */
.adm-page { --ad-r-lg: var(--rntd-radius-lg, 10px); }
.adm-page :is(.erp-section-card, .erp-sub-panel, .adm-header, .adm-rail-card, .adm-actionbar, .adm-fee-card, #recurringStudentSection, .adm-pay-summary, .adm-toggle-tile, .dropdown-menu) { border-radius: var(--ad-r-lg) !important; }
.adm-page #feeStructureContainer.adm-fee-card { border-radius: var(--ad-r-lg) !important; }
.adm-page .adm-pay { border-radius: 0 0 var(--ad-r-lg) var(--ad-r-lg); }

/* Every label is one fixed-height line, so inputs in a row always start at the same y */
.adm-page .erp-form-label, .adm-page .adm-field > label {
    display: flex !important; align-items: center; gap: 3px;
    height: 18px; margin-bottom: 5px !important; overflow: hidden;
    line-height: 18px !important; white-space: nowrap; text-overflow: ellipsis;
}
.adm-page :is(.erp-form-label, .adm-field > label) :is(.text-danger, .text-muted, i) { font-size: inherit !important; line-height: inherit; margin: 0 !important; }
.adm-page .erp-form-label > i { font-size: 13px !important; }
.adm-page .row > [class*="col-"] > .input-group,
.adm-page .row > [class*="col-"] > .form-control,
.adm-page .row > [class*="col-"] > .form-select { margin-top: 0 !important; }
.adm-page .input-group { flex-wrap: nowrap; }
.adm-page .input-group > :is(.form-control, .form-select, .input-group-text) { height: var(--ad-h) !important; }

/* ───────── Per-head discount column + simplified payment row ───────── */
.adm-page #feeHeadsTable > thead th:nth-child(6), .adm-page #feeHeadsTable > tbody td:nth-child(6) { width: 130px !important; }
.adm-page #feeHeadsTable > thead th:nth-child(7), .adm-page #feeHeadsTable > tbody td:nth-child(7) { width: 44px !important; text-align: center; }
.adm-page #feeHeadsTable { min-width: 800px; }
.adm-page .adm-amount.is-discount > span { width: auto; padding: 0 7px; background: #fff4f5; color: #d61f2c; }
.adm-page .adm-amount.is-discount .fee-head-discount { flex: 1; width: 100%; height: 100%; min-width: 0; padding: 0 10px; border: 0; background: transparent; color: #d61f2c; font-size: 13px; font-weight: 600; text-align: right; outline: 0; font-variant-numeric: tabular-nums; }
.adm-page .adm-amount.is-discount:has(.fee-head-discount.is-invalid) { border-color: #f08a94; }
.adm-page .adm-amount.is-discount .fee-head-discount[readonly] { color: #9aa8c2; }
.adm-page #feeHeadsTable tr:has(.fee-head-checkbox:not(:checked)) .adm-amount { pointer-events: none; }

.adm-page .adm-pay-grid { grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: start; }
@media (max-width: 767.98px) {
    .adm-page .adm-pay-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ───────── Compact form: controls ~20% smaller, tighter spacing ───────── */
.adm-page { --ad-h: 28px; }
.adm-page .form-control, .adm-page .form-select, .adm-page .erp-form-control { font-size: 12px !important; padding-left: 9px !important; }
.adm-page .form-select { padding-right: 28px !important; background-position: right 9px center !important; background-size: 12px 9px; }
.adm-page .input-group > .input-group-text { min-width: 28px; padding: 0 7px; font-size: 13px; }
.adm-page .input-group > .input-group-text i { font-size: 13px !important; }
.adm-page .erp-form-label, .adm-page .adm-field > label { height: 16px; margin-bottom: 4px !important; font-size: 11px !important; line-height: 16px !important; }
.adm-page textarea.form-control, .adm-page textarea.erp-form-control { min-height: 52px !important; padding-top: 5px !important; padding-bottom: 5px !important; }
.adm-page .row.g-2\.5, .adm-page .row.g-3 { --bs-gutter-x: 12px; --bs-gutter-y: 10px; }

.adm-page .erp-section-card { padding: 14px 16px !important; margin-bottom: 12px !important; }
.adm-page .erp-section-header { margin-bottom: 12px !important; padding-bottom: 10px !important; }
.adm-page .erp-section-header h6 { font-size: 14px !important; }
.adm-page .erp-section-header small { font-size: 11px !important; }
.adm-page .erp-icon-box { width: 34px !important; height: 34px !important; font-size: 17px !important; }
.adm-page .erp-sub-panel { padding: 10px 12px !important; margin-bottom: 10px !important; }
.adm-page .erp-sub-panel-header { margin-bottom: 8px !important; }
.adm-page .erp-sub-panel-title { font-size: 10.5px !important; }
.adm-page .erp-sub-panel-icon { width: 22px !important; height: 22px !important; font-size: 12px !important; }

/* Buttons stay comfortably clickable (not shrunk with inputs) */
.adm-page .adm-btn { height: 32px; font-size: 12.5px; }
.adm-page .adm-header-btn, .adm-page .adm-back { height: 30px; }
.adm-page .adm-back { width: 30px; flex-basis: 30px; }
.adm-page .adm-mode-btn { height: 24px; font-size: 11.5px; }
.adm-page .adm-actionbar { padding: 8px 10px 8px 14px; }

/* Fee table rows */
.adm-page #feeHeadsTable > tbody td { height: 46px; padding: 6px 10px !important; }
.adm-page #feeHeadsTable :is(.fee-head-priority, .adm-stepper, .adm-amount) { height: 26px !important; }
.adm-page #feeHeadsTable .fee-head-priority { font-size: 11.5px !important; }
.adm-page .adm-stepper button { width: 24px; }
.adm-page .adm-stepper .fee-head-months { width: 28px; font-size: 12px; }
.adm-page .adm-fee-icon { width: 28px; height: 28px; flex-basis: 28px; font-size: 14px; }
.adm-page .adm-fee-name .fee-head-name { font-size: 12.5px !important; }
.adm-page .adm-amount .fee-head-amount, .adm-page .adm-amount.is-discount .fee-head-discount { font-size: 12px; }
.adm-page .adm-fee-head { padding: 10px 12px; }
.adm-page .adm-fee-add { height: 26px !important; }
.adm-page .adm-pay { padding: 12px; }
.adm-page .adm-pay-summary > div { padding: 7px 10px; }
.adm-page .adm-pay-summary dd { font-size: 14px; }

/* ── Class row: boxed like the other panels, everything on one 28px line ── */
.adm-page .adm-class-panel { padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--ad-border); border-radius: var(--ad-r-lg); background: #fafcff; gap: 12px; align-items: end; }
.adm-page .adm-switches { padding-top: 0; align-self: end; gap: 8px; }
.adm-page .adm-class-panel:has(#classFeeBadgesBar:not(.d-none)) .adm-switches { align-self: start; padding-top: 20px; }
.adm-page .adm-switch { height: var(--ad-h); min-height: 0; padding: 0 8px; gap: 8px; border-radius: var(--ad-r) !important; }
.adm-page .adm-switch-main { gap: 8px; }
.adm-page .adm-switch .form-check-input { width: 26px; height: 15px; }
.adm-page .adm-switch-text small { display: none; }
.adm-page .adm-switch-text strong { font-size: 12px; }
.adm-page .adm-switch #transport_status { width: 74px !important; height: 20px !important; padding: 0 20px 0 6px !important; background-position: right 5px center !important; font-size: 11px !important; border-radius: 4px !important; }
.adm-page .adm-class-rates { margin-top: 6px; gap: 4px; }
.adm-page .adm-class-rates > span { height: 22px; padding: 0 7px; font-size: 11px; }

.adm-page :is(input.form-control, input.erp-form-control, select.form-select, select.erp-form-control):not([type=checkbox]):not([type=radio]) { height: var(--ad-h) !important; min-height: 0 !important; }
.adm-page .adm-affix { height: var(--ad-h); }
.adm-page .adm-affix :is(input.form-control):not([type=checkbox]):not([type=radio]) { height: 100% !important; }

/* Input-group addon (prefix icon): same box as the input, icon centred */
.adm-page .input-group { align-items: stretch; }
.adm-page .input-group > .input-group-text {
    display: flex !important; align-items: center; justify-content: center;
    box-sizing: border-box; width: 30px; min-width: 30px; height: var(--ad-h) !important;
    margin: 0 !important; padding: 0 !important; line-height: 1 !important;
    border: 1px solid #d9e2f0 !important; border-right: 0 !important;
    background: var(--ad-soft) !important; color: var(--ad-muted) !important;
}
.adm-page .input-group > .input-group-text i { display: block; margin: 0 !important; font-size: 14px !important; line-height: 1 !important; }
.adm-page .input-group > :is(.form-control, .form-select) { margin-left: 0 !important; border-left: 1px solid #d9e2f0 !important; }
.adm-page .input-group:focus-within > .input-group-text { border-color: #8fb5ef !important; color: var(--ad-blue) !important; background: #eef5ff !important; }
.adm-page .input-group:focus-within > :is(.form-control, .form-select) { border-left-color: #8fb5ef !important; }

/* Icon + input as ONE box: the group owns the border and height, children just fill it */
.adm-page .input-group.input-group {
    display: flex; flex-wrap: nowrap; align-items: stretch;
    height: var(--ad-h); border: 1px solid #d9e2f0; border-radius: var(--ad-r);
    background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.adm-page .input-group.input-group > :is(.form-control, .form-select, .erp-form-control, .input-group-text, input, select):not([type=checkbox]):not([type=radio]) {
    height: 100% !important; min-height: 0 !important; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.adm-page .input-group.input-group > .input-group-text {
    flex: 0 0 30px; width: 30px; padding: 0 !important;
    border-right: 1px solid #e3eaf6 !important; background: var(--ad-soft) !important; color: var(--ad-muted) !important;
}
.adm-page .input-group.input-group > :is(.form-control, .form-select, input, select) { flex: 1 1 auto; min-width: 0; background-color: transparent !important; }
.adm-page .input-group.input-group:hover { border-color: #c3d1e6; }
.adm-page .input-group.input-group:focus-within { border-color: #8fb5ef; box-shadow: 0 0 0 2px rgba(52, 123, 229, 0.2); }
.adm-page .input-group.input-group:focus-within > .input-group-text { border-right-color: #cfe0fb !important; background: #eef5ff !important; color: var(--ad-blue) !important; }
.adm-page .input-group.input-group:has(.is-invalid) { border-color: #f08a94; }
.adm-page .input-group.input-group:has(.is-invalid) > .input-group-text { color: #d61f2c !important; background: #fff4f5 !important; }
.adm-page .input-group.input-group:has([readonly], :disabled) { background: var(--ad-soft); }

/* ==========================================================================
   Student Profile Photo Upload Component
   ========================================================================== */
.adm-page .adm-photo-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: #fbfdff;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    transition: all 0.2s ease;
}
.adm-page .adm-photo-panel:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}
.adm-page .adm-photo-panel.is-dragover {
    border-color: var(--ad-blue) !important;
    background: #eff6ff !important;
}
.adm-page .adm-avatar-box {
    position: relative;
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    border-radius: 14px;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(16, 29, 64, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.adm-page .adm-avatar-box:hover {
    transform: translateY(-2px);
    border-color: var(--ad-blue);
    box-shadow: 0 6px 14px rgba(16, 29, 64, 0.12);
}
.adm-page .adm-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.adm-page .adm-avatar-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    gap: 2px;
    user-select: none;
}
.adm-page .adm-avatar-empty i {
    font-size: 32px;
    color: #64748b;
}
.adm-page .adm-avatar-empty span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.adm-page .adm-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 29, 64, 0.65);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease;
    user-select: none;
}
.adm-page .adm-avatar-overlay i {
    font-size: 20px;
}
.adm-page .adm-avatar-box:hover .adm-avatar-overlay {
    opacity: 1;
}
.adm-page .adm-photo-info {
    flex: 1 1 240px;
    min-width: 0;
}
.adm-page .adm-photo-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ad-ink);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.adm-page .adm-photo-hint {
    font-size: 11.5px;
    color: var(--ad-muted);
    margin-bottom: 8px;
    line-height: 1.4;
}
.adm-page .adm-photo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.adm-page .adm-btn-photo-upload {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    cursor: pointer;
    transition: all 0.15s ease;
}
.adm-page .adm-btn-photo-upload:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}
.adm-page .adm-btn-photo-remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #fecdd3;
    background: #fff1f2;
    color: #e11d48;
    cursor: pointer;
    transition: all 0.15s ease;
}
.adm-page .adm-btn-photo-remove:hover {
    background: #ffe4e6;
    border-color: #fda4af;
    color: #be123c;
}



/* ===== FEE-MODULE ===== */
/* ==========================================================================
   FEE MODULE — Fee Collection & Billing Console
   Scoped under .fee-module so nothing leaks into other screens.
   ========================================================================== */

.fee-module {
    --fee-navy: #0b1329;
    --fee-slate: #1e293b;
    --fee-red: #dc2626;
    --fee-red-dark: #b91c1c;
    --fee-border: #e2e8f0;
    --fee-border-strong: #cbd5e1;
    --fee-surface: #ffffff;
    --fee-muted-surface: #f8fafc;
    --fee-text: #0f172a;
    --fee-muted: #64748b;

    --fee-paid: #059669;
    --fee-paid-bg: #ecfdf5;
    --fee-paid-border: #a7f3d0;
    --fee-partial: #d97706;
    --fee-partial-bg: #fffbeb;
    --fee-partial-border: #fde68a;
    --fee-due: #dc2626;
    --fee-due-bg: #fef2f2;
    --fee-due-border: #fecaca;
    --fee-free: #2563eb;
    --fee-free-bg: #eff6ff;
    --fee-free-border: #bfdbfe;
    --fee-advance: #0284c7;
    --fee-advance-bg: #f0f9ff;

    --fee-radius: 6px;
    --fee-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --fee-shadow-md: 0 8px 20px -6px rgba(15, 23, 42, 0.12), 0 2px 6px -1px rgba(15, 23, 42, 0.05);
}

.fee-module .fee-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.fee-module kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 6px;
    font-size: 0.66rem;
    font-weight: 700;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid var(--fee-border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: inherit;
}

/* ── Panel (shared card surface) ── */
.fee-module .fee-panel {
    background: var(--fee-surface);
    border: 1px solid var(--fee-border);
    border-radius: var(--fee-radius);
    box-shadow: var(--fee-shadow-sm);
}

/* ── Express Cashier Bar ── */
.fee-module .fee-express {
    position: relative;
    background: radial-gradient(120% 140% at 100% 0%, rgba(220, 38, 38, 0.28) 0%, rgba(220, 38, 38, 0) 55%),
        linear-gradient(135deg, var(--fee-navy) 0%, var(--fee-slate) 100%);
    border-radius: var(--fee-radius);
    padding: 14px 16px;
    color: #fff;
    box-shadow: 0 6px 18px rgba(11, 19, 41, 0.18);
    margin-bottom: 14px;
}
.fee-module .fee-express-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--fee-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #facc15;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.fee-module .fee-express-title {
    font-size: 0.92rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fee-module .fee-express-sub {
    font-size: 0.70rem;
    color: rgba(255, 255, 255, 0.62);
}
.fee-module .fee-express-search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: var(--fee-radius);
    padding: 3px 3px 3px 12px;
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
    transition: box-shadow 0.15s ease;
}
.fee-module .fee-express-search:focus-within {
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.45);
}
.fee-module .fee-express-search > i {
    color: var(--fee-muted);
    font-size: 1.15rem;
}
.fee-module .fee-express-search input {
    flex: 1;
    border: 0;
    outline: none;
    padding: 8px 10px;
    font-size: 0.85rem;
    color: var(--fee-text);
    background: transparent;
    min-width: 0;
}
.fee-module .fee-express-search kbd {
    margin-right: 8px;
}
.fee-module .fee-express-search .btn {
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.fee-module .fee-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 340px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--fee-border);
    border-radius: var(--fee-radius);
    box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.25);
    color: var(--fee-text);
}
.fee-module .express-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.12s ease;
}
.fee-module .express-search-item:last-child {
    border-bottom: 0;
}
.fee-module .express-search-item:hover,
.fee-module .express-search-item.is-active {
    background: #f1f5f9;
}
.fee-module .express-search-item.is-active {
    box-shadow: inset 3px 0 0 var(--fee-red);
}
.fee-module .fee-search-footer {
    padding: 6px 12px;
    font-size: 0.66rem;
    color: var(--fee-muted);
    background: var(--fee-muted-surface);
    border-top: 1px solid var(--fee-border);
    display: flex;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* ── KPI Stats (override global 4-column grid to fit 5 tiles) ── */
.fee-module .fee-stats.ct-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 1199px) {
    .fee-module .fee-stats.ct-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 767px) {
    .fee-module .fee-stats.ct-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
.fee-module .fee-stats .ct-stat {
    position: relative;
    overflow: hidden;
}
.fee-module .fee-stats .ct-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--stat-accent, var(--fee-border-strong));
}
.fee-module .fee-stats .ct-stat-val {
    font-size: 1.12rem !important;
    font-variant-numeric: tabular-nums;
}
.fee-module .fee-stat-meter {
    height: 4px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
    margin-top: 6px;
}
.fee-module .fee-stat-meter > span {
    display: block;
    height: 100%;
    background: var(--stat-accent);
    border-radius: inherit;
    transition: width 0.6s ease;
}

/* ── Filter Toolbar ── */
.fee-module .fee-filters {
    padding: 12px 14px;
    margin-bottom: 14px;
}
.fee-module .fee-filter-label {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--fee-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.fee-module .fee-filters .form-select,
.fee-module .fee-filters .form-control {
    height: 34px;
    font-size: 0.78rem;
    border-color: var(--fee-border-strong);
    border-radius: 5px;
}
.fee-module .fee-filters .form-select:focus,
.fee-module .fee-filters .form-control:focus {
    border-color: var(--fee-navy);
    box-shadow: 0 0 0 3px rgba(11, 19, 41, 0.08);
}
.fee-module .fee-search-field {
    position: relative;
}
.fee-module .fee-search-field i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fee-muted);
    font-size: 15px;
    pointer-events: none;
}
.fee-module .fee-search-field .form-control {
    padding-left: 30px !important;
}

.fee-module .fee-segmented {
    display: inline-flex;
    background: #f1f5f9;
    border: 1px solid var(--fee-border);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}
.fee-module .fee-segmented button {
    border: 0;
    background: transparent;
    color: var(--fee-muted);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}
.fee-module .fee-segmented button:hover {
    color: var(--fee-text);
}
.fee-module .fee-segmented button.is-active {
    background: #fff;
    color: var(--fee-text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.fee-module .fee-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--fee-border);
    font-size: 0.72rem;
}
.fee-module .fee-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--fee-muted-surface);
    border: 1px solid var(--fee-border);
    color: #334155;
    font-weight: 600;
}

/* ── Status badges ── */
.fee-module .fee-status-badge {
    font-size: 0.64rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.fee-module .fee-status-paid { background: var(--fee-paid-bg); color: var(--fee-paid); border-color: var(--fee-paid-border); }
.fee-module .fee-status-partial { background: var(--fee-partial-bg); color: var(--fee-partial); border-color: var(--fee-partial-border); }
.fee-module .fee-status-due { background: var(--fee-due-bg); color: var(--fee-due); border-color: var(--fee-due-border); }
.fee-module .fee-status-free { background: var(--fee-free-bg); color: var(--fee-free); border-color: var(--fee-free-border); }

.fee-module .fee-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.64rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
}
.fee-module .fee-tag-transport { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.fee-module .fee-tag-advance { background: var(--fee-advance-bg); color: var(--fee-advance); border-color: #bae6fd; }

/* ── Avatar ── */
.fee-module .fee-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--fee-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--fee-navy) 0%, var(--fee-red) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.fee-module .fee-avatar.sm { width: 32px; height: 32px; font-size: 0.8rem; }
.fee-module .fee-avatar.lg { width: 44px; height: 44px; font-size: 1.05rem; }

/* ── Student Cards ── */
.fee-module .fee-card {
    background: var(--fee-surface);
    border: 1px solid var(--fee-border);
    border-radius: var(--fee-radius);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    box-shadow: var(--fee-shadow-sm);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
.fee-module .fee-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--card-accent, var(--fee-border-strong));
}
.fee-module .fee-card:hover {
    box-shadow: var(--fee-shadow-md);
    border-color: var(--fee-border-strong);
    transform: translateY(-2px);
}
.fee-module .fee-card.is-paid { --card-accent: #10b981; }
.fee-module .fee-card.is-partial { --card-accent: #f59e0b; }
.fee-module .fee-card.is-due { --card-accent: #ef4444; }
.fee-module .fee-card.is-free { --card-accent: #3b82f6; }

.fee-module .fee-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 10px;
    background: linear-gradient(180deg, #fff 0%, #fcfdfe 100%);
}
.fee-module .fee-card-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--fee-text);
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fee-module .fee-card-meta {
    font-size: 0.68rem;
    color: var(--fee-muted);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}
.fee-module .fee-card-body {
    padding: 0 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.fee-module .fee-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.71rem;
    color: #334155;
    padding: 5px 8px;
    background: var(--fee-muted-surface);
    border: 1px solid #eef2f7;
    border-radius: 5px;
}
.fee-module .fee-contact a {
    color: inherit;
    text-decoration: none;
}
.fee-module .fee-contact a:hover {
    color: var(--fee-red);
}

.fee-module .fee-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #eef2f7;
    border-radius: 5px;
    overflow: hidden;
}
.fee-module .fee-kpis > div {
    padding: 6px 4px;
    text-align: center;
}
.fee-module .fee-kpis > div + div {
    border-left: 1px solid #eef2f7;
}
.fee-module .fee-kpis .lbl {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--fee-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.fee-module .fee-kpis .val {
    font-size: 0.78rem;
    font-weight: 700;
}

.fee-module .fee-progress {
    height: 5px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}
.fee-module .fee-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #10b981, #059669);
}
.fee-module .fee-progress-caption {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: var(--fee-muted);
    margin-top: 3px;
}

.fee-module .fee-card-foot {
    border-top: 1px solid #f1f5f9;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: #fcfdfe;
    font-size: 0.72rem;
}
@media (max-width: 399.98px) {
    .fee-module .fee-card-foot {
        align-items: flex-start;
        flex-direction: column;
    }
    .fee-module .fee-card-foot > div {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ── Action buttons ── */
.fee-module .fee-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.3;
}
.fee-module .fee-btn-collect {
    background: var(--fee-red);
    color: #fff;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}
.fee-module .fee-btn-collect:hover {
    background: var(--fee-red-dark);
    color: #fff;
    transform: translateY(-1px);
}
.fee-module .fee-btn-advance {
    background: #fff;
    color: var(--fee-paid);
    border-color: var(--fee-paid-border);
}
.fee-module .fee-btn-advance:hover {
    background: var(--fee-paid-bg);
    color: var(--fee-paid);
}
.fee-module .fee-btn-ghost {
    background: #fff;
    color: #475569;
    border-color: var(--fee-border-strong);
}
.fee-module .fee-btn-ghost:hover {
    background: #f1f5f9;
    color: var(--fee-text);
}

/* ── Table view ── */
.fee-module .fee-table-wrap {
    max-height: 70vh;
    overflow: auto;
}
.fee-module .fee-table {
    font-size: 0.78rem;
    margin: 0;
}
.fee-module .fee-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--fee-muted-surface);
    border-bottom: 1px solid var(--fee-border);
    color: #475569;
    text-transform: uppercase;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 10px 12px;
    white-space: nowrap;
}
.fee-module .fee-table tbody td {
    padding: 9px 12px;
    vertical-align: middle;
    border-color: #f1f5f9;
}
.fee-module .fee-table tbody tr {
    transition: background 0.12s ease;
}
.fee-module .fee-table tbody tr:hover {
    background: #f8fafc;
}
.fee-module .fee-table .row-accent {
    box-shadow: inset 3px 0 0 var(--card-accent, transparent);
}
.fee-module .fee-table tr.is-paid { --card-accent: #10b981; }
.fee-module .fee-table tr.is-partial { --card-accent: #f59e0b; }
.fee-module .fee-table tr.is-due { --card-accent: #ef4444; }
.fee-module .fee-table tr.is-free { --card-accent: #3b82f6; }

/* ── Empty state & pagination ── */
.fee-module .fee-empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--fee-muted);
}
.fee-module .fee-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 1.7rem;
}
.fee-module .fee-pagination {
    padding: 8px 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.fee-module .fee-pagination nav {
    margin: 0;
}
.fee-module .fee-pagination .pagination {
    margin: 0;
}
.fee-module .fee-pagination .page-link {
    min-width: 32px;
    padding: 6px 10px;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.25;
    text-align: center;
    background: #fff;
    border-color: var(--fee-border);
    box-shadow: none;
}
.fee-module .fee-pagination .page-link:hover {
    z-index: 1;
    color: var(--fee-red);
    background: var(--fee-due-bg);
    border-color: var(--fee-due-border);
}
.fee-module .fee-pagination .page-item.active .page-link {
    color: #fff;
    background: var(--fee-navy);
    border-color: var(--fee-navy);
}
.fee-module .fee-pagination .page-item.disabled .page-link {
    color: #94a3b8;
    background: var(--fee-muted-surface);
    border-color: var(--fee-border);
}
.fee-module .fee-pagination .page-link:focus {
    box-shadow: 0 0 0 3px rgba(11, 19, 41, 0.12);
}
.fee-module .fee-pagination .page-link svg {
    width: 0.85rem;
    height: 0.85rem;
}
@media (max-width: 575.98px) {
    .fee-module .fee-pagination {
        justify-content: center;
        padding: 10px;
        text-align: center;
    }
    .fee-module .fee-pagination nav {
        width: 100%;
        overflow-x: auto;
    }
    .fee-module .fee-pagination .pagination {
        justify-content: center;
        min-width: max-content;
    }
}

/* ==========================================================================
   FEE COLLECTION WORKSPACE
   ========================================================================== */
.fee-module .fee-collect-workspace {
    border-radius: 8px;
    border: 1px solid var(--fee-border-strong);
    box-shadow: var(--fee-shadow-sm);
    overflow: hidden;
}
.fee-module .fee-modal-head {
    background: linear-gradient(135deg, var(--fee-navy) 0%, var(--fee-slate) 70%, #7f1d1d 100%);
    color: #fff;
    padding: 10px 16px;
    border-bottom: 0;
}
.fee-module .fee-modal-head .modal-title {
    font-size: 0.92rem;
    font-weight: 700;
}
.fee-module .fee-modal-head .fee-modal-shortcuts {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.6);
}
.fee-module .fee-modal-head kbd {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.fee-module .fee-student-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--fee-muted-surface);
    border: 1px solid var(--fee-border);
    border-radius: var(--fee-radius);
}
.fee-module .fee-strip-metric {
    text-align: right;
}
.fee-module .fee-strip-metric small {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--fee-muted);
}
.fee-module .fee-strip-metric + .fee-strip-metric {
    border-left: 1px solid var(--fee-border);
    padding-left: 14px;
}

.fee-module .fee-mode-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: #f1f5f9;
    border: 1px solid var(--fee-border);
    padding: 3px;
    border-radius: 7px;
}
.fee-module .mode-tab-btn {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: #475569;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.fee-module .mode-tab-btn:hover {
    color: var(--fee-text);
    background: rgba(255, 255, 255, 0.6);
}
.fee-module .mode-tab-btn.active {
    background: var(--fee-navy);
    color: #fff;
    box-shadow: 0 2px 6px rgba(11, 19, 41, 0.25);
}
.fee-module .mode-tab-btn kbd {
    font-size: 0.58rem;
    min-width: 16px;
    padding: 0 4px;
}
.fee-module .mode-tab-btn.active kbd {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.fee-module .fee-section-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--fee-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}
.fee-module .fee-dues-list {
    max-height: 170px;
    overflow-y: auto;
    border: 1px solid var(--fee-border);
    border-radius: var(--fee-radius);
    background: #fff;
    font-size: 0.74rem;
}
.fee-module .fee-dues-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-bottom: 1px solid #f1f5f9;
}
.fee-module .fee-dues-list li:last-child {
    border-bottom: 0;
}
.fee-module .fee-dues-list li:hover {
    background: #fafbfc;
}

.fee-module .fee-advance-box {
    padding: 10px;
    border: 1px solid var(--fee-border);
    border-radius: var(--fee-radius);
    background: var(--fee-muted-surface);
}
.fee-module .month-chip-btn {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--fee-border-strong);
    background: #fff;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}
.fee-module .month-chip-btn:hover,
.fee-module .month-chip-btn.active {
    background: var(--fee-navy);
    color: #fff;
    border-color: var(--fee-navy);
}
.fee-module .month-chip-btn.is-danger {
    color: var(--fee-red);
}
.fee-module .month-chip-btn.is-danger:hover {
    background: var(--fee-due-bg);
    color: var(--fee-red);
    border-color: var(--fee-due-border);
}
.fee-module .advance-month-box {
    border: 1px solid var(--fee-border);
    border-radius: 5px;
    padding: 6px 9px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fee-module .advance-month-box:hover {
    border-color: #93c5fd;
}
.fee-module .advance-month-box.selected {
    background: var(--fee-free-bg);
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.fee-module .advance-month-box.paid-disabled {
    background: var(--fee-paid-bg);
    border-color: var(--fee-paid-border);
    cursor: not-allowed;
    opacity: 0.85;
}

.fee-module .fee-summary {
    padding: 10px 12px;
    border-radius: var(--fee-radius);
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
    border: 1px solid #bfdbfe;
    margin-bottom: 10px;
}
.fee-module .fee-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: var(--fee-muted);
    margin-bottom: 4px;
}
.fee-module .fee-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px dashed #bfdbfe;
    font-weight: 700;
    color: var(--fee-text);
    font-size: 0.84rem;
}
.fee-module .fee-summary-total .fee-mono {
    font-size: 1.25rem;
    color: var(--fee-paid);
}

.fee-module .fee-amount-input .input-group-text {
    background: #fff;
    font-weight: 700;
    border-color: var(--fee-border-strong);
}
.fee-module .fee-amount-input .form-control {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--fee-navy);
    border-color: var(--fee-border-strong);
    font-variant-numeric: tabular-nums;
}
.fee-module .fee-amount-input .form-control:focus {
    border-color: var(--fee-navy);
    box-shadow: 0 0 0 3px rgba(11, 19, 41, 0.1);
}

.fee-module .fee-tender {
    padding: 10px;
    border: 1px solid var(--fee-border);
    border-radius: var(--fee-radius);
    background: var(--fee-muted-surface);
    margin-bottom: 10px;
}
.fee-module .tender-chip-btn {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--fee-border-strong);
    background: #fff;
    color: #334155;
    cursor: pointer;
    transition: all 0.12s ease;
}
.fee-module .tender-chip-btn:hover {
    background: #e2e8f0;
}
.fee-module .tender-chip-btn.is-danger {
    color: var(--fee-red);
}
.fee-module .fee-change-box {
    height: 31px;
    border: 1px solid var(--fee-border);
    border-radius: 4px;
    background: #fff;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fee-module .fee-pay-methods {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.fee-module .payment-mode-card {
    border: 1px solid var(--fee-border-strong);
    border-radius: var(--fee-radius);
    padding: 7px 4px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    background: #fff;
    transition: all 0.15s ease;
    margin: 0;
}
.fee-module .payment-mode-card i {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 2px;
}
.fee-module .payment-mode-card:hover {
    border-color: #94a3b8;
}
.fee-module .payment-mode-card:has(input:checked) {
    border-color: var(--fee-red);
    background: var(--fee-due-bg);
    color: var(--fee-red-dark);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}
.fee-module .payment-mode-card:has(input:focus-visible) {
    outline: 2px solid var(--fee-navy);
    outline-offset: 2px;
}

.fee-module .fee-modal-foot {
    padding: 10px 16px;
    background: var(--fee-muted-surface);
    border-top: 1px solid var(--fee-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.fee-module #btnSubmitCollect {
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* ── Loading skeleton ── */
.fee-module .fee-skeleton {
    display: block;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
    background-size: 400% 100%;
    animation: fee-shimmer 1.2s ease infinite;
}
@keyframes fee-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (min-width: 768px) {
    .fee-module .fee-modal-left {
        border-right: 1px solid var(--fee-border);
    }
}

@media (max-width: 575px) {
    .fee-module .ct-header-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }
    .fee-module .fee-express-search kbd {
        display: none;
    }
    .fee-module .fee-pay-methods {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fee-module *,
    .fee-module *::before {
        transition: none !important;
        animation: none !important;
    }
}

/* Full page cashier, student profile and receipt history. */
.fee-module .fee-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.fee-module .fee-page-heading h1 { font-size: 22px; font-weight: 750; margin: 5px 0 3px; color: var(--fee-text); }
.fee-module .fee-page-heading p, .fee-module .fee-panel-heading p { margin: 0; color: var(--fee-muted); font-size: 12px; }
.fee-module .fee-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--fee-muted); font-size: 11px; text-decoration: none; }
.fee-module .fee-collect-workspace { overflow: hidden; margin-bottom: 16px; }
.fee-module .fee-collect-workspace .fee-modal-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.fee-module .fee-workspace-back { color: #fff; text-decoration: none; font-size: 11px; }
.fee-module .fee-collect-workspace .modal-body { position: static; }
.fee-module .fee-collect-workspace #modalUpcomingMonthsContainer { max-height: 280px !important; }
.fee-module .fee-panel-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--fee-border); }
.fee-module .fee-panel-heading h2 { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; margin: 0; color: var(--fee-text); }
.fee-module .fee-panel-heading p { margin-top: 4px; font-size: 11px; }
.fee-module .fee-count { padding: 3px 6px; border-radius: 5px; background: var(--fee-muted-surface); color: var(--fee-muted); font-size: 10px; }
.fee-module .fee-ledger-table { color: var(--fee-text); font-size: 12px; min-width: 580px; }
.fee-module .fee-ledger-table > thead > tr > th { background: var(--fee-muted-surface); color: var(--fee-muted); font-size: 10px; font-weight: 650; padding: 10px 14px; white-space: nowrap; border-color: var(--fee-border); }
.fee-module .fee-ledger-table > tbody > tr > td { padding: 12px 14px; border-color: var(--fee-border); background: var(--fee-surface); color: var(--fee-text); }
.fee-module .fee-ledger-table small { font-size: 10px; margin-top: 3px; }
.fee-module .fee-history-note { max-width: 290px; white-space: normal; overflow-wrap: anywhere; }
.fee-module .fee-receipt-actions { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fee-module .fee-profile-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px; margin-bottom: 12px; border-top: 3px solid var(--fee-red); }
.fee-module .fee-profile-avatar { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; background: #fff1f2; color: var(--fee-red); border: 1px solid #fecdd3; border-radius: 16px; overflow: hidden; font-size: 23px; font-weight: 700; }
.fee-module .fee-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fee-module .fee-profile-identity { flex: 1; min-width: 160px; }
.fee-module .fee-profile-identity h2 { margin: 5px 0; font-size: 23px; font-weight: 750; color: var(--fee-text); overflow-wrap: anywhere; }
.fee-module .fee-profile-identity p { margin: 0; font-size: 12px; color: var(--fee-muted); }
.fee-module .fee-profile-identity p span { margin: 0 7px; }
.fee-module .fee-profile-contact { display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--fee-border); padding-left: 20px; }
.fee-module .fee-profile-contact small { font-size: 10px; color: var(--fee-muted); }
.fee-module .fee-profile-contact a { display: flex; gap: 6px; align-items: center; font-size: 16px; font-weight: 650; color: var(--fee-text); text-decoration: none; }
.fee-module .fee-profile-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.fee-module .fee-profile-kpis > div { background: var(--fee-surface); border: 1px solid var(--fee-border); border-radius: 8px; padding: 12px 14px; min-width: 0; }
.fee-module .fee-profile-kpis span { display: flex; gap: 5px; align-items: center; font-size: 11px; color: var(--fee-muted); }
.fee-module .fee-profile-kpis strong { display: block; margin: 5px 0 3px; font-size: 21px; color: var(--fee-text); overflow-wrap: anywhere; }
.fee-module .fee-profile-kpis small { font-size: 10px; color: var(--fee-muted); }
.fee-module .fee-profile-layout { display: grid; grid-template-columns: minmax(250px, .32fr) minmax(0, 1fr); align-items: start; gap: 14px; }
.fee-module .fee-profile-sidebar, .fee-module .fee-profile-main { display: grid; gap: 14px; min-width: 0; }
.fee-module .fee-profile-layout .fee-panel { margin-bottom: 0; }
.fee-module .fee-profile-facts { padding: 14px 16px; margin: 0; display: grid; gap: 13px; }
.fee-module .fee-profile-facts > div { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 8px; }
.fee-module .fee-profile-facts dt { color: var(--fee-muted); font-size: 11px; font-weight: 400; }
.fee-module .fee-profile-facts dd { color: var(--fee-text); margin: 0; font-size: 12px; font-weight: 550; overflow-wrap: anywhere; }
.fee-module .fee-profile-facts .fee-fact-full { grid-template-columns: 1fr; gap: 3px; }
.fee-module .fee-profile-form { padding: 14px 16px; }
.fee-module .fee-enrollment { border-bottom: 1px solid var(--fee-border); }
.fee-module .fee-enrollment:last-child { border-bottom: 0; }
.fee-module .fee-enrollment summary { padding: 12px 16px; cursor: pointer; font-size: 12px; color: var(--fee-text); }
.fee-module .fee-enrollment summary > span { margin-left: 8px; color: var(--fee-muted); font-size: 11px; }
.fee-module .fee-enrollment-label { font-size: 11px; color: var(--fee-muted); padding: 0 16px; margin: 0 0 10px; }
.fee-module .fee-extra-fee > summary { padding: 14px 16px; cursor: pointer; font-size: 13px; font-weight: 650; color: var(--fee-text); }
.fee-module :is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--fee-red); outline-offset: 3px; }
.fee-payment-alert.swal2-popup { width: 430px; padding: 24px; border-radius: 16px; color: #172033; box-shadow: 0 24px 70px #0f172a33; }
.fee-payment-alert .swal2-title { font-size: 21px; padding-top: 8px; }
.fee-payment-alert .swal2-html-container { font-size: 13px; margin: 14px 0 0; }
.fee-alert-student { font-size: 16px; font-weight: 650; }
.fee-alert-student small { display: block; color: #64748b; font-size: 11px; margin-top: 3px; }
.fee-alert-amount { font-size: 34px; font-weight: 750; color: #059669; margin: 14px 0; font-variant-numeric: tabular-nums; }
.fee-alert-primary, .fee-alert-secondary, .fee-alert-print { display: inline-flex; justify-content: center; align-items: center; gap: 7px; border: 1px solid #e2e8f0; border-radius: 7px; padding: 10px 14px; font-size: 12px; font-weight: 650; cursor: pointer; text-decoration: none; }
.fee-alert-primary { background: #dc2626; color: #fff; border-color: #dc2626; }
.fee-alert-secondary { background: #f8fafc; color: #334155; }
.fee-payment-alert .swal2-actions { gap: 8px; margin-top: 18px; }
.fee-alert-print { display: flex; background: #172033; color: #fff; margin-top: 18px; }
.fee-alert-print:hover { background: #293b59; color: #fff; }
.fee-alert-breakdown { padding: 12px; background: #f8fafc; border-radius: 8px; }
.fee-alert-breakdown > span { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; color: #64748b; font-size: 12px; }
.fee-alert-breakdown strong { color: #172033; }
.fee-payment-alert :is(a, button):focus-visible { outline: 2px solid #dc2626; outline-offset: 3px; }
html.dark-theme .fee-module { --fee-surface: #19263b; --fee-muted-surface: #21314b; --fee-border: #30405a; --fee-border-strong: #455974; --fee-text: #e3eaf7; --fee-muted: #a1afc5; color: var(--fee-text); }
html.dark-theme .fee-module .text-dark { color: var(--fee-text) !important; }
html.dark-theme .fee-module .text-muted { color: var(--fee-muted) !important; }
html.dark-theme .fee-module :is(.fee-student-strip, .fee-advance-box, .fee-tender, .fee-summary) { background: var(--fee-muted-surface); border-color: var(--fee-border); }
html.dark-theme .fee-module :is(.form-control, .form-select, .advance-month-box, .payment-mode-card) { background: var(--fee-surface); color: var(--fee-text); border-color: var(--fee-border); }
@media (max-width: 1199.98px) {
    .fee-module .fee-profile-layout { grid-template-columns: minmax(220px, .4fr) minmax(0, 1fr); }
    .fee-module .fee-profile-kpis strong { font-size: 18px; }
}
@media (max-width: 767.98px) {
    .fee-module .fee-page-heading { align-items: flex-start; flex-wrap: wrap; }
    .fee-module .fee-profile-layout { grid-template-columns: minmax(0, 1fr); }
    .fee-module .fee-profile-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fee-module .fee-profile-sidebar { order: 2; }
    .fee-module .fee-profile-contact { border: 0; padding-left: 0; }
    .fee-module .fee-profile-identity h2 { font-size: 20px; }
    .fee-module .fee-collect-workspace .fee-modal-foot { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .fee-module .fee-skeleton { animation: none; }
}

/* Clear cashier hierarchy and readable receipt history. */
.fee-module.fee-collection-page { padding-bottom: 76px; }
.fee-module .fee-collect-workspace { border-radius: 12px; border-color: var(--fee-border); box-shadow: 0 4px 20px #0f172a06; }
.fee-module .fee-collect-workspace .fee-modal-head { background: #111827; padding: 13px 16px; gap: 12px; }
.fee-module .fee-modal-head :is(h1, h2).modal-title { color: #fff !important; font-size: 18px; line-height: 1.35; font-weight: 750; }
.fee-module .fee-workspace-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ffffff30; border-radius: 10px; color: #fff; background: #ffffff0d; font-size: 21px; }
.fee-module .fee-workspace-subtitle { margin: 3px 0 0; font-size: 11px; color: #cbd5e1; }
.fee-module .fee-modal-head .fee-modal-shortcuts { margin-left: 12px; color: #cbd5e1; }
.fee-module .fee-workspace-back { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 7px; border: 1px solid #ffffff40; background: #ffffff0d; color: #fff; font-size: 12px; font-weight: 650; }
.fee-module .fee-workspace-back:hover { color: #fff; background: #ffffff20; border-color: #ffffff70; }
.fee-module .fee-collect-workspace .fee-student-strip { background: var(--fee-surface); border: 1px solid var(--fee-border); border-radius: 9px; padding: 12px 14px; margin-bottom: 12px; }
.fee-module .fee-collection-modes { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 16px; margin-bottom: 18px; }
.fee-module .fee-collection-modes > .text-muted { flex: 1 1 230px; line-height: 1.5; }
.fee-module .fee-mode-tabs { background: var(--fee-muted-surface); border-radius: 8px; }
.fee-module .mode-tab-btn.active { background: #111827; color: #fff; box-shadow: 0 2px 5px #11182726; }
.fee-module .fee-step-heading { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--fee-border); }
.fee-module .fee-step-heading > span { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 8px; background: #111827; color: #fff; font-size: 12px; font-weight: 700; }
.fee-module .fee-step-heading h2 { color: var(--fee-text); font-size: 14px; font-weight: 750; margin: 0 0 3px; }
.fee-module .fee-step-heading p { color: var(--fee-muted); font-size: 10px; margin: 0; }
.fee-module .fee-collect-workspace .fee-modal-left { border-right: 0; }
.fee-module .fee-payment-column { border-left: 1px solid var(--fee-border); }
.fee-module .fee-collect-workspace .fee-section-label { color: var(--fee-text); font-size: 11px; letter-spacing: .3px; }
.fee-module .fee-collect-workspace .fee-advance-box { padding: 13px; background: var(--fee-muted-surface); border-radius: 9px; }
.fee-module .fee-collect-workspace .advance-month-box { min-height: 36px; padding: 8px 10px; border-radius: 6px; }
.fee-module .fee-collect-workspace .advance-month-box.paid-disabled { opacity: 1; }
.fee-module .fee-collect-workspace .advance-month-box.paid-disabled .text-success { color: #047857 !important; }
.fee-module .fee-collect-workspace .advance-month-box.paid-disabled .badge { background: #047857 !important; color: #fff; }
.fee-module.fee-collection-page .text-success { color: #047857 !important; }
.fee-module .fee-collect-workspace .fee-summary { border: 1px solid var(--fee-border); background: var(--fee-muted-surface); border-radius: 9px; padding: 12px 14px; margin-bottom: 14px; }
.fee-module .fee-collect-workspace .fee-summary-total { color: var(--fee-text); border-color: var(--fee-border-strong); margin-top: 10px; padding-top: 10px; }
.fee-module .fee-collect-workspace .fee-summary-total > span:last-child { color: #047857; font-size: 22px; }
.fee-module .fee-collect-workspace .fee-amount-input { margin-bottom: 12px; }
.fee-module .fee-collect-workspace .fee-pay-methods { margin: 7px 0 14px; }
.fee-module .fee-collect-workspace .fee-tender { background: var(--fee-muted-surface); border: 1px solid var(--fee-border); border-radius: 8px; margin-bottom: 14px; }
.fee-module .fee-submit-hint { display: inline-flex; align-items: center; gap: 5px; color: var(--fee-muted); font-size: 11px; }
.fee-module .fee-collect-workspace .fee-modal-foot { padding: 12px 16px; }
.fee-module .fee-history { border-radius: 12px; overflow: hidden; scroll-margin-top: 90px; }
.fee-module .fee-history .fee-panel-heading { background: var(--fee-muted-surface); padding: 15px 16px; }
.fee-module .fee-history .fee-panel-heading h2 { font-size: 15px; }
.fee-module .fee-history-order { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fee-muted); white-space: nowrap; }
.fee-module .fee-history-receipt { display: inline-flex; gap: 5px; align-items: center; color: var(--fee-text); font-weight: 700; text-decoration: none; }
.fee-module .fee-history-receipt i { color: var(--fee-muted); font-size: 17px; }
.fee-module .fee-history-receipt:hover { color: var(--fee-red); }
.fee-module .fee-history-method { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 650; border: 1px solid var(--fee-border); border-radius: 6px; padding: 5px 7px; white-space: nowrap; background: var(--fee-muted-surface); }
.fee-module .fee-history-purpose { display: block; min-width: 130px; max-width: 290px; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.fee-module .fee-history .fee-ledger-table > tbody > tr > td.fee-history-amount { color: #047857; font-size: 14px; white-space: nowrap; }
.fee-module .fee-history .fee-history-row:hover > td { background: var(--fee-muted-surface); }
.fee-module .fee-history .fee-receipt-actions a { min-height: 31px; border-radius: 6px; }
.fee-module .fee-history .fee-receipt-actions a:last-child { color: #b91c1c; background: #fff1f2; border-color: #fecdd3; }
.fee-module .fee-history-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--fee-border); background: var(--fee-muted-surface); }
.fee-module .fee-history-footer > span { color: var(--fee-muted); font-size: 11px; }
.fee-module .fee-history-footer .pagination { margin: 0; }
.fee-module .fee-history-footer .page-link { font-size: 11px; }
html.dark-theme .fee-module .fee-collect-workspace .fee-summary-total > span:last-child, html.dark-theme .fee-module .fee-history .fee-ledger-table > tbody > tr > td.fee-history-amount { color: #6ee7b7; }
html.dark-theme .fee-module .fee-history .fee-receipt-actions a:last-child { color: #fda4af; background: #412a3d; border-color: #624052; }
@media (max-width: 1199.98px) {
    .fee-module .fee-modal-head .fee-modal-shortcuts { display: none !important; }
}
@media (max-width: 991.98px) {
    .fee-module .fee-payment-column { border-left: 0; padding-top: 14px; border-top: 1px solid var(--fee-border); }
    .fee-module .fee-collection-columns { row-gap: 14px; }
}
@media (max-width: 575.98px) {
    .fee-module .fee-workspace-subtitle { max-width: 190px; }
    .fee-module .fee-collect-workspace .fee-modal-head { padding: 12px; }
    .fee-module .fee-collect-workspace .fee-student-strip { gap: 12px; }
    .fee-module .fee-collect-workspace .fee-student-strip > div { width: 100%; }
    .fee-module .fee-collect-workspace .fee-strip-metric { flex: 1; }
    .fee-module .fee-collect-workspace #modalStudentClass { white-space: normal; line-height: 1.5; }
    .fee-module .fee-collection-modes .fee-mode-tabs { width: 100%; display: flex; }
    .fee-module .fee-collection-modes .mode-tab-btn { flex: 1; justify-content: center; padding-inline: 6px; font-size: 11px; }
    .fee-module .fee-submit-hint { display: none; }
    .fee-module .fee-modal-foot > div, .fee-module #btnSubmitCollect { width: 100%; justify-content: center; }
    .fee-module .fee-history .fee-ledger-table { min-width: 0; }
    .fee-module .fee-history .fee-ledger-table thead { display: none; }
    .fee-module .fee-history .fee-history-row { display: block; margin: 10px; padding: 10px 12px; border: 1px solid var(--fee-border); border-radius: 9px; }
    .fee-module .fee-history .fee-history-row > td { display: grid; grid-template-columns: 95px minmax(0, 1fr); align-items: start; gap: 6px; padding: 7px 0; border: 0; text-align: left !important; }
    .fee-module .fee-history .fee-history-row > td::before { content: attr(data-label); color: var(--fee-muted); font-size: 10px; line-height: 1.6; font-weight: 400; }
    .fee-module .fee-history .fee-history-row > td > small { grid-column: 2; }
    .fee-module .fee-history-method { justify-self: start; }
    .fee-module .fee-history-purpose { min-width: 0; }
    .fee-module .fee-history .fee-receipt-actions { justify-self: start; }
}


/* ===== PERMISSION MATRIX ===== */

    /* Scoped with .perm-page + !important where the global `.table th` theme rule would otherwise win. */
    .perm-page {
        --pm-ink: #101d40;
        --pm-muted: #65769a;
        --pm-border: #e3eaf6;
        --pm-surface: #fff;
        --pm-soft: #f4f7fd;
        --pm-navy: #0c1633;
        --pm-red: #ef3340;
        --pm-green: #0aab6b;
        --pm-lock: #1685f8;
        color: var(--pm-ink);
    }
    /* Page fits the content area exactly; only the matrix scrolls (both axes), so its header row and user column stay pinned. */
    .perm-page .page-content { display: flex; flex-direction: column; height: 100%; min-height: 0 !important; overflow: hidden; padding-bottom: 10px !important; background: linear-gradient(135deg, #f8faff, #f2f6fc); }
    .perm-page :is(.perm-toolbar, .perm-legend) { flex-shrink: 0; }

    /* ── One-line toolbar ── */
    .perm-page .perm-toolbar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 12px; margin-bottom: 8px; background: var(--pm-surface); border: 1px solid var(--pm-border); border-radius: 12px; }
    .perm-page .perm-title { display: flex; align-items: center; gap: 9px; min-width: 0; margin-right: auto; }
    .perm-page .perm-title-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: linear-gradient(135deg, var(--pm-red), #d61f2c); color: #fff; font-size: 18px; }
    .perm-page .perm-title h1 { margin: 0; color: var(--pm-ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
    .perm-page .perm-title p { margin: 0; color: var(--pm-muted); font-size: 11px; white-space: nowrap; }
    .perm-page .perm-filters { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; }
    .perm-page .perm-filters select { width: auto !important; min-width: 120px; height: 34px !important; padding: 0 28px 0 10px !important; border: 1px solid var(--pm-border) !important; border-radius: 8px !important; background-color: var(--pm-surface); color: var(--pm-ink); font-size: 12px !important; }
    .perm-page .perm-search { position: relative; width: 230px; }
    .perm-page .perm-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--pm-muted); font-size: 16px; pointer-events: none; }
    .perm-page .perm-search input { width: 100%; height: 34px; padding: 0 10px 0 32px; border: 1px solid var(--pm-border); border-radius: 8px; background: var(--pm-surface); color: var(--pm-ink); font-size: 12px; }
    .perm-page :is(.perm-search input, .perm-filters select):focus { outline: 0; border-color: #8fb5ef !important; box-shadow: 0 0 0 2px rgba(52, 123, 229, 0.12); }
    .perm-page .perm-btn { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; border: 1px solid var(--pm-border); border-radius: 8px; background: var(--pm-surface); color: var(--pm-ink); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
    .perm-page .perm-btn:hover { background: var(--pm-soft); color: var(--pm-ink); }
    .perm-page .perm-btn i { font-size: 15px; }
    .perm-page .perm-btn.is-icon { width: 34px; padding: 0; justify-content: center; }

    /* ── Legend: one small line ── */
    .perm-page .perm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 8px; padding: 0 4px; color: var(--pm-muted); font-size: 11px; }
    .perm-page .perm-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .perm-page .perm-legend .perm-checkbox { width: 14px; height: 14px; border-radius: 4px; pointer-events: none; }
    .perm-page .perm-legend .perm-checkbox:checked::after { font-size: 9px; }

    /* ── Matrix card ── */
    .perm-page .perm-card { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: var(--pm-surface); border: 1px solid var(--pm-border); border-radius: 12px; overflow: hidden; }
    .perm-page .perm-footer { flex-shrink: 0; }
    .perm-page .perm-table-container { flex: 1 1 auto; }
    /* Keep the container as the scroll ancestor for sticky headers and cells. */
    .perm-page .perm-matrix-table { width: max-content; min-width: 100%; margin: 0; color: var(--pm-ink); }
    .perm-page .perm-matrix-table > :not(caption) > * > * { padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--pm-border) !important; background: var(--pm-surface) !important; box-shadow: none !important; font-size: 12px !important; text-align: center; vertical-align: middle !important; }
    .perm-page .perm-matrix-table .is-group-start { border-left: 1px solid var(--pm-border) !important; }

    /* Header (theme navy) */
    .perm-page .perm-matrix-table thead th { position: sticky !important; z-index: 20; text-transform: none !important; letter-spacing: 0 !important; }
    .perm-page .perm-matrix-table thead tr:first-child th { top: 0; height: 40px; line-height: 1.2; }
    .perm-page .perm-matrix-table thead tr:nth-child(2) th { top: var(--pm-head-1, 40px); }
    .perm-page .perm-matrix-table thead tr:nth-child(2) th { box-shadow: 0 1px 0 var(--pm-border), 0 6px 10px -8px rgba(16, 29, 64, 0.25) !important; }
    .perm-page .perm-matrix-table th.perm-module-header { --mod: #4338ca; padding: 0 10px !important; background: var(--pm-navy) !important; border-bottom: 0 !important; border-left: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: inset 0 3px 0 var(--mod) !important; cursor: help; white-space: nowrap; }
    .perm-page .perm-module-header > span { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: 11.5px; font-weight: 600; }
    .perm-page .perm-module-header .perm-module-label { display: inline-block; text-transform: lowercase; }
    .perm-page .perm-module-header .perm-module-label::first-letter { text-transform: uppercase; }
    .perm-page .perm-module-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mod); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mod) 30%, transparent); }
    .perm-page .perm-matrix-table th.perm-action-header { width: 62px; min-width: 62px; height: 46px; padding: 4px !important; background: #f3f6fc !important; color: var(--pm-muted) !important; font-size: 10.5px !important; font-weight: 600 !important; text-transform: capitalize !important; }
    .perm-page .perm-action-header i { display: block; margin: 0 auto 1px; font-size: 15px; color: #8a99b8; }

    .perm-page .perm-head-user { display: flex; flex-direction: column; gap: 3px; text-align: left; }
    .perm-page .perm-head-title { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 15px; font-weight: 700; }
    .perm-page .perm-head-count { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 11px; font-weight: 600; }
    .perm-page .perm-head-sub { color: rgba(255, 255, 255, 0.72); font-size: 11.5px; font-weight: 500; }
    .perm-page .perm-head-legend { display: inline-flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, 0.5); font-size: 10.5px; font-weight: 500; }
    .perm-page .perm-head-legend i { font-size: 12px; }

    /* Sticky user column */
    .perm-page .perm-matrix-table .th-user-col,
    .perm-page .perm-matrix-table .td-user-info { position: sticky !important; left: 0; width: 310px; min-width: 310px; max-width: 310px; text-align: left !important; box-shadow: 1px 0 0 var(--pm-border), 8px 0 14px -10px rgba(16, 29, 64, 0.25) !important; }
    .perm-page .perm-matrix-table .th-user-col { z-index: 30 !important; padding: 10px 16px !important; vertical-align: middle !important; background: var(--pm-navy) !important; color: #fff !important; font-size: 11.5px !important; font-weight: 600 !important; }
    .perm-page .perm-matrix-table .td-user-info { z-index: 10; padding: 9px 12px !important; color: var(--pm-ink) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; }
    .perm-page .perm-user { display: flex; align-items: center; gap: 10px; }
    .perm-page .perm-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: linear-gradient(145deg, #e7eeff, #f4e9ff); color: #435c95; font-size: 12px; font-weight: 700; }
    .perm-page .row-locked .perm-avatar { background: linear-gradient(135deg, var(--pm-red), #8b1d3a); color: #fff; }
    .perm-page .perm-user-body { flex: 1; min-width: 0; }
    .perm-page .perm-user-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .perm-page .perm-user-name strong { overflow: hidden; color: var(--pm-ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; text-transform: none; }
    .perm-page .perm-user-meta { overflow: hidden; color: var(--pm-muted); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; text-transform: none; }
    .perm-page .perm-progress { display: flex; align-items: center; gap: 7px; margin-top: 5px; color: var(--pm-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
    .perm-page .perm-progress-track { flex: 1; max-width: 100px; height: 4px; border-radius: 99px; background: #e6ecf6; overflow: hidden; }
    .perm-page .perm-progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--pm-green); transition: width 0.2s; }
    .perm-page .perm-count.is-full { color: var(--pm-red); font-weight: 600; }
    .perm-page .row-locked .perm-progress-track span { background: var(--pm-red); }
    .perm-page .user-badge-role { flex: 0 0 auto; padding: 1px 7px; border-radius: 6px; font-size: 9.5px; font-weight: 600; text-transform: none; }
    .perm-page .role-superadmin { background: #ffe8ea; color: #c21d2a; }
    .perm-page .role-admin { background: #fff3db; color: #9a5d00; }
    .perm-page .role-teacher { background: #e2f7ed; color: #07853f; }
    .perm-page .role-staff { background: #f0e8ff; color: #6d2fc4; }
    .perm-page .perm-menu-btn { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--pm-border); border-radius: 7px; background: var(--pm-surface); color: var(--pm-muted); font-size: 17px; }
    .perm-page .perm-menu-btn:hover { background: var(--pm-soft); }

    .perm-page .perm-matrix-table tbody td { height: 58px; }
    .perm-page .perm-matrix-table tbody tr:hover > * { background: #f7f9fe !important; }
    .perm-page .perm-matrix-table tbody tr.row-locked > * { background: #fcfdff !important; }

    /* Checkbox */
    .perm-page .perm-checkbox { appearance: none; -webkit-appearance: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0; border: 1.5px solid #c7d3e6; border-radius: 6px; background: #fff; cursor: pointer; vertical-align: middle; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; }
    .perm-page .perm-checkbox:hover:not(:disabled) { border-color: var(--pm-green); box-shadow: 0 0 0 3px rgba(10, 171, 107, 0.12); }
    .perm-page .perm-checkbox:focus-visible { outline: 2px solid #347be5; outline-offset: 2px; }
    .perm-page .perm-checkbox:checked { background: var(--pm-green); border-color: var(--pm-green); }
    .perm-page .perm-checkbox:checked::after { content: '\2713'; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
    .perm-page .perm-checkbox:disabled { cursor: not-allowed; }
    .perm-page .perm-checkbox.is-locked:checked { background: #fff1f2; border-color: #ffc9ce; }
    .perm-page .perm-checkbox.is-locked:checked::after { color: var(--pm-red); }
    .perm-page .perm-checkbox.is-saving { opacity: 0.45; pointer-events: none; }

    .perm-page .perm-empty { padding: 44px 16px !important; color: var(--pm-muted); }
    .perm-page .perm-empty i { display: block; margin-bottom: 6px; font-size: 34px; }
    .perm-page .perm-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--pm-border); color: var(--pm-muted); font-size: 11.5px; }
    .perm-page .perm-footer .pagination { margin: 0; gap: 4px; }
    .perm-page .perm-footer .page-link { border-radius: 6px; font-size: 11.5px; }

    html.dark-theme .perm-page { --pm-ink: #e3eaf7; --pm-muted: #a1afc5; --pm-border: #30405a; --pm-surface: #19263b; --pm-soft: #21314b; }
    html.dark-theme .perm-page .page-content { background: #111c30; }
    html.dark-theme .perm-page .perm-matrix-table th.perm-action-header { background: #21314b !important; }
    html.dark-theme .perm-page .perm-matrix-table tbody tr:hover > * { background: #1e2d46 !important; }
    html.dark-theme .perm-page .perm-matrix-table tbody tr.row-locked > * { background: var(--pm-surface) !important; }
    html.dark-theme .perm-page .perm-checkbox:not(:checked) { background: var(--pm-surface); border-color: #4a5c7a; }

    @media (max-width: 991.98px) {
        .perm-page .perm-toolbar { flex-wrap: wrap; height: auto; padding: 10px; }
        .perm-page .perm-title { width: 100%; }
        .perm-page .perm-filters { flex-wrap: wrap; width: 100%; }
        .perm-page .perm-search { flex: 1; width: auto; }
    }
    @media (max-width: 767.98px) {
        .perm-page .perm-matrix-table .th-user-col, .perm-page .perm-matrix-table .td-user-info { width: 210px; min-width: 210px; max-width: 210px; }
        .perm-page .perm-user-meta, .perm-page .perm-avatar { display: none; }
    }
    .perm-page .perm-matrix-table thead th.perm-module-header { background: color-mix(in srgb, var(--mod) 72%, #101d40) !important; border-right: 2px solid var(--pm-surface) !important; }
    .perm-page .perm-matrix-table thead th.perm-action-header { background: color-mix(in srgb, var(--mod) 12%, #fff) !important; color: color-mix(in srgb, var(--mod) 65%, #101d40) !important; border-bottom: 3px solid var(--mod) !important; }
    .perm-page .perm-action-header i { color: inherit; }
    .perm-page .perm-matrix-table .perm-action-header.is-group-start { border-left: 2px solid var(--pm-surface) !important; }
    .perm-page .perm-module-label { text-transform: none !important; }
    .perm-page .perm-btn, .perm-page .perm-menu-btn { min-height: 36px; border-radius: 6px; transition: background-color .15s, border-color .15s; }
    .perm-page .perm-btn:hover, .perm-page .perm-menu-btn:hover { background: #edf2ff; border-color: #a5b4cf; color: var(--pm-ink); }
    .perm-page .perm-btn:focus-visible, .perm-page .perm-menu-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
    .perm-page .perm-footer { padding: 12px 14px; gap: 12px; }
    html.dark-theme .perm-page .perm-matrix-table thead th.perm-action-header { background: color-mix(in srgb, var(--mod) 25%, #19263b) !important; color: #edf2ff !important; }

/* ==========================================================================
   FEE COLLECTION UI (collect page, bus months modal, fee report modal)
   Single place for fee-module overrides; moved here from inline <style> blocks.
   ========================================================================== */
/* ── Fee collection: compact extras (exam / transport) + payment column ── */
html:root body .fee-collection-page .fee-compact .fee-extras { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: stretch; gap: 8px; }
html:root body .fee-collection-page .fee-compact .fee-extra { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; min-width: 0; }
html:root body .fee-collection-page .fee-compact .fee-extra > .form-label { margin: 0; font-size: 0.72rem; font-weight: 700; color: var(--cp-ink); }
html:root body .fee-collection-page .fee-compact .fee-exam-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
html:root body .fee-collection-page .fee-compact .fee-exam-chip { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 4px; padding: 5px 6px 5px 26px; border-radius: 9px; min-width: 0; }
html:root body .fee-collection-page .fee-compact .fee-exam-chip .form-check-input { top: 50%; left: 8px; margin: 0; transform: translateY(-50%); }
html:root body .fee-collection-page .fee-compact .fee-exam-chip strong { font-size: 0.72rem; white-space: nowrap; }
html:root body .fee-collection-page .fee-compact .fee-exam-chip small { display: inline; font-size: 0.6rem; }
html:root body .fee-collection-page .fee-compact .fee-exam-chip em { font-size: 0.74rem; }
html:root body .fee-collection-page .fee-compact .fee-extra .form-check-label { font-size: 0.74rem; }
html:root body .fee-collection-page .fee-compact .fee-extra .btn-link { align-self: flex-start; font-size: 0.72rem; }
html:root body .fee-collection-page .fee-compact .fee-rates-hint { padding: 0 2px; }
@media (max-width: 767.98px) { html:root body .fee-collection-page .fee-compact .fee-extras { grid-template-columns: minmax(0, 1fr); } }

html:root body .fee-collection-page .fee-payment-column .form-label { font-size: 0.7rem; font-weight: 700; margin-bottom: 2px; }
html:root body .fee-collection-page .fee-payment-column .form-control-sm,
html:root body .fee-collection-page .fee-payment-column .input-group-sm > .form-control,
html:root body .fee-collection-page .fee-payment-column .input-group-sm > .input-group-text,
html:root body .fee-collection-page .fee-payment-column .fee-change-box { height: 34px; min-height: 34px; font-size: 0.8rem; border-radius: 9px; }
html:root body .fee-collection-page .fee-payment-column .fee-amount-input { margin-bottom: 8px !important; }
html:root body .fee-collection-page .fee-payment-column .fee-amount-input .form-control { height: 40px; min-height: 40px !important; font-size: 1.05rem !important; }
html:root body .fee-collection-page .fee-payment-column .fee-amount-input .input-group-text { min-width: 36px; font-size: 0.95rem !important; }
html:root body .fee-collection-page .fee-payment-column .fee-pay-methods { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px !important; margin-bottom: 8px !important; }
html:root body .fee-collection-page .fee-payment-column .payment-mode-card { flex-direction: row; justify-content: center; gap: 5px; height: 34px; min-height: 34px; padding: 0 6px !important; font-size: 0.74rem !important; border-radius: 9px !important; }
html:root body .fee-collection-page .fee-payment-column .payment-mode-card i { font-size: 16px !important; }
html:root body .fee-collection-page .fee-payment-column .fee-tender { padding: 8px !important; margin-bottom: 8px !important; }
html:root body .fee-collection-page .fee-payment-column .fee-tender > .d-flex { margin-bottom: 6px !important; }
html:root body .fee-collection-page .fee-payment-column .fee-change-box { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
html:root body .fee-collection-page .fee-payment-column .fee-summary-row { padding: 6px 12px; font-size: 0.8rem; }
html:root body .fee-collection-page .fee-payment-column .fee-summary-total { padding: 10px 14px; font-size: 0.85rem; }
html:root body .fee-collection-page .fee-payment-column .row.g-2 { --bs-gutter-y: 6px; --bs-gutter-x: 8px; }

/* ── Bus months modal: per-month reason + past/paid rows ── */
html:root body #busMonthsModal .fee-transport-row { flex-wrap: wrap; }
html:root body #busMonthsModal .fee-transport-row.is-past { background: #f8fafc; }
html:root body #busMonthsModal .fee-bus-note { padding-left: 2px; font-size: 0.68rem; }

/* ── Fee report modal: stay clear of the sidebar, compact content ── */
@media (min-width: 992px) {
    html:root body .fee-report-modal { padding-left: var(--fr-left, 0px) !important; padding-right: 0 !important; }
}
@media (max-width: 991.98px) {
    html:root body .fee-report-modal { padding-left: 0 !important; padding-right: 0 !important; }
    html:root body .fee-report-modal .modal-dialog { width: calc(100% - 16px) !important; max-width: 100% !important; margin: 0.5rem auto !important; }
}
html:root body .fee-report-modal .modal-dialog { max-width: min(1000px, 100%); margin-left: auto; margin-right: auto; }
html:root body .fee-report-modal .modal-body { padding: 12px 16px; }

    /* compact payment column + extras (inline so it is never stale-cached) */
    #feeCollectPage .fee-payment-column { font-size: 12px; }
    #feeCollectPage .fee-payment-column .fee-summary { display: grid; grid-template-columns: 1fr 1fr; border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
    #feeCollectPage .fee-payment-column .fee-summary-row { padding: 5px 10px !important; font-size: 11.5px !important; display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px dashed #e6ecf5; min-height: 0 !important; }
    #feeCollectPage .fee-payment-column .fee-summary-row span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #feeCollectPage .fee-payment-column .fee-summary-total { grid-column: 1 / -1; padding: 7px 12px !important; font-size: 12px !important; }
    #feeCollectPage .fee-payment-column .fee-summary-total .fee-mono { font-size: 1.15rem !important; }
    #feeCollectPage .fee-payment-column .form-label { font-size: 10.5px !important; margin: 0 0 2px !important; }
    #feeCollectPage .fee-payment-column input.form-control,
    #feeCollectPage .fee-payment-column .input-group-text,
    #feeCollectPage .fee-payment-column .fee-change-box { height: 30px !important; min-height: 30px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 12px !important; border-radius: 8px !important; line-height: 28px; }
    #feeCollectPage .fee-payment-column .fee-amount-input input.form-control { height: 36px !important; min-height: 36px !important; font-size: 1rem !important; }
    #feeCollectPage .fee-payment-column .fee-amount-input .input-group-text { height: 36px !important; min-height: 36px !important; min-width: 32px !important; }
    #feeCollectPage .fee-payment-column .fee-pay-methods { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 5px !important; margin-bottom: 6px !important; }
    #feeCollectPage .fee-payment-column .payment-mode-card { height: 30px !important; min-height: 30px !important; padding: 0 4px !important; flex-direction: row !important; gap: 4px !important; font-size: 11.5px !important; border-radius: 8px !important; }
    #feeCollectPage .fee-payment-column .payment-mode-card i { font-size: 15px !important; }
    #feeCollectPage .fee-payment-column .fee-tender { padding: 6px 8px !important; margin: 0 0 6px !important; border-radius: 8px !important; }
    #feeCollectPage .fee-payment-column .tender-chip-btn { height: 22px !important; padding: 0 7px !important; font-size: 11px !important; }
    #feeCollectPage .fee-payment-column .fee-tender > .d-flex { margin-bottom: 5px !important; }
    #feeCollectPage .fee-payment-column .row.g-2 { --bs-gutter-x: 6px; --bs-gutter-y: 4px; margin-bottom: 6px !important; }
    #feeCollectPage .fee-payment-column .btn-danger#btnSubmitCollect { height: 38px; font-size: 13px; }

    /* exam + transport extras */
    #feeCollectPage .fee-extras { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important; gap: 6px !important; margin-top: 6px !important; }
    #feeCollectPage .fee-extra { padding: 6px 8px !important; gap: 4px !important; border-radius: 9px !important; }
    #feeCollectPage .fee-extra > .form-label { font-size: 11px !important; margin: 0 !important; }
    #feeCollectPage .fee-exam-chips { gap: 4px !important; }
    #feeCollectPage .fee-exam-chip { padding: 3px 6px !important; gap: 5px !important; flex-direction: row !important; align-items: center !important; border-radius: 8px !important; min-height: 0 !important; }
    #feeCollectPage .fee-exam-chip .form-check-input { position: static !important; transform: none !important; margin: 0 !important; width: 13px; height: 13px; flex: none; }
    #feeCollectPage .fee-exam-chip strong { font-size: 11px !important; }
    #feeCollectPage .fee-exam-chip small { font-size: 9.5px !important; display: inline !important; }
    #feeCollectPage .fee-exam-chip em { font-size: 11px !important; margin-left: auto; }
    #feeCollectPage .fee-extra .form-switch { min-height: 0 !important; padding-left: 2.2em; }
    #feeCollectPage .fee-extra .form-check-input { width: 1.8em; height: .95em; }
    #feeCollectPage .fee-extra .form-check-label { font-size: 11.5px !important; }
    #feeCollectPage .fee-extra .btn-link { font-size: 11px !important; padding: 0 !important; }
    #feeCollectPage .fee-rates-hint { font-size: 10.5px !important; margin: 4px 0 0 !important; }

    #feeReportModal .fee-report-dialog { max-width: 760px; width: calc(100% - 24px); margin-left: auto; margin-right: auto; }
    @media (min-width: 992px) {
        #feeReportModal { padding-left: var(--fr-left, 0px) !important; padding-right: 0 !important; }
    }
    @media (max-width: 991.98px) {
        #feeReportModal { padding-left: 0 !important; padding-right: 0 !important; }
        #feeReportModal .fee-report-dialog { width: calc(100% - 16px) !important; margin: 0.5rem auto !important; }
    }
    #feeReportModal .modal-dialog { margin-top: auto; margin-bottom: auto; }
    #feeReportModal .modal-header { padding: 8px 14px; }
    #feeReportModal .modal-title { font-size: 1rem; }
    #feeReportModal .modal-body { padding: 10px 14px; max-height: 70vh; }
    #feeReportModal .modal-footer { padding: 6px 14px; }
    #feeReportModal .fst { font-size: 11.5px; }
    #feeReportModal .fst-head h3 { font-size: 14px; }
    #feeReportModal .fst-kpis { margin: 8px 0; gap: 6px; }
    #feeReportModal .fst-kpi { padding: 5px 8px; }
    #feeReportModal .fst-kpi strong { font-size: 13px; }
    #feeReportModal .fst-note { margin-bottom: 6px; padding: 5px 8px; font-size: 11px; }
    #feeReportModal .fst h4 { margin: 8px 0 4px; font-size: 11px; }
    #feeReportModal .fst th, #feeReportModal .fst td { padding: 2px 6px; font-size: 11px; }
    #feeReportModal .fst-grid { display: none; }
    #feeReportModal .fst-months { min-width: 0; }

/* Collect page: one parent card holding two equal-height panes (what to collect | payment) */
#feeCollectPage .fee-collect-shell { padding: 12px; border: 1px solid #e3e9f4; border-radius: 16px; background: linear-gradient(180deg, #f8faff 0%, #f3f6fc 100%); box-shadow: 0 1px 2px rgba(15, 27, 61, .04); }
#feeCollectPage .fee-collect-shell-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font-size: 13px; font-weight: 800; color: #0f1b3d; letter-spacing: .2px; }
#feeCollectPage .fee-collect-shell-head i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #0f1b3d; color: #fff; font-size: 15px; }
#feeCollectPage .fee-collect-shell-head small { margin-left: auto; font-weight: 500; font-size: 11px; color: #64748b; }
#feeCollectPage .fee-collection-columns { --bs-gutter-x: 12px; --bs-gutter-y: 12px; align-items: stretch; }
#feeCollectPage .fee-collection-columns > [class*="col-"] { display: flex; }
#feeCollectPage .fee-pane { flex: 1 1 auto; width: 100%; min-width: 0; padding: 12px; border: 1px solid #e6ecf5; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(15, 27, 61, .05); }
#feeCollectPage .fee-pane .fee-block { margin: 0 0 10px; padding: 0 0 10px; border: 0; border-bottom: 1px dashed #e6ecf5; border-radius: 0; background: transparent; box-shadow: none; }
#feeCollectPage .fee-pane .fee-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
#feeCollectPage .fee-pane .fee-advance-box { background: transparent; }
@media (max-width: 991.98px) { #feeCollectPage .fee-collect-shell-head small { display: none; } }

/* Session summary: compact header + KPI strip + two equal panes (month status | latest actions) */
html:root body .fee-session-summary { padding: 12px !important; }
html:root body .fee-session-summary .fee-ss-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px !important; }
html:root body .fee-session-summary .fee-ss-head h2 { margin: 0; font-size: 14px !important; }
html:root body .fee-session-summary .fee-ss-head p { margin: 1px 0 0; font-size: 11px !important; }
html:root body .fee-session-summary .fee-ss-pct { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 180px; }
html:root body .fee-session-summary .fee-ss-pct .fee-ss-progress { flex: 1; height: 7px; margin: 0 !important; }
html:root body .fee-session-summary .fee-ss-pct b { font-size: 11px; white-space: nowrap; color: #0f1b3d; }
html:root body .fee-session-summary .fee-ss-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px !important; margin: 0 0 10px !important; }
html:root body .fee-session-summary .fee-ss-kpis > div { display: flex; flex-direction: column; justify-content: center; padding: 5px 9px !important; min-height: 0 !important; border-radius: 9px !important; }
html:root body .fee-session-summary .fee-ss-kpis small { font-size: 9.5px !important; line-height: 1.2; }
html:root body .fee-session-summary .fee-ss-kpis strong { font-size: 14px !important; line-height: 1.25; }
html:root body .fee-session-summary .fee-ss-pane { height: 100%; padding: 10px; border: 1px solid #e6ecf5; border-radius: 12px; background: #fbfcff; }
html:root body .fee-session-summary .row { --bs-gutter-x: 10px; --bs-gutter-y: 10px; }
html:root body .fee-session-summary .fee-ss-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 5px; }
html:root body .fee-session-summary .fee-ss-month { padding: 4px 2px !important; min-height: 0 !important; border-radius: 8px !important; }
html:root body .fee-session-summary .fee-ss-month small { font-size: 9px !important; }
html:root body .fee-session-summary .fee-ss-exams { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e6ecf5; }
html:root body .fee-session-summary .fee-ss-exam { padding: 2px 8px !important; font-size: 10.5px !important; }
html:root body .fee-session-summary .fee-ss-log li { padding: 5px 0 !important; font-size: 11.5px; }
@media (max-width: 991.98px) { html:root body .fee-session-summary .fee-ss-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { html:root body .fee-session-summary .fee-ss-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } html:root body .fee-session-summary .fee-ss-pct { width: 100%; margin-left: 0; } }

/* Session summary: equal-size tiles (12 months + 3 exams) with bus status; slimmer actions pane */
html:root body .fee-session-summary .fee-ss-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
html:root body .fee-session-summary .fee-ss-month { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px !important; padding: 4px 2px !important; }
html:root body .fee-session-summary .fee-ss-month-name { font-size: 12.5px; line-height: 1.2; }
html:root body .fee-session-summary .fee-ss-bus { display: inline-flex; align-items: center; gap: 2px; margin-top: 1px; padding: 0 5px; border-radius: 99px; background: #eef2f7; color: #64748b; font-size: 9px; font-weight: 700; line-height: 14px; text-transform: uppercase; }
html:root body .fee-session-summary .fee-ss-bus.is-paid { background: #dcfce7; color: #047857; }
html:root body .fee-session-summary .fee-ss-bus.is-due, html:root body .fee-session-summary .fee-ss-bus.is-billed { background: #fee2e2; color: #b91c1c; }
html:root body .fee-session-summary .fee-ss-bus.is-not_billed { background: #ffedd5; color: #c2410c; }
html:root body .fee-session-summary .fee-ss-examtile { border: 1px dashed #c4b5fd !important; background: #f5f3ff !important; }
html:root body .fee-session-summary .fee-ss-examtile .fee-ss-month-name { color: #6d28d9; }
html:root body .fee-session-summary .fee-ss-examtile.is-paid { background: #f0fdf4 !important; border-color: #86efac !important; }
html:root body .fee-session-summary .fee-ss-examtile.is-paid .fee-ss-month-name { color: #047857; }
html:root body .fee-session-summary .fee-ss-legend { font-size: 10.5px; }
html:root body .fee-session-summary .fee-ss-log li { gap: 8px; align-items: center; border-bottom: 1px dashed #e6ecf5; }
html:root body .fee-session-summary .fee-ss-log li > i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: #eef2ff; color: #3b4ea3; font-size: 14px; }
html:root body .fee-session-summary .fee-ss-log strong { font-size: 11.5px; line-height: 1.25; }
html:root body .fee-session-summary .fee-ss-log small { font-size: 10px; }
@media (max-width: 575.98px) { html:root body .fee-session-summary .fee-ss-months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Collect page: shell vs pane backgrounds and grouped payment inputs */
#feeCollectPage .fee-collect-shell { background: #eef2f8; border-color: #dbe3f0; box-shadow: none; }
#feeCollectPage .fee-pane { background: #fff; border-color: #dbe3f0; box-shadow: 0 1px 2px rgba(15, 27, 61, .06); }
#feeCollectPage .fee-pay-group { margin-bottom: 8px; padding: 8px 10px 10px; border: 1px solid #e6ecf5; border-radius: 10px; background: #f8fafd; }
#feeCollectPage .fee-pay-group-title { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
#feeCollectPage .fee-pay-group-title::after { content: ""; flex: 1; height: 1px; background: #e3e9f4; }
#feeCollectPage .fee-pay-group .fee-tender { margin: 6px 0 0 !important; padding: 6px 0 0 !important; border: 0 !important; border-top: 1px dashed #dbe3f0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
#feeCollectPage .fee-pay-group .form-control, #feeCollectPage .fee-pay-group .input-group-text, #feeCollectPage .fee-pay-group .fee-change-box { background: #fff; border-color: #dbe3f0; }
#feeCollectPage .fee-payment-column .fee-submit-bar { margin-top: 2px; }

/* Amount input: one joined control (₹ addon + value), no overlap */
#feeCollectPage .fee-amount-input { display: flex; flex-wrap: nowrap; align-items: stretch; margin-bottom: 8px !important; border-radius: 9px; box-shadow: none !important; }
#feeCollectPage .fee-amount-input .input-group-text { flex: 0 0 auto; width: 36px; justify-content: center; padding: 0 !important; border-radius: 9px 0 0 9px !important; border-right: 0; background: #f1f5f9 !important; color: #0f1b3d; font-weight: 800; }
#feeCollectPage .fee-amount-input input.form-control { flex: 1 1 auto; width: 1% !important; min-width: 0; padding: 0 10px !important; border-radius: 0 9px 9px 0 !important; border-left: 0; font-weight: 800; letter-spacing: .2px; }
#feeCollectPage .fee-amount-input:focus-within .input-group-text, #feeCollectPage .fee-amount-input:focus-within input.form-control { border-color: #e8323f; }
#feeCollectPage .fee-payment-column label[for="modalAmountInput"] { display: block; position: static; }

/* Sidebar: flat, professional (no glow, soft shadows) */
html:root body #appSidebar { box-shadow: 1px 0 0 rgba(2, 6, 23, .35) !important; }
html:root body #appSidebar .sidebar-header, html:root body #appSidebar .sb-footer { box-shadow: none; }
html:root body #appSidebar .sidebar-header .logo-badge { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) !important; }
html:root body #appSidebar .sb-cta { background: #e8323f; box-shadow: none; }
html:root body #appSidebar .sb-cta:hover { background: #d92a37; box-shadow: none; }
html:root body #appSidebar .sb-search, html:root body #appSidebar .sb-search:focus-within { box-shadow: none; }
html:root body #appSidebar .sb-search:focus-within { border-color: rgba(232, 50, 63, .55); }
html:root body #appSidebar #menu > li > a:hover { transform: none; background: rgba(255, 255, 255, .06); }
html:root body #appSidebar #menu > li > a .parent-icon { box-shadow: none; }
html:root body #appSidebar #menu > li.mm-active > a:not(.has-arrow) { background: #e8323f !important; box-shadow: none !important; }
html:root body #appSidebar #menu > li.mm-active > a:not(.has-arrow)::after { box-shadow: none; background: rgba(255, 255, 255, .85); }
html:root body #appSidebar #menu > li.mm-active > a.has-arrow { background: rgba(255, 255, 255, .06) !important; box-shadow: none !important; }
html:root body #appSidebar #menu ul li.mm-active > a { background: rgba(232, 50, 63, .14) !important; box-shadow: inset 2px 0 0 #ff6b76 !important; }
html:root body #appSidebar #menu li.menu-label { letter-spacing: .8px; font-size: 10.5px; }
html:root body #appSidebar .sb-user { background: rgba(255, 255, 255, .04); box-shadow: none; }
html:root body #appSidebar .sb-user-avatar { box-shadow: none; }

/* Collect page: exam chips + transport card, laid out as clean tiles */
html:root body #feeCollectPage .fee-extras { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) !important; gap: 8px !important; margin-top: 10px !important; padding-top: 10px; border-top: 1px dashed #e3e9f4; }
html:root body #feeCollectPage .fee-extra { display: flex; flex-direction: column; gap: 6px !important; padding: 8px 10px !important; border: 1px solid #e3e9f4 !important; border-radius: 10px !important; background: #f8fafd !important; }
html:root body #feeCollectPage .fee-extra > .form-label { display: flex; align-items: center; gap: 4px; margin: 0 !important; color: #0f1b3d; font-size: 11.5px !important; font-weight: 800 !important; }
html:root body #feeCollectPage .fee-extra > .form-label small { font-weight: 500; font-size: 10px; }
html:root body #feeCollectPage .fee-exam-chips { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px !important; }
html:root body #feeCollectPage .fee-exam-chip { display: grid !important; grid-template-columns: 16px minmax(0, 1fr); grid-template-areas: "chk name" "chk amt"; align-items: center; column-gap: 7px; row-gap: 0; padding: 6px 8px !important; margin: 0; border: 1.5px solid #dbe3f0 !important; border-radius: 9px !important; background: #fff !important; cursor: pointer; }
html:root body #feeCollectPage .fee-exam-chip .form-check-input { grid-area: chk; position: static !important; transform: none !important; width: 15px; height: 15px; margin: 0 !important; }
html:root body #feeCollectPage .fee-exam-chip > span { grid-area: name; display: flex; align-items: baseline; gap: 4px; min-width: 0; }
html:root body #feeCollectPage .fee-exam-chip strong { font-size: 11.5px !important; line-height: 1.2; white-space: nowrap; }
html:root body #feeCollectPage .fee-exam-chip small { display: inline !important; font-size: 9.5px !important; color: #94a3b8; }
html:root body #feeCollectPage .fee-exam-chip em { grid-area: amt; margin: 0 !important; font-size: 12px !important; font-weight: 800; font-style: normal; color: #0f1b3d; }
html:root body #feeCollectPage .fee-exam-chip.selected { border-color: #7c3aed !important; background: #f5f3ff !important; box-shadow: none !important; }
html:root body #feeCollectPage .fee-exam-chip.is-disabled { opacity: .65; cursor: not-allowed; }
html:root body #feeCollectPage .fee-exam-chip.is-paid { border-style: dashed !important; background: #f0fdf4 !important; }
html:root body #feeCollectPage .fee-exam-chip.is-billed { border-style: dashed !important; background: #fffbeb !important; }
html:root body #feeCollectPage .fee-extra .form-switch { display: flex; align-items: center; gap: 8px; min-height: 0 !important; padding: 0 !important; margin: 0; }
html:root body #feeCollectPage .fee-extra .form-switch .form-check-input { flex: none; float: none; margin: 0 !important; width: 2.1em; height: 1.1em; }
html:root body #feeCollectPage .fee-extra .form-check-label { font-size: 11.5px !important; font-weight: 600; line-height: 1.25; }
html:root body #feeCollectPage .fee-extra .btn-link { display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; margin-top: auto; padding: 3px 9px !important; border: 1px solid #dbe3f0; border-radius: 99px; background: #fff; color: #0f1b3d; font-size: 11px !important; font-weight: 700; text-decoration: none; }
html:root body #feeCollectPage .fee-extra .btn-link:hover { border-color: #e8323f; color: #e8323f; }
html:root body #feeCollectPage .fee-rates-hint { margin: 8px 2px 0 !important; color: #64748b; font-size: 10.5px !important; }
html:root body #feeCollectPage .fee-subtotal { margin-top: 8px; padding: 8px 10px; border: 1px solid #e3e9f4; border-radius: 9px; background: #f8fafd; font-size: 12px; }
@media (max-width: 767.98px) { html:root body #feeCollectPage .fee-extras { grid-template-columns: minmax(0, 1fr) !important; } html:root body #feeCollectPage .fee-exam-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Review & collect: breathing room above the button */
html:root body #feeCollectPage .fee-payment-column .fee-submit-bar { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid #e6ecf5; }
html:root body #feeCollectPage .fee-payment-column #btnSubmitCollect { height: 42px; border-radius: 10px; box-shadow: none; }

/* Itemised (invoice-wise) lines above the payment totals */
#feeCollectPage .fee-summary-lines { max-height: 170px; margin: 0 0 8px; padding: 6px 8px; overflow-y: auto; list-style: none; border: 1px solid #e6ecf5; border-radius: 10px; background: #fbfcff; }
#feeCollectPage .fee-summary-lines li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 2px; border-bottom: 1px dashed #e6ecf5; font-size: 11.5px; }
#feeCollectPage .fee-summary-lines li:last-child { border-bottom: 0; }
#feeCollectPage .fee-summary-lines li > span { display: flex; flex-direction: column; min-width: 0; }
#feeCollectPage .fee-summary-lines li small { overflow: hidden; color: #64748b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#feeCollectPage .fee-summary-lines li em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
#feeCollectPage .fee-summary-lines li.is-due em { color: #b91c1c; }
#feeCollectPage .fee-summary-lines li.is-new em { color: #1d4ed8; }
#feeCollectPage .fee-summary-lines li.fee-line-head { padding: 2px 2px 3px; border-bottom: 0; color: #64748b; font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
#feeCollectPage .fee-summary-lines li.fee-line-empty { justify-content: center; color: #94a3b8; }

/* Fee settings: "How fee collection works" */
.fee-settings-page .fee-howto { margin-top: 16px; padding: 14px; border: 1px solid #dbe3f0; border-radius: 14px; background: #fff; }
.fee-settings-page .fee-howto h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 800; }
.fee-settings-page .fee-howto-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fee-settings-page .fee-howto article { padding: 10px 12px; border: 1px solid #e6ecf5; border-radius: 10px; background: #f8fafd; }
.fee-settings-page .fee-howto h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 12.5px; font-weight: 800; }
.fee-settings-page .fee-howto h3 span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0f1b3d; color: #fff; font-size: 11px; }
.fee-settings-page .fee-howto p { margin: 0; color: #475569; font-size: 12px; line-height: 1.5; }
@media (max-width: 991.98px) { .fee-settings-page .fee-howto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .fee-settings-page .fee-howto-grid { grid-template-columns: minmax(0, 1fr); } }

/* Fee collection popups (confirm + success) */
.swal2-popup.fee-pop { width: 440px; max-width: 94vw; padding: 22px 22px 18px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 20px 50px -12px rgba(15, 27, 61, .35); }
.fee-pop .fee-pop-title { padding: 0; font-size: 19px; font-weight: 800; color: #0f1b3d; }
.fee-pop .fee-pop-body { margin: 10px 0 0; padding: 0; color: #475569; font-size: 13px; }
.fee-pop-hero { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; font-size: 32px; }
.fee-pop-hero.is-confirm { background: #fff1f2; color: #e8323f; box-shadow: 0 0 0 6px #fff7f7; }
.fee-pop-hero.is-success { background: #ecfdf5; box-shadow: 0 0 0 6px #f4fdf9; }
.fee-pop-hero svg { width: 40px; height: 40px; fill: none; stroke: #059669; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fee-pop-hero svg circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: feePopDraw .5s ease forwards; }
.fee-pop-hero svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: feePopDraw .35s .35s ease forwards; }
@keyframes feePopDraw { to { stroke-dashoffset: 0; } }
.fee-pop-student { display: flex; align-items: center; justify-content: center; gap: 6px; color: #0f1b3d; font-size: 14px; font-weight: 700; }
.fee-pop-student small { padding: 1px 8px; border-radius: 99px; background: #eef2f8; color: #64748b; font-size: 10.5px; font-weight: 700; }
.fee-pop-amount { margin: 6px 0 8px; color: #0f1b3d; font-size: 34px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fee-pop-amount.is-success { color: #059669; }
.fee-pop-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; background: #eef2ff; color: #3730a3; font-size: 12px; font-weight: 700; }
.fee-pop-chip.is-success { background: #ecfdf5; color: #047857; }
.fee-pop-note { display: flex; gap: 8px; margin-top: 12px; padding: 9px 12px; border: 1px solid #e6ecf5; border-radius: 10px; background: #f8fafd; color: #64748b; font-size: 11.5px; line-height: 1.5; text-align: left; }
.fee-pop-note i { margin-top: 1px; color: #3b82f6; font-size: 16px; }
.fee-pop-note b { color: #0f1b3d; }
.fee-pop-rows { margin-top: 12px; border: 1px solid #e6ecf5; border-radius: 10px; background: #f8fafd; }
.fee-pop-rows > div { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 12.5px; }
.fee-pop-rows > div + div { border-top: 1px dashed #dbe3f0; }
.fee-pop-rows span { display: inline-flex; align-items: center; gap: 6px; color: #64748b; }
.fee-pop-rows span i { color: #94a3b8; font-size: 16px; }
.fee-pop-rows strong { color: #0f1b3d; font-variant-numeric: tabular-nums; }
.fee-pop .fee-pop-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; margin: 16px 0 0; }
.fee-pop .fee-pop-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
.fee-pop .fee-pop-btn i { font-size: 17px; }
.fee-pop .fee-pop-btn:active { transform: scale(.98); }
.fee-pop .fee-pop-btn.is-primary { background: #e8323f; color: #fff; }
.fee-pop .fee-pop-btn.is-primary:hover { background: #d92a37; }
.fee-pop .fee-pop-btn.is-navy { background: #0f1b3d; color: #fff; }
.fee-pop .fee-pop-btn.is-navy:hover { background: #1a2a57; }
.fee-pop .fee-pop-btn.is-ghost { background: #fff; border-color: #dbe3f0; color: #475569; }
.fee-pop .fee-pop-btn.is-ghost:hover { background: #f1f5f9; }
.fee-pop .fee-pop-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
@media (max-width: 480px) { .fee-pop .fee-pop-btn { flex-basis: 100%; } }

/* Compact itemised list: one line per invoice / month */
#feeCollectPage .fee-summary-lines { max-height: 132px; margin: 0 0 6px; padding: 3px 8px; border-radius: 9px; }
#feeCollectPage .fee-summary-lines li { padding: 2px 0; gap: 6px; font-size: 11px; line-height: 1.3; }
#feeCollectPage .fee-summary-lines li > span { flex-direction: row; align-items: baseline; flex: 1 1 auto; gap: 6px; overflow: hidden; }
#feeCollectPage .fee-summary-lines li > span strong { flex: none; font-size: 11px; }
#feeCollectPage .fee-summary-lines li small { flex: 1 1 auto; min-width: 0; font-size: 10px; }
#feeCollectPage .fee-summary-lines li.fee-line-head { padding: 3px 0 1px; font-size: 9px; }
#feeCollectPage .fee-summary-lines li.fee-line-empty { padding: 4px 0; font-size: 11px; }
#feeCollectPage .fee-payment-column .fee-summary-row { padding: 3px 10px !important; }
#feeCollectPage .fee-payment-column .fee-summary-total { padding: 5px 12px !important; }
#feeCollectPage .fee-payment-column .fee-pay-group { margin-bottom: 6px; padding: 6px 9px 8px; }
#feeCollectPage .fee-payment-column .fee-pay-group-title { margin-bottom: 4px; }
#feeCollectPage .fee-pane { padding: 10px; }

/* Pending dues empty state */
.fee-dues-note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 12px; }
.fee-dues-note > i { flex: none; font-size: 22px; }
.fee-dues-note > span { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.fee-dues-note small { color: inherit; opacity: .8; font-size: 11px; }
.fee-dues-note.is-ok { background: #ecfdf5; color: #047857; }
.fee-dues-note.is-warn { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.fee-dues-note .month-chip-btn { flex: none; }

/* Cash given + Return: one joined control */
#feeCollectPage .fee-tender-group { display: flex; align-items: stretch; height: 32px; overflow: hidden; border: 1px solid #dbe3f0; border-radius: 9px; background: #fff; }
#feeCollectPage .fee-tender-group:focus-within { border-color: #e8323f; }
#feeCollectPage .fee-tender-icon { display: grid; place-items: center; flex: none; width: 32px; background: #f1f5f9; border-right: 1px solid #dbe3f0; color: #0f1b3d; font-weight: 800; font-size: 13px; }
#feeCollectPage .fee-tender-group input.form-control { flex: 1 1 auto; min-width: 0; height: 100% !important; min-height: 0 !important; padding: 0 10px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; font-size: 12.5px !important; }
#feeCollectPage .fee-tender-group .fee-change-box { display: flex; align-items: center; gap: 8px; flex: none; width: auto !important; height: 100% !important; min-height: 0 !important; padding: 0 12px !important; border: 0 !important; border-left: 1px solid #dbe3f0 !important; border-radius: 0 !important; background: #f8fafd !important; line-height: 1; }
#feeCollectPage .fee-tender-label { color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
#feeCollectPage .fee-tender-group #labelChangeReturn { font-size: 12.5px; }
#feeCollectPage .fee-payment-column .fee-tender { margin: 6px 0 0 !important; padding: 6px 0 0 !important; }
#feeCollectPage #btnSubmitCollect:disabled { background: #cbd5e1; border-color: #cbd5e1; color: #fff; cursor: not-allowed; opacity: 1; }
#feeCollectPage #modalAmountInput:disabled { background: #f1f5f9; cursor: not-allowed; }

/* New months: first column = first 6 months of the session, second column = last 6 */
html:root body #feeCollectPage .fee-month-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; }
@media (max-width: 575.98px) { html:root body #feeCollectPage .fee-month-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; } }

/* Advance credit (no fee) switch */
#feeCollectPage .fee-credit-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 8px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #fff; color: #0f1b3d; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s ease; }
#feeCollectPage .fee-credit-switch input { flex: none; margin: 0; }
#feeCollectPage .fee-credit-switch i { color: #3b82f6; font-size: 14px; vertical-align: -1px; }
#feeCollectPage .fee-credit-switch small { color: #64748b; font-weight: 500; }
#feeCollectPage .fee-credit-switch:has(input:checked) { border-style: solid; border-color: #3b82f6; background: #eff6ff; }
#feeCollectPage .is-credit-only #btnSubmitCollect:not(:disabled) { background: #0f1b3d; border-color: #0f1b3d; }

/* Number inputs: remove spinner arrows to prevent scroll/click glitches */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}

/* Fee report modal: centred in the free area, tidy header and footer */
html:root body #feeReportModal .modal-content { border: 1px solid #dbe3f0; border-radius: 14px; box-shadow: 0 18px 44px -14px rgba(15, 27, 61, .32); overflow: hidden; }
html:root body #feeReportModal .modal-header { padding: 10px 16px; border-bottom: 1px solid #e6ecf5; background: #f8fafd; }
html:root body #feeReportModal .modal-title { font-size: 15px; font-weight: 800; color: #0f1b3d; }
html:root body #feeReportModal .fee-report-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fff1f2; color: #e8323f; font-size: 15px; }
html:root body #feeReportModal .modal-body { padding: 12px 16px; max-height: calc(100vh - 230px); overflow-y: auto; }
html:root body #feeReportModal .modal-footer { justify-content: flex-end; padding: 8px 16px; border-top: 1px solid #e6ecf5; background: #f8fafd; }
html:root body #feeReportModal .modal-footer .btn { height: 34px; display: inline-flex; align-items: center; gap: 5px; border-radius: 9px; font-size: 12.5px; font-weight: 700; box-shadow: none; }
html:root body #feeReportModal .fst-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { html:root body #feeReportModal .fst-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
html:root body #feeReportModal .fst-months td:first-child { white-space: nowrap; }
html:root body #feeReportModal .fst-months tbody tr:hover td { background: #f8fafd; }
html:root body #feeReportModal .fst-pill { font-size: 9.5px; padding: 1px 7px; }

/* Fee report modal: centre on the screen; only shift right when the sidebar would cover it */
@media (min-width: 992px) {
    html:root body #feeReportModal { padding-left: var(--fr-left, 0px) !important; padding-right: 0 !important; }
    html:root body #feeReportModal .fee-report-dialog { margin-left: auto; margin-right: auto; }
}
@media (max-width: 991.98px) {
    html:root body #feeReportModal { padding-left: 0 !important; padding-right: 0 !important; }
    html:root body #feeReportModal .fee-report-dialog { width: calc(100% - 16px) !important; max-width: 100% !important; margin: 0.5rem auto !important; }
    html:root body #feeReportModal .modal-body { max-height: calc(100dvh - 130px) !important; padding: 10px 12px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    html:root body #feeReportModal .modal-body table.fst-months { min-width: 480px; }
    html:root body #feeReportModal .modal-footer { padding: 6px 10px !important; gap: 6px !important; flex-wrap: wrap !important; }
    html:root body #feeReportModal .modal-footer .btn { height: 32px !important; font-size: 11.5px !important; padding: 0 10px !important; }
}
#oldFeeModal .fee-month.is-disabled { opacity: .55; background: #f1f5f9; border-style: dashed; cursor: not-allowed; }
#oldFeeModal .fee-month.is-disabled .fee-month-tag { background: #e2e8f0; color: #64748b; }

/* Settings > Fee collection guide */
.fgd { display: grid; gap: 12px; }
.fgd-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid #dbe3f0; border-radius: 14px; background: linear-gradient(135deg, #0f1b3d 0%, #1a2a57 100%); color: #e8eefc; }
.fgd-hero h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: #fff; font-size: 16px; font-weight: 800; }
.fgd-hero p { margin: 0; color: #c7d2ec; font-size: 12.5px; line-height: 1.55; }
.fgd-hero a { color: #ffb3b9; }
.fgd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.fgd-steps li { display: flex; gap: 9px; padding: 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 11px; background: rgba(255, 255, 255, .06); }
.fgd-step-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: #e8323f; color: #fff; font-size: 17px; }
.fgd-steps b { display: block; color: #fff; font-size: 12.5px; }
.fgd-steps small { display: block; margin-top: 2px; color: #b8c4e2; font-size: 11px; line-height: 1.4; }
.fgd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fgd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fgd-card { min-width: 0; padding: 14px 16px; border: 1px solid #dbe3f0; border-radius: 12px; background: #fff; }
.fgd-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: #0f1b3d; font-size: 13.5px; font-weight: 800; }
.fgd-card h3 > i { color: #e8323f; font-size: 18px; }
.fgd-card h3 small { margin-left: auto; color: #94a3b8; font-size: 10.5px; font-weight: 600; }
.fgd-card p, .fgd-card li { color: #334155; font-size: 12.5px; line-height: 1.55; }
.fgd-card p { margin: 0 0 8px; }
.fgd-badge { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #0f1b3d; color: #fff; font-size: 11px; }
.fgd-list { margin: 6px 0 0; padding-left: 18px; }
.fgd-list li { margin-bottom: 3px; }
.fgd-note { display: flex; gap: 8px; margin-top: 10px; padding: 8px 10px; border: 1px solid #bfdbfe; border-radius: 9px; background: #eff6ff; color: #1e3a8a; font-size: 12px; line-height: 1.5; }
.fgd-note i { margin-top: 1px; font-size: 16px; }
.fgd-note.is-warn { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.fgd-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fgd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fgd-table th, .fgd-table td { padding: 6px 8px; border-bottom: 1px solid #e6ecf5; text-align: left; vertical-align: top; }
.fgd-table thead th { background: #f1f5f9; color: #64748b; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; }
.fgd-table td small { display: block; color: #64748b; font-size: 11px; }
.fgd-table .num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.fgd-table tfoot td { background: #0f1b3d; color: #fff; font-weight: 800; }
.fgd-flow { margin: 0; padding-left: 20px; }
.fgd-flow li { margin-bottom: 6px; color: #334155; font-size: 12.5px; line-height: 1.5; }
.fgd-perms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.fgd-perms div { padding: 8px 10px; border: 1px solid #e6ecf5; border-radius: 9px; background: #f8fafd; }
.fgd-perms b { display: block; color: #0f1b3d; font-size: 12px; }
.fgd-perms span { color: #64748b; font-size: 11.5px; line-height: 1.4; }
@media (max-width: 991.98px) { .fgd-hero, .fgd-two, .fgd-grid, .fgd-grid-2 { grid-template-columns: minmax(0, 1fr); } .fgd-perms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .fgd-steps { grid-template-columns: minmax(0, 1fr); } }

/* Collect page: clear parent card vs. inner cards, theme colours */
#feeCollectPage .fee-collect-shell { padding: 14px; border: 1px solid #cfd9ea; border-radius: 18px; background: linear-gradient(180deg, #e9eef8 0%, #e2e9f5 100%); box-shadow: inset 0 1px 0 #fff; }
#feeCollectPage .fee-collect-shell-head { margin: 0 2px 12px; padding-bottom: 10px; border-bottom: 1px solid #cfd9ea; color: #0f1b3d; }
#feeCollectPage .fee-collect-shell-head i { background: linear-gradient(135deg, #0f1b3d, #22356f); }
#feeCollectPage .fee-pane { position: relative; padding: 12px 12px 12px; border: 1px solid #d4deee; border-top: 3px solid #0f1b3d; border-radius: 13px; background: #fff; box-shadow: 0 1px 3px rgba(15, 27, 61, .08); }
#feeCollectPage .fee-payment-column .fee-pane { border-top-color: #e8323f; }
#feeCollectPage .fee-pane .fee-block { border-bottom-color: #e3eaf6; }
#feeCollectPage .fee-pay-group { border-color: #e3eaf6; background: #f6f9fe; }
#feeCollectPage .fee-summary-total { background: linear-gradient(135deg, #0f1b3d, #1a2a57) !important; }
#feeCollectPage .fee-extra { background: #f6f9fe !important; border-color: #e3eaf6 !important; }

/* Payment source badge (Counter / JSON sync / Old fee) */
.fee-src { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: #f1f5f9; color: #475569; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.fee-src i { font-size: 13px; }
.fee-src.is-sync { background: #eff6ff; color: #1d4ed8; }
.fee-src.is-old { background: #f5f3ff; color: #6d28d9; }

/* Fee popups: stable layout, buttons never overlap the content */
html:root body .swal2-popup.fee-pop { display: flex !important; flex-direction: column; align-items: stretch; height: auto !important; max-height: 94vh; overflow-y: auto; }
html:root body .swal2-popup.fee-pop .fee-pop-title { flex: none; margin: 0; text-align: center; }
html:root body .swal2-popup.fee-pop .fee-pop-body { flex: none; height: auto !important; max-height: none; overflow: visible; text-align: center; }
html:root body .swal2-popup.fee-pop .fee-pop-actions { flex: none; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 16px 0 0 !important; padding: 0; position: static; }
html:root body .swal2-popup.fee-pop .fee-pop-btn { grid-column: auto; width: 100%; height: 42px !important; min-width: 0; margin: 0 !important; padding: 0 10px !important; font-size: 12.5px; line-height: 1; overflow: hidden; text-overflow: ellipsis; box-shadow: none !important; }
/* three buttons (success): two on top, Close full width below */
html:root body .swal2-popup.fee-pop .fee-pop-actions:has(.swal2-deny:not([style*="none"])) .swal2-cancel { grid-column: 1 / -1; order: 3; }
/* two buttons (confirm): equal halves */
html:root body .swal2-popup.fee-pop .fee-pop-btn.swal2-confirm { order: 1; }
html:root body .swal2-popup.fee-pop .fee-pop-btn.swal2-deny { order: 2; }
html:root body .swal2-popup.fee-pop .swal2-loader { display: none !important; }
@media (max-width: 400px) { html:root body .swal2-popup.fee-pop .fee-pop-actions { grid-template-columns: minmax(0, 1fr); } }

/* ===== Fee settings (fs2) ===== */
.fs2 { --fs-ink: #0f1b3d; --fs-muted: #64748b; --fs-line: #dbe3f0; --fs-soft: #f6f9fe; --fs-red: #e8323f; }
.fs2-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 14px 18px; border: 1px solid var(--fs-line); border-radius: 16px; background: linear-gradient(135deg, #0f1b3d 0%, #1d2f66 100%); color: #fff; position: sticky; top: 0; z-index: 5; }
.fs2-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fs2-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--fs-red); font-size: 21px; }
.fs2-head h1 { margin: 0; color: #fff; font-size: 18px; font-weight: 800; }
.fs2-head p { margin: 2px 0 0; color: #c5d0ec; font-size: 12px; }
.fs2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fs2-dirty { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; background: #fef3c7; color: #92400e; font-size: 11.5px; font-weight: 700; }
.fs2-link { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.fs2-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.fs2-save { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--fs-red); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }
.fs2-save:hover { background: #d92a37; }
.fs2-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; align-items: start; }
.fs2-side { display: grid; gap: 14px; }
.fs2-card { min-width: 0; padding: 16px; border: 1px solid var(--fs-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15, 27, 61, .05); }
.fs2-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--fs-ink); font-size: 14px; font-weight: 800; }
.fs2-card h2 i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #eef2ff; color: #3b4ea3; font-size: 16px; }
.fs2-lead { margin: -4px 0 10px; color: var(--fs-muted); font-size: 12px; }
.fs2-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--fs-line); }
.fs2-card h2 + .fs2-row { border-top: 0; padding-top: 0; }
.fs2-row-text { min-width: 0; }
.fs2-row-text label { display: block; margin: 0; color: var(--fs-ink); font-size: 13px; font-weight: 700; }
.fs2-row-text small { display: block; margin-top: 2px; color: var(--fs-muted); font-size: 11.5px; line-height: 1.45; }
.fs2-day { display: flex; align-items: center; flex: none; gap: 6px; }
.fs2-day input { width: 56px; height: 34px; border: 1px solid var(--fs-line); border-radius: 9px; text-align: center; font-weight: 800; }
.fs2-day span { color: var(--fs-muted); font-size: 11px; }
.fs2-preview { margin: 0 0 4px; padding: 7px 10px; border-radius: 9px; background: var(--fs-soft); color: #334155; font-size: 11.5px; line-height: 1.5; }
.fs2-exam { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--fs-line); border-radius: 10px; background: var(--fs-soft); }
.fs2-exam .form-check-label { font-size: 13px; font-weight: 700; color: var(--fs-ink); }
.fs2-select { width: 140px; height: 32px; border: 1px solid var(--fs-line); border-radius: 8px; background-color: #fff; padding: 0 8px; font-size: 12.5px; }
.fs2-old.is-off { background: #fafbfd; }
.fs2-old.is-off .fs2-cutoff { opacity: .5; }
.fs2-cutoff { padding-top: 10px; border-top: 1px dashed var(--fs-line); }
.fs2-cutoff > label { display: block; margin-bottom: 6px; color: var(--fs-ink); font-size: 13px; font-weight: 700; }
.fs2-cutoff > label small { color: var(--fs-muted); font-weight: 500; }
.fs2-date { position: relative; display: flex; align-items: center; height: 38px; border: 1px solid var(--fs-line); border-radius: 10px; background: #fff; }
.fs2-date > i { padding: 0 8px 0 10px; color: #3b82f6; font-size: 18px; }
.fs2-date input, .fs2-date .fs2-alt { flex: 1 1 auto; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; outline: 0; font-size: 13px; font-weight: 700; color: var(--fs-ink); cursor: pointer; }
.fs2-date input[readonly]:not(.fs2-alt) { display: none; }
.fs2-x { flex: none; width: 32px; height: 100%; border: 0; background: transparent; color: var(--fs-muted); font-size: 18px; cursor: pointer; }
.fs2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.fs2-chips button { height: 26px; padding: 0 10px; border: 1px solid var(--fs-line); border-radius: 99px; background: #fff; color: var(--fs-ink); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.fs2-chips button:hover { border-color: #3b82f6; color: #1d4ed8; }
.fs2-rates { padding: 0; overflow: hidden; }
.fs2-rates-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 16px 10px; }
.fs2-rates-head h2 { margin-bottom: 4px; }
.fs2-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fs2-search { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--fs-line); border-radius: 9px; background: #fff; }
.fs2-search i { color: var(--fs-muted); }
.fs2-search input { width: 120px; border: 0; outline: 0; background: transparent; font-size: 12.5px; }
.fs2-btn { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border: 1px solid var(--fs-line); border-radius: 9px; background: #fff; color: var(--fs-ink); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.fs2-btn:hover { border-color: var(--fs-red); color: var(--fs-red); }
.fs2-table-wrap { max-height: calc(100vh - 330px); overflow: auto; border-top: 1px solid var(--fs-line); }
.fs2-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.fs2-table thead th { position: sticky; top: 0; z-index: 2; padding: 8px 10px; background: #f1f5fb; border-bottom: 1px solid var(--fs-line); color: var(--fs-ink); font-size: 11.5px; font-weight: 800; text-align: right; white-space: nowrap; }
.fs2-table thead th small { display: block; color: var(--fs-muted); font-size: 10px; font-weight: 600; }
.fs2-table th.fs2-class { position: sticky; left: 0; z-index: 1; min-width: 120px; padding: 6px 12px; background: #fff; text-align: left; color: var(--fs-ink); font-size: 12.5px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.fs2-table thead th.fs2-class { z-index: 3; background: #f1f5fb; }
.fs2-table tbody td { padding: 5px 6px; border-bottom: 1px solid #edf1f8; }
.fs2-table tbody tr:hover td, .fs2-table tbody tr:hover th.fs2-class { background: #f8fbff; }
.fs2-table tbody tr.is-inactive { opacity: .6; }
.fs2-table th em { margin-left: 6px; padding: 1px 6px; border-radius: 99px; background: #f1f5f9; color: var(--fs-muted); font-size: 9.5px; font-style: normal; font-weight: 700; text-transform: none; }
.fs2-money { display: flex; align-items: center; height: 32px; margin: 0; border: 1px solid var(--fs-line); border-radius: 8px; background: #fff; }
.fs2-money:focus-within { border-color: var(--fs-red); box-shadow: 0 0 0 3px rgba(232, 50, 63, .12); }
.fs2-money span { padding: 0 6px 0 9px; color: #94a3b8; font-size: 12px; }
.fs2-money input { flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; padding: 0 9px 0 0; border: 0; outline: 0; background: transparent; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fs2-money input::-webkit-outer-spin-button, .fs2-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fs2-empty { padding: 24px; text-align: center; color: var(--fs-muted); }
.fs2-foot { display: flex; gap: 6px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--fs-line); background: var(--fs-soft); color: var(--fs-muted); font-size: 11.5px; line-height: 1.5; }
.fs2-foot i { margin-top: 1px; color: #3b82f6; font-size: 15px; }
@media (max-width: 1199.98px) { .fs2-layout { grid-template-columns: minmax(0, 1fr); } .fs2-side { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .fs2-head { position: static; } }

/* ===== Reports & Ledgers dashboard (rpt) ===== */
.rpt { --r-ink: #0f1b3d; --r-muted: #64748b; --r-line: #dbe3f0; --r-soft: #f6f9fe; }
.rpt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, #0f1b3d 0%, #1d2f66 100%); color: #fff; }
.rpt-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rpt-back { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; color: #fff; font-size: 18px; text-decoration: none; }
.rpt-back:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.rpt-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: #e8323f; font-size: 21px; }
.rpt-head h1 { margin: 0; color: #fff; font-size: 18px; font-weight: 800; }
.rpt-head p { margin: 2px 0 0; color: #c5d0ec; font-size: 12px; }
.rpt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rpt-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; background: transparent; color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.rpt-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.rpt-btn.is-solid { background: #e8323f; border-color: #e8323f; }
.rpt-btn.is-solid:hover { background: #d92a37; }

.rpt-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.rpt-kpi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--r-line); border-left: 4px solid var(--k, #0f1b3d); border-radius: 13px; background: #fff; box-shadow: 0 1px 2px rgba(15, 27, 61, .05); }
.rpt-kpi-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--k) 12%, #fff); color: var(--k); font-size: 22px; }
.rpt-kpi small { display: block; color: var(--r-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.rpt-kpi strong { display: block; color: var(--r-ink); font-size: 20px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rpt-kpi em { display: block; color: var(--r-muted); font-size: 11px; font-style: normal; }
.rpt-kpi.is-green { --k: #059669; } .rpt-kpi.is-blue { --k: #2563eb; } .rpt-kpi.is-navy { --k: #0f1b3d; } .rpt-kpi.is-red { --k: #dc2626; } .rpt-kpi.is-amber { --k: #d97706; }

.rpt-board { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.rpt-card { min-width: 0; padding: 14px 16px; border: 1px solid var(--r-line); border-radius: 13px; background: #fff; box-shadow: 0 1px 2px rgba(15, 27, 61, .05); }
.rpt-card h2 { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; color: var(--r-ink); font-size: 13px; font-weight: 800; }
.rpt-card h2 i { color: #3b4ea3; font-size: 17px; }
.rpt-card h2 small { margin-left: auto; color: #94a3b8; font-size: 10.5px; font-weight: 600; }
.rpt-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; height: 150px; }
.rpt-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.rpt-bar b { color: var(--r-ink); font-size: 10.5px; font-weight: 800; }
.rpt-bar span { display: block; width: 100%; max-width: 38px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #3b82f6, #1d4ed8); min-height: 4px; }
.rpt-bar:last-child span { background: linear-gradient(180deg, #f2434f, #e8323f); }
.rpt-bar small { color: var(--r-muted); font-size: 11px; font-weight: 700; }
.rpt-split { display: flex; height: 12px; overflow: hidden; border-radius: 99px; background: #eef2f7; }
.rpt-split span { display: block; height: 100%; }
.rpt-legend { margin: 10px 0 0; padding: 0; list-style: none; }
.rpt-legend li { display: flex; align-items: center; gap: 7px; padding: 4px 0; color: #334155; font-size: 12px; }
.rpt-legend li i { width: 9px; height: 9px; border-radius: 50%; }
.rpt-legend li b { margin-left: auto; color: var(--r-ink); font-variant-numeric: tabular-nums; }
.rpt-legend li small { color: #94a3b8; font-size: 10.5px; min-width: 62px; text-align: right; }
.rpt-foot { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--r-line); color: var(--r-muted); font-size: 11.5px; }
.rpt-empty { margin: 0; padding: 18px 0; color: #94a3b8; font-size: 12px; text-align: center; }
.rpt-due { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #e9eef7; }
.rpt-due:last-child { border-bottom: 0; }
.rpt-due span { color: var(--r-ink); font-size: 12.5px; font-weight: 700; }
.rpt-due small { display: block; color: #94a3b8; font-size: 10.5px; font-weight: 500; }
.rpt-due b { color: #b91c1c; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rpt-due-bar { height: 6px; overflow: hidden; border-radius: 99px; background: #fee2e2; }
.rpt-due-bar i { display: block; height: 100%; border-radius: 99px; background: #dc2626; }

.rpt-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; padding: 4px; border: 1px solid var(--r-line); border-radius: 12px; background: var(--r-soft); }
.rpt-tabs a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border-radius: 9px; color: var(--r-muted); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.rpt-tabs a:hover { color: var(--r-ink); }
.rpt-tabs a.is-active { background: #fff; color: #e8323f; box-shadow: 0 1px 3px rgba(15, 27, 61, .12); }

/* tables inside the console */
.rpt .fee-panel { border: 1px solid var(--r-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 27, 61, .05); }
.rpt .fee-panel > .bg-light { background: #fff !important; padding: 12px 16px !important; }
.rpt .fee-table thead th { position: sticky; top: 0; background: #f1f5fb; color: var(--r-ink); font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; border-bottom: 1px solid var(--r-line); white-space: nowrap; }
.rpt .fee-table tbody tr:hover td { background: #f8fbff; }
.rpt .fee-table tbody td { padding-top: 11px; padding-bottom: 11px; }
.rpt .fee-table tfoot td { background: #0f1b3d !important; color: #fff; border: 0; }
.rpt .fee-table tfoot .text-success, .rpt .fee-table tfoot .text-danger { color: #fff !important; }
.rpt .fee-progress { height: 8px !important; border-radius: 99px; background: #e8edf6; overflow: hidden; }
.rpt .fee-progress span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #10b981, #059669); }
@media (max-width: 1199.98px) { .rpt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rpt-board { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px) { .rpt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rpt-tabs { display: flex; } .rpt-tabs a { flex: 1 1 45%; justify-content: center; padding: 0 8px; } }
@media print { .rpt-kpis, .rpt-board, .rpt-head, .rpt-tabs { display: none !important; } }

/* Paid month with extras: bus / exam icons, and "Bus due" tiles that can be collected alone */
#feeCollectPage .fee-month.is-paid { gap: 6px; }
#feeCollectPage .fee-month.is-paid .fee-bus.is-paid { background: #dcfce7; color: #047857; }
#feeCollectPage .fee-month.is-paid .fee-bus.is-locked { background: #fef3c7; color: #b45309; }
#feeCollectPage .fee-month.has-bus-due { cursor: pointer; border-style: dashed; border-color: #f59e0b; background: #fffbeb; }
#feeCollectPage .fee-month.has-bus-due:hover { border-color: #d97706; }
#feeCollectPage .fee-month.has-bus-due.selected, #feeCollectPage .fee-month.has-bus-due:has(input:checked) { border-style: solid; border-color: #0f1b3d; background: #fff7e6; }
#feeCollectPage .fee-bus.is-due { background: #ffedd5; color: #c2410c; }
#feeCollectPage .fee-month-tag.is-busdue { background: #ffedd5; color: #c2410c; }

/* ===== Bus months modal (bm) ===== */
html:root body #busMonthsModal .modal-dialog { max-width: 720px; }
html:root body #busMonthsModal .modal-content { border: 1px solid #dbe3f0; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -18px rgba(15, 27, 61, .4); }
html:root body #busMonthsModal .bm-head { padding: 14px 18px; border-bottom: 0; background: linear-gradient(135deg, #0f1b3d 0%, #1d2f66 100%); color: #fff; }
.bm-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bm-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: #e8323f; color: #fff; font-size: 22px; }
.bm-head .modal-title { color: #fff; font-size: 16px; font-weight: 800; }
.bm-head small { color: #c5d0ec; font-size: 12px; }
.bm-head .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .8; }
html:root body #busMonthsModal .bm-body { padding: 16px 18px; background: #f6f9fe; }
.bm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.bm-stats div { padding: 9px 12px; border: 1px solid #dbe3f0; border-radius: 11px; background: #fff; }
.bm-stats small { display: block; color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.bm-stats strong { color: #0f1b3d; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bm-stats strong span { margin-left: 3px; color: #94a3b8; font-size: 11px; font-weight: 600; }
.bm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.bm-presets { display: inline-flex; padding: 3px; border: 1px solid #dbe3f0; border-radius: 10px; background: #fff; }
.bm-presets button { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #0f1b3d; font-size: 12px; font-weight: 700; cursor: pointer; }
.bm-presets button:hover { background: #eef2fb; }
.bm-presets button.is-danger { color: #b91c1c; }
.bm-legend { display: flex; flex-wrap: wrap; gap: 10px; color: #64748b; font-size: 11px; }
.bm-legend span { display: inline-flex; align-items: center; gap: 4px; }
.bm-legend i { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.bm-legend i.is-on { background: #e8323f; } .bm-legend i.is-paid { background: #059669; } .bm-legend i.is-billed { background: #d97706; } .bm-legend i.is-lock { background: #64748b; }
.bm-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bm-card { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border: 1.5px solid #dbe3f0; border-radius: 12px; background: #fff; transition: border-color .12s, background .12s; }
.bm-card.is-on { border-color: #fca5a5; background: #fff8f8; }
.bm-card.is-now { box-shadow: inset 0 0 0 1px #0f1b3d; }
.bm-card.is-locked { background: #f1f5f9; border-style: dashed; }
.bm-main { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; width: 100%; margin: 0; cursor: pointer; }
.bm-card.is-locked .bm-main { cursor: not-allowed; }
.bm-month b { display: block; color: #0f1b3d; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.bm-month em { display: block; color: #94a3b8; font-size: 10.5px; font-style: normal; }
.bm-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 99px; background: #f1f5f9; color: #475569; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.bm-chip i { font-size: 13px; }
.bm-chip.is-paid { background: #dcfce7; color: #047857; } .bm-chip.is-billed { background: #fef3c7; color: #b45309; } .bm-chip.is-due { background: #ffedd5; color: #c2410c; } .bm-chip.is-lock { background: #e2e8f0; color: #475569; }
.bm-switch { margin: 0; padding: 0; min-height: 0; }
.bm-switch .form-check-input { float: none; margin: 0; width: 2.4em; height: 1.3em; cursor: pointer; }
.bm-switch .form-check-input:checked { background-color: #e8323f; border-color: #e8323f; }
.bm-reason { display: block; overflow: hidden; color: #64748b; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.bm-card .bus-reason { margin-top: 2px; }
html:root body #busMonthsModal .bm-note { margin-top: 10px; border-radius: 10px; border-color: #dbe3f0; }
.bm-help { display: flex; gap: 8px; margin-top: 10px; padding: 9px 12px; border: 1px solid #bfdbfe; border-radius: 10px; background: #eff6ff; color: #1e3a8a; font-size: 11.5px; line-height: 1.5; }
.bm-help i { margin-top: 1px; font-size: 16px; }
.bm-help ul { margin: 0; padding-left: 16px; }
html:root body #busMonthsModal .bm-foot { gap: 8px; padding: 10px 18px; border-top: 1px solid #dbe3f0; background: #fff; }
.bm-count { margin-right: auto; color: #64748b; font-size: 12px; font-weight: 700; }
.bm-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 1px solid #dbe3f0; border-radius: 10px; background: #fff; color: #0f1b3d; font-size: 13px; font-weight: 700; cursor: pointer; }
.bm-btn:hover { background: #f1f5f9; }
.bm-btn.is-primary { border-color: #e8323f; background: #e8323f; color: #fff; }
.bm-btn.is-primary:hover { background: #d92a37; }
.bm-btn:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 575.98px) { .bm-grid { grid-template-columns: minmax(0, 1fr); } .bm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Credit ledger modal */
@media (min-width: 992px) {
    html:root body #creditLedgerModal { padding-left: var(--fr-left, 0px) !important; padding-right: 0 !important; }
    html:root body #creditLedgerModal .fee-report-dialog { margin-left: auto; margin-right: auto; }
}
@media (max-width: 991.98px) {
    html:root body #creditLedgerModal { padding-left: 0 !important; padding-right: 0 !important; }
    html:root body #creditLedgerModal .fee-report-dialog { width: calc(100% - 16px) !important; max-width: 100% !important; margin: 0.5rem auto !important; }
    html:root body #creditLedgerModal .modal-body { max-height: calc(100dvh - 130px) !important; padding: 10px 12px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}
.cl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; color: #0f1b3d; font-size: 13px; }
.cl-head small { padding: 1px 8px; border-radius: 99px; background: #eef2f8; color: #64748b; font-weight: 700; }
.cl-head > span { color: #64748b; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.cl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.cl-stats div { padding: 8px 10px; border: 1px solid #dbe3f0; border-radius: 10px; background: #fff; }
.cl-stats div.is-available { border-color: #bbf7d0; background: #f0fdf4; }
.cl-stats small { display: block; color: #64748b; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.cl-stats strong { color: #0f1b3d; font-size: 15px; font-variant-numeric: tabular-nums; }
.cl-stats .is-available strong { color: #047857; }
.cl h4 { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 6px; color: #0f1b3d; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.cl h4 small { color: #94a3b8; font-weight: 600; text-transform: none; letter-spacing: 0; }
.cl-empty { padding: 18px; border: 1px dashed #dbe3f0; border-radius: 10px; color: #94a3b8; font-size: 12px; text-align: center; }
.cl-table { border: 1px solid #dbe3f0; border-radius: 10px; overflow: hidden; }
.cl-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cl-table th { padding: 6px 10px; background: #f1f5fb; color: #64748b; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; text-align: left; }
.cl-table td { padding: 7px 10px; border-top: 1px solid #edf1f8; vertical-align: top; }
.cl-table td small { display: block; color: #64748b; font-size: 10.5px; }
.cl-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-table .nowrap { white-space: nowrap; }
.cl-table .amt { font-weight: 800; }
.cl-table tr.is-added .amt, .cl-table tr.is-added i { color: #047857; }
.cl-table tr.is-used .amt, .cl-table tr.is-used i { color: #1d4ed8; }
.cl-table tr.is-refund .amt, .cl-table tr.is-refund i { color: #b91c1c; }
.cl-req { margin: 0; padding: 0; list-style: none; }
.cl-req li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #e6ecf5; font-size: 12px; }
.cl-req small { display: block; color: #64748b; font-size: 10.5px; }
.cl-pill { flex: none; align-self: flex-start; padding: 1px 8px; border-radius: 99px; background: #f1f5f9; color: #475569; font-size: 10px; font-weight: 800; }
.cl-pill.is-pending { background: #fef3c7; color: #92400e; } .cl-pill.is-approved { background: #dcfce7; color: #047857; } .cl-pill.is-rejected { background: #fee2e2; color: #b91c1c; }
@media (max-width: 575.98px) { .cl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Collect page: tighter, red-theme shell ===== */
#feeCollectPage .fee-collect-shell { padding: 8px; border-color: #f1c9cd; border-radius: 16px; background: linear-gradient(180deg, #fdf3f4 0%, #faeaec 100%); box-shadow: inset 0 1px 0 #fff; }
#feeCollectPage .fee-collect-shell-head { margin: 0 2px 8px; padding-bottom: 6px; border-bottom-color: #f1c9cd; }
#feeCollectPage .fee-collect-shell-head i { background: linear-gradient(135deg, #e8323f, #b91c2c); }
#feeCollectPage .fee-collection-columns { --bs-gutter-x: 8px; --bs-gutter-y: 8px; }
#feeCollectPage .fee-pane { padding: 8px 10px; border-color: #f0d6d9; border-top-color: #e8323f; }
#feeCollectPage .fee-payment-column .fee-pane { border-top-color: #0f1b3d; }
#feeCollectPage .fee-pay-group { background: #fdf6f6; border-color: #f3e0e2; }
#feeCollectPage .fee-extra { background: #fdf6f6 !important; border-color: #f3e0e2 !important; }
#feeCollectPage .fee-pane .fee-block { border-bottom-color: #f3e0e2; }

/* ===== Approvals centre (apc) ===== */
.st-badge { margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: #e8323f; color: #fff; font-size: 10.5px; font-weight: 800; }
.apc { display: grid; gap: 12px; }
.apc-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: stretch; }
.apc-kpi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #dbe3f0; border-left: 4px solid var(--c, #0f1b3d); border-radius: 13px; background: #fff; }
.apc-kpi > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: 21px; }
.apc-kpi small { display: block; color: #64748b; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.apc-kpi strong { color: #0f1b3d; font-size: 22px; font-weight: 800; line-height: 1.1; }
.apc-kpi.is-total { --c: #0f1b3d; } .apc-kpi.is-critical { --c: #dc2626; } .apc-kpi.is-high { --c: #ea580c; }
.apc-legend { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 6px; color: #64748b; font-size: 11px; }
.apc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.apc-legend i { width: 10px; height: 10px; border-radius: 3px; background: #94a3b8; }
.apc-legend i.is-critical { background: #dc2626; } .apc-legend i.is-high { background: #ea580c; } .apc-legend i.is-normal { background: #3b82f6; }
.apc-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.apc-filter button { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 14px; border: 1px solid #dbe3f0; border-radius: 99px; background: #fff; color: #0f1b3d; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.apc-filter button b { padding: 0 7px; border-radius: 99px; background: #eef2f8; font-size: 11px; }
.apc-filter button.is-active { border-color: #0f1b3d; background: #0f1b3d; color: #fff; }
.apc-filter button.is-active b { background: rgba(255, 255, 255, .2); }
.apc-group { border: 1px solid #dbe3f0; border-radius: 14px; background: #fff; overflow: hidden; }
.apc-group > header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e6ecf5; background: #f8fafd; }
.apc-group h2 { margin: 0; color: #0f1b3d; font-size: 14px; font-weight: 800; }
.apc-group header p { margin: 1px 0 0; color: #64748b; font-size: 11.5px; }
.apc-gico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #fff1f2; color: #e8323f; font-size: 20px; }
.apc-gico.is-grey { background: #f1f5f9; color: #64748b; }
.apc-count { margin-left: auto; min-width: 28px; padding: 3px 9px; border-radius: 99px; background: #eef2f8; color: #64748b; font-size: 12px; font-weight: 800; text-align: center; }
.apc-count.has { background: #e8323f; color: #fff; }
.apc-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 12px 16px 12px 14px; border-bottom: 1px solid #edf1f8; border-left: 5px solid #3b82f6; background: #fff; }
.apc-item.is-high { border-left-color: #ea580c; background: #fffaf5; }
.apc-item.is-critical { border-left-color: #dc2626; background: #fff6f6; }
.apc-item:last-child { border-bottom: 0; }
.apc-main { flex: 1 1 320px; min-width: 0; }
.apc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.apc-row strong { color: #0f1b3d; font-size: 14px; }
.apc-pri { padding: 2px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.apc-pri.is-normal { background: #dbeafe; color: #1d4ed8; } .apc-pri.is-high { background: #ffedd5; color: #c2410c; } .apc-pri.is-critical { background: #fee2e2; color: #b91c1c; }
.apc-tag { padding: 2px 8px; border-radius: 99px; background: #dcfce7; color: #047857; font-size: 10.5px; font-weight: 800; }
.apc-who { margin: 4px 0 0; color: #0f1b3d; font-size: 12.5px; font-weight: 700; }
.apc-who small { margin-left: 4px; color: #94a3b8; font-weight: 600; }
.apc-note, .apc-reason, .apc-meta { margin: 2px 0 0; font-size: 12px; color: #475569; }
.apc-reason { padding: 4px 8px; border-left: 3px solid #cbd5e1; background: #f8fafc; color: #334155; }
.apc-meta { color: #94a3b8; font-size: 11px; }
.apc-actions { flex: 0 0 250px; display: flex; align-items: center; }
.apc-actions form { display: grid; gap: 6px; width: 100%; }
.apc-actions input { height: 32px; padding: 0 10px; border: 1px solid #dbe3f0; border-radius: 8px; font-size: 12px; }
.apc-actions form > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.apc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 34px; border: 1px solid transparent; border-radius: 9px; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.apc-btn.is-ok { background: #059669; color: #fff; } .apc-btn.is-ok:hover { background: #047857; }
.apc-btn.is-no { background: #fff; border-color: #fecaca; color: #b91c1c; } .apc-btn.is-no:hover { background: #fef2f2; }
.apc-wait { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 700; }
.apc-empty { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 16px; color: #94a3b8; font-size: 12.5px; }
.apc-empty i { color: #10b981; font-size: 18px; }
.apc-hrow { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr) 110px; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px dashed #edf1f8; font-size: 12.5px; }
.apc-hrow:last-child { border-bottom: 0; }
.apc-hrow small { color: #64748b; font-size: 11.5px; } .apc-hrow .when { text-align: right; }
.apc-pill { padding: 2px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 800; text-align: center; }
.apc-pill.is-approved { background: #dcfce7; color: #047857; } .apc-pill.is-rejected { background: #fee2e2; color: #b91c1c; }
@media (max-width: 991.98px) { .apc-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .apc-legend { grid-column: 1 / -1; flex-direction: row; gap: 12px; } .apc-actions { flex-basis: 100%; } .apc-hrow { grid-template-columns: 80px minmax(0, 1fr); } .apc-hrow small { grid-column: 2; } }

/* Bus months: relatable cards with a bus icon tile, fee line and clear state */
.bm-card { gap: 6px; padding: 10px 12px; border-width: 1.5px; }
.bm-card.is-on { border-color: #86efac; background: #f4fdf7; }
.bm-card.is-on.is-past:not(.is-locked) { border-color: #fcd34d; background: #fffbeb; }
.bm-card.is-locked { border-color: #cbd5e1; background: #f1f5f9; }
.bm-card.is-now { box-shadow: 0 0 0 2px #0f1b3d inset; }
.bm-main { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
.bm-bus { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #eef1f6; color: #94a3b8; font-size: 24px; }
.bm-bus.is-on { background: #dcfce7; color: #059669; }
.bm-card.is-on.is-past:not(.is-locked) .bm-bus.is-on { background: #fef3c7; color: #d97706; }
.bm-bus:not(.is-on)::after { content: ""; position: absolute; width: 30px; height: 2px; background: #94a3b8; transform: rotate(-45deg); border-radius: 2px; }
.bm-badge { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 17px; height: 17px; border: 2px solid #fff; border-radius: 50%; font-size: 11px; font-style: normal; color: #fff; }
.bm-badge.is-paid { background: #059669; } .bm-badge.is-lock { background: #64748b; }
.bm-month b { font-size: 14.5px; }
.bm-month em { font-size: 11px; }
.bm-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 7px; border-top: 1px dashed #e2e8f0; }
.bm-fee { display: inline-flex; align-items: baseline; gap: 6px; }
.bm-fee small { color: #94a3b8; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.bm-fee b { color: #0f1b3d; font-size: 14px; font-variant-numeric: tabular-nums; }
.bm-chip.is-ok { background: #dcfce7; color: #047857; } .bm-chip.is-off { background: #f1f5f9; color: #64748b; }
.bm-switch .form-check-input:checked { background-color: #059669; border-color: #059669; }
.bm-reason { margin-top: -2px; }
.bm-legend i.is-on { background: #059669; }

/* ===== Teachers list (tl / tc) ===== */
.tl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, #0f1b3d 0%, #1d2f66 100%); color: #fff; }
.tl-title { display: flex; align-items: center; gap: 12px; }
.tl-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #e8323f; font-size: 22px; }
.tl-head h1 { margin: 0; color: #fff; font-size: 18px; font-weight: 800; }
.tl-head p { margin: 2px 0 0; color: #c5d0ec; font-size: 12px; }
.tl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; background: transparent; color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.tl-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.tl-btn.is-solid { border-color: #e8323f; background: #e8323f; } .tl-btn.is-solid:hover { background: #d92a37; }
.tl-btn.is-dark { border-color: #0f1b3d; background: #0f1b3d; } .tl-btn.is-dark:hover { background: #1a2a57; }
.tl-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid #dbe3f0; border-radius: 13px; background: #fff; }
.tl-seg { display: inline-flex; padding: 3px; border: 1px solid #dbe3f0; border-radius: 10px; background: #f6f9fe; }
.tl-seg a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; color: #64748b; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.tl-seg a b { padding: 0 7px; border-radius: 99px; background: #e8edf6; color: #475569; font-size: 11px; }
.tl-seg a.is-active { background: #fff; color: #0f1b3d; box-shadow: 0 1px 3px rgba(15, 27, 61, .12); }
.is-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.is-dot.is-ok { background: #10b981; } .is-dot.is-off { background: #94a3b8; }
.tl-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; height: 38px; margin: 0; border: 1px solid #dbe3f0; border-radius: 10px; background: #fff; }
.tl-search:focus-within { border-color: #e8323f; box-shadow: 0 0 0 3px rgba(232, 50, 63, .12); }
.tl-search > i { padding: 0 8px 0 11px; color: #94a3b8; font-size: 18px; }
.tl-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 13px; }
.tl-clear { display: grid; place-items: center; width: 32px; height: 100%; color: #94a3b8; font-size: 18px; text-decoration: none; }

.tc { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid #dbe3f0; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 27, 61, .05); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.tc::before { content: ""; height: 4px; background: linear-gradient(90deg, #10b981, #059669); }
.tc.is-inactive::before { background: linear-gradient(90deg, #cbd5e1, #94a3b8); }
.tc:hover { border-color: #c3d0e6; box-shadow: 0 8px 22px -12px rgba(15, 27, 61, .25); }
.tc-top { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #eef2f8; background: #f8fafd; }
.tc-no { color: #94a3b8; font-size: 11px; font-weight: 800; }
.tc-code { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border: 1px solid #dbe3f0; border-radius: 99px; background: #fff; color: #0f1b3d; font-family: ui-monospace, Consolas, monospace; font-size: 11px; font-weight: 700; cursor: pointer; }
.tc-code i:first-child { color: #3b82f6; } .tc-code i:last-child { color: #94a3b8; font-size: 12px; }
.tc-state { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 11px; font-weight: 800; }
.tc-state.is-ok { background: #dcfce7; color: #047857; } .tc-state.is-ok .is-dot { background: #10b981; }
.tc-state.is-off { background: #f1f5f9; color: #64748b; }
.tc-more { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #dbe3f0; border-radius: 50%; background: #fff; color: #64748b; font-size: 17px; cursor: pointer; }
.tc-more:hover { border-color: #0f1b3d; color: #0f1b3d; }
.tc-id { display: flex; align-items: center; gap: 14px; padding: 14px 14px 8px; }
.tc-avatar { position: relative; flex: none; width: 68px; height: 68px; border-radius: 18px; cursor: pointer; }
.tc-avatar img, .tc-avatar > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 18px; object-fit: cover; color: #fff; font-size: 26px; font-weight: 800; box-shadow: 0 6px 14px -6px rgba(15, 27, 61, .4); }
.tc-dot { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border: 3px solid #fff; border-radius: 50%; background: #94a3b8; }
.tc-dot.is-ok { background: #10b981; }
.tc-name { min-width: 0; }
.tc-name h3 { display: flex; align-items: center; gap: 5px; margin: 0; overflow: hidden; color: #0f1b3d; font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.tc-name h3 i { flex: none; color: #3b82f6; font-size: 16px; }
.tc-name p { margin: 1px 0 6px; overflow: hidden; color: #64748b; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.tc-att { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; background: #f1f5f9; color: #64748b; font-size: 11px; font-weight: 700; }
.tc-att.is-present { background: #dcfce7; color: #047857; } .tc-att.is-late { background: #fef3c7; color: #b45309; } .tc-att.is-half { background: #e0f2fe; color: #0369a1; }
.tc-att.is-leave { background: #ede9fe; color: #6d28d9; } .tc-att.is-off { background: #f1f5f9; color: #475569; } .tc-att.is-none { background: #fff1f2; color: #be123c; }
.tc-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.tc-tags span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 10px; overflow: hidden; border: 1px solid #e3e9f4; border-radius: 99px; background: #f8fafd; color: #334155; font-size: 11.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.tc-tags .is-exp { border-color: #fed7aa; background: #fff7ed; color: #c2410c; }
.tc-tags .is-qual i { color: #3b82f6; }
.tc-contact { margin: 0 14px 10px; padding: 0; list-style: none; border: 1px solid #e6ecf5; border-radius: 11px; background: #fbfcff; }
.tc-contact li { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 7px 10px; font-size: 12px; }
.tc-contact li + li { border-top: 1px dashed #e6ecf5; }
.tc-contact i { color: #059669; font-size: 15px; } .tc-contact li:last-child i { color: #3b82f6; }
.tc-contact span { color: #94a3b8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.tc-contact b { overflow: hidden; color: #0f1b3d; font-weight: 700; text-align: right; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tc-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 14px; border-top: 1px solid #eef2f8; background: #fcfdff; }
.tc-quick { display: flex; gap: 6px; margin-right: auto; }
.tc-quick a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #dbe3f0; border-radius: 10px; background: #fff; color: #64748b; font-size: 17px; text-decoration: none; transition: .12s; }
.tc-quick .is-call:hover { border-color: #10b981; background: #ecfdf5; color: #059669; } .tc-quick .is-wa:hover { border-color: #22c55e; background: #f0fdf4; color: #16a34a; } .tc-quick .is-mail:hover { border-color: #3b82f6; background: #eff6ff; color: #2563eb; }
.tc-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px; border: 1px solid #dbe3f0; border-radius: 10px; background: #fff; color: #0f1b3d; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.tc-btn:hover { background: #f1f5f9; color: #0f1b3d; }
.tc-btn.is-solid { border-color: #e8323f; background: #e8323f; color: #fff; } .tc-btn.is-solid:hover { background: #d92a37; color: #fff; }
@media (max-width: 991.98px) { .tl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Fee console student card (fc): same size, readable at a glance ===== */
.fc { display: flex; flex-direction: column; height: 100%; border: 1px solid #dbe3f0; border-top: 4px solid #10b981; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 27, 61, .05); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.fc.is-due { border-top-color: #e8323f; }
.fc.is-free { border-top-color: #7c3aed; }
.fc:hover { border-color: #c3d0e6; box-shadow: 0 10px 24px -14px rgba(15, 27, 61, .3); }
.fc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.fc-avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #e8323f, #b91c2c); color: #fff; font-size: 17px; font-weight: 800; }
.fc.is-clear .fc-avatar { background: linear-gradient(135deg, #10b981, #047857); }
.fc-id { flex: 1; min-width: 0; }
.fc-id h3 { margin: 0; overflow: hidden; color: #0f1b3d; font-size: 14.5px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.fc-id p { margin: 1px 0 0; color: #64748b; font-size: 11px; }
.fc-id p b { color: #0f1b3d; }
.fc-badge { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.fc-badge.is-due { background: #fee2e2; color: #b91c1c; } .fc-badge.is-clear { background: #dcfce7; color: #047857; } .fc-badge.is-free { background: #ede9fe; color: #6d28d9; }
.fc-contact { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 14px 8px; padding: 6px 10px; border-radius: 9px; background: #f6f9fe; color: #475569; font-size: 11.5px; }
.fc-contact span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fc-contact a { flex: none; color: #475569; text-decoration: none; }
.fc-contact i { color: #94a3b8; }
.fc-focus { display: flex; flex-direction: column; margin: 0 14px 8px; padding: 9px 12px; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; min-height: 70px; }
.fc.is-due .fc-focus { background: #fff5f5; border-color: #fecaca; }
.fc.is-free .fc-focus { background: #f5f3ff; border-color: #ddd6fe; }
.fc-focus small { color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.fc-focus strong { color: #047857; font-size: 22px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fc.is-due .fc-focus strong { color: #b91c1c; }
.fc.is-free .fc-focus strong { color: #6d28d9; }
.fc-focus span { color: #475569; font-size: 11.5px; }
.fc-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin: 0 14px; }
.fc-months > i { position: relative; display: grid; place-items: center; height: 24px; border-radius: 6px; background: #e8edf6; font-style: normal; }
.fc-months > i b { color: #64748b; font-size: 9.5px; font-weight: 800; }
.fc-months > i.is-paid { background: #10b981; } .fc-months > i.is-paid b { color: #fff; }
.fc-months > i.is-exempt { background: #fef3c7; border: 1.2px dashed #f59e0b; } .fc-months > i.is-exempt b { color: #b45309; }
.fc-months > i.is-billed { background: #f59e0b; } .fc-months > i.is-billed b { color: #fff; }
.fc-months > i.is-pending { background: repeating-linear-gradient(135deg, #fecaca, #fecaca 3px, #fee2e2 3px, #fee2e2 6px); } .fc-months > i.is-pending b { color: #b91c1c; }
.fc-months > i.is-now { box-shadow: 0 0 0 2px #0f1b3d; }
.fc-months em { position: absolute; left: 50%; bottom: -5px; width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: #f59e0b; transform: translateX(-50%); }
.fc-months em.is-paid { background: #059669; }
.fc-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 14px 0; color: #94a3b8; font-size: 9.5px; font-weight: 600; }
.fc-legend span { display: inline-flex; align-items: center; gap: 3px; }
.fc-legend i { width: 8px; height: 8px; border-radius: 2px; background: #e8edf6; }
.fc-legend i.is-paid { background: #10b981; }
.fc-legend i.is-exempt { background: #fef3c7; border: 1px dashed #f59e0b; }
.fc-legend i.is-billed { background: #f59e0b; }
.fc-legend i.is-pending { background: #fca5a5; }
.fc-badge-adm { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 4px; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; font-size: 10px; font-weight: 700; vertical-align: middle; }
.fc-badge-adm i { font-size: 11px; }
.fc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); margin: 10px 14px 8px; border: 1px solid #e6ecf5; border-radius: 11px; background: #fbfcff; }
.fc-kpis div { padding: 6px 4px; text-align: center; }
.fc-kpis div + div { border-left: 1px solid #e6ecf5; }
.fc-kpis small { display: block; color: #94a3b8; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.fc-kpis b { color: #0f1b3d; font-size: 14px; font-variant-numeric: tabular-nums; }
.fc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 14px 10px; min-height: 24px; }
.fc-chips span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 9px; overflow: hidden; border-radius: 99px; background: #f1f5f9; color: #475569; font-size: 10.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.fc-chips .is-ok { background: #dcfce7; color: #047857; } .fc-chips .is-warn { background: #ffedd5; color: #c2410c; } .fc-chips .is-mute { background: #f1f5f9; color: #64748b; }
.fc-foot { display: flex; gap: 6px; margin-top: auto; padding: 10px 14px; border-top: 1px solid #eef2f8; background: #fcfdff; }
.fc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 34px; padding: 0 12px; border: 1px solid #dbe3f0; border-radius: 10px; background: #fff; color: #0f1b3d; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.fc-btn:hover { background: #f1f5f9; color: #0f1b3d; }
.fc-btn.is-collect { flex: 1; border-color: #e8323f; background: #e8323f; color: #fff; } .fc-btn.is-collect:hover { background: #d92a37; color: #fff; }
.fc-btn.is-advance { flex: 1; border-color: #bbf7d0; background: #f0fdf4; color: #047857; }
.fc-btn.is-icon { width: 36px; padding: 0; font-size: 17px; }

/* ===== Old fee entry modal (of) ===== */
html:root body #oldFeeModal .modal-dialog { max-width: 760px; }
html:root body #oldFeeModal .modal-content { border: 1px solid #dbe3f0; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -18px rgba(15, 27, 61, .4); }
html:root body #oldFeeModal .of-head { padding: 14px 18px; border-bottom: 0; background: linear-gradient(135deg, #0f1b3d 0%, #1d2f66 100%); color: #fff; }
.of-title { display: flex; align-items: center; gap: 12px; }
.of-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #7c3aed; color: #fff; font-size: 22px; }
.of-head .modal-title { color: #fff; font-size: 16px; font-weight: 800; }
.of-head small { color: #c5d0ec; font-size: 12px; }
.of-head .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .8; }
html:root body #oldFeeModal .of-body { padding: 14px 18px; background: #f6f9fe; }
.of-note { display: flex; gap: 8px; margin-bottom: 12px; padding: 9px 12px; border: 1px solid #ddd6fe; border-radius: 10px; background: #f5f3ff; color: #4c1d95; font-size: 12px; line-height: 1.5; }
.of-note > i { margin-top: 1px; font-size: 17px; }
.of-sec { margin-bottom: 12px; padding: 12px 14px; border: 1px solid #dbe3f0; border-radius: 13px; background: #fff; }
.of-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.of-sec-head h6 { display: flex; align-items: center; gap: 8px; margin: 0; color: #0f1b3d; font-size: 13px; font-weight: 800; }
.of-sec-head h6 span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0f1b3d; color: #fff; font-size: 11px; }
.of-chips { display: inline-flex; gap: 6px; }
.of-chips button { height: 28px; padding: 0 12px; border: 1px solid #dbe3f0; border-radius: 99px; background: #fff; color: #0f1b3d; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.of-chips button:hover { border-color: #7c3aed; color: #6d28d9; }
.of-chips button.is-danger { color: #b91c1c; }
#oldFeeModal .fee-old-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#oldFeeModal .fee-old-grid .fee-month { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 9px; border: 1.5px solid #dbe3f0; border-radius: 10px; background: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; }
#oldFeeModal .fee-old-grid .fee-month.selected { border-color: #7c3aed; background: #f5f3ff; }
#oldFeeModal .fee-old-grid .fee-month.is-paid { border-color: #bbf7d0; background: #f0fdf4; color: #047857; cursor: default; }
#oldFeeModal .fee-old-grid .fee-month.is-disabled { opacity: .55; background: #f1f5f9; border-style: dashed; cursor: not-allowed; }
#oldFeeModal .fee-old-grid .fee-month .fee-month-tag { margin-left: auto; padding: 1px 7px; border-radius: 99px; background: #e2e8f0; color: #64748b; font-size: 9.5px; font-weight: 800; }
#oldFeeModal .fee-old-grid .fee-month.is-paid .fee-month-tag { background: #dcfce7; color: #047857; }
#oldFeeModal .fee-old-grid .fee-month .bx-bus { margin-left: auto; color: #059669; }
.of-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.of-two .of-sec { margin-bottom: 12px; }
#oldFeeModal .fee-exam-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.of-bus { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0; cursor: pointer; }
.of-bus-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #dcfce7; color: #059669; font-size: 22px; }
.of-bus b { display: block; color: #0f1b3d; font-size: 13px; }
.of-bus small { display: block; color: #64748b; font-size: 11px; line-height: 1.4; }
.of-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.of-form label { margin: 0; color: #475569; font-size: 11px; font-weight: 700; }
.of-form label small { color: #94a3b8; font-weight: 500; }
.of-form .form-control, .of-form .form-select { margin-top: 3px; height: 34px; border-radius: 9px; border-color: #dbe3f0; font-size: 13px; }
.of-form .of-wide { grid-column: 1 / -1; }
html:root body #oldFeeModal .of-foot { gap: 8px; padding: 10px 18px; border-top: 1px solid #dbe3f0; background: #fff; }
.of-total { margin-right: auto; min-width: 0; }
.of-total small { display: block; overflow: hidden; color: #64748b; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; max-width: 360px; }
.of-total strong { color: #0f1b3d; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) { #oldFeeModal .fee-old-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .of-two { grid-template-columns: minmax(0, 1fr); } .of-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Fee card v2: tighter grid, readable month names (Apr, May ...) in 2 rows of 6 */
.fc-grid { --bs-gutter-x: 10px; --bs-gutter-y: 10px; }
.fc-head { padding: 10px 12px 6px; }
.fc-contact { margin: 0 12px 6px; padding: 5px 9px; }
.fc-focus { margin: 0 12px 6px; padding: 8px 11px; min-height: 64px; }
.fc-focus strong { font-size: 21px; }
.fc-mhead { display: flex; justify-content: space-between; margin: 0 12px 4px; color: #94a3b8; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.fc-months { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 4px; margin: 0 12px; }
.fc-months > i { height: 24px; border-radius: 7px; }
.fc-months > i b { font-size: 10.5px; letter-spacing: .1px; }
.fc-months > i.is-pending b { color: #b91c1c; }
.fc-months em { bottom: -3px; }
.fc-legend { margin: 7px 12px 0; gap: 4px 9px; font-size: 10px; }
.fc-legend span { gap: 4px; color: #64748b; font-weight: 700; }
.fc-legend em { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
.fc-kpis { margin: 8px 12px 6px; }
.fc-kpis div { padding: 5px 4px; }
.fc-chips { margin: 0 12px 8px; gap: 4px; }
.fc-foot { padding: 8px 12px; }
.fc-btn { height: 32px; }

/* Fee card v3: 5px gap, bus / exam / last payment as clear info rows */
.fc-grid { --bs-gutter-x: 5px; --bs-gutter-y: 5px; }
.fc-info { margin: 0 12px 8px; padding: 0; list-style: none; border: 1px solid #e6ecf5; border-radius: 11px; background: #fbfcff; overflow: hidden; }
.fc-info li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 36px; padding: 4px 9px; }
.fc-info li + li { border-top: 1px dashed #e6ecf5; }
.fc-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #f1f5f9; color: #94a3b8; font-size: 15px; }
.fc-tx { min-width: 0; line-height: 1.2; }
.fc-tx b { display: block; color: #0f1b3d; font-size: 11.5px; font-weight: 800; }
.fc-tx small { display: block; overflow: hidden; color: #64748b; font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.fc-info em { padding: 2px 9px; border-radius: 99px; background: #f1f5f9; color: #64748b; font-size: 10.5px; font-style: normal; font-weight: 800; white-space: nowrap; }
.fc-info .is-ok .fc-ic { background: #dcfce7; color: #059669; } .fc-info .is-ok em { background: #dcfce7; color: #047857; }
.fc-info .is-warn .fc-ic { background: #ffedd5; color: #ea580c; } .fc-info .is-warn em { background: #ffedd5; color: #c2410c; }
.fc-info .is-mute .fc-ic { background: #eef2f8; color: #64748b; }
.fc-info em.is-amt { background: #eef2ff; color: #3730a3; }

/* Guide v2: contents bar, group headings, wide card, FAQ */
.fgd-toc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.fgd-toc a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid #dbe3f0; border-radius: 12px; background: #fff; color: #0f1b3d; text-decoration: none; transition: .12s; }
.fgd-toc a:hover { border-color: #e8323f; box-shadow: 0 4px 12px -8px rgba(232, 50, 63, .6); }
.fgd-toc i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: #fff1f2; color: #e8323f; font-size: 18px; }
.fgd-toc b { display: block; font-size: 12.5px; font-weight: 800; }
.fgd-toc small { display: block; color: #64748b; font-size: 10.5px; line-height: 1.3; }
.fgd-group { display: flex; align-items: center; gap: 9px; margin: 8px 0 -2px; padding-bottom: 6px; border-bottom: 2px solid #0f1b3d; color: #0f1b3d; font-size: 15px; font-weight: 800; scroll-margin-top: 80px; }
.fgd-group span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #0f1b3d; color: #fff; font-size: 13px; }
.fgd-group small { margin-left: 4px; color: #94a3b8; font-size: 11.5px; font-weight: 600; }
.fgd-wide { grid-column: 1 / -1; }
.fgd-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fgd-faq div { padding: 9px 12px; border: 1px solid #e6ecf5; border-radius: 10px; background: #f8fafd; }
.fgd-faq b { display: block; color: #0f1b3d; font-size: 12.5px; }
.fgd-faq span { color: #475569; font-size: 12px; line-height: 1.5; }
.fgd-card code { padding: 1px 5px; border-radius: 5px; background: #eef2f8; color: #0f1b3d; font-size: 11px; }
@media (max-width: 991.98px) { .fgd-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fgd-faq { grid-template-columns: minmax(0, 1fr); } }

/* Pre-admission exempt / settled fee month chips: User-friendly warm amber */
#feeCollectPage .fee-month.is-exempt,
.fee-collection-page .fee-month.is-exempt,
.fee-collection-page .fee-compact .fee-month.is-exempt {
    border-style: dashed !important;
    border-color: #f59e0b !important;
    background: #fffbeb !important;
    color: #92400e !important;
    opacity: 1 !important;
    cursor: default;
}
#feeCollectPage .fee-month.is-exempt .fee-month-tag,
.fee-collection-page .fee-month.is-exempt .fee-month-tag,
.fee-collection-page .fee-compact .fee-month.is-exempt .fee-month-tag {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
    font-weight: 700 !important;
}