*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f6fa;color:#1a1a2e;font-size:14px}.page{padding:24px;max-width:1200px;margin:0 auto}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.page-title{font-size:22px;font-weight:600}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:6px;border:none;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:background .15s,opacity .15s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#4361ee;color:#fff}.btn-primary:hover:not(:disabled){background:#3a56d4}.btn-secondary{background:#e2e8f0;color:#374151}.btn-secondary:hover:not(:disabled){background:#cbd5e1}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover:not(:disabled){background:#dc2626}.btn-ghost{background:transparent;color:#4361ee;padding:6px 10px}.btn-ghost:hover{background:#eff2ff}.btn-sm{padding:5px 12px;font-size:13px}.card{background:#fff;border-radius:10px;box-shadow:0 1px 4px #00000014;padding:24px}.filter-bar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;align-items:flex-end}.filter-group{display:flex;flex-direction:column;gap:4px}.filter-group label{font-size:12px;font-weight:500;color:#6b7280}.filter-bar input,.filter-bar select{padding:7px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;outline:none;background:#fff}.filter-bar input:focus,.filter-bar select:focus{border-color:#4361ee}.filter-bar input[type=text]{min-width:220px}.table-wrapper{overflow-x:auto}table{width:100%;border-collapse:collapse}thead th{text-align:left;padding:10px 14px;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;border-bottom:1px solid #e2e8f0;background:#f9fafb}tbody td{padding:12px 14px;border-bottom:1px solid #f1f5f9;vertical-align:middle}tbody tr:hover{background:#f8f9ff}.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:500}.badge-active{background:#d1fae5;color:#065f46}.badge-inactive{background:#f3f4f6;color:#6b7280}.badge-transferred{background:#dbeafe;color:#1e40af}.badge-alumni{background:#ede9fe;color:#5b21b6}.badge-staff-active{background:#d1fae5;color:#065f46}.badge-staff-on-leave{background:#fef9c3;color:#854d0e}.badge-staff-resigned{background:#ffedd5;color:#9a3412}.badge-staff-terminated{background:#fee2e2;color:#991b1b}.section-heading{font-size:13px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid #f1f5f9}.pagination{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:16px}.pagination span{font-size:13px;color:#6b7280}.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}.form-group{display:flex;flex-direction:column;gap:5px}.form-group.full-width{grid-column:1 / -1}.form-group label{font-size:13px;font-weight:500;color:#374151}.form-group label .required{color:#ef4444;margin-left:2px}.form-group input,.form-group select,.form-group textarea{padding:8px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;outline:none;width:100%;transition:border-color .15s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#4361ee}.form-group input.error,.form-group select.error{border-color:#ef4444}.form-error{font-size:12px;color:#ef4444;margin-top:2px}.step-indicator{display:flex;align-items:center;margin-bottom:32px}.step-indicator .step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative}.step-indicator .step:not(:last-child):after{content:"";position:absolute;top:16px;left:50%;right:-50%;height:2px;background:#e2e8f0;z-index:0}.step-indicator .step.done:after{background:#4361ee}.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;z-index:1;border:2px solid #e2e8f0;background:#fff;color:#9ca3af}.step.active .step-circle{border-color:#4361ee;color:#4361ee;background:#eff2ff}.step.done .step-circle{border-color:#4361ee;background:#4361ee;color:#fff}.step-label{font-size:11px;font-weight:500;color:#9ca3af;text-align:center}.step.active .step-label{color:#4361ee}.step.done .step-label{color:#374151}.form-actions{display:flex;justify-content:space-between;margin-top:32px;padding-top:20px;border-top:1px solid #f1f5f9}.tabs{display:flex;gap:0;border-bottom:2px solid #e2e8f0;margin-bottom:24px}.tab-btn{padding:10px 20px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#6b7280;border-bottom:2px solid transparent;margin-bottom:-2px}.tab-btn.active{color:#4361ee;border-bottom-color:#4361ee}.tab-btn:hover:not(.active){color:#374151}.profile-section{margin-bottom:28px}.profile-section h3{font-size:14px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px}.profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.profile-field label{font-size:12px;color:#9ca3af;display:block;margin-bottom:2px}.profile-field span{font-size:14px;color:#1a1a2e;font-weight:500}.alert{padding:12px 16px;border-radius:6px;font-size:14px;margin-bottom:16px}.alert-error{background:#fee2e2;color:#991b1b}.alert-success{background:#d1fae5;color:#065f46}.loading-row td,.empty-row td{text-align:center;color:#9ca3af;padding:40px;font-size:14px}.sidebar{width:220px;flex-shrink:0;background:#fff;border-right:1px solid #e2e8f0;padding:12px 0 24px;overflow-y:auto;overflow-x:hidden;transition:width .2s ease;white-space:nowrap}.sidebar-collapsed{width:0;padding:0;border-right:none}.sidebar-toggle{font-size:18px;line-height:1;padding:4px 8px;flex-shrink:0}.sidebar-section{margin-bottom:6px}.sidebar-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af;padding:10px 16px 4px}.sidebar-item{display:flex;align-items:center;justify-content:space-between;padding:7px 16px;font-size:13px;font-weight:500;color:#374151;text-decoration:none;cursor:pointer;border-right:3px solid transparent;transition:background .1s,color .1s}.sidebar-item:hover:not(.sidebar-item-disabled):not(.sidebar-item-active){background:#f8fafc;color:#1e293b}.sidebar-item-active{background:#eff2ff;color:#4361ee;font-weight:600;border-right-color:#4361ee}.sidebar-item-disabled{color:#b0b8c4;cursor:default}.sidebar-soon{font-size:9px;background:#f1f5f9;color:#94a3b8;padding:1px 6px;border-radius:4px;font-weight:600;flex-shrink:0}.dashboard-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.stat-card{padding:20px;transition:box-shadow .15s,transform .15s}a.stat-card:hover{box-shadow:0 4px 12px #0000001f;transform:translateY(-1px)}.stat-value{font-size:30px;font-weight:700;line-height:1}.stat-label{font-size:13px;color:#6b7280;margin-top:6px}.stat-sub{font-size:11px;color:#9ca3af;margin-top:3px}.dashboard-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}.dashboard-empty{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:6px;padding:20px;text-align:center;color:#94a3b8;font-size:13px}@media (max-width: 1100px){.dashboard-stats{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}}.id-card-page{display:flex;gap:32px;flex-wrap:wrap;padding:24px}.id-card{width:85.6mm;height:54mm;border:1px solid #e2e8f0;border-radius:6px;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:8px;box-shadow:0 2px 8px #0000001f}.id-card-header{background:#4361ee;color:#fff;padding:5px 8px;display:flex;align-items:center;gap:7px;min-height:14mm;flex-shrink:0}.id-card-logo{height:10mm;width:auto;max-width:14mm;object-fit:contain;flex-shrink:0}.id-card-header-text{flex:1;min-width:0}.id-card-school-name{font-size:12px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.id-card-school-address{font-size:7px;opacity:.85;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.id-card-type{font-size:7.5px;opacity:.9;margin-top:3px;letter-spacing:.05em;text-transform:uppercase}.id-card-body{display:flex;flex:1;padding:6px 8px;gap:8px;overflow:hidden}.id-card-photo-col{flex-shrink:0}.id-card-photo{width:24mm;height:26mm;object-fit:cover;border:1px solid #e2e8f0;border-radius:3px}.id-card-photo-placeholder{width:24mm;height:26mm;background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:3px;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:7px;text-align:center}.id-card-info-col{flex:1;overflow:hidden}.id-card-name{font-size:10px;font-weight:700;color:#1a1a2e;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.id-card-table{width:100%;border-collapse:collapse}.id-card-table td{padding:1.5px 0;vertical-align:top;line-height:1.3}.id-card-table td:first-child{color:#6b7280;width:52px;white-space:nowrap}.id-card-table td:last-child{font-weight:500;color:#1a1a2e}.id-card-footer{background:#f8f9ff;padding:4px 8px;display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid #e2e8f0}.id-card-validity{font-size:7px;color:#6b7280}.id-card-signature{font-size:7px;color:#374151;border-top:1px solid #374151;padding-top:2px}.id-card-back{justify-content:space-between}.id-card-back-title{background:#4361ee;color:#fff;padding:4px 8px;font-weight:700;font-size:9px}.id-card-back-table{padding:6px 8px;flex:1}.id-card-back-table td:first-child{color:#6b7280;width:50px}.id-card-back-note{font-size:7px;color:#9ca3af;padding:4px 8px;border-top:1px solid #f1f5f9}.tc-print-wrapper{max-width:680px;margin:0 auto;padding:24px}.tc-document{border:1px solid #e2e8f0;border-radius:8px;padding:40px;background:#fff;font-size:14px;line-height:1.7}.tc-document-header{text-align:center;margin-bottom:32px;border-bottom:2px solid #1a1a2e;padding-bottom:16px}.tc-document-header h2{font-size:20px;font-weight:700;margin-bottom:4px}.tc-document-header p{font-size:13px;color:#6b7280}.tc-title{text-align:center;font-size:16px;font-weight:700;letter-spacing:.1em;text-decoration:underline;margin-bottom:28px}.tc-body p{margin-bottom:12px;text-align:justify}.tc-body strong{font-weight:600}.tc-signature-row{display:flex;justify-content:space-between;margin-top:48px}.tc-signature-box{text-align:center}.tc-signature-box .sig-line{border-top:1px solid #374151;width:140px;margin:0 auto 4px}.tc-signature-box span{font-size:12px;color:#6b7280}.tc-meta{display:flex;justify-content:space-between;font-size:12px;color:#9ca3af;margin-top:24px}.attend-btn-group{display:flex;gap:4px}.attend-btn{padding:3px 9px;font-size:12px;font-weight:700;border-radius:4px;border:1.5px solid transparent;cursor:pointer;background:#f1f5f9;color:#6b7280;transition:all .1s}.attend-btn:hover{opacity:.85}.attend-btn.present.active{background:#d1fae5;color:#065f46;border-color:#10b981}.attend-btn.absent.active{background:#fee2e2;color:#991b1b;border-color:#ef4444}.attend-btn.late.active{background:#fef3c7;color:#92400e;border-color:#f59e0b}.attend-btn.excused.active{background:#ede9fe;color:#4c1d95;border-color:#6366f1}.badge-attend-present{background:#d1fae5;color:#065f46}.badge-attend-absent{background:#fee2e2;color:#991b1b}.badge-attend-late{background:#fef3c7;color:#92400e}.badge-attend-excused{background:#ede9fe;color:#4c1d95}@media print{.no-print{display:none!important}body{margin:0;background:#fff}.id-card-page{padding:10mm;gap:8mm}.id-card{box-shadow:none;border:1px solid #ccc}.id-card-controls{display:none}.tc-print-wrapper{max-width:100%;padding:0}.tc-document{border:none;padding:20mm}}