*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#f9fafb;color:#111827}:root{--color-primary: #3b82f6;--color-success: #10b981;--color-danger: #ef4444;--color-warning: #f59e0b;--color-info: #06b6d4;--color-dark-red: #8b2b1a;--color-text-primary: #111827;--color-text-secondary: #6b7280;--color-text-muted: #9ca3af;--color-bg-primary: #ffffff;--color-bg-secondary: #f9fafb;--color-bg-tertiary: #f3f4f6;--color-border: #e5e7eb;--color-border-light: #d1d5db;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 1px 3px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .15);--shadow-xl: 0 10px 25px rgba(0, 0, 0, .1);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;color:var(--color-text-primary)}h1{font-size:2.5rem;font-weight:700}h2{font-size:1.25rem}h3{font-size:1rem}p{margin:0;color:var(--color-text-secondary)}a{color:var(--color-primary);text-decoration:none;transition:all .2s ease}a:hover{color:#2563eb}button{font-family:inherit;font-size:.875rem;font-weight:500;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .3s ease;padding:.5rem 1rem}button:hover{transform:translateY(-1px)}button:active{transform:translateY(0)}.card{background:var(--color-bg-primary);border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-md);overflow:hidden;transition:all .3s ease}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.card-content{padding:var(--spacing-lg)}.badge{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-primary{background:#dbeafe;color:#1e40af}.badge-success{background:#dcfce7;color:#166534}.badge-danger{background:#fee2e2;color:#991b1b}.badge-warning{background:#fef3c7;color:#92400e}.flex{display:flex}.flex-col{flex-direction:column}.flex-center{align-items:center;justify-content:center}.flex-between{justify-content:space-between;align-items:center}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.grid{display:grid;gap:var(--spacing-lg)}.grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.m-sm{margin:var(--spacing-sm)}.m-md{margin:var(--spacing-md)}.m-lg{margin:var(--spacing-lg)}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}.text-success{color:var(--color-success)}.text-danger{color:var(--color-danger)}.font-semibold{font-weight:600}.font-bold{font-weight:700}.border-bottom{border-bottom:1px solid var(--color-border)}.border-top{border-top:1px solid var(--color-border)}.border-left{border-left:4px solid var(--color-primary)}@media(max-width:768px){h1{font-size:1.875rem}.grid-cols-auto{grid-template-columns:1fr}.flex-responsive{flex-direction:column}}@media(max-width:480px){h1{font-size:1.5rem}.p-lg{padding:var(--spacing-md)}button{padding:.4rem .8rem;font-size:.75rem}}.dashboard-main-layout{display:flex;min-height:100vh}.dashboard-wrapper{display:flex;flex-direction:column;flex:1;margin-left:280px;background-color:var(--color-bg-secondary)}.top-header{background:var(--color-bg-primary);padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:flex-start;align-items:center;border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm)}.school-info{display:flex;align-items:center;gap:var(--spacing-md);font-size:1.5rem;font-weight:600;color:var(--color-text-primary)}.school-logo{font-size:2rem}.school-name{font-size:1.25rem;color:var(--color-text-primary)}.header-right{display:flex;align-items:center;gap:var(--spacing-lg);margin-left:auto}.academic-year-selector{display:flex;flex-direction:column;gap:var(--spacing-sm)}.academic-year-selector label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.year-dropdown{padding:var(--spacing-sm) .75rem;border:1px solid var(--color-border-light);border-radius:var(--radius-sm);background:var(--color-bg-primary);color:var(--color-text-primary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.year-dropdown:hover{border-color:var(--color-text-secondary);box-shadow:var(--shadow-sm)}.year-dropdown:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #3b82f61a}.header-icons{display:flex;gap:var(--spacing-md);align-items:center;justify-content:flex-end}.notification-btn,.profile-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;transition:all .2s ease;padding:0;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;padding:var(--spacing-sm);border-radius:var(--radius-sm)}.notification-btn:hover,.profile-btn:hover{background:var(--color-bg-tertiary);transform:scale(1.1)}.profile-menu-wrapper{position:relative}.profile-menu{position:absolute;top:100%;right:0;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);min-width:280px;z-index:1000;margin-top:var(--spacing-sm)}.profile-header{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);border-bottom:1px solid var(--color-border)}.school-icon{font-size:2rem}.school-details h3{margin:0;font-size:1rem;font-weight:600;color:var(--color-text-primary)}.school-details p{margin:var(--spacing-sm) 0 0 0;font-size:.875rem;color:var(--color-text-secondary)}.profile-menu-divider{height:1px;background:var(--color-border);margin:var(--spacing-sm) 0}.profile-menu-item{display:block;width:100%;padding:.75rem var(--spacing-md);background:none;border:none;text-align:left;color:var(--color-text-secondary);font-size:.875rem;cursor:pointer;transition:all .2s ease;text-decoration:none}.profile-menu-item:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.profile-menu-item.logout{color:var(--color-danger)}.profile-menu-item.logout:hover{background:#fee2e2;color:#dc2626}.breadcrumb-section{background:var(--color-bg-primary);border-bottom:1px solid var(--color-border);padding:var(--spacing-md) var(--spacing-lg)}.breadcrumb-nav{display:flex;align-items:center;gap:var(--spacing-sm)}.breadcrumb-item{color:var(--color-text-secondary);text-decoration:none;font-size:.95rem;transition:all .2s ease}.breadcrumb-item:hover{color:var(--color-text-primary);text-decoration:underline}.breadcrumb-item.active{color:var(--color-text-primary);font-weight:600;cursor:default}.breadcrumb-separator{color:var(--color-text-muted);margin:0 .25rem}.dashboard-container{padding:var(--spacing-lg);flex:1;overflow-y:auto}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.stat-card{background:var(--color-bg-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-lg);box-shadow:var(--shadow-md);transition:all .3s ease;text-decoration:none;color:inherit;border:1px solid var(--color-border)}.stat-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.stat-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;flex-shrink:0}.stat-content{flex:1}.stat-number{font-size:1.875rem;font-weight:700;color:var(--color-text-primary);margin:0}.stat-label{color:var(--color-text-secondary);font-size:.875rem;margin:var(--spacing-sm) 0 0 0}.school-info-card{background:var(--color-bg-primary);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--color-border);margin-bottom:var(--spacing-lg)}.school-info-card .card-header{display:flex;justify-content:space-between;align-items:center}.edit-btn{background:none;border:none;color:var(--color-primary);cursor:pointer;font-size:.875rem;padding:.5rem 1rem;border-radius:var(--radius-sm);transition:all .2s ease;font-weight:500}.edit-btn:hover{background:var(--color-bg-tertiary);color:var(--color-primary-dark, #1d4ed8)}.school-info-content{padding:var(--spacing-lg)}.school-info-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.school-info-row:last-child{margin-bottom:0}.school-info-col{display:flex;flex-direction:column;gap:.5rem}.school-info-col.full-width{grid-column:1 / -1}.info-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);margin:0}.info-value{font-size:1rem;font-weight:500;color:var(--color-text-primary);margin:0}.charts-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.chart-card{background:var(--color-bg-primary);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--color-border)}.card-header{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);background:var(--color-bg-secondary)}.card-header h2{margin:0;font-size:1.25rem;font-weight:600;color:var(--color-text-primary)}.chart-content{padding:var(--spacing-lg)}.attendance-percentage{text-align:center;margin-bottom:var(--spacing-lg)}.large-number{font-size:2.5rem;font-weight:700;color:var(--color-success);margin:0}.attendance-label{color:var(--color-text-secondary);margin:var(--spacing-sm) 0 0 0}.attendance-bar{width:100%;height:12px;background:var(--color-border);border-radius:6px;overflow:hidden;margin-bottom:var(--spacing-md)}.bar-fill{height:100%;border-radius:6px;transition:width .3s ease}.bar-fill.present{background:linear-gradient(90deg,var(--color-success),#059669)}.attendance-details{display:flex;flex-direction:column;gap:var(--spacing-md)}.attendance-stats{display:flex;flex-direction:column;gap:.75rem}.stat-item{display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:var(--color-text-secondary)}.stat-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.stat-dot.present{background:var(--color-success)}.stat-dot.absent{background:var(--color-danger)}.gender-breakdown{display:flex;justify-content:space-around;align-items:flex-start;gap:var(--spacing-lg)}.gender-item{text-align:center;flex:1}.pie-segment{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-md);position:relative;color:#fff;font-weight:700;font-size:1.5rem}.pie-segment.girls{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.pie-segment.boys{background:linear-gradient(135deg,#f59e0b,#d97706)}.percentage{display:block}.gender-label{font-weight:600;color:var(--color-text-primary);margin:var(--spacing-sm) 0 0 0;font-size:1rem}.gender-count{color:var(--color-text-secondary);font-size:.875rem;margin:.25rem 0 0}.notice-section{background:var(--color-bg-primary);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--color-border);margin-bottom:var(--spacing-lg)}.notices-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-lg);padding:var(--spacing-lg)}.notice-item{background:var(--color-bg-secondary);padding:var(--spacing-md);border-radius:var(--radius-md);border-left:4px solid var(--color-primary);transition:all .3s ease}.notice-item:hover{background:var(--color-bg-tertiary);box-shadow:0 2px 8px #0000001a}.notice-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}.notice-header h3{margin:0;font-size:1rem;font-weight:600;color:var(--color-text-primary);flex:1}.notice-date{color:var(--color-text-muted);font-size:.75rem;white-space:nowrap;margin-left:var(--spacing-md)}.notice-content{color:var(--color-text-secondary);font-size:.875rem;line-height:1.5;margin:0}.quick-actions{background:var(--color-bg-primary);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--color-border)}.actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--spacing-md);padding:var(--spacing-lg)}.action-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:var(--spacing-lg) var(--spacing-md);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all .3s ease;font-size:.875rem;font-weight:500;color:var(--color-text-secondary);text-align:center}.action-button:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary);transform:translateY(-2px)}.action-icon{font-size:1.5rem}.bg-green-100{background:#dcfce7;color:#166534}.bg-blue-100{background:#dbeafe;color:#1e40af}.bg-orange-100{background:#fed7aa;color:#92400e}.bg-red-100{background:#fee2e2;color:#991b1b}.text-green-600{color:#16a34a}.text-blue-600{color:#2563eb}.text-orange-600{color:#ea580c}.text-red-600{color:#dc2626}.school-info-page{background:var(--color-bg-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md)}.school-info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.school-info-title{font-size:1.75rem;font-weight:600;color:var(--color-text-primary);margin:0}.school-edit-btn{background:var(--color-primary);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--radius-md);cursor:pointer;font-weight:500;display:flex;align-items:center;gap:.5rem;transition:all .2s ease}.school-edit-btn:hover{background:var(--color-primary-dark, #1d4ed8);box-shadow:var(--shadow-md)}.edit-icon{font-size:1rem}.edit-text{font-size:.9rem}.school-info-container{display:flex;justify-content:center}.school-info-content{width:100%;max-width:1000px}.school-info-table{display:flex;flex-direction:column;gap:0}.school-info-row-item{display:grid;grid-template-columns:250px 1fr;gap:var(--spacing-lg);padding:var(--spacing-md) 0;border-bottom:1px solid var(--color-border-light);align-items:center}.school-info-row-item:last-child{border-bottom:none}.school-info-label{font-weight:600;color:var(--color-text-secondary);font-size:.9rem}.school-info-value-cell{color:var(--color-text-primary);font-size:1rem}.action-buttons{display:flex;gap:var(--spacing-sm)}.btn-green{background:var(--color-success, #10b981);color:#fff;border:none;padding:.5rem 1rem;border-radius:var(--radius-sm);cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s ease}.btn-green:hover{background:var(--color-success-dark, #059669)}.btn-blue{background:var(--color-primary, #3b82f6);color:#fff;border:none;padding:.5rem 1rem;border-radius:var(--radius-sm);cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s ease}.btn-blue:hover{background:var(--color-primary-dark, #1d4ed8)}.school-logo-placeholder{font-size:2rem;color:var(--color-text-secondary)}.school-info-loading,.school-info-error,.school-info-empty{padding:var(--spacing-lg);text-align:center;color:var(--color-text-secondary);font-size:1rem}.school-info-error{color:var(--color-danger, #dc2626)}.school-info-wrapper{display:flex;flex-direction:column;gap:var(--spacing-md)}.back-to-dashboard-btn{align-self:flex-start;background:var(--color-primary);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--radius-md);cursor:pointer;font-weight:500;font-size:.9rem;transition:all .2s ease}.back-to-dashboard-btn:hover{background:var(--color-primary-dark, #1d4ed8);box-shadow:var(--shadow-md)}@media(max-width:1024px){.dashboard-wrapper{margin-left:240px}}@media(max-width:768px){.dashboard-main-layout{flex-direction:column}.dashboard-wrapper{margin-left:0}.top-header{flex-direction:column;gap:var(--spacing-md);align-items:flex-start}.header-right{width:100%;justify-content:space-between}.academic-year-selector{flex-direction:row;align-items:center;gap:var(--spacing-sm)}.breadcrumb-section{padding:var(--spacing-md) var(--spacing-md)}.breadcrumb-item{font-size:.875rem}.dashboard-container{padding:var(--spacing-md)}.stats-grid{grid-template-columns:1fr}.stat-card{flex-direction:column;text-align:center}.stat-content{width:100%}.charts-section{grid-template-columns:1fr}.gender-breakdown{flex-direction:column}.notices-grid{grid-template-columns:1fr}.action-button{padding:var(--spacing-md)}}@media(max-width:480px){.top-header{padding:.75rem var(--spacing-md)}.school-info{gap:var(--spacing-sm);font-size:1rem}.school-logo{font-size:1.5rem}.school-name{font-size:1rem}.header-right{gap:var(--spacing-md)}.academic-year-selector{flex-direction:column}.academic-year-selector label{font-size:.65rem}.year-dropdown{font-size:.75rem;padding:.4rem .5rem}.header-icons{gap:var(--spacing-sm)}.notification-btn,.profile-btn{font-size:1.25rem;padding:var(--spacing-sm)}.nav-item{padding:var(--spacing-sm) .75rem;font-size:.75rem}.stat-number{font-size:1.25rem}.actions-grid{grid-template-columns:repeat(2,1fr)}.notice-header{flex-direction:column;gap:var(--spacing-sm)}.notice-date{margin-left:0}}