@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/*
================================================================================
| CUSTOM ADMINLTE THEME - Projectworlds Brand
================================================================================
| This file provides a consistent, professional theme based on the Projectworlds logo.
*/

/* --- 1. Global & Typography --- */
body {
    font-family: 'Source Sans Pro', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.content-wrapper {
    background-color: #f8f9fa;
}

/* --- Projectworlds Orange Links --- */
a {
    color: #f37021;
    /* Projectworlds Orange */
}

a:hover {
    color: #d8641c;
    /* A slightly darker orange for hover */
}

.card-primary.card-outline {
    border-top: 3px solid #f37021;
}

/* --- 2. Main Sidebar Theme --- */
body .main-sidebar .nav-sidebar .nav-link {
    transition: all 0.2s ease-in-out;
    border-left: 3px solid transparent !important;
    position: relative;
}
/* Active / open parent item: a colored left marker that follows the chosen
   "Sidebar Accent Color" (--pw-sidebar-accent, injected by page.blade; falls
   back to Projectworlds orange). Text color and hover/active backgrounds are
   set per sidebar theme below so a light/white sidebar never renders
   white-on-white (which made the active item invisible). */
body .main-sidebar .nav-sidebar>.nav-item.menu-open>.nav-link,
body .main-sidebar .nav-sidebar>.nav-item>.nav-link.active {
    background-color: transparent !important;
    border-left: 3px solid var(--pw-sidebar-accent, #f37021) !important;
}

/* Hide default submenu icons */
.nav-treeview .nav-icon {
    display: none !important;
}

/* Add custom "»" submenu symbol */
.nav-treeview .nav-link::before {
    content: '»';
    margin-right: 0.75rem;
    color: #8aa4af;
}

/* --- Dark sidebars (sidebar-dark-*): white active text, subtle light hover --- */
body .main-sidebar[class*="sidebar-dark-"] .nav-sidebar>.nav-item.menu-open>.nav-link,
body .main-sidebar[class*="sidebar-dark-"] .nav-sidebar>.nav-item>.nav-link.active {
    color: #ffffff !important;
}
body .main-sidebar[class*="sidebar-dark-"] .nav-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}
body .main-sidebar[class*="sidebar-dark-"] .nav-treeview>.nav-item>.nav-link.active {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--pw-sidebar-accent, #f37021) !important;
    font-weight: bold;
}

/* --- Light sidebars (sidebar-light-*): dark active text, subtle dark hover --- */
body .main-sidebar[class*="sidebar-light-"] .nav-sidebar>.nav-item.menu-open>.nav-link,
body .main-sidebar[class*="sidebar-light-"] .nav-sidebar>.nav-item>.nav-link.active {
    color: #1f2d3d !important;
}
body .main-sidebar[class*="sidebar-light-"] .nav-sidebar .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}
body .main-sidebar[class*="sidebar-light-"] .nav-treeview>.nav-item>.nav-link.active {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: var(--pw-sidebar-accent, #f37021) !important;
    font-weight: bold;
}

/* --- Colorful sidebar icons (opt-in) ------------------------------------
   Appearance → "Colorful Menu Icons" adds `pw-colorful-icons` to <body>
   (AdminLTEConfigServiceProvider). Top-level icons then cycle a 10-colour
   palette by position, so it works for ANY menu — the sidebar is built from
   role_menu_structure, so there is no fixed icon list to map colours to.
   Submenu icons stay hidden (rule above), and the active-item marker keeps
   following --pw-sidebar-accent. Two palettes: bright tones for dark
   sidebars, deeper tones for light/bright ones (the provider routes every
   bright background through `sidebar-light-*`), so contrast holds either way. */
body.pw-colorful-icons .main-sidebar {
    --pw-ic-1: #60a5fa;
    --pw-ic-2: #34d399;
    --pw-ic-3: #fbbf24;
    --pw-ic-4: #f87171;
    --pw-ic-5: #a78bfa;
    --pw-ic-6: #22d3ee;
    --pw-ic-7: #fb923c;
    --pw-ic-8: #f472b6;
    --pw-ic-9: #4ade80;
    --pw-ic-10: #c084fc;
}

body.pw-colorful-icons .main-sidebar[class*="sidebar-light-"] {
    --pw-ic-1: #2563eb;
    --pw-ic-2: #059669;
    --pw-ic-3: #b45309;
    --pw-ic-4: #dc2626;
    --pw-ic-5: #7c3aed;
    --pw-ic-6: #0891b2;
    --pw-ic-7: #ea580c;
    --pw-ic-8: #db2777;
    --pw-ic-9: #16a34a;
    --pw-ic-10: #9333ea;
}

body.pw-colorful-icons .main-sidebar .nav-sidebar>.nav-item:nth-child(10n+1)>.nav-link>.nav-icon {
    color: var(--pw-ic-1) !important;
}
body.pw-colorful-icons .main-sidebar .nav-sidebar>.nav-item:nth-child(10n+2)>.nav-link>.nav-icon {
    color: var(--pw-ic-2) !important;
}
body.pw-colorful-icons .main-sidebar .nav-sidebar>.nav-item:nth-child(10n+3)>.nav-link>.nav-icon {
    color: var(--pw-ic-3) !important;
}
body.pw-colorful-icons .main-sidebar .nav-sidebar>.nav-item:nth-child(10n+4)>.nav-link>.nav-icon {
    color: var(--pw-ic-4) !important;
}
body.pw-colorful-icons .main-sidebar .nav-sidebar>.nav-item:nth-child(10n+5)>.nav-link>.nav-icon {
    color: var(--pw-ic-5) !important;
}
body.pw-colorful-icons .main-sidebar .nav-sidebar>.nav-item:nth-child(10n+6)>.nav-link>.nav-icon {
    color: var(--pw-ic-6) !important;
}
body.pw-colorful-icons .main-sidebar .nav-sidebar>.nav-item:nth-child(10n+7)>.nav-link>.nav-icon {
    color: var(--pw-ic-7) !important;
}
body.pw-colorful-icons .main-sidebar .nav-sidebar>.nav-item:nth-child(10n+8)>.nav-link>.nav-icon {
    color: var(--pw-ic-8) !important;
}
body.pw-colorful-icons .main-sidebar .nav-sidebar>.nav-item:nth-child(10n+9)>.nav-link>.nav-icon {
    color: var(--pw-ic-9) !important;
}
body.pw-colorful-icons .main-sidebar .nav-sidebar>.nav-item:nth-child(10n)>.nav-link>.nav-icon {
    color: var(--pw-ic-10) !important;
}

/* The sidebar is docked, not a floating card. AdminLTE's `elevation-4`
   (box-shadow: 0 14px 28px / 0 10px 10px) spreads a heavy Material drop
   shadow in every direction — it reads as an odd, too-strong shadow,
   especially on the light/white sidebar against the white content area.
   Replace it with a soft shadow along the right edge only. */
body .main-sidebar.elevation-4 {
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06) !important;
}

/* --- 3. Navbar Theme --- */
.main-header {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* --- 4. Card & Box Styling --- */
.card {
    border: none;
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
    border-radius: 0.35rem;
}

.card-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e9ecef;
}

.card-title {
    font-weight: 600;
    font-size: 1.1rem;
}

/* --- 5. Button Styling --- */
.btn {
    border-radius: 0.35rem;
    box-shadow: none !important;
    font-weight: 600;
    transition: all 0.15s ease-in-out;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background-color: #f37021;
    border-color: #f37021;
}

.btn-primary:hover {
    background-color: #d8641c;
    border-color: #d8641c;
}

/* --- 6. Form Control Styling --- */
.form-control,
.select2-container--default .select2-selection--single {
    border-radius: 0.35rem;
    box-shadow: none !important;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #f37021;
    box-shadow: 0 0 0 2px rgba(243, 112, 33, 0.25) !important;
}

/* --- 7. Table & DataTables Styling --- */
.table thead.thead-light th {
    background-color: #f8f9fa;
    font-weight: 600;
    border-bottom-width: 1px;
}

.dataTables_wrapper .dt-buttons .btn {
    background-color: #f8f9fa;
    color: #333;
    border-color: #ddd;
}

.table-hover tbody tr:hover {
    background-color: rgba(243, 112, 33, 0.075);
    /* Subtle orange hover for table rows */
}

/* --- 8. Miscellaneous (Badges, etc.) --- */
.badge {
    font-weight: 500;
    font-size: 85%;
    padding: 0.4em 0.6em;
}

.page-item.active .page-link {
    background-color: #f37021;
    /* Pagination active color */
    border-color: #f37021;
}

/* --- 9. Enhanced Select2 Theme (Corrected) --- */
/* Adjust the main selection box to match other form inputs */
.select2-container--default .select2-selection--single {
    height: calc(2.25rem + 2px);
    border: 1px solid #ced4da;
    padding: 0;
    /* Remove padding from the main container */
}

/* Vertically center the selected text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #495057;
    line-height: calc(2.25rem + 2px);
    /* Make line-height equal to the container's height */
    padding-left: 0.75rem;
    /* Add horizontal padding here */
    padding-right: 25px;
    /* Add padding to prevent text from overlapping the arrow */
}

/* Style the dropdown arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(2.25rem - 2px);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #555 transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #555 transparent;
    border-width: 0 4px 5px 4px;
}

/* Style the dropdown panel that opens */
.select2-dropdown {
    border: 1px solid #f37021;
    border-radius: 0.35rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Style the search box inside the dropdown */
.select2-search--dropdown .select2-search__field {
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #f37021;
    box-shadow: 0 0 0 2px rgba(243, 112, 33, 0.25) !important;
    outline: none;
}

/* Style the options in the results list */
.select2-results__option--highlighted {
    background-color: #f37021 !important;
    color: white !important;
}

.select2-results__option[aria-selected=true] {
    background-color: #f8f9fa !important;
    color: #333 !important;
    font-weight: 600;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field {
    min-width: 150px;
}

/* --- Brand Logo Area (Matches AdminLTE Original — Horizontal, Single Line) --- */
.brand-link {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    height: auto !important;
    padding: 0.8125rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    white-space: nowrap;
}

/* Logo image — fixed size, auto-crop any upload dimension */
.brand-link .brand-image {
    float: none !important;
    width: 33px;
    height: 33px;
    max-height: 33px;
    min-width: 33px;
    object-fit: cover;             /* Auto-crops rectangular/oversized images */
    object-position: center;       /* Centers the crop */
    border-radius: 50%;            /* Keeps the circle shape */
    margin-left: 0.8rem;
    margin-right: 0.5rem;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0.8;
}

/* Brand text — single line with ellipsis for long names */
.brand-link .brand-text {
    display: inline-block !important;
    max-width: 140px;              /* Prevents overflow */
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    font-size: 0.95rem;
    margin-left: 0 !important;
    vertical-align: middle;
}

/* Collapsed sidebar — just show logo, hide text */
.sidebar-collapse .brand-link {
    padding: 0.8125rem 0;
    justify-content: center;
}

.sidebar-collapse .brand-link .brand-text {
    display: none !important;
}

.sidebar-collapse .brand-link .brand-image {
    margin-left: 0;
    margin-right: 0;
}

/* Limit the width of the text in the top navigation bar */
.navbar .nav-item .font-weight-bold {
    max-width: 250px;
    /* Adjust this value as needed for the top nav */
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 10. Sidebar Search Spacing Fix --- */
/* Reduced margin to fix the empty gap between logo and search bar */
.sidebar .form-inline {
    margin-top: 0.5rem !important;
    margin-bottom: 1.25rem !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    transition: margin-top 0.3s ease-in-out;
}

/* Add extra padding to the top of the sidebar container */
.sidebar {
    padding-top: 0.5rem !important;
}

/* --- Sidebar Collapse Adjustments --- */
/* Remove excessive gap when sidebar is minimized */
.sidebar-collapse .sidebar .form-inline {
    margin-top: 0.5rem !important;
    padding-left: 0;
    padding-right: 0;
}

/* Center the search icon in collapsed mode if visible */
.sidebar-collapse .sidebar .form-inline .input-group {
    justify-content: center;
}

.sidebar .form-inline .input-group {
    width: 100%;
}

/* --- 11. Universal Sidebar Search Transparency --- */
/* Overrides AdminLTE's hardcoded grey search box to beautifully blend with our solid sidebar colors */

/* For Dark Themes */
body [class*="sidebar-dark-"] .form-inline .form-control-sidebar,
body [class*="sidebar-dark-"] .form-inline .btn-sidebar {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

body [class*="sidebar-dark-"] .form-inline .form-control-sidebar:focus,
body [class*="sidebar-dark-"] .form-inline .btn-sidebar:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

body [class*="sidebar-dark-"] .form-inline .form-control-sidebar::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Search Dropdown Results Layering */
body [class*="sidebar-dark-"] .sidebar-search-results .list-group-item {
    background-color: #2c3034 !important;
    border-color: #3e4448 !important;
    color: #ffffff !important;
}

body [class*="sidebar-dark-"] .sidebar-search-results .list-group-item:hover,
body [class*="sidebar-dark-"] .sidebar-search-results .list-group-item:focus {
    background-color: #3a3f44 !important;
}
body [class*="sidebar-dark-"] .sidebar-search-results .text-light {
    color: #ffffff !important;
}

/* Ensure sidebar search results dropdown overlays properly */
.sidebar-search-results {
    z-index: 1050 !important;
}
.sidebar-search-results .list-group {
    max-height: 300px;
    overflow-y: auto;
    border-radius: 0 0 0.35rem 0.35rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* For Light Themes */
body [class*="sidebar-light-"] .form-inline .form-control-sidebar,
body [class*="sidebar-light-"] .form-inline .btn-sidebar {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #343a40 !important;
}

body [class*="sidebar-light-"] .form-inline .form-control-sidebar:focus,
body [class*="sidebar-light-"] .form-inline .btn-sidebar:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

body [class*="sidebar-light-"] .sidebar-search-results .list-group-item {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #343a40 !important;
}

/* --- 12. Solid Theme Typography Contrast --- */
/* Eliminates faded grey texts for inactive links when using bright Legacy solid backgrounds */
body .main-sidebar[class*="sidebar-dark-"][class*="bg-"] .nav-sidebar .nav-link,
body .main-sidebar[class*="sidebar-dark-"][class*="bg-"] .nav-sidebar .nav-icon,
body .main-sidebar[class*="sidebar-dark-"][class*="bg-"] .nav-header,
body .main-sidebar[class*="sidebar-dark-"][class*="bg-"] .nav-sidebar .nav-link p {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

body .main-sidebar[class*="sidebar-dark-"][class*="bg-"] .nav-sidebar .nav-item > .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
}

body .main-sidebar[class*="sidebar-dark-"][class*="bg-"] .nav-treeview .nav-link::before {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================================================
   13. STUDENT PROFILE PAGE — Premium UI Enhancements
   ============================================================================ */

/* --- Profile Left Card: Gradient Header --- */
.student-profile-card .card-body.box-profile {
    padding-top: 0;
}
.student-profile-card .profile-hero {
    background: linear-gradient(135deg, #f37021 0%, #ff9a56 100%);
    padding: 1.5rem 1rem 1rem;
    border-radius: 0.35rem 0.35rem 0 0;
    margin: -1.25rem -1.25rem 1rem;
    text-align: center;
}
.student-profile-card .profile-hero .profile-user-img {
    border: 3px solid rgba(255,255,255,0.85);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.student-profile-card .profile-hero .profile-username {
    color: #fff;
    font-size: 1.15rem;
    margin-top: 0.5rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.student-profile-card .profile-hero .profile-class {
    color: rgba(255,255,255,0.9);
    font-size: 0.85rem;
}

/* --- Tab Navigation Enhancement --- */
#student-tabs .nav-link {
    font-weight: 600;
    font-size: 0.82rem;
    color: #5a5c69;
    padding: 0.65rem 0.85rem;
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}
#student-tabs .nav-link:hover {
    color: #f37021;
    background-color: rgba(243,112,33,0.04);
    border-bottom-color: rgba(243,112,33,0.3);
}
#student-tabs .nav-link.active {
    color: #f37021;
    border-bottom: 2px solid #f37021;
    background-color: transparent;
}
#student-tabs .nav-link i {
    margin-right: 4px;
    font-size: 0.8rem;
}

/* --- Profile Section Cards --- */
.profile-section {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: #fff;
    transition: box-shadow 0.2s ease;
}
.profile-section:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.profile-section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.profile-section-title i {
    color: #f37021;
    font-size: 0.85rem;
    width: 20px;
    text-align: center;
}
.profile-section .info-row {
    display: flex;
    padding: 0.35rem 0;
    font-size: 0.875rem;
    border-bottom: 1px solid #f8f9fa;
}
.profile-section .info-row:last-child {
    border-bottom: none;
}
.profile-section .info-label {
    width: 140px;
    min-width: 140px;
    color: #6c757d;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.profile-section .info-value {
    flex: 1;
    color: #2d3748;
    font-weight: 500;
}

/* --- Parent Detail Cards --- */
.parent-card {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    overflow: hidden;
    height: 100%;
}
.parent-card-header {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 0.9rem;
}
.parent-card-header.father {
    background: linear-gradient(135deg, #e8f4fd, #f0f7ff);
    border-bottom: 2px solid #4e73df;
    color: #2e59d9;
}
.parent-card-header.mother {
    background: linear-gradient(135deg, #fdf2f8, #fef7ff);
    border-bottom: 2px solid #e74a9a;
    color: #d63384;
}
.parent-card-body {
    padding: 0.75rem 1rem;
}
.parent-card-body .info-row {
    display: flex;
    padding: 0.3rem 0;
    font-size: 0.85rem;
}
.parent-card-body .info-label {
    width: 110px;
    min-width: 110px;
    color: #6c757d;
    font-weight: 600;
    font-size: 0.78rem;
}
.parent-card-body .info-value {
    flex: 1;
    color: #2d3748;
}

/* --- Fee Summary Dashboard --- */
.fee-dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.fee-stat-card {
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    border: 1px solid;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fee-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.fee-stat-card .stat-icon {
    font-size: 1.5rem;
    margin-bottom: 0.35rem;
}
.fee-stat-card .stat-value {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
}
.fee-stat-card .stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.2rem;
}
.fee-stat-card.assigned {
    background: linear-gradient(135deg, #eef2ff, #e8edff);
    border-color: #c7d2fe;
    color: #4338ca;
}
.fee-stat-card.paid {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-color: #bbf7d0;
    color: #166534;
}
.fee-stat-card.due {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-color: #fecaca;
    color: #991b1b;
}

/* --- Fee Progress Bar --- */
.fee-progress-container {
    margin-bottom: 1.25rem;
}
.fee-progress-container .progress {
    height: 10px;
    border-radius: 5px;
    background-color: #fecaca;
    overflow: hidden;
}
.fee-progress-container .progress-bar {
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 5px;
    transition: width 0.6s ease;
}
.fee-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #6c757d;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

/* --- Fee Group Accordion (Student Profile Version) --- */
.sp-fee-group {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.sp-fee-group:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sp-fee-group-header {
    background: #f8fafc;
    padding: 0.75rem 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s ease;
    user-select: none;
}
.sp-fee-group-header:hover {
    background: #f1f5f9;
}
.sp-fee-group.fully-paid {
    border-left: 3px solid #22c55e;
}
.sp-fee-group.has-due {
    border-left: 3px solid #ef4444;
}
.sp-fee-group-header .group-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e293b;
}
.sp-fee-group-header .group-chevron {
    transition: transform 0.25s ease;
    color: #94a3b8;
    font-size: 0.7rem;
}
.sp-fee-group-header[aria-expanded="true"] .group-chevron {
    transform: rotate(90deg);
}
.sp-fee-group .table {
    margin-bottom: 0;
    font-size: 0.85rem;
}
.sp-fee-group .table thead th {
    background: #f8fafc;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    border-bottom-width: 1px;
    padding: 0.5rem 0.75rem;
}
.sp-fee-group .table td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}
.sp-fee-group .table tfoot td,
.sp-fee-group .table tfoot th {
    padding: 0.6rem 0.75rem;
    font-weight: 700;
}

/* --- Empty State Styling --- */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #94a3b8;
}
.empty-state i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
    opacity: 0.5;
}
.empty-state p {
    font-size: 0.9rem;
    margin: 0;
}

/* ============================================================================
   14. COMPACT SIDEBAR WIDTH — Professional Panel Layout
   ============================================================================
   Reduces AdminLTE's default 250px sidebar to 220px, gaining 30px of
   horizontal content space. Matches the compact density of professional
   panels (aaPanel, cPanel, etc.) without truncating typical menu labels.
   ============================================================================ */

/* --- Core width override — Aggressive --- */
@media (min-width: 768px) {
    /* Normal expanded state */
    body:not(.sidebar-collapse) .main-sidebar,
    body:not(.sidebar-collapse) .main-sidebar::before {
        width: 220px !important;
    }
    body:not(.sidebar-collapse) .content-wrapper,
    body:not(.sidebar-collapse) .main-footer,
    body:not(.sidebar-collapse) .main-header {
        margin-left: 220px !important;
    }
    
    /* Collapsed state WITH sidebar-mini (Icons only) */
    body.sidebar-mini.sidebar-collapse .main-sidebar,
    body.sidebar-mini.sidebar-collapse .main-sidebar::before {
        width: 4.6rem !important;
        transform: none !important;
        margin-left: 0 !important;
    }
    body.sidebar-mini.sidebar-collapse .content-wrapper,
    body.sidebar-mini.sidebar-collapse .main-footer,
    body.sidebar-mini.sidebar-collapse .main-header {
        margin-left: 4.6rem !important;
    }

    /* Collapsed state WITHOUT sidebar-mini (Fully hidden) */
    body.sidebar-collapse:not(.sidebar-mini) .main-sidebar,
    body.sidebar-collapse:not(.sidebar-mini) .main-sidebar::before {
        margin-left: -250px !important;
    }
    body.sidebar-collapse:not(.sidebar-mini) .content-wrapper,
    body.sidebar-collapse:not(.sidebar-mini) .main-footer,
    body.sidebar-collapse:not(.sidebar-mini) .main-header {
        margin-left: 0 !important;
    }

    /* Hover expansion when collapsed (Only applies if mini is active) */
    body.sidebar-mini.sidebar-collapse .main-sidebar:hover,
    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused,
    body.sidebar-mini.sidebar-collapse .main-sidebar:hover::before,
    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused::before {
        width: 220px !important;
    }
}

/* --- Force Sidebar-Mini text behavior for all Collapse states --- */
body.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-header,
body.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .user-panel > .info,
body.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-treeview,
body.sidebar-collapse .brand-link .brand-text {
    display: none !important;
}

body.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p,
body.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link p,
body.sidebar-collapse .main-sidebar:hover .brand-text,
body.sidebar-collapse .main-sidebar.sidebar-focused .brand-text,
body.sidebar-collapse .main-sidebar:hover .user-panel > .info,
body.sidebar-collapse .main-sidebar.sidebar-focused .user-panel > .info {
    display: inline-block !important;
    width: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* --- Nav link: tighter padding + smaller font --- */
.main-sidebar .nav-sidebar .nav-link {
    position: relative !important;
    display: block !important;
    padding: 0.45rem 0.6rem !important;
    font-size: 0.875rem;
}

.main-sidebar .nav-sidebar .nav-link p {
    font-size: 0.875rem;
    margin: 0;
}

/* --- Nav icon: slightly smaller --- */
.main-sidebar .nav-sidebar .nav-icon {
    width: 1.2rem !important;
    font-size: 0.9rem;
    text-align: center;
}

/* --- Submenu items: tighter --- */
.main-sidebar .nav-treeview .nav-link {
    padding: 0.3rem 0.6rem 0.3rem 1.8rem !important;
    font-size: 0.82rem;
}

/* --- Section headers: compact --- */
.main-sidebar .nav-header {
    font-size: 0.7rem;
    padding: 0.6rem 0.6rem 0.3rem;
}

/* --- Collapse arrow: Fix FA icon clipping in compact sidebar --- */
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-item.has-treeview > .nav-link,
body.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-item.has-treeview > .nav-link {
    position: relative !important;
    padding-right: 30px !important; /* Make room for arrow */
}
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link > p > .right,
body.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > p > .right {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    z-index: 100 !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: rgba(255,255,255,0.8) !important;
}
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-item.has-treeview.menu-open > .nav-link > p > .right,
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-item.has-treeview.menu-is-opening > .nav-link > p > .right,
body.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-item.has-treeview.menu-open > .nav-link > p > .right,
body.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-item.has-treeview.menu-is-opening > .nav-link > p > .right {
    transform: translateY(-50%) rotate(-90deg) !important;
}

/* --- Brand area: smaller logo + text --- */
.brand-link .brand-image {
    width: 28px;
    height: 28px;
    max-height: 28px;
    min-width: 28px;
}

.brand-link .brand-text {
    max-width: 120px;
    font-size: 0.85rem;
}

/* --- Search box: tighter (Applies when expanded OR hovered) --- */
body:not(.sidebar-collapse) .sidebar .form-inline,
body.sidebar-collapse .main-sidebar:hover .sidebar .form-inline,
body.sidebar-collapse .main-sidebar.sidebar-focused .sidebar .form-inline {
    width: 190px !important;
    max-width: 190px !important;
    margin: 0.5rem 0.5rem 0.75rem 0.5rem !important;
    padding: 0 !important;
    overflow: visible !important;
    display: block !important;
    position: relative !important;
}

body:not(.sidebar-collapse) .sidebar .form-inline .input-group,
body.sidebar-collapse .main-sidebar:hover .sidebar .form-inline .input-group,
body.sidebar-collapse .main-sidebar.sidebar-focused .sidebar .form-inline .input-group {
    width: 190px !important;
    max-width: 190px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}

body:not(.sidebar-collapse) .sidebar .form-inline .form-control-sidebar,
body.sidebar-collapse .main-sidebar:hover .sidebar .form-inline .form-control-sidebar,
body.sidebar-collapse .main-sidebar.sidebar-focused .sidebar .form-inline .form-control-sidebar {
    font-size: 0.82rem !important;
    padding: 0.3rem 0.5rem !important;
    width: 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
    flex: none !important;
}

body:not(.sidebar-collapse) .sidebar .form-inline .input-group-append,
body:not(.sidebar-collapse) .sidebar .form-inline .btn-sidebar,
body.sidebar-collapse .main-sidebar:hover .sidebar .form-inline .input-group-append,
body.sidebar-collapse .main-sidebar:hover .sidebar .form-inline .btn-sidebar,
body.sidebar-collapse .main-sidebar.sidebar-focused .sidebar .form-inline .input-group-append,
body.sidebar-collapse .main-sidebar.sidebar-focused .sidebar .form-inline .btn-sidebar {
    width: 40px !important;
    max-width: 40px !important;
    min-width: 40px !important;
    flex: none !important;
    padding: 0 !important;
    text-align: center !important;
}

/* --- Sidebar overflow: clip anything wider than 220px --- */
.main-sidebar,
.main-sidebar .sidebar {
    overflow-x: hidden !important;
}

/* --- Brand link: prevent overflow at 220px --- */
body:not(.sidebar-collapse) .brand-link,
body.sidebar-collapse .main-sidebar:hover .brand-link,
body.sidebar-collapse .main-sidebar.sidebar-focused .brand-link {
    overflow: hidden;
    width: 220px !important;
}

/* ============================================================================
   15. TOPBAR USER MENU DROPDOWN — Premium Profile Dropdown
   ============================================================================ */

/* --- Trigger button --- */
.pw-user-trigger {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem !important;
}
.pw-avatar-sm {
    width: 32px !important;
    height: 32px !important;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.3);
    transition: border-color 0.2s ease;
}
.pw-user-trigger:hover .pw-avatar-sm {
    border-color: rgba(255,255,255,0.7);
}
.pw-user-name {
    font-weight: 600;
    font-size: 0.85rem;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Dropdown container --- */
.pw-user-dropdown {
    width: 280px !important;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden;
    padding: 0;
    animation: pwDropdownFadeIn 0.2s ease-out;
}
@keyframes pwDropdownFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Header: gradient + avatar + name --- */
.pw-user-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    padding: 1.25rem 1rem;
    text-align: center;
    border-bottom: 3px solid #f37021;
}
.pw-avatar-lg {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.25);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    margin-bottom: 0.5rem;
}
.pw-user-header-name {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}
.pw-user-header-role {
    display: block;
    color: rgba(255,255,255,0.7);
    font-size: 0.78rem;
    font-weight: 400;
    margin-top: 0.15rem;
    letter-spacing: 0.3px;
}

/* --- Menu body: links --- */
.pw-user-body {
    padding: 0.5rem 0;
}
.pw-user-item {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.25rem !important;
    font-size: 0.88rem;
    font-weight: 500;
    color: #334155 !important;
    transition: all 0.15s ease;
}
.pw-user-item:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    padding-left: 1.4rem !important;
}
.pw-item-icon {
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
}
.pw-logout-item:hover {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
}

/* ============================================================================
   16. QUICK NAV MEGA MENU — Full-width masonry list
   ============================================================================ */

/* --- Trigger button --- */
.navbar-light .pw-quicknav-trigger {
    color: rgba(0,0,0,0.5) !important;
}
.navbar-light .pw-quicknav-trigger:hover {
    color: rgba(0,0,0,0.7) !important;
}
.navbar-dark .pw-quicknav-trigger {
    color: rgba(255,255,255,0.8) !important;
}
.navbar-dark .pw-quicknav-trigger:hover {
    color: rgba(255,255,255,1) !important;
}

/* --- Dropdown container --- */
.pw-quicknav-dropdown {
    width: 900px !important;
    max-width: 95vw;
    max-height: 80vh;
    overflow-y: auto;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    padding: 0;
    animation: pwDropdownFadeIn 0.2s ease-out;
}

/* --- Search bar --- */
.pw-quicknav-search-wrap {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #ffffff;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}
.pw-quicknav-search {
    border-radius: 0.35rem !important;
    font-size: 0.85rem !important;
}
.pw-quicknav-search-wrap .input-group-text {
    background: #f8f9fa;
    border-color: #ced4da;
    color: #9ca3af;
}
.pw-quicknav-search:focus {
    border-color: #f37021 !important;
    box-shadow: 0 0 0 2px rgba(243,112,33,0.15) !important;
}

/* --- Body scrollable area --- */
.pw-quicknav-body {
    padding: 1.25rem 1.25rem 2rem;
}

/* --- Masonry Layout --- */
.pw-mega-wrapper {
    column-count: 4;
    column-gap: 2rem;
}

/* --- Module Block --- */
.pw-mega-module {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}
.pw-mega-module-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 0.35rem;
}
.pw-mega-module-title i {
    width: 18px;
    text-align: center;
    color: #4b5563;
}
.pw-mega-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pw-mega-list li {
    margin-bottom: 0.15rem;
}

/* --- Links --- */
.pw-mega-link {
    display: block;
    font-size: 0.78rem;
    color: #4b5563 !important;
    padding: 0.2rem 0;
    text-decoration: none !important;
    transition: color 0.1s;
}
.pw-mega-link:hover {
    color: #f37021 !important;
}
.pw-mega-link.hidden-by-search {
    display: none !important;
}

/* --- Empty state --- */
.pw-quicknav-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #94a3b8;
}
.pw-quicknav-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
    opacity: 0.4;
}
.pw-quicknav-empty p {
    font-size: 0.85rem;
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .pw-mega-wrapper { column-count: 3; }
}
@media (max-width: 768px) {
    .pw-quicknav-dropdown {
        width: 95vw !important;
        left: 2.5vw !important;
        right: 2.5vw !important;
        position: fixed !important;
        top: 50px !important;
    }
    .pw-mega-wrapper { column-count: 2; column-gap: 1.5rem; }
}
@media (max-width: 480px) {
    .pw-mega-wrapper { column-count: 1; }
}

/* --- Scrollbar styling for mega menu --- */
.pw-quicknav-dropdown::-webkit-scrollbar {
    width: 6px;
}
.pw-quicknav-dropdown::-webkit-scrollbar-track {
    background: #f8f9fa;
}
.pw-quicknav-dropdown::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.pw-quicknav-dropdown::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
/* Hide fullscreen widget on mobile */
@media (max-width: 576px) {
    [data-widget="fullscreen"] {
        display: none !important;
    }
}

/* Ensure top navbar items never get cut off on mobile without a way to reach them */
@media (max-width: 576px) {
    .main-header .navbar-nav {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    .main-header .navbar-nav::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Opera */
    }
    
    /* CRITICAL FIX: Because overflow-x is auto, all absolute dropdowns inside the navbar get clipped vertically.
       We must force them to position: fixed so they break out of the scrolling container and become visible! */
    .main-header .navbar-nav .dropdown-menu {
        position: fixed !important;
        top: 56px !important;
        right: 5px !important;
        left: auto !important;
        width: 280px !important;
        max-width: 95vw !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
    }
}

/*
================================================================================
| PAGE TRANSITION SYSTEM  (spa_plan.md Phase 1 — flicker reduction)
================================================================================
| Every sidebar click is a full-page reload. To stop the jarring white flash,
| we (a) paint the shell background immediately so any pre-render frame is the
| brand grey, not white, and (b) fade ONLY the content area in on load so the
| eye reads the sidebar/navbar as continuous while the content "settles".
|
| Deliberately OPACITY-ONLY: a `transform` on .content-wrapper would create a
| containing block and break `position: fixed` modals/dropdowns rendered inside
| it.
|
| ⚠ IMPORTANT (fixed 2026-06-27): opacity is NOT fully side-effect-free. An
| element with an opacity *animation* creates a STACKING CONTEXT, and
| `animation-fill-mode: both` keeps that animation in its "fill" phase forever,
| so the stacking context becomes PERMANENT. That traps every Bootstrap modal
| (z-index 1050) rendered inside .content-wrapper below the body-level
| `.modal-backdrop` (z-index 1040) — the backdrop paints OVER the modal and
| swallows all clicks, so the ✕/Close/outside click can never dismiss it (only
| ESC worked). Fix: drop `both`. The fade still plays once on load; afterwards
| no animation effect remains, so no stacking context, and modals layer
| correctly. (`both` was redundant anyway — delay is 0 and the natural opacity
| is already 1, so neither the backwards nor forwards fill changed anything.)
*/

/* Match the light content background so the first paint frame isn't white. */
html {
    background-color: #f4f6f9;
}

@media (prefers-reduced-motion: no-preference) {
    /* Fade the content region in on first paint. @keyframes are not affected by
       AdminLTE's `hold-transition` class (that only disables `transition`), so
       this runs immediately without depending on any JS timing.

       Runs on ALL browsers. (Previously this was scoped to browsers WITHOUT View
       Transitions, because the cross-document transition below handled the
       cross-fade. That transition was DISABLED — see the note further down — because
       opting into it turned off the browser's native paint-holding and produced a
       1–2s white sidebar/content flash on slower pages. With the transition off,
       this lightweight fade is what gives navigation its soft "settle".) */
    .content-wrapper {
        /* No `both` — see the warning above. A filling opacity animation would
           create a permanent stacking context that hides modals behind the
           backdrop. Without a fill-mode the effect ends when the fade does. */
        animation: pwContentFadeIn 200ms ease-out;
    }

    @keyframes pwContentFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Hint the compositor to keep the fixed shell on its own layer so the
       content fade doesn't trigger a full-shell repaint. */
    .main-sidebar,
    .main-header {
        backface-visibility: hidden;
    }
}

/* Never let the fade affect printing. */
@media print {
    .content-wrapper { animation: none !important; opacity: 1 !important; }
}

/*
================================================================================
| TOP NAVIGATION PROGRESS BAR  (spa_plan.md Phase 3)
================================================================================
| Slim brand-orange bar pinned to the very top of the viewport. JS
| (topbar-progress.js) toggles `.pw-active` and drives the width; this is just
| the look. High z-index so it sits above the navbar and any modal.
*/
#pw-progressbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #f37021; /* Projectworlds Orange */
    box-shadow: 0 0 8px rgba(243, 112, 33, 0.6), 0 0 4px rgba(243, 112, 33, 0.4);
    z-index: 20000;
    opacity: 0;
    pointer-events: none;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    transition: width 0.2s ease, opacity 0.3s ease;
}
#pw-progressbar.pw-active {
    opacity: 1;
}

@media print {
    #pw-progressbar { display: none !important; }
}

/*
================================================================================
| CROSS-DOCUMENT VIEW TRANSITIONS  (spa_plan.md "Phase V")
================================================================================
| Makes every same-origin full-page reload animate instead of hard-cutting, and
| holds the sidebar + topbar visually STABLE across the navigation so they read
| as if they never reloaded. Pure CSS, progressive enhancement: browsers without
| support simply fall back to the Phase 1 content fade above — nothing breaks.
|
| How it works: naming an element with `view-transition-name` lifts it into its
| own transition "group". We then suppress the old/new fade on the shell groups
| so they snap (stay put) while the page `root` (content + footer + body)
| cross-fades underneath. The name must be unique per page — `.main-sidebar` and
| `.main-header` each render exactly once, so that holds.
*/

/* ⚠ DISABLED 2026-06-25 — caused a 1–2s WHITE sidebar/content flash on slower pages,
   across all roles (reported with a screen recording: header rendered, sidebar +
   content blank, then "arrived").

   Root cause: opting into cross-document view transitions via `@view-transition`
   turns OFF the browser's native paint-holding (which normally keeps the OLD page
   on screen until the new one paints). Chrome then drives its own transition, but
   the `root` group's snapshot came up blank during the inter-page wait — so the
   live `pw-topbar` header showed above a white `root` (sidebar + content) for the
   full duration of the next page's load. On fast pages it's a blink; on heavier
   pages it's the recorded 1–2s white. Disabling this restores native paint-holding
   (no white); the lightweight `.content-wrapper` fade above keeps the soft feel.

   To re-enable later, the sidebar's OverlayScrollbars + position:fixed snapshot
   needs to be made transition-safe first (or drop `view-transition-name` from the
   sidebar so it stays baked into the root screenshot instead of a separate, blank
   capture).

@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
    .main-sidebar { view-transition-name: pw-sidebar; }
    .main-header  { view-transition-name: pw-topbar; }

    ::view-transition-old(pw-sidebar),
    ::view-transition-new(pw-sidebar),
    ::view-transition-old(pw-topbar),
    ::view-transition-new(pw-topbar) {
        animation: none;
        mix-blend-mode: normal;
        height: 100%;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 220ms;
        animation-timing-function: ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}
*/
/* Collect Fees parity styles copied from the supplied reference HTML. */
.premium-student-card{background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);border:1px solid #e2e8f0;border-radius:12px;padding:1.25rem;box-shadow:0 10px 25px -5px rgba(0,0,0,.08),0 8px 10px -6px rgba(0,0,0,.04);position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.premium-student-card:hover{transform:translateY(-2px);box-shadow:0 25px 50px -12px rgba(0,0,0,.18),0 10px 20px -10px rgba(0,0,0,.1)}
.premium-student-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgba(59,130,246,.08) 0%,transparent 40%);pointer-events:none}
.premium-student-photo{width:80px;height:80px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 10px 20px -5px rgba(0,0,0,.15),0 0 0 1px #e2e8f0;z-index:1}
.student-name-title{font-size:1.25rem;font-weight:800;color:#0f172a;margin-bottom:.2rem}
.student-badge-class{background:#eff6ff;color:#2563eb;padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600;display:inline-block;margin-bottom:1rem;border:1px solid #bfdbfe}
.student-meta-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:.75rem 1rem!important}
.meta-item{display:flex;flex-direction:column}.meta-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b;font-weight:700;margin-bottom:.2rem}.meta-value{font-size:.95rem;color:#334155;font-weight:500}
.financial-pills{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:.5rem!important;z-index:1;min-width:320px}
.finance-pill{display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;padding:.5rem .75rem!important;border-radius:8px!important;font-weight:700;box-shadow:0 2px 4px rgba(0,0,0,.02);border:1px solid transparent!important;transition:transform .2s}
.finance-pill span:first-child{font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;opacity:.8;margin-bottom:.25rem}.finance-pill b{font-size:1.15rem;font-weight:800}.finance-pill:hover{transform:scale(1.02)}
.finance-pill.assigned{background:#f1f5f9!important;color:#475569;border-color:#e2e8f0!important}.finance-pill.paid{background:#f0fdf4!important;color:#166534;border-color:#bbf7d0!important;box-shadow:0 4px 10px rgba(34,197,94,.1)}.finance-pill.concession{background:#fefce8!important;color:#854d0e;border-color:#fde68a!important}.finance-pill.fine{background:#fff7ed!important;color:#9a3412;border-color:#fed7aa!important}.finance-pill.due{background:#fef2f2!important;color:#991b1b;border-color:#fecaca!important}.finance-pill.wallet{background:#f0f9ff!important;color:#075985;border-color:#bae6fd!important}
.fee-group-header{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:10px 15px;margin-top:1rem;cursor:pointer;transition:background .2s ease,box-shadow .2s ease;user-select:none}.fee-group-header:hover{background:#e2e8f0;box-shadow:0 2px 6px rgba(0,0,0,.08)}.fee-group-header.group-fully-paid{background:#f0fdf4;border-color:#bbf7d0;border-left:4px solid #22c55e}.fee-group-header.group-fully-paid:hover{background:#dcfce7}.fee-group-header.group-has-due{border-left:4px solid #e74a3b}.fee-group-header .group-title{font-size:1rem;font-weight:700;color:#1e293b;margin:0}.fee-group-body{border:1px solid #e2e8f0;border-top:none;border-radius:0 0 6px 6px;overflow:hidden}.fee-group-body .table{margin-bottom:0}
@media(max-width:1199px){.financial-pills{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))!important;margin-top:1rem;padding-top:1rem;border-top:1px dashed #e2e8f0}.student-meta-grid{grid-template-columns:repeat(2,1fr)!important}}
.acc-title-area,.acc-tabs,.acc-tab,.btn-acc-primary{font-family:Inter,sans-serif}.acc-title-area{margin-bottom:20px}.acc-title-area h3{font-weight:700;color:#0f172a;font-size:1.5rem}.acc-title-area p{color:#64748b;font-size:.9rem;margin-bottom:0}.acc-tabs-wrap{display:flex;align-items:stretch;border-bottom:1px solid #e2e8f0;margin-bottom:25px}.acc-tabs{display:flex!important;flex-wrap:nowrap;align-items:stretch;gap:0 18px;overflow:hidden;flex:1 1 auto;min-width:0}.acc-tab{padding:10px 5px!important;color:#64748b!important;font-weight:500;text-decoration:none!important;position:relative;font-size:.9rem;white-space:nowrap;display:flex!important;align-items:center}.acc-tab:hover{color:#0f172a!important;text-decoration:none}.acc-tab.active{color:#0f172a!important;font-weight:600;background:transparent!important}.acc-tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:#0f172a}
.acc-more{flex:0 0 auto;display:flex;align-items:stretch}.acc-more .dropdown-menu{z-index:1030;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);border:1px solid #e2e8f0}.acc-more .dropdown-item{font-family:Inter,sans-serif;font-size:.88rem;color:#334155;padding:8px 16px}.acc-more .dropdown-item:hover{background:#f1f5f9;color:#0f172a}.acc-more .dropdown-item.active{background:#0f172a;color:#fff}.acc-more .dropdown-item i{width:18px;text-align:center}.acc-tab.dropdown-toggle.active:after{display:none}#accFlowChart{min-height:300px;height:300px;max-height:300px;max-width:100%}
.db-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.db-foot td{font-weight:700;background:var(--tpl-primary-soft);border-top:2px solid var(--tpl-primary-border)!important;color:var(--tpl-text);padding:12px 16px}.db-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}.db-filters .form-group{margin-bottom:0}.coa-card{background:#fff;border-radius:12px;border:1px solid #eae7e1;box-shadow:0 2px 5px rgba(0,0,0,.04);margin-bottom:20px}.coa-nature{font-size:1rem;font-weight:700;color:#0f172a;padding:14px 20px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center}.coa-nature i{margin-right:10px}.coa-asset{color:#0284c7}.coa-liability{color:#e11d48}.coa-equity{color:#7c3aed}.coa-income{color:#059669}.coa-expense{color:#d97706}.coa-group{padding:8px 20px 8px 24px;font-weight:600;color:#334155;font-size:.9rem;background:#f8fafc;border-bottom:1px solid #f1f5f9}.coa-group.coa-indent{padding-left:34px}.coa-ledger{display:flex;justify-content:space-between;align-items:center;padding:8px 20px 8px 44px;border-bottom:1px solid #f4f4f5;font-size:.88rem;color:#475569}.coa-ledger:hover{background:#fafafa}.coa-ledger .code{color:#94a3b8;font-size:.75rem;font-family:monospace;margin-left:8px}.coa-sys{font-size:.65rem;background:var(--tpl-primary-soft);color:var(--tpl-primary-deep);padding:1px 6px;border-radius:10px;margin-left:6px}.coa-bal{font-family:monospace;font-weight:600;color:#0f172a}.ba-ledger-btn{padding:5px 12px;font-size:13px}.ba-actions{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}.ba-bank-sub{font-size:12px;color:var(--tpl-text-muted)}
.gd-card{background:#fff;border-radius:12px;border:1px solid #eae7e1;box-shadow:0 2px 5px rgba(0,0,0,.04);margin-bottom:20px;padding:24px}.gd-card h4{font-weight:700;color:#0f172a;font-size:1.05rem;margin-bottom:12px}.gd-card h4 i{margin-right:8px;color:#0284c7}.gd-step{display:flex;gap:14px;margin-bottom:14px}.gd-num{flex:0 0 30px;height:30px;border-radius:50%;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}.gd-step p{margin:0;color:#475569;font-size:.9rem}.gd-step strong{color:#0f172a}.gd-pill{display:inline-block;background:#f1f5f9;color:#334155;border-radius:6px;padding:2px 8px;font-size:.8rem;font-family:monospace}.fx-hero{position:relative;overflow:hidden;border-radius:18px;margin-bottom:22px;background:linear-gradient(125deg,#0f172a 0%,#0284c7 48%,#059669 100%);box-shadow:0 20px 50px -22px rgba(2,132,199,.6)}.fx-hero:before,.fx-hero:after{content:"";position:absolute;border-radius:50%;filter:blur(6px);opacity:.5}.fx-hero:before{width:260px;height:260px;right:-70px;top:-90px;background:radial-gradient(circle,#22d3ee,transparent 70%)}.fx-hero:after{width:220px;height:220px;left:-60px;bottom:-90px;background:radial-gradient(circle,#34d399,transparent 70%)}.fx-hero-inner{position:relative;z-index:1;padding:26px 30px;color:#fff}.fx-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.03em;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);padding:5px 13px;border-radius:30px;margin-bottom:12px}.fx-hero-title{font-size:1.9rem;font-weight:800;line-height:1.18;margin:0 0 10px;color:#fff}.fx-hero-title span{background:linear-gradient(90deg,#fde047,#fb923c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.fx-hero-sub{font-size:.98rem;line-height:1.6;max-width:940px;margin:0 0 18px;color:rgba(255,255,255,.92)}.fx-stats{display:flex;flex-wrap:wrap;gap:12px}.fx-stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:10px 18px;min-width:120px}.fx-stat b{display:block;font-size:1.5rem;font-weight:800;line-height:1;color:#fff}.fx-stat span{font-size:.72rem;text-transform:uppercase;color:rgba(255,255,255,.85)}.fx-pills{display:flex;flex-wrap:wrap;gap:9px}.fx-pills span{font-size:.82rem;font-weight:600;color:#0f172a;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border:1px solid #e2e8f0;border-radius:30px;padding:7px 14px;transition:transform .12s ease}.fx-pills span:hover{transform:scale(1.05);background:linear-gradient(135deg,#ecfeff,#ecfdf5);border-color:#a7f3d0}@media(max-width:768px){.fx-hero-title{font-size:1.4rem}.fx-stat{flex:1 1 40%}}
.guide-info-card{background:#f0f9ff;border-color:#bae6fd}
/* Exact reference components: Accounts and Collect Fees */
.acc-card{font-family:Inter,"Source Sans Pro",sans-serif;background:#fcfbf9;border-radius:12px;border:1px solid #eae7e1;box-shadow:0 2px 5px rgba(0,0,0,.04);margin-bottom:20px}.acc-stat-card{display:flex;align-items:center;padding:20px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.acc-stat-card:hover{transform:translateY(-4px);box-shadow:0 8px 15px rgba(0,0,0,.05);border-color:#d6d2c4}.acc-stat-sky{border-right:4px solid #0284c7}.acc-stat-emerald{border-right:4px solid #059669}.acc-stat-icon{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-right:15px;flex-shrink:0}.acc-bg-sky{background:#e0f2fe;color:#0284c7}.acc-bg-amber{background:#fef3c7;color:#d97706}.acc-bg-rose{background:#ffe4e6;color:#e11d48}.acc-bg-emerald{background:#d1fae5;color:#059669}.acc-stat-value{display:block;font-size:1.6rem;font-weight:800;color:#0f172a;line-height:1.1;margin-top:5px;word-break:break-word}.acc-stat-label{display:block;font-size:.75rem;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.acc-stat-sub{display:block;font-size:.75rem;margin-top:4px}.acc-section-title{font-size:1.1rem;font-weight:700;color:#0f172a;padding:18px 20px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}.acc-section-title a{font-size:.8rem;color:#94a3b8;text-decoration:none}.acc-section-note{font-size:.8rem;font-weight:500}.acc-table{width:100%;margin-bottom:0}.acc-table th{background:#0f172a;color:#fff;font-weight:600;font-size:.72rem;text-transform:uppercase;padding:10px 16px;border:0;letter-spacing:.5px}.acc-table td{padding:11px 16px;vertical-align:middle;border-bottom:1px solid #f1f5f9;color:#334155;font-size:.88rem}.acc-table tr:hover td{background:#f8fafc}.acc-badge{padding:3px 9px;border-radius:20px;font-size:.7rem;font-weight:600;text-transform:capitalize}.acc-badge-receipt{background:#dcfce7;color:#166534}.acc-badge-payment{background:#fee2e2;color:#991b1b}.acc-voucher-number{font-size:.75rem}.acc-empty{text-align:center;padding:30px 15px!important;color:#94a3b8}.premium-student-layout{position:relative;z-index:1}.premium-photo-column{min-width:110px}.premium-student-info{border-right:1px dashed #e2e8f0}.student-fee-card .premium-student-card{display:block;grid-template-columns:none}.student-fee-card .financial-pills{display:grid!important}.student-fee-card .finance-pill span:last-child{font-size:1.15rem;font-weight:800}.fee-group-body tbody.collapse.show{display:table-row-group}.group-controls-bar{display:flex;gap:6px}@media(max-width:1199px){.premium-student-info{border-right:0}.student-meta-grid{grid-template-columns:repeat(2,1fr)!important}}@media(max-width:767px){.acc-stat-card{padding:15px 10px;flex-direction:column;align-items:flex-start}.acc-stat-icon{width:36px;height:36px;font-size:1.1rem;margin:0 0 8px}.acc-stat-value{font-size:1.25rem}}
/* Student face-search reference components */
.fs-wrap{font-family:Inter,sans-serif}.fs-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05)}.fs-mode-tabs{display:flex;gap:8px;margin-bottom:16px}.fs-mode-btn{flex:1;padding:10px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:8px;font-weight:600;color:#64748b;cursor:pointer;font-size:.9rem;transition:all .15s}.fs-mode-btn.active{background:var(--tpl-primary);border-color:var(--tpl-primary);color:#fff}.fs-stage{position:relative;width:100%;aspect-ratio:4/3;background:#0f172a;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#94a3b8}.fs-stage img,.fs-stage video,.fs-stage canvas{max-width:100%;max-height:100%;object-fit:contain}.fs-stage .fs-placeholder{text-align:center;padding:20px}.fs-stage .fs-placeholder i{font-size:2.4rem;margin-bottom:8px;opacity:.6}.fs-result{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid #e2e8f0;border-radius:10px;margin-bottom:10px;text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s}.fs-result:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);border-color:#cbd5e1;text-decoration:none;color:inherit}.fs-result.is-top{border-color:var(--tpl-primary)}.fs-avatar{width:56px;height:56px;border-radius:10px;object-fit:cover;background:#f1f5f9;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-weight:700;font-size:1.1rem}.fs-result-meta{flex:1 1 auto;min-width:0}.fs-result-meta .name{font-weight:700;color:#0f172a}.fs-result-meta .sub{font-size:.82rem;color:#64748b}.fs-conf{flex:0 0 auto;text-align:right}.fs-conf .pct{font-weight:800;font-size:1.1rem}.fs-conf .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#94a3b8}.fs-badge-match{background:#dcfce7;color:#166534}
/* Exact reference: student-dashboard */
.st-card {
        font-family: 'Inter', sans-serif;
        background: #fcfbf9;
        border-radius: 12px;
        border: 1px solid #eae7e1;
        box-shadow: 0 2px 5px rgba(0,0,0,0.04);
        margin-bottom: 20px;
    }
    .st-stat-card {
        display: flex; align-items: center;
        padding: 20px;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .st-stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 15px rgba(0,0,0,0.05); border-color: #d6d2c4; }
    .st-stat-icon {
        width: 48px; height: 48px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.4rem; margin-right: 15px; flex-shrink: 0;
    }
    .st-bg-sky { background-color: #e0f2fe; color: #0284c7; }
    .st-bg-teal { background-color: #ccfbf1; color: #0d9488; }
    .st-bg-rose { background-color: #ffe4e6; color: #e11d48; }
    .st-bg-amber { background-color: #fef3c7; color: #d97706; }
    .st-bg-indigo { background-color: var(--tpl-primary-soft); color: var(--tpl-primary); }
    .st-bg-emerald { background-color: #d1fae5; color: #059669; }
    .st-bg-slate { background-color: #f1f5f9; color: #64748b; }
    .st-stat-value { font-size: 1.7rem; font-weight: 800; color: #0f172a; line-height: 1; margin-top: 5px; }
    .st-stat-label { font-size: 0.75rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
    .st-stat-sub { font-size: 0.75rem; margin-top: 4px; }
    .st-section-title {
        font-size: 1.1rem; font-weight: 700; color: #0f172a;
        padding: 18px 20px; border-bottom: 1px solid #e2e8f0;
        display: flex; justify-content: space-between; align-items: center;
    }
    .st-section-title a { font-size: 0.8rem; color: #94a3b8; text-decoration: none; }
    .st-section-title a:hover { color: #0f172a; }
    .st-activity-icon { width: 30px; height: 30px; border-radius: 7px; display:flex; align-items:center; justify-content:center; background:#f1f5f9; flex-shrink:0; }
    .st-empty { text-align:center; padding: 30px 15px; color:#94a3b8; }
    .st-empty i { font-size: 2.2rem; opacity: 0.25; display:block; margin-bottom: 8px; }
    .st-op-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #f1f5f9; }
    .st-op-row:last-child { border-bottom: none; }
    .st-op-label { font-size: 0.85rem; color: #475569; font-weight: 600; }
    .st-op-value { font-size: 1.1rem; font-weight: 800; color: #0f172a; }

/* Exact reference: students */
/* Table look, toolbar, buttons, search, pagination all come from the
       global TPL DataTables skin (css/tpl-theme.css) + tplDataTable(). Only
       page-specific styling remains below. */

    /* Premium Monogram Avatars & Image Frames */
    .student-avatar-frame {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        transition: transform 0.2s;
    }
    .student-avatar-frame:hover {
        transform: scale(1.1);
    }
    
    /* Modernized Pills & Badges (Tailwind-like soft colors) */
    .badge-due-danger {
        background-color: #fee2e2 !important;
        color: #b91c1c !important;
        border: 1px solid #fecaca !important;
        font-weight: 600 !important;
        font-size: 0.78rem !important;
        border-radius: 9999px !important;
        padding: 4px 12px !important;
        display: inline-block;
    }
    .badge-due-success {
        background-color: #d1fae5 !important;
        color: #065f46 !important;
        border: 1px solid #a7f3d0 !important;
        font-weight: 600 !important;
        font-size: 0.78rem !important;
        border-radius: 9999px !important;
        padding: 4px 12px !important;
        display: inline-block;
    }
    .badge-assigned {
        background-color: #f1f5f9 !important;
        color: #475569 !important;
        border: 1px solid #e2e8f0 !important;
        font-weight: 600 !important;
        font-size: 0.8rem !important;
        border-radius: 6px !important;
        padding: 3px 8px !important;
        display: inline-block;
    }
    .badge-siblings {
        background-color: #e0f2fe !important;
        color: #0369a1 !important;
        border: 1px solid #bae6fd !important;
        font-weight: 600 !important;
        font-size: 0.76rem !important;
        border-radius: 9999px !important;
        padding: 4px 10px !important;
        display: inline-block;
        cursor: pointer;
    }
    
    /* Modern Action Buttons */
    .btn-action-group {
        display: flex;
        gap: 4px;
        justify-content: flex-start;
    }
    .btn-action-group .btn {
        border-radius: 6px !important;
        padding: 5px 8px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        transition: all 0.15s ease-in-out;
        border: 1px solid transparent;
    }
    .btn-action-group .btn-view {
        background-color: #f0fdf4 !important;
        color: #15803d !important;
        border-color: #bbf7d0 !important;
    }
    .btn-action-group .btn-view:hover {
        background-color: #15803d !important;
        color: #ffffff !important;
        border-color: #15803d !important;
    }
    .btn-action-group .btn-edit {
        background-color: #eff6ff !important;
        color: #1d4ed8 !important;
        border-color: #bfdbfe !important;
    }
    .btn-action-group .btn-edit:hover {
        background-color: #1d4ed8 !important;
        color: #ffffff !important;
        border-color: #1d4ed8 !important;
    }
    .btn-action-group .btn-disable {
        background-color: #fff7ed !important;
        color: #c2410c !important;
        border-color: #ffedd5 !important;
    }
    .btn-action-group .btn-disable:hover {
        background-color: #c2410c !important;
        color: #ffffff !important;
        border-color: #c2410c !important;
    }
    .btn-action-group .btn-delete {
        background-color: #fef2f2 !important;
        color: #b91c1c !important;
        border-color: #fee2e2 !important;
    }
    .btn-action-group .btn-delete:hover {
        background-color: #b91c1c !important;
        color: #ffffff !important;
        border-color: #b91c1c !important;
    }
    
    /* Filter Group Mobile Responsiveness */
    .filter-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex-grow: 1;
        width: 100%;
    }
    @media (min-width: 768px) {
        .filter-group {
            width: auto;
            flex-grow: 0;
        }
        .filter-group select { min-width: 160px; }
    }
    
    .filter-actions {
        display: flex;
        gap: 8px;
        width: 100%;
    }
    @media (min-width: 768px) {
        .filter-actions {
            width: auto;
        }
    }

    /* Grid view cards (tplView) */
    .sd-grid-card {
        border: 1px solid var(--tpl-border);
        border-radius: 10px;
        background: #fff;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transition: box-shadow .18s ease, border-color .18s ease;
    }
    .sd-grid-card:hover { border-color: var(--tpl-primary-border); box-shadow: var(--tpl-card-shadow); }
    .sd-gc-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .sd-gc-id { min-width: 0; }
    .sd-gc-name { font-weight: 600; color: var(--tpl-text); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sd-gc-name a { color: inherit; }
    .sd-gc-adm { font-size: .75rem; color: var(--tpl-text-3); }
    .sd-gc-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
        font-size: .8rem;
        color: var(--tpl-text-2);
    }
    .sd-gc-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        border-top: 1px solid var(--tpl-divider);
        padding-top: 10px;
        margin-top: auto;
    }
    .sd-gc-actions .btn-action-group { justify-content: flex-end; }

    /* Tablet & Mobile Layout Enhancements */
    @media (max-width: 767.98px) {
        #bulk-actions-container {
            width: 100% !important;
            margin-left: 0 !important;
            margin-top: 6px !important;
            justify-content: stretch !important;
            display: flex !important;
        }

        #bulk-actions-container .btn {
            flex: 1 !important;
        }
    }

    /* Extra-Small Mobile Table Cells & Button Compactness */
    @media (max-width: 575.98px) {
        #students-table th, #students-table td {
            padding: 8px 6px !important;
            font-size: 0.8rem !important;
        }

        .btn-action-group {
            gap: 2px !important;
        }

        .btn-action-group .btn {
            padding: 4px 6px !important;
            font-size: 0.75rem !important;
        }
    }

/* Exact reference: students-face-search */
.fs-wrap { font-family: 'Inter', sans-serif; }

    .fs-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .fs-mode-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
    .fs-mode-btn {
        flex: 1; padding: 10px; border: 1px solid #e2e8f0; background: #f8fafc;
        border-radius: 8px; font-weight: 600; color: #64748b; cursor: pointer;
        font-size: 0.9rem; transition: all .15s;
    }
    .fs-mode-btn.active { background: var(--tpl-primary); border-color: var(--tpl-primary); color: #fff; }

    .fs-stage {
        position: relative; width: 100%; aspect-ratio: 4/3; background: #0f172a;
        border-radius: 10px; overflow: hidden; display: flex; align-items: center;
        justify-content: center; color: #94a3b8;
    }
    .fs-stage img, .fs-stage video, .fs-stage canvas {
        max-width: 100%; max-height: 100%; object-fit: contain;
    }
    .fs-stage .fs-placeholder { text-align: center; padding: 20px; }
    .fs-stage .fs-placeholder i { font-size: 2.4rem; margin-bottom: 8px; opacity: .6; }

    .fs-result {
        display: flex; align-items: center; gap: 14px; padding: 12px 14px;
        border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 10px;
        text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s;
    }
    .fs-result:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); border-color: #cbd5e1; text-decoration: none; color: inherit; }
    .fs-result.is-top { border-color: var(--tpl-primary); }
    .fs-avatar {
        width: 56px; height: 56px; border-radius: 10px; object-fit: cover;
        background: #f1f5f9; flex: 0 0 auto; display: flex; align-items: center;
        justify-content: center; color: #94a3b8; font-weight: 700; font-size: 1.1rem;
    }
    .fs-result-meta { flex: 1 1 auto; min-width: 0; }
    .fs-result-meta .name { font-weight: 700; color: #0f172a; }
    .fs-result-meta .sub { font-size: 0.82rem; color: #64748b; }
    .fs-conf { flex: 0 0 auto; text-align: right; }
    .fs-conf .pct { font-weight: 800; font-size: 1.1rem; }
    .fs-conf .lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; }
    .fs-badge-match { background: #dcfce7; color: #166534; }
    .fs-badge-maybe { background: #fef9c3; color: #854d0e; }
    .fs-badge {
        display: inline-block; padding: 2px 8px; border-radius: 999px;
        font-size: 0.7rem; font-weight: 700; margin-top: 2px;
    }

    .fs-note { font-size: 0.82rem; color: #64748b; }

/* Exact reference: parents */
.pm-name-cell { display:flex; align-items:center; gap:10px; min-width:0; }
    .pm-avatar {
        width:36px; height:36px; border-radius:50%; flex:0 0 36px;
        display:flex; align-items:center; justify-content:center;
        background:var(--tpl-primary-soft); color:var(--tpl-primary);
        font-weight:700; font-size:.85rem;
    }
    .pm-avatar-img { object-fit:cover; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.12); }
    .pm-name-wrap { min-width:0; display:flex; flex-direction:column; }
    .pm-name { font-weight:600; color:var(--tpl-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .pm-sub { display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; }
    .pm-sub-item { font-size:.76rem; color:var(--tpl-text-3); white-space:nowrap; }
    .pm-sub-item i { opacity:.7; margin-right:3px; }
    .pm-sub-muted { font-style:italic; }

/* Exact reference: student-attendance */
/* Selected-status row tints (JS toggles .attendance-row-<Status>) */
    .attendance-row-Present { background-color: var(--tpl-green-soft) !important; }
    .attendance-row-Absent { background-color: var(--tpl-red-soft) !important; }
    .attendance-row-Late { background-color: var(--tpl-amber-soft) !important; }
    .attendance-row-Half-Day { background-color: var(--tpl-blue-soft) !important; }

    .sticky-save-footer {
        position: sticky; bottom: 0; background: #fff; padding: 14px 16px;
        border-top: 1px solid var(--tpl-border); z-index: 1030;
        box-shadow: 0 -6px 20px rgba(17, 24, 39, .06);
    }

    .attendance-options { white-space: nowrap; }
    .attendance-options .form-check { cursor: pointer; padding: 4px 10px; border-radius: 6px; transition: background-color .15s ease; margin-right: 4px; }
    .attendance-options .form-check:hover { background: var(--tpl-bg-soft); }

    .punch-time { font-size: 11px; font-weight: 600; white-space: nowrap; }
    .punch-time i { width: 14px; text-align: center; }
    .att-method-label { font-size: 9px; color: var(--tpl-text-3); }

    /* Mark-All quick buttons (keep .mark-all for JS) */
    .att-markall-label { color: var(--tpl-text-3); font-size: 12.5px; font-weight: 600; }
    .mark-all {
        border: 1px solid var(--tpl-border-strong); background: #fff; color: var(--tpl-text-2);
        border-radius: var(--tpl-radius-sm); padding: 4px 13px; font-size: 12.5px; font-weight: 600;
        cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    }
    .mark-all[data-status="Present"]:hover  { background: var(--tpl-green-soft); color: var(--tpl-green); border-color: var(--tpl-green-soft); }
    .mark-all[data-status="Absent"]:hover   { background: var(--tpl-red-soft);   color: var(--tpl-red);   border-color: var(--tpl-red-soft); }
    .mark-all[data-status="Late"]:hover     { background: var(--tpl-amber-soft); color: var(--tpl-amber); border-color: var(--tpl-amber-border); }
    .mark-all[data-status="Half Day"]:hover { background: var(--tpl-blue-soft);  color: var(--tpl-blue);  border-color: var(--tpl-blue-soft); }

    .att-btn-danger { color: var(--tpl-red) !important; border-color: var(--tpl-red-soft) !important; }
    .att-btn-danger:hover { background: var(--tpl-red-soft) !important; border-color: var(--tpl-red) !important; }

/* Exact reference: student-behavior */
.bh-name { font-weight: 600; color: var(--tpl-text); }

/* Exact reference: student-houses */
/* Layout only — colors come from the global tpl theme (css/tpl-theme.css). */
    .hs-count { font-size: 12px; font-weight: 500; color: var(--tpl-text-3); }
    .hs-name { font-weight: 600; color: var(--tpl-text); }

/* Exact reference: student-categories */
.cat-name { font-weight: 600; color: var(--tpl-text); }

/* Exact reference: student-exits */
.ex-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:767.98px) { .ex-stats { grid-template-columns:repeat(2,1fr); } }
.ex-stat { border:1px solid rgba(0,0,0,.08); border-radius:8px; padding:10px 14px; background:#fff; }
.ex-stat-n { font-size:1.5rem; font-weight:700; line-height:1.1; }
.ex-stat-l { font-size:12px; color:#6c757d; }
.ex-guide { border:1px solid #ffe08a; border-left:4px solid #ffc107; background:#fffdf5; border-radius:8px; padding:10px 14px; margin-bottom:14px; }
.ex-guide-head { display:flex; align-items:center; gap:8px; font-size:13px; color:#6b4e00; }
.ex-guide-head strong { color:#533d00; }
.ex-guide-toggle { margin-left:auto; background:none; border:0; padding:0; font-size:12px; font-weight:600; color:#8a6d00; cursor:pointer; white-space:nowrap; }
.ex-guide-toggle:hover { text-decoration:underline; }
.ex-guide-body { margin-top:10px; }
.ex-guide-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0; padding:0; list-style:none; }
@media (max-width:767.98px) { .ex-guide-steps { grid-template-columns:1fr; } }
.ex-guide-steps li { background:#fff; border:1px solid #f2e3b3; border-radius:6px; padding:9px 11px; font-size:12.5px; color:#495057; line-height:1.5; }
.ex-guide-step-n { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#ffc107; color:#533d00; font-size:11px; font-weight:700; margin-right:6px; }
.ex-guide-steps li b { color:#212529; }
.ex-guide-legend { font-size:12px; color:#6c757d; margin:10px 0 0; line-height:1.6; }
.ex-guide-legend b { color:#495057; }
.ex-choice { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px) { .ex-choice { grid-template-columns:1fr; } }
.ex-opt { display:block; margin:0; cursor:pointer; border:2px solid #dee2e6; border-radius:8px; padding:12px 14px; transition:border-color .15s,background .15s; }
.ex-opt:hover { border-color:#adb5bd; }
.ex-opt input { position:absolute; opacity:0; }
.ex-opt.is-picked { border-color:#ffc107; background:#fffdf5; }
.ex-opt-title { display:block; font-weight:700; margin-bottom:4px; }
.ex-opt-desc { display:block; font-size:12px; color:#6c757d; line-height:1.45; }

.nav-pills-custom .nav-link { color:#495057; background:#fff; border:1px solid #dee2e6; border-left:4px solid transparent; border-radius:.25rem; margin-bottom:.4rem; padding:.6rem .7rem; font-weight:500; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease; }
.nav-pills-custom .nav-link:hover { background:var(--tpl-primary-soft); border-left-color:var(--tpl-primary-border); color:var(--tpl-primary-deep); }
.nav-pills-custom .nav-link.active { color:#fff; background:var(--tpl-primary); border-color:var(--tpl-primary); border-left-color:var(--tpl-primary-deep); box-shadow:0 2px 8px var(--tpl-primary-shadow); }
.nav-pills-custom .nav-link i { width:18px; text-align:center; margin-right:7px; }
.nav-pills-custom { position:sticky; top:70px; }
.section-header { background:var(--tpl-primary-soft); padding:12px 18px; border-radius:6px; border-left:5px solid var(--tpl-primary); color:var(--tpl-primary-deep); font-weight:700; text-transform:uppercase; font-size:1.05rem; margin-bottom:1.5rem; display:flex; align-items:center; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.section-header i { margin-right:12px; font-size:1.25rem; opacity:.8; }
.section-header.header-danger { border-left-color:#dc3545; color:#dc3545; background:#fdf3f4; }
.section-header.header-success { border-left-color:#28a745; color:#28a745; background:#f4fdf6; }
.section-header.header-dark { border-left-color:#343a40; color:#343a40; background:#f8f9fa; }
.section-header.header-warning { border-left-color:#ffc107; color:#d39e00; background:#fff8e5; }
.section-header.header-info { border-left-color:#17a2b8; color:#117a8b; background:#eaf8fb; }
.sub-section-header { display:flex; align-items:center; padding:8px 14px; margin-top:1.5rem; margin-bottom:1rem; border-radius:4px; border-left:4px solid var(--tpl-primary); background:#f8f9fa; font-weight:600; font-size:.95rem; color:#343a40; }
.sub-section-header i { margin-right:10px; opacity:.7; font-size:1.1rem; }
.sub-section-header.sub-primary { border-left-color:var(--tpl-primary); color:var(--tpl-primary-deep); }
.sub-section-header.sub-danger { border-left-color:#dc3545; color:#b02a37; }
.sub-section-header.sub-info { border-left-color:#17a2b8; color:#117a8b; }
.sub-section-header.sub-warning { border-left-color:#ffc107; color:#c69500; }
.sub-section-header.sub-secondary { border-left-color:#6c757d; color:#495057; }
.photo-upload-box { background:#f8f9fa; border:1px solid #e9ecef; border-radius:8px; padding:1rem 1.25rem; margin-top:.5rem; }
.wizard-actions { display:flex; justify-content:space-between; align-items:center; margin-top:2rem; padding-top:1.25rem; border-top:1px solid #e9ecef; }
.wizard-actions .btn { min-width:130px; }

.list-shell { position: relative; }
    .list-shell .ls-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
    .list-shell .ls-title-wrap { display:flex; align-items:baseline; gap:8px; min-width:0; }
    .list-shell .ls-title { font-size:1.5rem; margin:0; font-weight:600; }
    .list-shell .ls-count { font-size:12px; color:#adb5bd; white-space:nowrap; }
    .list-shell .ls-header-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

    .list-shell .ls-tabs { display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid rgba(0,0,0,.08); margin-bottom:14px; -webkit-overflow-scrolling:touch; }
    .list-shell .ls-tab { flex:0 0 auto; padding:9px 12px; font-size:13px; color:#6c757d; border-bottom:2px solid transparent; white-space:nowrap; text-decoration:none; }
    .list-shell .ls-tab:hover { color:#343a40; }
    .list-shell .ls-tab.on { color:#17a2b8; font-weight:600; border-bottom-color:#17a2b8; }
    .list-shell .ls-tab-n { font-size:11px; color:#adb5bd; margin-left:5px; }
    .list-shell .ls-tab.on .ls-tab-n { color:#17a2b8; }

    .list-shell .ls-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
    .list-shell .ls-search { flex:1; min-width:170px; display:flex; align-items:center; gap:8px; border:1px solid #ced4da; border-radius:8px; padding:0 10px; background:#fff; }
    .list-shell .ls-search i { color:#adb5bd; font-size:13px; }
    .list-shell .ls-search input { border:0; outline:0; padding:8px 0; width:100%; font-size:13px; background:transparent; }
    .list-shell .ls-select { border:1px solid #ced4da; border-radius:8px; padding:7px 10px; font-size:13px; color:#495057; background:#fff; max-width:180px; }
    .list-shell .ls-apply { border:1px solid #17a2b8; background:#17a2b8; color:#fff; border-radius:8px; padding:7px 14px; font-size:13px; cursor:pointer; }
    .list-shell .ls-apply:hover { background:#138496; }

    .list-shell .ls-pagination { margin-top:14px; display:flex; justify-content:center; }
    .list-shell .ls-pagination .pagination { margin-bottom:0; }

    /* Mobile floating action button */
    .list-shell .ls-fab { position:fixed; right:18px; bottom:18px; width:52px; height:52px; border-radius:50%; background:#007bff; color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 4px 14px rgba(0,0,0,.25); z-index:1030; text-decoration:none; }
    .list-shell .ls-fab:hover { color:#fff; background:#0069d9; }

    @media (max-width: 767.98px) {
        .list-shell .ls-title { font-size:1.3rem; }
        .list-shell .ls-select { flex:1 1 45%; max-width:none; }
    }

/* Exact reference: student-health */
.hr-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--tpl-border); flex-shrink: 0; }
    .hr-name { font-weight: 600; color: var(--tpl-text); }
    .hr-bmi { font-size: 11px; color: var(--tpl-text-3); margin-top: 2px; }
    .tpl-chip i { font-size: .62rem; }
    /* .tpl-filter .btn is padding-sized and renders taller than the compact
       filter selects beside it — pin it to the control height so the row lines up. */
    .tpl-filter .hr-filter-btn {
        height: calc(1.4em + .5rem + 2px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-top: 0;
        padding-bottom: 0;
    }
/* Exact reference: student/create.html */
.input-group-sm .custom-file-label:after {
        height: 1.8125rem;
        line-height: 1.25;
    }
    .input-group-sm .custom-file-label {
        height: calc(1.8125rem + 2px);
        line-height: 1.25;
    }
    .input-group-sm .custom-file {
        height: calc(1.8125rem + 2px);
        font-size: .875rem;
    }

    
    .input-group-lg .custom-file-label:after {
        height: 2.875rem;
        line-height: 1.6;
    }
    .input-group-lg .custom-file-label {
        height: calc(2.875rem + 2px);
        line-height: 1.6;
    }
    .input-group-lg .custom-file {
        height: calc(2.875rem + 2px);
        font-size: 1.25rem;
    }

/* Exact reference: student/3.html */
/* Barcode & QR Code block */
    .sp-codes {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px dashed #e2e8f0;
    }
    .sp-code-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 4px;
    }
    .sp-code-row + .sp-code-row {
        border-top: 1px solid #f1f5f9;
    }
    .sp-code-label {
        font-size: 0.8rem;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        white-space: nowrap;
    }
    .sp-code-label i { margin-right: 5px; color: #94a3b8; }
    .sp-code-img {
        height: 48px;
        width: auto;
        max-width: 60%;
        object-fit: contain;
    }
    .sp-qr-img { height: 64px; }

    /* Basic Calendar Styling */
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 5px;
    }

    .calendar-day {
        text-align: center;
        padding: 10px 5px;
        border: 1px solid #eee;
        border-radius: 4px;
    }

    .calendar-day.header {
        font-weight: bold;
        background-color: #f8f9fa;
    }

    .calendar-day.empty {
        background-color: #fdfdfd;
    }

    .attendance-status {
        display: block;
        margin-top: 5px;
        font-size: 0.8em;
        font-weight: bold;
    }

    .status-Present {
        background-color: #d4edda;
        color: #155724;
    }

    .status-Absent {
        background-color: #f8d7da;
        color: #721c24;
    }

    .status-Late {
        background-color: #fff3cd;
        color: #856404;
    }

    .status-Half.Day {
        background-color: #d1ecf1;
        color: #0c5460;
    }

/* Exact reference: student/3/edit.html */
.input-group-sm .custom-file-label:after {
        height: 1.8125rem;
        line-height: 1.25;
    }
    .input-group-sm .custom-file-label {
        height: calc(1.8125rem + 2px);
        line-height: 1.25;
    }
    .input-group-sm .custom-file {
        height: calc(1.8125rem + 2px);
        font-size: .875rem;
    }

    
    .input-group-lg .custom-file-label:after {
        height: 2.875rem;
        line-height: 1.6;
    }
    .input-group-lg .custom-file-label {
        height: calc(2.875rem + 2px);
        line-height: 1.6;
    }
    .input-group-lg .custom-file {
        height: calc(2.875rem + 2px);
        font-size: 1.25rem;
    }

/* Exact reference: student/3/health.html */
.hd-profile { text-align: center; }
    .hd-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(17, 24, 39, .12); }
    .hd-name { font-weight: 700; color: var(--tpl-text); margin: 12px 0 2px; font-size: 1.1rem; }
    .hd-sub { color: var(--tpl-text-3); font-size: .85rem; }
    .hd-info { list-style: none; margin: 16px 0; padding: 0; text-align: left; }
    .hd-info li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--tpl-divider); font-size: 13.5px; }
    .hd-info li:last-child { border-bottom: 0; }
    .hd-info li > span:first-child { color: var(--tpl-text-3); font-weight: 600; }
    .hd-info li b { color: var(--tpl-text); }
    .hd-emerg strong { color: var(--tpl-text); }
    .hd-subhead { font-weight: 700; color: var(--tpl-text); border-bottom: 1px solid var(--tpl-divider); padding-bottom: 8px; margin: 22px 0 12px; font-size: .95rem; }

    /* Pill tabs in the tpl accent */
    .hd-tabs { flex-wrap: wrap; gap: 4px; }
    .hd-tabs .nav-link { color: var(--tpl-text-2); border-radius: var(--tpl-radius-sm); font-weight: 600; font-size: .85rem; padding: 6px 14px; }
    .hd-tabs .nav-link:hover:not(.active) { background: var(--tpl-primary-soft); color: var(--tpl-primary); }
    .hd-tabs .nav-link.active { background: var(--tpl-primary); color: #fff; }
    .tpl-chip i { font-size: .62rem; }

    /* Modal header in the tpl gradient */
    .tpl-modal-head { background: var(--tpl-grad); color: #fff; border-bottom: 0; }
    .tpl-modal-head .modal-title { font-weight: 600; }
    .tpl-modal-head .close { color: #fff; opacity: .9; text-shadow: none; }
    .tpl-modal-head .close:hover { opacity: 1; }
    .modal-content { border: 0; border-radius: var(--tpl-radius); overflow: hidden; }

/* Student Information reference pages */
.st-title-area,.st-tabs,.st-tab,.btn-st-primary{font-family:Inter,sans-serif}.st-title-area{margin-bottom:20px}.st-title-area h3{font-weight:700;color:#0f172a;font-size:1.5rem}.st-title-area p{color:#64748b;font-size:.9rem;margin-bottom:0}.st-tabs-wrap{display:flex;align-items:stretch;border-bottom:1px solid #e2e8f0;margin-bottom:25px}.st-tabs{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0 18px;overflow:hidden;flex:1 1 auto;min-width:0}.st-more{flex:0 0 auto;display:flex;align-items:stretch}.st-more .dropdown-menu{z-index:1030;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);border:1px solid #e2e8f0}.st-more .dropdown-item{font-family:Inter,sans-serif;font-size:.88rem;color:#334155;padding:8px 16px}.st-more .dropdown-item:hover{background:#f1f5f9;color:#0f172a}.st-more .dropdown-item.active{background:#0f172a;color:#fff}.st-more .dropdown-item i{width:18px;text-align:center}.st-tab{padding:10px 5px;color:#64748b;font-weight:500;text-decoration:none;position:relative;font-size:.9rem;white-space:nowrap;display:flex;align-items:center}.st-tab:hover{color:#0f172a;text-decoration:none}.st-tab.active{color:#0f172a;font-weight:600}.st-tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#0f172a}.btn-st-primary{background:var(--tpl-primary);border-color:var(--tpl-primary);color:#fff;font-weight:600;border-radius:6px}.btn-st-primary:hover{background:var(--tpl-primary-deep);border-color:var(--tpl-primary-deep);color:#fff}.st-stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px;height:134px;position:relative;overflow:hidden}.st-stat-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px}.st-stat-value{font-size:1.55rem;font-weight:700;color:#0f172a;line-height:1}.st-stat-label{font-size:.78rem;color:#64748b;margin-top:7px}.st-section-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;height:100%}.st-section-title{padding:15px 18px;border-bottom:1px solid #e5e7eb;font-weight:700;color:#0f172a;display:flex;justify-content:space-between;align-items:center}.st-section-body{padding:18px}.st-list-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #f1f5f9}.st-list-row:last-child{border-bottom:0}.st-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-weight:700;color:#4f46e5}.tpl-student-photo{width:42px;height:42px;border-radius:50%;object-fit:cover}.student-empty{padding:42px 20px;text-align:center;color:#94a3b8}.student-empty i{font-size:36px;margin-bottom:12px}.student-profile-shell{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.student-profile-head{padding:22px;background:linear-gradient(135deg,#f8fbff,#eef4ff);display:flex;align-items:center;gap:18px}.student-profile-photo{width:86px;height:86px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 3px 12px rgba(15,23,42,.16)}.student-info-box{border:1px solid #e2e8f0;border-radius:8px;padding:10px 12px;height:100%}.student-info-box small{display:block;text-transform:uppercase;color:#64748b;font-size:10px;font-weight:700}.student-info-box strong{color:#0f172a}.student-form-section{background:#fff;border:1px solid #e2e8f0;border-radius:10px;margin-bottom:16px}.student-form-section h5{padding:14px 18px;margin:0;border-bottom:1px solid #e2e8f0;font-weight:700}.student-form-section .section-body{padding:18px}.ex-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.ex-stat{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:15px}.ex-stat-n{font-size:1.5rem;font-weight:700}.ex-stat-l{color:#64748b;font-size:.8rem}.face-dropzone{border:2px dashed #cbd5e1;border-radius:14px;background:#fff;padding:48px 24px;text-align:center}.face-preview{max-width:280px;max-height:280px;border-radius:12px}.health-value{font-weight:700;color:#0f172a}@media(max-width:767.98px){.ex-stats{grid-template-columns:repeat(2,1fr)}.st-tabs{gap:0 10px}.student-profile-head{align-items:flex-start;flex-direction:column}}