:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#26334c;background:#f4f6fb;font-synthesis:none;--primary: #575bd7;--muted: #7b879f;--border: #e4e8f2}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;background:#eef0ff;color:#4d52b9;padding:11px 15px;border-radius:9px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap}button:hover{background:#e2e5ff}button:focus-visible,a:focus-visible{outline:3px solid #929bf6;outline-offset:3px}button:disabled{opacity:.5;cursor:not-allowed}button.primary,.tabs .active{color:#fff;background:var(--primary);box-shadow:0 4px 12px #5659da1c}.danger{background:#cf4651!important;color:#fff}a{color:#4b50bb}h1,h2,h3{margin:0;color:#202c44}h1{font-size:29px;font-weight:750;letter-spacing:-1px}h2{font-size:20px;letter-spacing:-.5px}h3{font-size:14px;font-weight:700}p{line-height:1.65;color:var(--muted);font-size:13px}small{font-size:11px;color:var(--muted);display:block;line-height:1.7}b{font-weight:600}input,select,textarea{border:1px solid #dce2ef;border-radius:8px;padding:11px 12px;background:#fff;color:#293854;min-width:0;font-size:13px;outline:none}input:focus,select:focus,textarea:focus{border-color:#8587e7;box-shadow:0 0 0 3px #5659da11}input[type=checkbox]{accent-color:var(--primary);width:16px;height:16px}textarea{resize:vertical;min-height:95px}label{font-size:12px;display:flex;flex-direction:column;gap:8px;color:#44506a}.app{min-height:100vh}.app>aside{position:fixed;inset:0 auto 0 0;width:238px;display:flex;flex-direction:column;padding:27px 16px 15px;background:#fff;border-right:1px solid var(--border);z-index:20;overflow:auto}.logo{display:flex;align-items:center;gap:12px;padding:0 7px 30px}.brand{width:43px;height:43px;display:grid;place-items:center;background:var(--primary);color:#fff;font-weight:800;border-radius:13px}.logo b{font-size:17px}.logo small{font-size:9px}.avatar{flex-shrink:0;display:inline-grid;place-items:center;width:38px;height:38px;background:#f0eeff;border-radius:11px;color:#605bda;font-weight:700}.avatar.large{width:70px;height:70px;border-radius:22px;font-size:28px}.sidebar-user{justify-content:flex-start;text-align:left;background:#fafbfe;border:1px solid var(--border);margin-bottom:27px;padding:12px}.sidebar-user small{font-size:9px}.menu-label{letter-spacing:1.8px;font-size:9px;margin:0 12px 12px}nav{display:grid;gap:5px}nav button{justify-content:flex-start;background:#fff;color:#798398;padding:14px 15px;font-weight:500;font-size:12px}nav button.active{background:#efefff;color:var(--primary);font-weight:700}nav button:nth-child(3){padding-left:28px;font-size:11px}.logout{margin-top:auto;justify-content:flex-start;background:#f7f8fc;color:#74819b}.version{font-size:9px;margin-top:12px;text-align:center}.workspace{margin-left:238px}header{position:sticky;top:0;z-index:10;min-height:90px;background:#ffffffed;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:20px;padding:19px 30px}header small{font-size:10px;margin-top:4px}.header-clock{margin-left:auto;font-size:10px;color:#75829b;background:#f7f8fc;padding:12px;border-radius:8px}.content{padding:28px 30px 45px;max-width:1900px;margin:auto;display:grid;gap:22px}.page-intro{display:flex;justify-content:space-between;align-items:center;gap:20px}.page-intro p{margin:7px 0 0}.eyebrow{letter-spacing:2px;color:var(--primary);font-size:9px;font-weight:700;margin-bottom:8px}.card{background:#fff;border:1px solid var(--border);border-radius:15px;padding:22px;min-width:0;box-shadow:0 2px 3px #25366502}.card-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.card .table-wrap{margin-left:-22px;margin-right:-22px}.card .table-wrap:last-child{margin-bottom:-22px;border-radius:0 0 15px 15px}.metric{background:#fff;border:1px solid var(--border);border-radius:13px;padding:21px;min-width:0}.metric small{font-size:11px}.metric strong{display:block;font-size:27px;line-height:1.3;margin-top:14px;color:#273451}.metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.metrics-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.metrics-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.metrics-grid.six{grid-template-columns:repeat(6,minmax(0,1fr))}.metric .metric{border:0;padding:0}.summary{display:flex;gap:0;flex-wrap:wrap}.summary .metric{border:0;border-right:1px solid var(--border);border-radius:0;padding:10px 24px;flex:1}.summary .metric:last-child{border:0}.summary .metric strong{font-size:25px}.summary .metric:first-child strong{color:#10ad98}.dashboard-grid{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:20px}.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}.events-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.events-grid .card{min-height:205px}.event{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--border);align-items:center;font-size:12px}.event .badge{margin-left:auto}.event small{font-size:10px;margin-top:4px}.event .avatar{background:#eef6fb;color:#479ab0}.donut-layout{display:flex;align-items:center;justify-content:center;gap:22px;min-height:245px}.donut{width:165px;height:165px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.donut>div{background:#fff;border-radius:50%;width:120px;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}.donut strong{font-size:28px}.donut small{font-size:9px}.legend-row{display:flex;align-items:center;gap:8px;font-size:10px;color:#556079;margin:10px 0}.legend-row i{width:7px;height:7px;border-radius:50%}.legend-row b{margin-left:auto;padding-left:10px}.bars{display:grid;gap:20px;padding:20px 0}.bar{display:grid;grid-template-columns:95px 1fr 24px;gap:10px;align-items:center;font-size:11px;color:#6f7c94}.bar>div{height:12px;border-radius:4px;background:#f1f4fa;overflow:hidden}.bar i{display:block;background:var(--primary);height:100%;border-radius:4px}.bar:nth-child(2) i{background:#16b3a1}.bar:nth-child(3) i{background:#5c9edf}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{background:#f8faff;color:#7d89a1;font-size:9px;letter-spacing:.6px;text-transform:uppercase;font-weight:500;white-space:nowrap}th,td{padding:16px 18px;border-top:1px solid var(--border)}td{color:#3b4962;line-height:1.5}tbody tr:hover{background:#fafbfe}td .actions{flex-wrap:nowrap}td button{font-size:10px;padding:8px 10px}.person{display:flex;justify-content:flex-start;background:transparent;padding:0;text-align:left;color:#344b79;gap:10px;white-space:nowrap}.person b{display:block;font-size:11px}.person small{font-size:9px;font-weight:400}.person .avatar{width:34px;height:34px}.link{border:0;background:transparent;padding:0;color:#4d61bb}.badge{display:inline-flex;padding:4px 8px;border-radius:5px;color:#74829a;background:#eff2f7;font-size:9px;white-space:nowrap;font-weight:500}.badge.active,.badge.approved,.badge.present,.badge.published{color:#078d7b;background:#e6f7f0}.badge.inactive,.badge.rejected,.badge.absent{background:#fff0ec;color:#cc654a}.badge.pending,.badge.half_day{background:#fff6e8;color:#be8c26}.badge.on_leave{background:#e8f4ff;color:#2981bc}.toolbar,.actions,.tabs{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.toolbar{justify-content:space-between}.tabs{gap:8px}.tabs button{font-size:11px}.tabs b{background:#ffffff38;border-radius:3px;padding:2px 5px}.wrap{flex-wrap:wrap}.filters{background:#fff;padding:20px;border:1px solid var(--border);border-radius:14px;align-items:flex-end}.filters label{flex:1;min-width:120px}.attendance-summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.attendance-summary .metric{border:0;border-left:2px solid var(--border);border-radius:0;padding:0 12px}.attendance-summary .metric strong{font-size:23px}.attendance-summary .donut-layout{min-height:180px}.day{background:transparent!important;padding:6px!important;min-width:28px}.status-icon{display:inline-flex;align-items:center;justify-content:center;color:#b5bdcc;font-weight:700}.status-icon.present{color:#10ad98}.status-icon.absent{color:#e27855}.status-icon.on_leave,.status-icon.holiday{color:#489be4}.status-icon.weekly_off{color:#49586a}.status-icon.half_day{color:#d29d2f}.legend{display:flex;gap:22px;flex-wrap:wrap;font-size:10px;color:#7d8aa4}.legend span{display:flex;align-items:center;gap:6px}.help{font-size:11px;margin:0}.empty{text-align:center;padding:35px!important;color:#8a95aa;font-size:12px}.error{border:1px solid #f2d3c9;background:#fff5f1;color:#a65035;padding:14px 18px;border-radius:9px;font-size:12px;line-height:1.6}.error button{padding:5px 9px;margin-left:10px}.chart-placeholder{min-height:245px;display:grid;place-items:center;color:#8996ac;font-size:12px}.setup-banner{padding:28px 30px;border-radius:16px;background:linear-gradient(110deg,#2f3c66,#6263d9);color:#fff}.setup-banner h1{color:#fff;margin-top:6px}.setup-banner p,.setup-banner small{color:#dce1ff}.profile-banner{display:flex;align-items:center;gap:20px;padding:25px;border:1px solid var(--border);border-radius:15px;background:#fff}.profile-banner input{margin-left:auto}.profile-banner p{margin:7px 0}.punch{border-radius:50%;width:118px;height:118px;margin:16px 0;flex-direction:column;box-shadow:0 0 0 8px #efedff!important}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}.form-grid label:has(textarea){grid-column:1/-1}.form-grid input,.form-grid select{width:100%}.form-grid input[type=checkbox]{width:18px}form>.primary{margin-top:6px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:20px}.icon{padding:8px}dialog{border:1px solid var(--border);border-radius:18px;padding:27px;width:660px;max-width:calc(100vw - 30px);max-height:90vh;box-shadow:0 25px 100px #18294833;color:#263651}dialog::backdrop{background:#1c274466;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}dialog.drawer{position:fixed;inset:0 0 0 auto;margin:0;border-radius:16px 0 0 16px;width:460px;height:100dvh;max-height:100dvh}dialog h3{margin:24px 0 13px}dialog.drawer .form-grid{grid-template-columns:1fr}.auth{min-height:100dvh;display:grid;grid-template-columns:1.1fr 1fr;background:#fff}.auth>section{padding:clamp(35px,7vw,110px);display:flex;flex-direction:column;justify-content:center}.auth-story{background:linear-gradient(140deg,#252f52,#5458c5);position:relative;overflow:hidden}.auth-story:after{content:"";width:420px;height:420px;border:1px solid #ffffff13;border-radius:50%;position:absolute;right:-140px;bottom:-160px;box-shadow:0 0 0 60px #ffffff03,0 0 0 120px #ffffff03}.auth-story .brand{background:#ffffff24;margin-bottom:40px}.auth-story h1{font-size:clamp(36px,4vw,62px);line-height:1.2;color:#fff;margin:18px 0}.auth-story small{letter-spacing:2px;color:#bfc5f5;font-size:10px}.auth-story p{color:#bdc5ed;max-width:330px}.auth-pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.auth-pills span{font-size:10px;color:#d8ddfa;border:1px solid #ffffff25;border-radius:30px;padding:8px 12px}.auth-form h2{font-size:29px;margin-top:9px}.auth-form>small:first-child{color:var(--primary);letter-spacing:2px}.auth-form .form-grid{grid-template-columns:1fr}.auth-form form button{width:100%;padding:14px}.auth-form .version{text-align:left;margin-top:28px}.mobile-menu,.menu-overlay{display:none}@media(max-width:1250px){.dashboard-grid{grid-template-columns:1fr 1.3fr}.dashboard-grid>.card:last-child{grid-column:1/-1}.events-grid,.attendance-summary{grid-template-columns:1fr 1fr}.attendance-summary>.card:last-child{grid-column:1/-1}.metrics-grid.six{grid-template-columns:repeat(3,minmax(0,1fr))}.summary .metric{padding:10px 14px}.content{padding:24px}.two-columns{grid-template-columns:1fr}.profile-banner{flex-wrap:wrap}}@media(max-width:760px){.app>aside{transform:translate(-100%)}.app>aside.open{transform:translate(0)}.workspace{margin-left:0}.mobile-menu{display:inline-flex}.menu-overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#1d294b66;z-index:19;border-radius:0}.header-clock{display:none}header{padding:15px;min-height:77px;gap:12px}header>.avatar{margin-left:auto}header h2{font-size:17px}.content{padding:18px 14px;gap:18px}.page-intro{align-items:flex-start;flex-direction:column}h1{font-size:26px}.dashboard-grid,.events-grid,.attendance-summary{grid-template-columns:1fr}.dashboard-grid>.card:last-child,.attendance-summary>.card:last-child{grid-column:auto}.summary{display:grid;grid-template-columns:repeat(3,1fr);row-gap:15px}.summary .metric{padding:8px}.summary .metric small{font-size:9px}.metrics-grid.four,.metrics-grid.six,.metrics-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}.card-title{align-items:flex-start;flex-wrap:wrap}.card{padding:18px}.card .table-wrap{margin-left:-18px;margin-right:-18px}.card .table-wrap:last-child{margin-bottom:-18px}.toolbar{gap:14px}.form-grid,.auth{grid-template-columns:1fr}.auth-story{display:none!important}.auth>section{padding:35px 25px}.profile-banner{padding:18px;gap:14px}.profile-banner input{margin-left:0}.profile-banner h1{font-size:23px}.setup-banner{padding:24px}.donut-layout{justify-content:space-around}.tabs{gap:6px}.tabs button{padding:10px 12px}dialog{padding:20px}}