body { background: #f7f9f8; font-family: Arial, Helvetica, sans-serif; min-height: 100vh; display: flex; flex-direction: column; margin: 0; }
.card { border: 0; }
input, select, textarea { width: 100%; padding: .375rem .75rem; border: 1px solid #ced4da; border-radius: .375rem; }
.validation-input-wrap { position: relative; }
.live-field .validation-input-wrap input { padding-right: 2.5rem; }
.validation-icon { display: none; position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); font-size: 1.2rem; font-weight: 800; pointer-events: none; }
.live-field.is-live-valid .validation-icon, .live-field.is-live-invalid .validation-icon { display: block; }
.live-field.is-live-valid .validation-icon { color: #198754; }
.live-field.is-live-invalid .validation-icon { color: #dc3545; }
.live-field.is-live-valid input { border-color: #198754; }
.live-field.is-live-invalid input { border-color: #dc3545; }
input[readonly] { background: #e9ecef; }
input[type="radio"] { width: auto; margin-right: .45rem; }

.top-menu-bar { min-height: 66px; }
.topbar-content { display: flex; align-items: center; width: 100%; }
.mobile-sidebar-toggle { display: none; flex: 0 0 auto; }
.top-user-photo { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; background: #fff; overflow: hidden; margin-right: 4px; }
.top-user-photo img { width: 100%; height: 100%; object-fit: cover; }
.top-user-name { font-weight: 700; }

.app-layout { display: flex; flex: 1 1 auto; min-height: calc(100vh - 145px); width: 100%; }
.portal-sidebar { background: #173b2d; color: #fff; width: 280px; flex: 0 0 280px; min-height: calc(100vh - 145px); border-radius: 0; padding: 24px 20px; box-shadow: inset -1px 0 0 rgba(255,255,255,.14); overflow-x: hidden; overflow-y: auto; transition: width .25s ease, flex-basis .25s ease, padding .25s ease, transform .25s ease; position: sticky; top: 0; align-self: stretch; z-index: 1035; }
.portal-sidebar .sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal-sidebar .sidebar-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.2); flex: 1; min-width: 0; }
.portal-sidebar .brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #173b2d; font-weight: 800; flex: 0 0 auto; }
.portal-sidebar .brand-text { font-size: 1rem; font-weight: 700; white-space: nowrap; }
.sidebar-menu-title { margin-top: 30px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #b2d8be; }
.side-menu { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.side-menu-link { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px; border-left: 3px solid transparent; transition: all .2s ease; }
.side-menu-link:hover { background: #2e7d55; border-left-color: #caf7ce; text-decoration: none; color: #fff; }
.side-menu-link .icon { font-weight: 900; flex: 0 0 22px; text-align: center; }
.sidebar-collapse { border-color: rgba(255,255,255,.55); padding: .1rem .55rem; align-self: start; }
.sidebar-collapse:hover { background: #fff; color: #173b2d; }
.user-identity { margin-top: 20px; display: flex; align-items: center; gap: 12px; padding: 10px 0 12px; border-bottom: 1px solid rgba(255,255,255,.2); }
.user-identity .user-photo-capsule { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; background: #fff; }
.user-identity .user-photo-capsule img { width: 100%; height: 100%; object-fit: cover; }
.user-identity .user-name { font-weight: 800; font-size: .88rem; line-height: 1.2; }
.user-identity .user-role { color: #d4eadb; font-size: .72rem; margin-top: 3px; }

.main-content-area { flex: 1; min-width: 0; padding: 24px; background: #f7f9f8; }
.sidebar-backdrop { display: none; }
.dashboard-wrap, .student-dashboard-wrap, .search-page-wrap { width: 100%; }
.registration-preview .card-header { background: #eef7f1; color: #173b2d; border-bottom: 1px solid #d9e9de; }
.registration-preview dt { color: #52645d; font-weight: 700; padding-block: .35rem; }
.registration-preview dd { overflow-wrap: anywhere; padding-block: .35rem; }
.attachment-image-preview { display: block; max-width: 100%; max-height: 640px; margin-inline: auto; object-fit: contain; }
.attachment-pdf-preview { display: block; width: 100%; min-height: 650px; border: 1px solid #d9e1de; border-radius: .375rem; }

.analytics-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 16px; margin-top: 20px; }
.stat-card { background: #fff; border-radius: 14px; padding: 16px 18px; border: 1px solid #e8eceb; box-shadow: 0 2px 8px rgba(0,0,0,.05); min-height: 120px; }
.stat-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stat-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; color: #516766; }
.stat-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; background: #eef9f1; color: #173b2d; }
.stat-card-total .stat-icon { background: #eaf6ff; color: #125d7a; }
.stat-card-approved .stat-icon { background: #ddf8e9; color: #157347; }
.stat-card-not-approved .stat-icon { background: #fee8e8; color: #ac1f21; }
.stat-card-pending .stat-icon { background: #fff2d4; color: #965d00; }
.stat-number { font-size: 2rem; line-height: 1; font-weight: 800; color: #173b2d; margin-bottom: 8px; }
.stat-footer { color: #667c79; font-size: .76rem; }

.site-footer { margin-top: auto; background: #12351f; color: #effcf4; padding: 14px 0; border-top: 3px solid #86d19a; }
.site-footer .footer-title { font-weight: 700; font-size: .95rem; }
.site-footer .footer-powered { font-size: .82rem; margin-top: 3px; color: #d9eadc; }

body.sidebar-collapsed .app-layout .portal-sidebar { width: 90px; flex-basis: 90px; padding-inline: 12px; }
body.sidebar-collapsed .app-layout .portal-sidebar .brand-text,
body.sidebar-collapsed .app-layout .portal-sidebar .sidebar-menu-title,
body.sidebar-collapsed .app-layout .portal-sidebar .user-identity,
body.sidebar-collapsed .app-layout .portal-sidebar .side-menu-link span:not(.icon) { display: none; }
body.sidebar-collapsed .app-layout .portal-sidebar .side-menu-link { justify-content: center; padding-inline: 8px; }
body.sidebar-collapsed .app-layout .portal-sidebar .sidebar-brand { border-bottom-color: transparent; padding-bottom: 14px; justify-content: center; }
body.sidebar-collapsed .app-layout .portal-sidebar .brand-icon { margin-inline: auto; }
body.sidebar-collapsed .app-layout .portal-sidebar .sidebar-collapse { margin-inline: auto; }
body.sidebar-collapsed .app-layout .portal-sidebar .sidebar-collapse { transform: rotate(180deg); }

@media (max-width: 900px) {
    body.sidebar-collapsed .app-layout .portal-sidebar { width: min(82vw, 300px); flex-basis: auto; padding: 22px 18px; }
    body.sidebar-collapsed .app-layout .portal-sidebar .brand-text,
    body.sidebar-collapsed .app-layout .portal-sidebar .sidebar-menu-title,
    body.sidebar-collapsed .app-layout .portal-sidebar .user-identity,
    body.sidebar-collapsed .app-layout .portal-sidebar .side-menu-link span:not(.icon) { display: initial; }
    body.sidebar-collapsed .app-layout .portal-sidebar .side-menu-link { justify-content: flex-start; padding-inline: 12px; }
    .app-layout { display: flex; }
    .mobile-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .portal-sidebar { position: fixed; inset: 0 auto 0 0; width: min(82vw, 300px); min-height: 100vh; transform: translateX(-105%); box-shadow: 6px 0 24px rgba(0,0,0,.28); }
    body.sidebar-open { overflow: hidden; }
    body.sidebar-open .portal-sidebar { transform: translateX(0); }
    .sidebar-collapse { display: none; }
    .sidebar-backdrop { position: fixed; inset: 0; z-index: 1030; border: 0; background: rgba(10,25,18,.48); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
    body.sidebar-open .sidebar-backdrop { display: block; opacity: 1; pointer-events: auto; }
    .main-content-area { width: 100%; }
    .analytics-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .analytics-grid { grid-template-columns: 1fr; }
    .topbar-content { flex-wrap: nowrap; gap: 8px; }
    .navbar-brand { font-size: 1rem; margin-right: auto; }
    .top-user-photo, .top-user-name { display: none; }
    .main-content-area { padding: 14px; }
    .site-footer { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .portal-sidebar, .sidebar-backdrop { transition: none; }
}