@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--navy:#10233f;--navy2:#1c3557;--orange:#f07826;--bg:#f4f6fa;--ink:#182338;--muted:#6f7b8d;--line:#e6eaf0;--white:#fff;--green:#17844b;--red:#b42318;--shadow:0 8px 30px rgba(16,35,63,.06)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 'DM Sans',Arial,sans-serif}h1,h2,h3{font-family:Manrope,'DM Sans',sans-serif;line-height:1.2;margin:0 0 10px}h1{font-size:clamp(25px,4vw,34px);font-weight:800;letter-spacing:-.8px}h2{font-size:18px;font-weight:800}p{margin:0 0 14px}.muted{color:var(--muted)}.small{font-size:12px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.8px;color:var(--orange);margin-bottom:8px}
.topbar{background:var(--navy);color:#fff;padding:13px max(18px,calc((100% - 1180px)/2));display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:68px}.brand{display:flex;align-items:center;gap:10px;color:white;text-decoration:none;font-family:Manrope;font-weight:800}.brand small{display:block;color:#c2ccda;font:11px 'DM Sans';letter-spacing:1px;text-transform:uppercase}.brand-mark{width:48px;height:48px;display:grid;place-items:center;background:linear-gradient(135deg,#ff9b50,var(--orange));border-radius:14px;color:white;font-weight:900;font-family:Manrope;box-shadow:0 6px 16px #f0782630}.small-mark{width:36px;height:36px;border-radius:10px}.top-actions{display:flex;align-items:center;gap:14px}.welcome{font-size:13px;color:#e3eaf3}.container{max-width:1180px;margin:0 auto;padding:28px 20px 40px}.hero{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:8px 0 26px}.hero p{color:var(--muted);margin:0}.date-chip{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px;min-width:120px;text-align:center;box-shadow:var(--shadow)}.date-chip strong,.date-chip span{display:block}.date-chip span{font-size:12px;color:var(--muted)}
.grid{display:grid;gap:18px;margin-bottom:20px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.panel,.stat-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);min-width:0}.stat-card{padding:20px 22px}.stat-card span,.stat-card small{display:block;color:var(--muted)}.stat-card strong{font:800 32px Manrope;display:block;margin:6px 0}.stat-card small{font-size:12px}.attendance-state{display:flex;align-items:center;gap:9px;margin:20px 0;color:var(--navy);font-weight:700}.status-dot{width:9px;height:9px;border-radius:50%;background:#16a05d;box-shadow:0 0 0 4px #16a05d18}.button-row{display:flex;gap:10px;align-items:center}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:11px 16px;border:0;border-radius:10px;font:700 13px 'DM Sans';cursor:pointer;text-decoration:none;transition:.15s}.btn:hover{transform:translateY(-1px)}.primary{background:var(--orange);color:white;box-shadow:0 5px 12px #f0782625}.ghost{color:white;border:1px solid #ffffff3d;background:#ffffff10}.compact{padding:7px 10px;font-size:12px}.danger-btn{background:#fff0ef;color:var(--red)}.form-grid{display:grid;gap:13px}.form-grid label,form>label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#46546a}.form-grid input,.form-grid select,.form-grid textarea,.auth-card input,.review-form input{width:100%;min-width:0;border:1px solid #dce2eb;background:#fff;border-radius:9px;padding:10px 11px;color:var(--ink);font:14px 'DM Sans';outline:none}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.auth-card input:focus{border-color:var(--orange);box-shadow:0 0 0 3px #f0782618}.form-grid textarea{resize:vertical}.two-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hidden{display:none!important}.notice{padding:12px 15px;border-radius:11px;margin:0 0 18px;font-size:13px}.notice.success{background:#e9f8ef;color:#166b3b;border:1px solid #c9eed8}.notice.danger{background:#fff0ef;color:#a5221a;border:1px solid #ffd4d0}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-heading h2{margin-bottom:4px}.table-wrap{width:100%;overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px;white-space:nowrap}th{text-align:left;color:#758095;background:#f8f9fb;font-size:11px;text-transform:uppercase;letter-spacing:.5px}td,th{padding:12px 13px;border-bottom:1px solid #edf0f4}tbody tr:last-child td{border-bottom:0}td small{display:block;color:var(--muted);font-size:11px}.empty{text-align:center;color:var(--muted);padding:24px}.pill{display:inline-block;border-radius:99px;padding:4px 9px;font-size:11px;font-weight:800}.pill.pending{background:#fff4d9;color:#8b5b00}.pill.approved{background:#e7f8ed;color:#16713c}.pill.rejected{background:#fff0ef;color:#b42318}.review-form{display:flex;gap:5px;align-items:center;min-width:300px}.review-form input{max-width:125px;padding:7px;font-size:12px}.footer{text-align:center;color:#8a94a5;font-size:11px;padding:28px 0 0}.setup-bg{min-height:100vh;background:radial-gradient(ellipse at top left,#eaf0fa,transparent 55%),var(--bg);display:grid;place-items:center;padding:20px}.auth-card{width:min(100%,420px);background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:0 20px 60px #10233f12}.auth-card .brand-mark{margin-bottom:22px}.auth-card h1{font-size:28px}.auth-card form{display:grid;gap:10px;margin-top:22px}.auth-card label{font-size:12px;font-weight:700;color:#46546a}.auth-card .btn{margin-top:8px;width:100%}.auth-card .small{margin-top:20px}.auth-card .notice{margin-top:15px}
@media(max-width:800px){.container{padding:20px 13px 30px}.two,.three{grid-template-columns:1fr}.panel{padding:17px;border-radius:15px}.hero{align-items:flex-start}.date-chip{padding:9px 11px;min-width:94px}.topbar{padding:12px 14px}.welcome{display:none}.grid{gap:13px}.section-heading{align-items:flex-start}.review-form{min-width:280px}}
@media(max-width:430px){.two-fields{grid-template-columns:1fr}.hero{display:block}.date-chip{display:inline-block;margin-top:14px}.auth-card{padding:25px}.top-actions{gap:6px}}

/* Bulk attendance selection */
.bulk-employee-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;max-height:280px;overflow:auto;padding:12px;border:1px solid var(--border,#dbe2ee);border-radius:12px;background:var(--surface,#fff)}
.bulk-employee{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border,#dbe2ee);border-radius:9px;cursor:pointer;min-width:0}
.bulk-employee input,.inline-check input{width:auto;flex-shrink:0}
.bulk-employee span{display:flex;flex-direction:column;min-width:0;gap:2px}
.bulk-employee strong{font-size:13px;overflow-wrap:anywhere}
.bulk-employee small{font-size:11px;color:var(--muted)}
.bulk-employee:has(input:checked){border-color:#f47721;background:#fff7f0}
.divider{height:1px;background:var(--border,#e2e8f0);margin:22px 0}