@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{--ink:#142b35;--muted:#70828a;--teal:#087e78;--mint:#e5f5f1;--line:#e6edef;--surface:#fff}*{box-sizing:border-box}body{font-family:'Cairo',Tahoma,Arial,sans-serif;background:#f5f8f8;color:var(--ink);min-height:100vh}.topbar{background:#12343b;box-shadow:0 3px 14px #0d32351c}.navbar-brand{font-size:1.35rem}.navbar-brand span{color:#74d5ba}.navbar-nav{align-items:center;gap:.35rem}.page-wrap{padding-top:2rem;min-height:78vh}.nav-link{font-size:.92rem}.hero{background:linear-gradient(115deg,#0b716f,#17464f);color:#fff;border-radius:22px;padding:2.6rem 3rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;box-shadow:0 15px 40px #12575f20}.hero h1{font-size:2.2rem;font-weight:800;margin:.3rem 0}.hero p{margin:0;color:#d3e8e5}.hero .eyebrow{color:#9ce2cf}.eyebrow{color:var(--teal);font-weight:700;font-size:.82rem;margin-bottom:.4rem;letter-spacing:.03em}.stat-card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:1.5rem;box-shadow:0 5px 20px #23434d08}.stat-card{height:100%;display:flex;flex-direction:column;gap:.4rem}.stat-card small{color:var(--muted)}.stat-card strong{font-size:2rem;color:var(--teal)}.quick-links{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}.quick-links a{background:white;padding:1rem 1.3rem;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;font-weight:700}.quick-links a:hover{border-color:var(--teal);color:var(--teal)}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:0 0 1.4rem}.page-heading h1{font-size:1.9rem;font-weight:800;margin:0}.page-heading p{margin:.3rem 0 0}.panel h2{font-size:1.15rem;font-weight:700;margin-bottom:1.2rem}.btn-primary{background:var(--teal);border-color:var(--teal)}.btn-primary:hover{background:#056964;border-color:#056964}.btn{border-radius:10px;padding:.6rem 1rem;font-weight:600}.form-control,.form-select{border-color:#dce6e8;border-radius:9px;padding:.7rem .85rem}.form-control:focus,.form-select:focus{border-color:#54b8a2;box-shadow:0 0 0 .2rem #54b8a225}.form-label{font-weight:600}.table{margin:0}.table thead th{color:var(--muted);font-weight:600;font-size:.88rem;border-bottom-color:var(--line);white-space:nowrap}.table td{vertical-align:middle;border-color:#eef2f3;padding:.85rem .65rem}.form-panel{max-width:820px}.login-wrap{max-width:970px;min-height:520px;margin:2rem auto;background:white;border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 20px 60px #193f4715}.login-art{padding:3.4rem;background:linear-gradient(145deg,#087e78,#123d48);color:white;display:flex;flex-direction:column;justify-content:center}.login-art>span{font-size:1.3rem;font-weight:800;color:#9ce2cf;margin-bottom:2rem}.login-art h1{font-size:2.8rem;font-weight:800;line-height:1.35}.login-art p{color:#d1e6e5;line-height:1.9}.login-form{padding:3.2rem 2.8rem;align-self:center}.login-form h2{font-weight:800}.login-form small{font-size:.76rem;line-height:1.8}.scan-panel{max-width:740px}.camera-box{height:280px;background:#f0f5f5;border-radius:15px;border:1px dashed #bed0d3;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;margin-bottom:1rem}.camera-box video{width:100%;height:100%;object-fit:cover}.camera-mark{font-size:3rem;color:var(--teal)}.camera-box p{color:var(--muted)}.qr-panel{max-width:620px;text-align:center;margin:auto;padding:2rem}.qr-panel img{width:min(300px,80%);image-rendering:pixelated;margin:1rem auto 1.5rem}.qr-panel h3{font-weight:700}.timeline{display:grid;gap:1.2rem}.timeline-item{display:flex;align-items:center;gap:.8rem}.timeline-item>div{display:flex;flex-direction:column}.timeline-item small{color:var(--muted)}.dot-in,.dot-out{width:12px;height:12px;border-radius:50%;background:#27a885;box-shadow:0 0 0 5px #e4f5ef}.dot-out{background:#e2a74c;box-shadow:0 0 0 5px #fcf3e3}.filter-row{display:flex;align-items:end;gap:.8rem;flex-wrap:wrap}.filter-row>div{min-width:170px}.filter-row label{display:block;margin-bottom:.35rem;font-size:.88rem;color:var(--muted)}.decision-form{display:flex;align-items:center;gap:.35rem;min-width:350px}.decision-form input{max-width:170px}.badge{font-weight:600;padding:.45rem .65rem}footer{font-size:.85rem}@media(max-width:767px){.hero{padding:1.6rem;align-items:flex-start;flex-direction:column}.hero h1{font-size:1.7rem}.page-heading h1{font-size:1.5rem}.login-wrap{grid-template-columns:1fr;margin:.5rem auto}.login-art{padding:2rem}.login-art h1{font-size:2.1rem}.login-form{padding:2rem}.decision-form{min-width:260px;flex-wrap:wrap}.decision-form input{max-width:100%}.page-wrap{padding-top:1.3rem}}
html,body{min-height:100%;}body{display:flex;flex-direction:column}.page-wrap.container{width:100%;max-width:1440px;padding-left:clamp(1rem,3vw,3rem);padding-right:clamp(1rem,3vw,3rem);flex:1}.page-heading,.panel,.hero,.quick-links{margin-left:auto;margin-right:auto}.page-heading{width:100%;max-width:1280px}.panel{width:100%}.attendance-layout{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr);gap:1.25rem;align-items:start}.scan-panel,.today-panel{max-width:none;min-width:0}.camera-box{height:auto;aspect-ratio:4/3;max-height:56vh;min-height:230px;position:relative}.camera-box video{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:14px}.camera-box canvas{max-width:100%}.camera-actions{display:flex;gap:.65rem;flex-wrap:wrap}.scan-status{margin-top:1rem;padding:.8rem 1rem;border-radius:10px;background:#f2f7f7;color:#536b72;line-height:1.7}.file-scan,.manual-scan{margin-top:1.1rem}.file-scan small{display:block;margin-top:.4rem}.today-panel{position:sticky;top:1rem}.today-date{color:var(--muted);font-size:.85rem}.print-title,.print-caption{display:none}.qr-panel{width:min(100%,700px)}.qr-panel img{width:min(420px,82vw);height:auto}.navbar .container{max-width:1440px;padding-left:clamp(1rem,3vw,3rem);padding-right:clamp(1rem,3vw,3rem)}
@media(max-width:850px){.attendance-layout{grid-template-columns:1fr}.today-panel{position:static}.camera-box{aspect-ratio:1/1;max-height:52vh;min-height:260px}.page-wrap.container{padding-top:1.1rem}.panel{padding:1.15rem}.hero{border-radius:16px}.navbar-nav{align-items:stretch}.navbar-nav .nav-link{padding:.55rem .25rem}}
@media(max-width:480px){.page-heading{align-items:flex-start;flex-direction:column}.page-heading h1{font-size:1.4rem}.page-heading .btn{width:100%}.camera-box{min-height:240px}.camera-actions .btn{flex:1}.input-group>.form-control{min-width:0}.qr-panel{padding:1rem}.qr-panel img{width:min(300px,80vw)}}
@media print{@page{size:A4 portrait;margin:18mm}body{display:block;background:#fff!important;color:#000!important}.topbar,footer,.page-heading,.no-print{display:none!important}.page-wrap.container{width:100%;max-width:none;padding:0;margin:0}.printable-qr{border:0;box-shadow:none;width:100%;max-width:none;margin:0 auto;padding:0;text-align:center}.print-title{display:block;font-size:26pt;font-weight:700;margin:0 0 14mm}.qr-panel img{display:block;width:120mm;height:120mm;max-width:100%;margin:0 auto 12mm;image-rendering:pixelated}.print-caption{display:block;font-size:14pt;margin-top:5mm}.panel{break-inside:avoid}}
html{font-size:18px}.weekdays-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.65rem}.weekday-option{display:flex;align-items:center;gap:.6rem;padding:.75rem .85rem;border:1px solid var(--line);border-radius:11px;background:#fbfdfd;cursor:pointer;font-weight:600}.weekday-option:has(input:checked){background:var(--mint);border-color:#77c9b3;color:#126c62}.weekday-option input{width:1.1rem;height:1.1rem;accent-color:var(--teal)}.payroll-table{min-width:1220px}.payroll-table th{white-space:normal;min-width:90px}.payroll-table td{white-space:nowrap}.adjustment-form{display:grid;grid-template-columns:minmax(170px,1.3fr) minmax(150px,.75fr) minmax(150px,.75fr) minmax(220px,2fr) auto;gap:.75rem;align-items:end}.adjustment-reason{min-width:180px}.input-group-text{border-color:#dce6e8;border-radius:9px;font-size:1rem}
@media(max-width:900px){.adjustment-form{grid-template-columns:repeat(2,minmax(0,1fr))}.adjustment-reason{grid-column:1/-1}.adjustment-form>button{grid-column:1/-1}}
@media(max-width:480px){.weekdays-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.adjustment-form{grid-template-columns:1fr}.adjustment-reason,.adjustment-form>button{grid-column:auto}}