:root{
  --bg:#f5f7fb;--card:#fff;--text:#18212f;--muted:#6b7280;--primary:#0f766e;
  --primary2:#0d9488;--border:#e5e7eb;--danger:#dc2626;--warn:#d97706;--ok:#16a34a;
  --shadow:0 8px 28px rgba(15,23,42,.08);--radius:18px
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Tajawal",sans-serif;color:var(--text);background:var(--bg)}
button,input,select,textarea{font:inherit}.hidden{display:none!important}.muted{color:var(--muted)}.tiny{font-size:12px}
.login-view{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#eef2f7}
.login-art{background:linear-gradient(145deg,#0b5f59,#0f766e 55%,#14b8a6);color:#fff;padding:9vw;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.login-art:after{content:"";position:absolute;width:420px;height:420px;border:70px solid rgba(255,255,255,.08);border-radius:50%;left:-160px;bottom:-160px}
.login-art h1{font-size:42px;margin:18px 0 10px}.login-art p{font-size:20px;max-width:520px;line-height:1.8}
.brand-mark{width:82px;height:82px;border-radius:24px;background:#fff;color:var(--primary);display:grid;place-items:center;font-size:38px;font-weight:800;box-shadow:var(--shadow)}
.brand-mark.small{width:42px;height:42px;border-radius:12px;font-size:22px;box-shadow:none}
.feature-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.feature-chips span{background:rgba(255,255,255,.14);padding:8px 13px;border:1px solid rgba(255,255,255,.2);border-radius:999px}
.login-card{background:#fff;margin:auto;width:min(430px,88%);padding:38px;border-radius:26px;box-shadow:var(--shadow)}
.login-card h2{font-size:30px;margin:22px 0 3px}.brand-mobile{display:flex;align-items:center;gap:12px}
label{display:grid;gap:7px;font-weight:600;margin:15px 0}input,select,textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:12px 13px;background:#fff;outline:none;transition:.2s}input:focus,select:focus,textarea:focus{border-color:#5eead4;box-shadow:0 0 0 3px rgba(20,184,166,.12)}
.btn{border:0;border-radius:12px;padding:11px 16px;cursor:pointer;font-weight:700;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--primary);color:#fff}.btn.secondary{background:#e6fffb;color:#0f766e}.btn.ghost{background:#f3f4f6;color:#374151}.btn.danger{background:var(--danger);color:#fff}.btn.danger-soft{background:#fee2e2;color:#991b1b}.wide{width:100%}.demo-note{font-size:12px;color:var(--muted);text-align:center;margin-top:12px}
.app-shell{min-height:100vh;display:grid;grid-template-columns:260px 1fr}.sidebar{background:#0f172a;color:#e5e7eb;padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.sidebar-brand{display:flex;align-items:center;gap:11px;padding:4px 10px 24px}.sidebar-brand small{display:block;color:#94a3b8;margin-top:3px}.sidebar nav{display:grid;gap:4px}.nav-item{border:0;background:transparent;color:#cbd5e1;text-align:right;padding:12px 13px;border-radius:11px;cursor:pointer;display:flex;gap:10px;align-items:center}.nav-item:hover,.nav-item.active{background:#1e293b;color:#fff}.sidebar-footer{margin-top:auto}.mode-badge{text-align:center;font-size:12px;background:#334155;padding:7px;border-radius:10px;margin-bottom:8px}
.main{min-width:0}.topbar{height:78px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:20}.topbar h2{margin:0;font-size:22px}.topbar-actions{display:flex;align-items:center;gap:13px}.icon-btn{width:40px;height:40px;border:1px solid var(--border);background:#fff;border-radius:11px;cursor:pointer;font-size:18px}.user-chip{display:flex;align-items:center;gap:10px}.user-chip small{display:block;color:var(--muted)}.avatar{width:40px;height:40px;border-radius:50%;background:#ccfbf1;color:#0f766e;display:grid;place-items:center;font-weight:800}.content{padding:24px}
.grid{display:grid;gap:16px}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-card,.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 2px 10px rgba(15,23,42,.03)}.stat-card{padding:19px}.stat-card .value{font-size:30px;font-weight:800;margin:8px 0}.stat-card .label{color:var(--muted)}.stat-card .trend{font-size:12px}.card{padding:20px}.card-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.card-title h3{margin:0}.two-col{grid-template-columns:1.25fr .75fr}.toolbar{display:flex;gap:10px;align-items:end;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}.toolbar .fields{display:flex;gap:10px;flex-wrap:wrap}.toolbar label{margin:0;min-width:160px}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px}table{width:100%;border-collapse:collapse;min-width:700px;background:#fff}th,td{padding:12px 13px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}th{background:#f8fafc;color:#475569;font-size:13px}tr:last-child td{border-bottom:0}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700}.badge.ok{background:#dcfce7;color:#166534}.badge.danger{background:#fee2e2;color:#991b1b}.badge.warn{background:#ffedd5;color:#9a3412}.badge.info{background:#dbeafe;color:#1e40af}.badge.neutral{background:#e5e7eb;color:#374151}
.attendance-actions{display:flex;gap:6px}.attendance-actions button{border:1px solid var(--border);background:#fff;padding:7px 10px;border-radius:9px;cursor:pointer}.attendance-actions button.active[data-status="present"]{background:#dcfce7;border-color:#86efac;color:#166534}.attendance-actions button.active[data-status="absent"]{background:#fee2e2;border-color:#fca5a5;color:#991b1b}.attendance-actions button.active[data-status="late"]{background:#ffedd5;border-color:#fdba74;color:#9a3412}.attendance-actions button.active[data-status="excused"]{background:#dbeafe;border-color:#93c5fd;color:#1e40af}
.progress{height:9px;background:#e5e7eb;border-radius:999px;overflow:hidden}.progress > span{display:block;height:100%;background:var(--primary);border-radius:999px}.empty{padding:45px 20px;text-align:center;color:var(--muted)}
.kpi-list{display:grid;gap:12px}.kpi-row{display:grid;grid-template-columns:110px 1fr 45px;gap:10px;align-items:center}.quick-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.quick-actions button{padding:18px;border-radius:14px;border:1px solid var(--border);background:#fff;cursor:pointer;text-align:right}.quick-actions strong{display:block;margin-bottom:4px}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);display:grid;place-items:center;z-index:100;padding:20px}.modal-card{background:#fff;width:min(650px,100%);max-height:90vh;overflow:auto;border-radius:20px;box-shadow:var(--shadow)}.modal-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0}#modalBody{padding:20px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 14px}.form-grid .full{grid-column:1/-1}
.toast{position:fixed;left:22px;bottom:22px;background:#111827;color:#fff;padding:12px 17px;border-radius:12px;box-shadow:var(--shadow);z-index:200;opacity:0;transform:translateY(15px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translateY(0)}
.mobile-only{display:none}
@media(max-width:1050px){.stats-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.app-shell{grid-template-columns:220px 1fr}}
@media(max-width:760px){.login-view{grid-template-columns:1fr}.login-art{display:none}.login-card{margin:8vh auto}.app-shell{display:block}.sidebar{position:fixed;right:-270px;width:260px;z-index:80;transition:.25s}.sidebar.open{right:0}.mobile-only{display:block}.topbar{padding:0 14px}.user-chip div:not(.avatar){display:none}.content{padding:14px}.stats-grid{grid-template-columns:1fr 1fr}.stat-card{padding:14px}.stat-card .value{font-size:25px}.form-grid{grid-template-columns:1fr}.quick-actions{grid-template-columns:1fr}.kpi-row{grid-template-columns:85px 1fr 40px}}
@media(max-width:430px){.stats-grid{grid-template-columns:1fr}.login-card{padding:26px}}

.section-note{padding:12px 14px;border:1px dashed var(--border);border-radius:12px;background:#f8fafc;color:#475569;margin-bottom:14px}
.schedule-grid{display:grid;grid-template-columns:90px repeat(5,minmax(150px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:auto}
.schedule-grid > div{background:#fff;padding:10px;min-height:62px}
.schedule-grid .head{background:#f8fafc;font-weight:800;min-height:auto}
.schedule-card{font-size:12px;line-height:1.55}
.schedule-card strong{display:block;color:var(--primary)}
.tag{display:inline-block;padding:3px 7px;border-radius:7px;background:#eef2ff;color:#3730a3;font-size:11px;margin:2px}
.drop-zone{border:2px dashed #cbd5e1;border-radius:16px;padding:24px;text-align:center;background:#f8fafc;cursor:pointer}
.drop-zone:hover{border-color:#5eead4;background:#f0fdfa}
.notice{padding:12px 14px;border-radius:12px;background:#ecfeff;border:1px solid #a5f3fc;color:#155e75}
.notice.error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.action-row{display:flex;gap:8px;flex-wrap:wrap}
.import-errors{max-height:220px;overflow:auto;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:12px;padding:10px;margin:10px 0;font-size:13px}
.import-errors div+div{border-top:1px solid #ffedd5;padding-top:5px;margin-top:5px}
button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
@media(max-width:760px){
 .toolbar,.toolbar .fields,.action-row{display:grid;width:100%;grid-template-columns:1fr}
 .toolbar label{min-width:0}
 .btn{min-height:44px}
 .table-wrap{margin-inline:-6px;border-radius:10px}
 th,td{padding:11px 10px}
 .attendance-actions{display:grid;grid-template-columns:repeat(2,1fr)}
 .attendance-actions button{min-width:74px}
 .schedule-grid{grid-template-columns:72px repeat(5,minmax(135px,1fr))}
 .modal-backdrop{padding:8px}.modal-card{max-height:96vh;border-radius:16px}
}
@media print{
 body{background:#fff}.sidebar,.topbar,.toolbar,.toast,.modal-backdrop{display:none!important}
 .app-shell{display:block}.content{padding:0}.card,.stat-card{box-shadow:none;border-color:#ddd}
 .table-wrap{overflow:visible}table{min-width:0;font-size:11px}
}