:root{color:#18302f;font-synthesis:none;text-rendering:optimizelegibility;--primary:#0f766e;--primary-dark:#115e59;--soft:#ccfbf1;--line:#dce8e6;--muted:#68817e;--danger:#dc2626;--warning:#d97706;--info:#2563eb;--shadow:0 16px 40px #0f504b17;background:#f2f6f5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{color:#17302e;background:radial-gradient(circle at 100% 0,#ccfbf1 0,#0000 28rem),#f2f6f5;min-width:320px;min-height:100vh;margin:0}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh}.sidebar{color:#fff;z-index:50;background:linear-gradient(#0d6862,#114b48);flex-direction:column;width:265px;padding:22px 16px;display:flex;position:fixed;inset:0 auto 0 0;box-shadow:8px 0 30px #0a413d26}.brand{align-items:center;gap:12px;padding:4px 10px 22px;display:flex}.brand img{background:#fff;border-radius:15px;width:48px;height:48px;padding:4px}.brand strong,.brand small{display:block}.brand small{opacity:.72;margin-top:3px}.sidebar nav{gap:4px;padding-right:2px;display:grid;overflow:auto}.sidebar nav a{color:#dff8f4;border-radius:13px;align-items:center;gap:12px;padding:11px 13px;font-size:14px;display:flex}.sidebar nav a b{background:#ffffff17;border-radius:9px;place-items:center;width:28px;height:28px;font-size:15px;display:grid}.sidebar nav a:hover,.sidebar nav a.active{color:#fff;background:#ffffff24}.logout{color:#fff;cursor:pointer;background:#ffffff1c;border:0;border-radius:13px;justify-content:center;align-items:center;gap:9px;margin-top:auto;padding:12px;transition:background .2s,opacity .2s,transform .15s;display:flex}.logout:hover{background:#ffffff2e}.logout:active{transform:scale(.98)}.logout:disabled,.logout.is-loading{cursor:wait;opacity:.72}.logout-spinner{border:2px solid #ffffff59;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite logout-spin}@keyframes logout-spin{to{transform:rotate(360deg)}}.main{min-height:100vh;margin-left:265px;overflow:visible}.topbar{z-index:35;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffdb;border-bottom:1px solid #cfe1dee6;align-items:center;gap:14px;height:72px;padding:0 28px;display:flex;position:sticky;top:0;overflow:visible}.topbar>div{flex:1}.topbar strong,.topbar small{display:block}.topbar small{color:var(--muted);text-transform:capitalize;margin-top:3px}.avatar{background:var(--soft);width:39px;height:39px;color:var(--primary-dark);border:0;border-radius:13px;font-weight:800}.menu-btn{background:0 0;border:0;font-size:24px;display:none}.content{max-width:1600px;margin:auto;padding:28px}.page-header{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px;display:flex}.page-header h1{letter-spacing:-.03em;margin:0;font-size:28px}.page-header p{color:var(--muted);margin:7px 0 0}.page-actions{flex-wrap:wrap;gap:8px;display:flex}.card{box-shadow:var(--shadow);background:#fffffff2;border:1px solid #d3e3e0e6;border-radius:20px;padding:20px}.grid{gap:18px;display:grid}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px;display:grid}.stat{border:1px solid var(--line);background:#fff;border-radius:18px;padding:18px;overflow:hidden;box-shadow:0 10px 30px #14504b0f}.stat small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;margin-bottom:7px;display:block;overflow:hidden}.stat strong{word-break:break-all;font-size:28px}.stat .icon{float:right;font-size:25px}.stat span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;margin-top:4px;font-size:13px;display:block;overflow:hidden}.section-title{justify-content:space-between;align-items:center;gap:15px;margin:0 0 15px;display:flex}.section-title h2{margin:0;font-size:18px}.field{color:#314b49;gap:7px;font-size:14px;display:grid}.field>span{font-weight:650}.field input,.field select,.field textarea,.input{background:#fff;border:1px solid #cfdedc;border-radius:12px;outline:none;width:100%;padding:11px 12px;transition:all .2s}.field textarea{resize:vertical;min-height:90px}.field input:focus,.field select:focus,.field textarea:focus,.input:focus{border-color:#2a9d93;box-shadow:0 0 0 4px #0f766e1a}.field small{color:var(--muted)}.field small.error{color:var(--danger)}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.span-2{grid-column:span 2}.btn{cursor:pointer;white-space:nowrap;border:0;border-radius:12px;justify-content:center;align-items:center;gap:7px;padding:10px 14px;font-weight:700;display:inline-flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-soft{background:var(--soft);color:var(--primary-dark)}.btn-danger{color:#991b1b;background:#fee2e2}.btn-outline{border:1px solid var(--line);color:#34514e;background:#fff}.btn:disabled{opacity:.55;cursor:not-allowed}.filters{grid-template-columns:repeat(6,minmax(120px,1fr));align-items:end;gap:10px;display:grid}.table-wrap{border:1px solid var(--line);background:#fff;border-radius:16px;overflow:auto}.table{border-collapse:separate;border-spacing:0;width:100%;min-width:820px}.table th{color:#42605d;text-transform:uppercase;letter-spacing:.04em;z-index:2;background:#edf7f5;font-size:12px;position:sticky;top:0}.table th,.table td{text-align:left;vertical-align:middle;border-bottom:1px solid #e6efed;padding:12px 13px}.table tr:last-child td{border-bottom:0}.table tbody tr:hover{background:#f8fbfa}.actions{flex-wrap:wrap;gap:6px;display:flex}.badge{border-radius:999px;align-items:center;padding:5px 9px;font-size:12px;font-weight:750;display:inline-flex}.badge-success{color:#166534;background:#dcfce7}.badge-danger{color:#991b1b;background:#fee2e2}.badge-warning{color:#9a3412;background:#ffedd5}.badge-info{color:#1e40af;background:#dbeafe}.badge-neutral{color:#536c69;background:#e8efee}.empty{text-align:center;color:var(--muted);padding:35px}.pagination{flex-wrap:wrap;gap:5px;margin-top:16px;display:flex}.pagination a{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 10px;font-size:13px}.pagination a.active{background:var(--primary);color:#fff}.pagination a.disabled{opacity:.4;pointer-events:none}.map{border:1px solid var(--line);background:repeating-linear-gradient(45deg,#eff5f4,#eff5f4 10px,#e7f0ee 10px 20px);border-radius:16px;overflow:hidden}.attendance-hero{grid-template-columns:1.05fr .95fr;gap:20px;display:grid}.clock-card{color:#fff;background:linear-gradient(145deg,#0f766e,#115e59);border-radius:24px;padding:26px;position:relative;overflow:hidden}.clock-card:after{content:"";background:#ffffff14;border-radius:50%;width:180px;height:180px;position:absolute;top:-50px;right:-50px}.clock{letter-spacing:-.04em;font-size:48px;font-weight:800}.clock-card small{opacity:.8}.attendance-state{background:#ffffff1f;border-radius:14px;align-items:center;gap:10px;margin-top:18px;padding:12px;display:flex}.big-action{border-radius:18px;width:100%;min-height:64px;margin-top:14px;font-size:18px}.camera-preview{aspect-ratio:16/10;object-fit:cover;background:#e8efee;border:1px dashed #acc2bf;border-radius:15px;width:100%}.mobile-menu{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.menu-tile{border:1px solid var(--line);text-align:center;background:#fff;border-radius:18px;padding:18px 12px;box-shadow:0 8px 25px #0f46420d}.menu-tile b{background:var(--soft);width:44px;height:44px;color:var(--primary);border-radius:15px;place-items:center;margin:0 auto 10px;font-size:20px;display:grid}.menu-tile span{font-size:13px;font-weight:700}.matrix-wrap{border:1px solid var(--line);border-radius:15px;max-height:72vh;overflow:auto}.matrix{border-collapse:separate;border-spacing:0;background:#fff;min-width:max-content;font-size:12px}.matrix th,.matrix td{text-align:center;border-bottom:1px solid #dce8e6;border-right:1px solid #dce8e6;min-width:38px;padding:7px}.matrix thead th{z-index:4;background:#dff4f0;position:sticky;top:0}.matrix .sticky-1{z-index:3;background:#fff;min-width:42px;position:sticky;left:0}.matrix .sticky-2{z-index:3;text-align:left;background:#fff;min-width:170px;position:sticky;left:42px}.matrix .sticky-3{z-index:3;text-align:left;background:#fff;min-width:140px;position:sticky;left:212px}.matrix thead .sticky-1,.matrix thead .sticky-2,.matrix thead .sticky-3{z-index:6;background:#dff4f0}.cell-X{color:#166534;background:#dcfce7;font-weight:800}.cell-A{color:#991b1b;background:#fee2e2;font-weight:800}.cell-I,.cell-S,.cell-C{color:#9a3412;background:#ffedd5;font-weight:800}.cell-OFF{color:#4b5563;background:#e5e7eb}.cell--{color:#b3c0be;background:#f8fafc}.cell-BM,.cell-BP{color:#1e40af;background:#dbeafe}.photo-thumb{object-fit:cover;background:#edf3f2;border-radius:10px;width:58px;height:58px}.login-page{grid-template-columns:1.05fr .95fr;min-height:100vh;display:grid}.login-art{color:#fff;background:linear-gradient(145deg,#0f766e,#064e48);flex-direction:column;justify-content:center;padding:60px;display:flex;position:relative;overflow:hidden}.login-art:before,.login-art:after{content:"";background:#ffffff12;border-radius:50%;position:absolute}.login-art:before{width:420px;height:420px;top:-120px;right:-130px}.login-art:after{width:260px;height:260px;bottom:-90px;left:-80px}.login-art h1{max-width:620px;margin:20px 0;font-size:48px;line-height:1.05}.login-art p{opacity:.85;max-width:600px;font-size:18px;line-height:1.7}.login-form-wrap{place-items:center;padding:30px;display:grid}.login-form{width:min(430px,100%)}.login-form .logo{width:65px}.login-form h2{margin:20px 0 5px;font-size:30px}.login-form>p{color:var(--muted);margin-top:0}.bottom-nav,.overlay,.print-only{display:none}@media (width<=1100px){.grid-4,.stats{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:repeat(3,1fr)}.attendance-hero{grid-template-columns:1fr}}@media (width<=820px){.sidebar{width:275px;transition:all .25s;inset:65px auto 0 0;transform:translate(-105%)}.sidebar.open{transform:translate(0)}.main{margin-left:0}.menu-btn{display:block}.content{padding:18px 14px 92px}.topbar{height:65px;padding:0 14px}.topbar>div strong{font-size:14px}.topbar>div small{font-size:11px}.overlay{z-index:45;opacity:0;pointer-events:none;background:#00000059;transition:all .2s;display:block;position:fixed;inset:0}.overlay.show{opacity:1;pointer-events:auto}.bottom-nav{z-index:40;border-top:1px solid var(--line);padding:7px 5px calc(7px + env(safe-area-inset-bottom));background:#fff;grid-template-columns:repeat(4,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.bottom-nav a{color:#45635f;place-items:center;font-size:20px;display:grid}.bottom-nav span{margin-top:2px;font-size:10px}.page-header{display:block}.page-actions{margin-top:12px}.grid-2,.grid-3,.grid-4,.stats,.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.filters{grid-template-columns:1fr 1fr}.clock{font-size:39px}.mobile-menu{grid-template-columns:repeat(3,1fr)}.login-page{grid-template-columns:1fr}.login-art{display:none}}@media (width<=500px){.filters{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:14px}.stat strong{font-size:22px}.mobile-menu{grid-template-columns:repeat(2,1fr)}.card{border-radius:17px;padding:15px}.page-header h1{font-size:24px}}@media print{.sidebar,.topbar,.bottom-nav,.page-actions,.filters,.btn,.no-print{display:none!important}.main{margin:0}.content{padding:0}.card{box-shadow:none;border:0;padding:0}.matrix-wrap{max-height:none;overflow:visible}.print-only{display:block}}.modal-overlay{z-index:9999;background:#00000059;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-box{background:#fff;border-radius:12px;width:100%;max-width:560px;padding:24px;box-shadow:0 8px 32px #00000026}.actions{align-items:center;gap:8px;display:flex}.btn-danger{color:#fff;background:#dc2626;border:1px solid #dc2626}.btn-danger:hover{background:#b91c1c}.btn-soft{color:#0f766e;background:0 0;border:1px solid #0f766e}.btn-soft:hover{background:#f0fdfa}.btn-outline{color:#475569;background:0 0;border:1px solid #cbd5e1}.btn-outline:hover{background:#f8fafc}.map{z-index:0;position:relative}.map .leaflet-pane,.map .leaflet-top,.map .leaflet-bottom,.map .leaflet-control{z-index:1}.map .leaflet-control-layers,.map .leaflet-control-zoom{z-index:2}@media (width<=820px){.topbar{z-index:55;-webkit-backdrop-filter:blur(14px);background:#ffffffeb;position:sticky;top:0}.table th{position:static}.map{height:300px}.leaflet-control-layers{font-size:12px}}.app-shell-admin .bottom-nav,.mobile-only{display:none}.desktop-only{display:block}.mobile-card-list{gap:12px;display:grid}.mobile-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px;box-shadow:0 8px 25px #0f46420d}.mobile-card-head{justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;display:flex}.mobile-card-title{margin:0;font-size:15px}.mobile-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;display:grid}.mobile-meta .full{grid-column:1/-1}.mobile-meta small{color:var(--muted);margin-bottom:3px;display:block}.mobile-actions{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.day-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.offline-indicator{border:1px solid var(--line);background:#fff;border-radius:999px;align-items:center;gap:8px;padding:6px 10px;font-size:12px;font-weight:700;display:inline-flex}.offline-indicator .dot{background:#16a34a;border-radius:999px;width:8px;height:8px}.offline-indicator.offline{color:#9a3412;background:#fff7ed;border-color:#fed7aa}.offline-indicator.offline .dot{background:#ea580c}.offline-indicator.online{color:#166534;background:#ecfdf5;border-color:#bbf7d0}.offline-indicator .queue{opacity:.85;font-weight:600}.sync-status{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.sync-result{align-items:center;gap:8px;font-size:13px;display:flex}.sync-result .success{color:#166534;font-weight:700}.sync-result .failed{color:#991b1b;font-weight:700}@media (width<=820px){.app-shell-admin .content{padding-bottom:18px}.filters{grid-template-columns:1fr}.mobile-only{display:block}.desktop-only{display:none}.table-wrap.compact-mobile{border-radius:14px}.table-wrap.compact-mobile .table{min-width:520px}.table-wrap.compact-mobile .table th,.table-wrap.compact-mobile .table td{padding:10px 11px;font-size:13px}.mobile-meta{grid-template-columns:1fr}.day-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media print{@page{margin:12mm}body{background:#fff!important}*{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-shadow:none!important}.pagination,.overlay,.notification-bell,.offline-indicator,.actions,.menu-btn,.avatar{display:none!important}.content{max-width:none}.card{border-radius:0}.page-header{margin-bottom:12px}.page-header h1{font-size:20px}.table-wrap{border:1px solid #cbd5d3;border-radius:0;overflow:visible}.table{font-size:11px;min-width:0!important}.table th{position:static;background:#edf7f5!important}.table th,.table td{padding:6px 8px}.table tbody tr{break-inside:avoid}.matrix{font-size:10px}.matrix thead th,.matrix .sticky-1,.matrix .sticky-2,.matrix .sticky-3{position:static}.badge{border:1px solid}.photo-thumb{width:36px;height:36px}}@media (width<=820px){.app-shell-admin .main{max-width:100%;overflow:visible}.app-shell-admin .content{max-width:100%}.grid-2,.grid-3,.grid-4,.stats,.form-grid{grid-template-columns:minmax(0,1fr)}.grid>*,.stats>*,.form-grid>*,.card{min-width:0}.mobile-menu{grid-template-columns:repeat(3,minmax(0,1fr))}.table{min-width:560px}.table th,.table td{padding:10px 11px;font-size:13px}.table-wrap{-webkit-overflow-scrolling:touch;background-color:#0000;background-image:linear-gradient(90deg,#fff 30%,#fff0),linear-gradient(270deg,#fff 30%,#fff0),radial-gradient(farthest-side at 0,#0f504b2e,#0000),radial-gradient(farthest-side at 100%,#0f504b2e,#0000);background-position:0 0,100% 0,0 0,100% 0;background-repeat:no-repeat;background-size:34px 100%,34px 100%,16px 100%,16px 100%;background-attachment:local,local,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box}.table-wrap.compact-mobile .table{min-width:520px}.table-wrap{max-width:100%}.table-wrap .empty{text-align:left;padding:22px 14px;position:sticky;left:0}.section-title{flex-wrap:wrap;align-items:center}.section-title h2{flex:1;min-width:0}.section-title .btn{padding:8px 12px;font-size:13px}.topbar{gap:10px}.topbar>div{min-width:0}.topbar strong,.topbar small{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.grid{gap:14px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat{padding:14px}.stat strong{font-size:20px}.card,.login-form-wrap{padding:16px}.login-form h2{font-size:24px}}@media (width<=500px){.table{min-width:480px}.table-wrap.compact-mobile .table{min-width:440px}.stats,.mobile-menu{grid-template-columns:repeat(2,minmax(0,1fr))}.section-title h2{font-size:16px}.stats{gap:8px}.stat{padding:12px}.stat strong{font-size:18px}.card{border-radius:15px;padding:14px}.login-form-wrap{padding:12px}.login-form h2{font-size:20px}.login-form .logo{width:50px}.topbar .offline-indicator strong{display:none}.topbar .offline-indicator{padding:6px}}.fab-refresh{z-index:60;background:var(--primary);color:#fff;cursor:pointer;border:0;border-radius:18px 0 0 18px;place-items:center;width:48px;height:56px;padding:0;font-size:24px;font-weight:800;display:grid;position:fixed;top:50%;right:0;transform:translateY(-50%);box-shadow:0 12px 28px #0f504b38}.fab-refresh:active{background:var(--primary-dark);transform:translateY(-50%)scale(.98)}@media (width>=821px){.fab-refresh{display:none}}.swal2-container{z-index:20000!important}