:root{--bg:#f4f7fb;--card:#fff;--text:#1f2937;--muted:#6b7280;--line:#e6ebf2;--chip:#eef3fb;--chipText:#334155;--primary:#4f7cff;--danger:#ef4444;--st-missing:#c7cdd8;--st-submitted:#4f7cff;--st-updated:#f6b453;--ok:#4caf84;--warn:#f6b453;--bad:#ef4444}*{box-sizing:border-box}html,body{height:100%}body{color:var(--text);background:var(--bg);margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}.page{padding:18px}.hidden{display:none!important}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px #0f172a0a,0 6px 16px #0f172a0a}.cardHeader{padding:16px 16px 0}.cardHeader h1{margin:0;font-size:20px}.muted{color:var(--muted)}.small{font-size:12px}.loginCard{max-width:420px;margin:10vh auto 0;padding-bottom:16px}.form{gap:12px;padding:16px;display:grid}.field{gap:6px;font-size:13px;display:grid}.field input{border:1px solid var(--line);background:#fff;border-radius:10px;outline:none;height:40px;padding:0 12px}.field.inline{grid-template-columns:auto 1fr;grid-auto-flow:column;align-items:center;gap:10px}.field.inline input{width:170px}.btn{border:1px solid var(--line);height:40px;color:var(--text);cursor:pointer;background:#fff;border-radius:10px;padding:0 12px}.btn.primary{background:var(--primary);color:#fff;border-color:#0000}.btn.danger{background:var(--danger);color:#fff;border-color:#0000}.btn:disabled{opacity:.6;cursor:not-allowed}.error{color:var(--danger);margin:0;font-size:13px}.topbar{border:1px solid var(--line);background:#fff;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding:12px;display:flex}.topbarLeft{align-items:center;gap:16px;display:flex}.titleWrap h2{margin:0;font-size:16px}.deadline{margin-top:6px}.topbarRight{align-items:center;gap:12px;display:flex}.kpis{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.actions{gap:8px;display:flex}.chip{background:var(--chip);color:var(--chipText);border:1px solid #0000000a;border-radius:999px;align-items:center;gap:6px;padding:6px 10px;font-size:12px;display:inline-flex}.chip.soft{opacity:.85}.grid{grid-template-columns:1.2fr .9fr 1fr;gap:12px;display:grid}.panel{padding:12px}.panel.full{grid-column:1/-1}.panelHeader{justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;display:flex}.panelHeader h3{margin:0;font-size:14px}.panelMeta{font-size:12px}.list{gap:10px;display:grid}.row{border:1px solid var(--line);border-radius:12px;grid-template-columns:1fr auto 1.4fr auto auto;align-items:center;gap:10px;padding:10px;display:grid}.row.missing{background:#9ca3af1a}.name{font-size:14px;font-weight:600}.statusTag{border:1px solid var(--line);border-radius:999px;padding:4px 8px;font-size:12px}.statusTag.missing{color:#374151;background:#9ca3af1f}.statusTag.submitted{color:#1e40af;background:#2563eb1a;border-color:#2563eb40}.statusTag.updated{color:#92400e;background:#f59e0b1f;border-color:#f59e0b59}.barWrap{background:#eef2f7;border:1px solid #0000000a;border-radius:999px;height:10px;overflow:hidden}.bar{width:0%;height:100%}.bar.missing{background:var(--st-missing)}.bar.submitted{background:var(--st-submitted)}.bar.updated{background:var(--st-updated)}.total{font-variant-numeric:tabular-nums;font-size:13px}.more{border-radius:10px;width:36px;height:36px}.donutWrap{place-items:center;padding:12px 0 4px;display:grid;position:relative}.donutText{text-align:center;pointer-events:none;position:absolute}.donutPct{color:#1f2937;font-size:22px;font-weight:800}.rank{gap:10px;display:grid}.rankRow{border:1px solid var(--line);border-radius:12px;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px;display:grid}.rankNo{text-align:center;color:#374151;width:24px;font-weight:700}.rankBarWrap{background:#eef2f7;border-radius:999px;height:10px;overflow:hidden}.rankBar{background:#9aa9bf;width:0%;height:100%}.rankVal{font-variant-numeric:tabular-nums;font-size:13px}.leaveBlock{border:1px solid var(--line);border-radius:12px;padding:10px}.leaveList{gap:8px;margin-top:8px;display:grid}.leaveItem{border:1px solid var(--line);border-radius:12px;justify-content:space-between;gap:10px;padding:8px 10px;font-size:13px;display:flex}.badge{border:1px solid var(--line);border-radius:999px;padding:3px 8px;font-size:12px}.badge.requested{color:#92400e;background:#f59e0b1f;border-color:#f59e0b59}.badge.approved{color:#166534;background:#16a34a1f;border-color:#16a34a59}.badge.rejected{color:#991b1b;background:#dc26261a;border-color:#dc262640}.badge.consult{color:#1e40af;background:#2563eb1a;border-color:#2563eb40}.modal{border:1px solid var(--line);border-radius:14px;width:min(720px,92vw);padding:12px}.modal::backdrop{background:#00000040}.modalHead{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;display:flex}.modalBody{padding:6px 2px 2px}.detailGrid{grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:12px;display:grid}.dayBox{border:1px solid var(--line);text-align:center;border-radius:12px;padding:10px}.dayName{color:var(--muted);margin-bottom:6px;font-size:12px}.dayVal{font-variant-numeric:tabular-nums;font-size:14px;font-weight:700}.detailRow{border:1px solid var(--line);border-radius:12px;grid-template-columns:90px 1fr;gap:10px;margin-bottom:10px;padding:10px;display:grid}.detailValue{font-variant-numeric:tabular-nums}@media (max-width:980px){.grid,.leaveGrid{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:stretch}.topbarLeft,.topbarRight{justify-content:space-between}.field.inline input{width:100%}}.monthBars{flex-direction:column;gap:10px;display:flex}.monthName{font-weight:600}.monthBarWrap{background:#eef2f7;border-radius:999px;height:12px;overflow:hidden}.monthBar{background:linear-gradient(90deg,#4f7cff,#6fa8ff)}.monthVal{text-align:right;font-variant-numeric:tabular-nums}@media (max-width:800px){.monthRow{grid-template-columns:1fr}.monthVal{text-align:left}}.monthBarWrap{background:#eef2f7;border:1px solid #0000000a}.monthBar{border-radius:999px;height:100%;background:var(--primary)!important}.forecastList{gap:10px;display:grid}.forecastName{font-size:14px;font-weight:700}.forecastSub{color:var(--muted);margin-top:2px;font-size:12px}.forecastBarWrap{background:#eef2f7;border:1px solid #0000000a;border-radius:999px;height:12px;overflow:hidden}.forecastBar{background:var(--primary);border-radius:999px;width:0%;height:100%}.forecastRight{text-align:right;font-variant-numeric:tabular-nums}.forecastMain{font-size:14px;font-weight:800}.forecastTiny{color:var(--muted);margin-top:2px;font-size:12px}@media (max-width:980px){.forecastRow{grid-template-columns:1fr}.forecastRight{text-align:left}}.forecastList.compact{gap:8px;display:grid}.forecastRow{border:1px solid var(--line);background:#fff;border-radius:12px;grid-template-columns:140px 1fr 140px;align-items:center;gap:10px;padding:10px;display:grid}@media (max-width:980px){.forecastRow{grid-template-columns:1fr}}.forecastRow{justify-content:space-between;align-items:center;gap:12px;display:flex}.forecastRow>div:first-child{flex:1;min-width:0}.forecastName{font-weight:700}.forecastRight{text-align:right;white-space:nowrap}.forecastMain{font-size:14px;font-weight:800;line-height:1.2}.forecastTiny{opacity:.8;font-size:12px;line-height:1.2}.badge.muted{opacity:.5}.leaveGrid{grid-template-columns:1fr 1fr;gap:16px;display:grid}#panelLeave .leaveBlock>h4.muted{color:#334155;margin:0 0 10px;font-size:13px;font-weight:600}#panelLeave .leaveList{flex-direction:column;gap:8px;display:flex}#panelLeave .leaveItem{background:#fff;border:1px solid #e2e8f0;border-radius:10px;grid-template-columns:1fr 110px;align-items:center;gap:10px;padding:10px 12px;display:grid}#panelLeave .leaveItem .right{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}#panelLeave .leaveItem .mutedline{color:#64748b;font-size:12px}.monthBar{background:#3b82f6;border-radius:999px;height:100%;position:relative;overflow:hidden}.monthNightBar{z-index:1;background:#22c55e;height:100%;position:absolute;top:0;left:0}.monthRow{grid-template-columns:220px 1fr 170px;align-items:center;gap:12px;display:grid}.monthName{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.monthBarWrap{width:100%;min-width:0}.monthVal{text-align:right;white-space:nowrap}