@import "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
:root{--green:#2db52a;--dark:#20262e;--muted:#6b7280;--bg:#f7faf5;--card:#fff;--line:#e5e7eb;--danger:#ef476f;--blue:#1677d2;--orange:#f5a623}*{box-sizing:border-box}body{background:var(--bg);color:#30343b;margin:0;font-family:Cairo,Arial,sans-serif}button,input,select{font:inherit}.appbar{background:var(--green);color:#fff;z-index:20;align-items:center;gap:18px;height:72px;padding:0 22px;display:flex;position:sticky;top:0}.appbar h1{text-align:center;flex:1;margin:0;font-size:28px;font-weight:800}.iconbtn{color:#fff;cursor:pointer;background:0 0;border:0;font-size:30px}.container{max-width:1180px;margin:0 auto;padding:24px}.logo{letter-spacing:-2px;text-align:center;color:#30343b;margin:18px 0;font-size:46px;font-weight:800}.logo span{color:#72bf2a}.grid{grid-template-columns:1.3fr .7fr;gap:22px;display:grid}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 8px 30px #1f29370b}.sectionTitle{color:#2da72a;margin:0 0 16px;font-size:22px;font-weight:800}.punches{background:#e8edf4;border-radius:14px;min-height:185px;padding:16px}.punchRow{border-bottom:1px solid #d4dbe5;justify-content:space-between;padding:10px 0;display:flex}.punchRow:last-child{border-bottom:0}.punchType{font-weight:700}.punchTime{color:#5f6670}.punchButton{color:#fff;cursor:pointer;background:#ff7100;border:0;border-radius:20px;width:100%;height:160px;font-size:32px;font-weight:800;box-shadow:0 12px 25px #ff710044}.map{background:linear-gradient(150deg,#d8f1e6,#bceaf2);border:1px solid #cddfe5;border-radius:16px;height:240px;margin-top:22px;position:relative;overflow:hidden}.map:before{content:"";opacity:.8;background:linear-gradient(30deg,#0000 45%,#fff9 46%,#0000 48%),linear-gradient(120deg,#0000 55%,#fff9 56%,#0000 58%);position:absolute;inset:0}.pin{font-size:50px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.locationBadge{background:#fff;border-radius:10px;padding:8px 12px;font-weight:700;position:absolute;bottom:14px;left:16px;box-shadow:0 3px 12px #0002}.statsTitle{text-align:center;color:#2da72a;margin:24px 0 12px;font-size:26px;font-weight:800}.tabs{background:#fff;border:1px solid #dfe5ec;border-radius:30px;max-width:560px;margin:0 auto;display:flex;overflow:hidden}.tabs button{color:#2da72a;cursor:pointer;background:#fff;border:0;flex:1;padding:13px;font-weight:800}.tabs button.active{background:var(--green);color:#fff}.legend{color:#30343b;flex-wrap:wrap;justify-content:center;gap:22px;margin:24px 0;font-weight:700;display:flex}.dot{border-radius:50%;width:12px;height:12px;margin-right:7px;display:inline-block}.layout{grid-template-columns:240px 1fr;min-height:100vh;display:grid}.sidebar{color:#fff;background:#20262e;height:100vh;padding:22px;position:sticky;top:0}.sidebar h2{margin-top:0}.nav a{color:#dfe6ee;border-radius:10px;margin:5px 0;padding:12px;text-decoration:none;display:block}.nav a:hover,.nav a.active{background:#2f3945}.adminHeader{justify-content:space-between;align-items:center;margin-bottom:22px;display:flex}.kpis{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.kpi{border:1px solid var(--line);background:#fff;border-radius:16px;padding:20px}.kpi b{font-size:32px;display:block}.tableWrap{overflow:auto}.table{border-collapse:collapse;width:100%}.table th,.table td{text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;padding:12px}.badge{border-radius:99px;padding:5px 10px;font-size:12px;font-weight:800}.present{color:#166534;background:#dcfce7}.late{color:#be123c;background:#ffe4e6}.absent{color:#1d4ed8;background:#dbeafe}.btn{cursor:pointer;background:var(--green);color:#fff;border:0;border-radius:10px;padding:11px 16px;font-weight:800}.btn.secondary{color:#374151;background:#eef2f7}.btn.danger{background:#ef4444}.formGrid{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.field label{margin-bottom:6px;font-weight:700;display:block}.field input,.field select{background:#fff;border:1px solid #d8dde5;border-radius:10px;width:100%;padding:11px 12px}.modal{z-index:50;background:#0007;justify-content:center;align-items:center;padding:18px;display:flex;position:fixed;inset:0}.modalBox{background:#fff;border-radius:20px;width:100%;max-width:520px;padding:24px}.success{color:#166534;background:#dcfce7;border-radius:12px;padding:12px}.error{color:#991b1b;background:#fee2e2;border-radius:12px;padding:12px}.employeeCard{align-items:center;gap:15px;display:flex}.avatar{color:#249b22;background:#dff4d9;border-radius:50%;place-items:center;width:58px;height:58px;font-size:22px;font-weight:800;display:grid}.muted{color:var(--muted)}.center{text-align:center}.small{font-size:13px}.actions{flex-wrap:wrap;gap:8px;display:flex}@media (max-width:800px){.grid,.layout{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.kpis{grid-template-columns:repeat(2,1fr)}.formGrid{grid-template-columns:1fr}.container{padding:15px}.appbar h1{font-size:21px}.logo{font-size:38px}}.mobileShell{background:#f8faf7;min-height:100vh}.mobileContent{max-width:700px;margin:auto;padding:18px}.brand{text-align:center;margin:16px;font-size:34px;font-weight:800}.brand span{color:#2db52a}.profileMini{align-items:center;gap:12px;display:flex}.profileMini input{border:1px solid #ddd;border-radius:9px;width:130px;margin-left:auto;padding:9px}.homeGrid{grid-template-columns:repeat(4,1fr);gap:18px;margin:24px 5px;display:grid}.circleMenu{color:#333;cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:center;gap:8px;display:flex}.circleMenu span,.quickGrid span{color:#fff;border-radius:50%;place-items:center;width:68px;height:68px;display:grid;box-shadow:0 5px 15px #0002}.circleMenu b{font-size:14px}.clockMain{color:#fff;cursor:pointer;background:#ff7100;border:12px solid #fff2e7;border-radius:50%;outline:2px solid #ff710044;flex-direction:column;justify-content:center;align-items:center;width:190px;height:190px;margin:5px auto 24px;display:flex;box-shadow:0 10px 30px #ff710044}.clockMain strong{font-size:24px}.quickLabel{text-align:center;color:#2db52a;margin:15px;font-size:20px;font-weight:800}.quickGrid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.quickGrid button{color:#444;background:0 0;border:0;flex-direction:column;align-items:center;gap:7px;font-weight:700;display:flex}.quickGrid span{width:52px;height:52px}.drawerBackdrop{z-index:100;background:#0009;position:fixed;inset:0}.drawer{background:#fff;width:min(340px,88vw);height:100%;padding:20px;box-shadow:8px 0 30px #0004}.drawerHead{justify-content:space-between;align-items:center;margin-bottom:15px;font-size:22px;display:flex}.drawerHead button,.modalTop button{cursor:pointer;background:0 0;border:0}.drawerItem{text-align:left;cursor:pointer;background:#fff;border:0;border-radius:12px;align-items:center;gap:12px;width:100%;margin:4px 0;padding:10px;font-weight:700;display:flex}.drawerItem span{color:#fff;border-radius:50%;place-items:center;width:42px;height:42px;display:grid}.drawerItem svg:last-child{margin-left:auto}.drawerCode{background:#f3f5f7;border-radius:12px;margin-top:20px;padding:12px}.toast{z-index:120;max-width:360px;position:fixed;top:82px;right:18px;box-shadow:0 8px 30px #0002}.pageCard{background:#fff;border:1px solid #e4e7eb;border-radius:18px;margin:15px 0;padding:20px}.pageCard h2{color:#2db52a;margin-top:0}.profileHero{background:#fff;border-radius:18px;align-items:center;gap:24px;padding:24px;display:flex}.profileAvatar{color:#777;background:#eef1f4;border-radius:50%;place-items:center;width:150px;height:150px;font-size:70px;font-weight:800;display:grid}.profileHero h2{color:#2db52a;margin:0 0 10px;font-size:34px}.metricRow{background:#e9edf4;border-radius:14px;grid-template-columns:repeat(3,1fr);margin-top:15px;display:grid;overflow:hidden}.metricRow div{text-align:center;border-right:1px solid #fff;padding:20px;font-weight:800}.metricRow b{color:#2db52a;margin-top:8px;font-size:28px;display:block}.statusCards{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.statusCards div{background:#f1f3f6;border-radius:14px;padding:18px}.statusCards strong{color:#2db52a;margin-top:8px;font-size:24px;display:block}.attendanceList{flex-direction:column;display:flex}.attendanceRow{border-bottom:1px solid #eee;grid-template-columns:1fr 1fr 90px;gap:15px;padding:16px 0;display:grid}.attendanceRow small{color:#888;margin-top:4px;display:block}.attendanceRow span{color:#ef332b;font-weight:800}.bigInfo{color:#2db52a;font-size:30px;font-weight:800}.formStack{flex-direction:column;gap:12px;display:flex}.formStack input,.formStack select,.formStack textarea,.pageCard select,.pageCard textarea{background:#fff;border:1px solid #d8dde5;border-radius:10px;width:100%;padding:12px}.pageCard textarea{min-height:120px}.full{justify-content:center;width:100%}.deviceStatus{color:#267a27;background:#eef7eb;border-radius:12px;margin:15px 0;padding:15px;font-weight:800}.listItem{border-bottom:1px solid #eee;justify-content:space-between;padding:12px;display:flex}.adminLogin{background:#20262e;place-items:center;min-height:100vh;padding:20px;display:grid}.loginBox{background:#fff;border-radius:22px;width:min(430px,100%);padding:30px;box-shadow:0 20px 60px #0005}.loginBox h1{margin-top:0}.loginBox input{border:1px solid #ddd;border-radius:10px;width:100%;margin:10px 0;padding:13px;display:block}.adminLayout{background:#f5f7fa;grid-template-columns:245px 1fr;min-height:100vh;display:grid}.adminSide{color:#fff;background:#20262e;flex-direction:column;gap:5px;padding:20px;display:flex}.sideBrand{margin-bottom:3px;font-size:24px;font-weight:800}.sideBrand span{color:#6fd23b}.adminSide small{color:#8e99a6;margin:0 0 15px}.sideLink{color:#d9e0e7;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;align-items:center;gap:10px;padding:12px;display:flex}.sideLink.active,.sideLink:hover{color:#fff;background:#303b48}.adminMain{padding:28px}.adminTop{justify-content:space-between;align-items:center;margin-bottom:25px;display:flex}.adminTop h1{margin:0 0 3px}.kpis{grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px;display:grid}.kpi{background:#fff;border:1px solid #e4e7eb;border-radius:16px;padding:20px}.kpi span{color:#69717b}.kpi b{margin-top:8px;font-size:36px;display:block}.adminGrid{grid-template-columns:1.5fr 1fr;gap:18px;display:grid}.sectionBar{justify-content:space-between;align-items:center;margin:0 0 14px;display:flex}.sectionBar h2{margin:0}.sectionBar+.card{margin-top:0}.requestRow{border-bottom:1px solid #eee;justify-content:space-between;align-items:center;padding:14px 0;display:flex}.mini{cursor:pointer;border:0;border-radius:8px;place-items:center;width:32px;height:32px;margin-left:5px;display:inline-grid}.mini.ok{color:#166534;background:#dcfce7}.mini.no{color:#991b1b;background:#fee2e2}.mono{font-family:monospace}.settings{max-width:700px}.settings label{margin:15px 0;font-weight:700;display:block}.settings input,.settings select{border:1px solid #ddd;border-radius:10px;width:100%;margin-top:7px;padding:12px;display:block}.empty{text-align:center;color:#777;padding:30px}.modalTop{justify-content:space-between;align-items:center;display:flex}.modalTop h2{margin:0}.modalTop button{font-size:22px}.modalBox .actions{display:flex}.modalBox .btn{align-items:center;gap:6px;display:flex}@media (max-width:900px){.adminLayout{grid-template-columns:1fr}.adminSide{grid-template-columns:repeat(2,1fr);display:grid;position:relative}.sideBrand,.adminSide small{grid-column:1/-1}.adminMain{padding:16px}.kpis{grid-template-columns:repeat(2,1fr)}.adminGrid{grid-template-columns:1fr}}@media (max-width:560px){.homeGrid{grid-template-columns:repeat(4,1fr);gap:12px}.circleMenu span{width:55px;height:55px}.circleMenu b{font-size:11px}.profileMini{flex-wrap:wrap}.profileMini input{width:100%;margin-left:0}.profileHero{text-align:center;flex-direction:column}.metricRow,.statusCards{grid-template-columns:1fr}.attendanceRow{grid-template-columns:1fr 1fr 65px}.adminSide{grid-template-columns:repeat(2,1fr)}.adminTop{flex-direction:column;align-items:flex-start;gap:10px}.kpis{grid-template-columns:1fr 1fr}}.toolbar{border:1px solid var(--line);background:#fff;border-radius:12px;align-items:center;gap:10px;margin:0 0 14px;padding:10px 14px;display:flex}.toolbar input{background:0 0;border:0;outline:0;width:100%}.toast{cursor:pointer;border-radius:12px;padding:12px 16px}.toast.error,.toast.success{z-index:120;position:fixed;top:82px;right:18px}.field input,.field select,.field textarea{background:#fff;border:1px solid #d8dde5;border-radius:10px;width:100%;padding:11px 12px}.modalBox{max-height:90vh;overflow:auto}.modalBox hr{border:0;border-top:1px solid var(--line);margin:22px 0}