/* Shared phone layout. Desktop and printed documents retain their existing styles. */
.school-mobile-bar { display:none; }
@media screen and (max-width:768px) {
 html { -webkit-text-size-adjust:100%; scroll-padding-top:90px; }
 body { background:#f3f6f5; }
 body .app-container { display:block; min-width:0; }
 body .main-content { margin-left:0!important; margin-right:0!important; width:100%; min-width:0; padding-bottom:calc(88px + env(safe-area-inset-bottom,0px)); }
 body .main-content .content-area { padding:16px!important; min-width:0; max-width:100%; box-sizing:border-box; }
 body .content-area .content-area { padding:0!important; }
 body .top-header { position:sticky!important; top:0; z-index:100; display:flex!important; flex-direction:row!important; align-items:center; gap:8px; min-height:68px; padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px 64px!important; background:#fff; border-bottom:1px solid #e2eae5; box-shadow:0 2px 12px #173d2510; box-sizing:border-box; }
 body .top-header .header-left { flex:1; min-width:0; }
 body .top-header h1 { font-size:18px!important; line-height:1.3; margin:0; overflow-wrap:anywhere; }
 body .top-header .header-right { display:flex; align-items:center; flex-wrap:nowrap; gap:8px; flex:0 0 auto; min-width:0; max-width:100%; }
 body .top-header .user-info,body .top-header .staff-account > summary > span { display:none; }
 body .top-header .header-user-profile { padding:0; gap:0; }
 body .top-header .user-avatar { width:36px; height:36px; font-size:15px; }
 body .top-header .language-selector { flex:0 0 112px; width:112px; min-width:0; max-width:112px; margin:0!important; }
 body .top-header .language-selector .language-toggle { display:block; width:100%; min-width:0!important; max-width:100%; min-height:44px; padding:6px; font-size:16px; box-sizing:border-box; }
 body .top-header .staff-account,body .top-header .staff-notifications { flex:0 0 auto; margin:0; }
 body .top-header .staff-account > summary { display:flex; align-items:center; justify-content:center; width:44px; min-height:44px; padding:0; }
 body .top-header .header-user-profile { box-sizing:border-box; width:44px; min-width:44px; height:44px; justify-content:center; }
 body .top-header .user-avatar { flex:0 0 36px; margin:0!important; }
 body .staff-bell { min-width:44px; min-height:44px; padding:9px; box-sizing:border-box; }
 body .staff-account-menu,body .staff-notification-menu { position:fixed; top:calc(72px + env(safe-area-inset-top,0px)); right:12px; left:12px; width:auto; max-width:none; max-height:65vh; overflow-y:auto; border-radius:16px; }
 body .mobile-menu-toggle { display:flex!important; position:fixed; top:calc(12px + env(safe-area-inset-top,0px)); left:12px; right:auto; width:44px; height:44px; padding:12px; align-items:center; justify-content:center; border-radius:13px; z-index:1202; background:#195e3c; color:white; box-shadow:none; }
 body .sidebar { position:fixed!important; top:0; bottom:0; left:0!important; right:auto!important; width:min(310px,86vw)!important; height:100dvh; max-height:100dvh; transform:translateX(-105%)!important; transition:transform .22s ease; z-index:1201!important; overflow-y:auto; overscroll-behavior:contain; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); box-sizing:border-box; visibility:hidden; }
 body .sidebar.mobile-open { transform:translateX(0)!important; visibility:visible; }
 body .sidebar .sidebar-header { padding-left:68px; min-height:70px; }
 body .sidebar .sidebar-header h2 { font-size:16px; }
 body .sidebar .sidebar-nav a,body .sidebar summary { min-height:46px; box-sizing:border-box; }
 body .mobile-menu-overlay.active { display:block; position:fixed; inset:0; background:#0a241c80; backdrop-filter:blur(3px); z-index:1200!important; }
 body.menu-open { overflow:hidden; }
 body .school-mobile-bar { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:110; gap:4px; padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px)); background:#fffffff5; border-top:1px solid #dce7e0; box-shadow:0 -4px 20px #153e2510; backdrop-filter:blur(12px); }
 .school-mobile-bar a,.school-mobile-bar button { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:52px; min-width:0; border:0; border-radius:12px; color:#526b5d; background:transparent; text-decoration:none; font:600 11px/1.2 system-ui,sans-serif; padding:6px; }
 .school-mobile-bar svg { width:21px; height:21px; }
 .school-mobile-bar [aria-current=page] { color:#155b38; background:#e6f3eb; }
 body .page-header,body .page-header-content,body .section-header { position:static!important; display:flex!important; flex-wrap:wrap; flex-direction:row; align-items:center; gap:12px; padding:0; margin:0 0 18px; width:auto; min-width:0; }
 body .page-header h1,body .page-header h2 { font-size:23px!important; line-height:1.25; }
 body .header-actions,body .page-actions,body .filter-actions,body .form-actions { display:flex; flex-wrap:wrap; gap:8px; max-width:100%; }
 body .stats-grid,body .dashboard-stats,body .hr-cards { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; }
 body .stat-card,body .hr-card { min-width:0; padding:14px!important; border-radius:16px; box-sizing:border-box; }
 body .stat-card h3,body .stat-card .stat-value { font-size:26px!important; overflow-wrap:anywhere; }
 body .stat-card p { font-size:12px; }
 body .classes-grid,body .students-grid,body .roles-grid,body .dashboard-grid,body .charts-grid,body .form-grid,body .hr-grid,body .lp-grid { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:14px!important; }
 body .form-row,body .filters,body .filter-row,body .filters-row { display:flex!important; flex-direction:column!important; gap:12px; }
 body .form-row > *,body .filters > *,body .filter-row > *,body .filters-row > * { min-width:0!important; width:100%!important; flex-basis:auto!important; }
 body .card,body .panel,body .form-container,body .hr-panel,body .lp-card { max-width:100%; min-width:0; border-radius:16px; padding:16px; box-sizing:border-box; }
 body input:not([type=checkbox]):not([type=radio]):not([type=hidden]),body select,body textarea { max-width:100%; min-height:44px; font-size:16px!important; box-sizing:border-box; border-radius:10px; }
 body input[type=checkbox],body input[type=radio] { min-width:20px; min-height:20px; accent-color:#1b6040; }
 body .btn,body button:not(.tile-action-btn),body .pagination a { min-height:44px; touch-action:manipulation; }
 body .btn { display:inline-flex; align-items:center; justify-content:center; white-space:normal; border-radius:11px; }
 body .report-card-tabs,body .hr-tabs,body .lp-tabs,body .tabs,.mobile-scroll-tabs { display:flex!important; flex-wrap:nowrap!important; overflow-x:auto; gap:8px; padding-bottom:8px; max-width:100%; -webkit-overflow-scrolling:touch; }
 body .report-card-tabs > *,body .hr-tabs > *,body .lp-tabs > *,body .tabs > * { flex:0 0 auto; white-space:nowrap; }
 body .school-table-scroll,body .table-responsive,body .table-container,body .hr-table-wrap,body .lp-table { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; border-radius:12px; }
 body .school-table-scroll { margin-bottom:14px; border:1px solid #e0e8e3; background:white; }
 body .school-table-scroll > table { width:100%; min-width:560px; margin:0; }
 body th,body td { padding:12px 10px; }
 body .modal { padding:12px!important; box-sizing:border-box; overflow:auto; z-index:1300!important; }
 body .modal-content,body .modal-dialog { width:100%!important; max-width:100%!important; margin:16px auto!important; max-height:calc(100dvh - 32px); overflow:auto; border-radius:18px; box-sizing:border-box; }
 body img,body video { max-width:100%; }
 body .chart-container { min-width:0; max-width:100%; }
 body .login-container { width:100%; max-width:100%; padding:20px; box-sizing:border-box; }
 body .login-card,body .login-box { width:100%; max-width:440px; margin:auto; padding:24px; border-radius:22px; box-sizing:border-box; }
 :focus-visible { outline:3px solid #4285db; outline-offset:3px; }
}
@media screen and (max-width:420px) {
 body .top-header { flex-wrap:wrap!important; }
 body .top-header .header-left { flex:1 0 100%; min-height:36px; display:flex; align-items:center; }
 body .top-header .header-right { margin-left:auto; }
 body .staff-account-menu,body .staff-notification-menu { top:calc(122px + env(safe-area-inset-top,0px)); }
}
@media screen and (max-width:360px) {
 body .top-header h1 { font-size:16px!important; }
 body .stats-grid,body .dashboard-stats { grid-template-columns:minmax(0,1fr)!important; }
}
@media (prefers-reduced-motion:reduce) { .sidebar,.mobile-menu-overlay { transition:none!important; } }
@media print { .school-mobile-bar { display:none!important; } .school-table-scroll { overflow:visible!important; border:0!important; } }