:root{--nav:#213c59;--ink:#253a4c;--line:#c9d5df;--blue:#1e639e;--green:#176b42;--red:#b22c36;--sat:#e3f0ff;--sun:#ffeae7;--head:#e4edf5}
*{box-sizing:border-box;border-radius:0}
html,body{height:100%;margin:0;background:white;color:var(--ink);font:12px/1.18 Arial,"Segoe UI",sans-serif}
button,input,select{font:inherit;color:inherit;border-radius:0}button{cursor:pointer;white-space:nowrap;border:1px solid #aebdc9;background:#f3f6f9;height:26px;padding:2px 7px}button:hover{background:#dceaf6}button:disabled{opacity:.4;cursor:default}
input,select{border:1px solid #b5c6d3;height:25px;background:white;padding:2px 5px;min-width:0}
input:focus,button:focus-visible,select:focus-visible{outline:2px solid #2b7fc3;outline-offset:0}
.hidden{display:none!important}
.app{display:flex;flex-direction:column;height:100dvh;min-height:330px;overflow:hidden}
.topbar{flex:0 0 auto;min-height:37px;display:flex;align-items:center;gap:8px;padding:3px 8px;background:var(--nav);color:#fff;overflow-x:auto;scrollbar-width:thin;white-space:nowrap}
.brand{font-size:15px;letter-spacing:.025em}
.topbar button{height:26px;background:#e8f0f7;border-color:#adc2d1;color:#224660;padding:2px 6px}
.topbar button:hover{background:#d0e5f7}.topbar button.active{background:#a2d0ed!important;box-shadow:inset 0 -3px #2a6b99;font-weight:bold}
.topbar .navmonth{width:26px;padding:0;font-size:14px}.month-title{min-width:120px;text-align:center;font-size:13px;font-weight:700}
.rate-wrap{display:flex;gap:4px;align-items:center;color:#dcebf6;font-size:11px}.rate-wrap input{width:61px;height:26px;text-align:center}
.top-stats{display:flex;align-items:center;gap:13px;margin-left:4px;color:#cbdeec;font-size:11px}
.top-stats strong{color:white;margin-left:3px;font-size:13px;white-space:nowrap}.top-stats strong.pos{color:#abf0bd}.top-stats strong.neg{color:#ffb4b0}
.toolbar{margin-left:auto;display:flex;align-items:center;gap:5px}.toolbar #beginButton{background:#dff1e7}.toolbar #finishButton{background:#e3ebf8}.who{font-size:10px;color:#b4d3e4}
.holiday-strip{flex:0 0 auto;min-height:30px;display:flex;align-items:center;gap:6px;padding:2px 7px;background:#f2f7fb;border-bottom:1px solid var(--line)}
.holiday-strip>strong{white-space:nowrap;font-size:11px}.holiday-strip>button{height:23px;background:#fff;padding:0 6px}.holiday-strip>button.selected{background:#d7eafa;color:#1d4f7a;font-weight:bold}
.holiday-items{flex:1;min-width:0;display:flex;gap:3px;overflow-x:auto;scrollbar-width:thin}
.holiday-chip{display:inline-flex;align-items:center;gap:4px;height:23px;max-width:225px;white-space:nowrap;font-size:10px!important;padding:1px 5px!important;background:white!important;border:1px solid #c6d5e0!important;overflow:hidden;text-overflow:ellipsis;flex:none}
.holiday-chip small{opacity:.85;font-size:9px}.holiday-chip.great{border-left:3px solid var(--red)!important;color:var(--red)!important;font-weight:bold}.holiday-chip.medium{border-left:3px solid var(--blue)!important;color:var(--blue)!important;font-weight:bold}.holiday-chip.selected-holiday{outline:2px solid #2383c7;outline-offset:-2px}
.table-scroll{flex:1 1 auto;overflow:auto;min-height:0}table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%;min-width:780px}
col.col-date{width:44px}col.col-day{width:36px}col.col-status{width:81px}col.col-holiday{width:80px}col.col-time{width:68px}col.col-break{width:76px}col.col-fact{width:66px}col.col-wage{width:74px}
thead th{height:26px;position:sticky;top:0;z-index:15;background:var(--head);border-right:1px solid #b5c6d6;border-bottom:1px solid #a0b3c4;text-align:center;font-size:11px;white-space:nowrap;padding:2px}
thead th.f-date{left:0;z-index:17}thead th.f-day{left:44px;z-index:17}
tbody tr{height:25px}tbody td{height:25px;padding:0 3px;border-right:1px solid #e1e8ee;border-bottom:1px solid #e5ebef;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;font-variant-numeric:tabular-nums}
tbody td.f-date,tbody td.f-day{position:sticky;z-index:5;background:white}tbody td.f-date{left:0}tbody td.f-day{left:44px}
tbody tr.saturday td,tbody tr.saturday td.f-date,tbody tr.saturday td.f-day{background:var(--sat)}tbody tr.sunday td,tbody tr.sunday td.f-date,tbody tr.sunday td.f-day{background:var(--sun)}
tbody tr.saturday td.f-date,tbody tr.saturday td.f-day{color:#2465a2}tbody tr.sunday td.f-date,tbody tr.sunday td.f-day{color:#9b3434}
tbody tr:hover td{background:#ebf5fe!important}tbody tr.today td.f-date{background:#ffda7b!important;box-shadow:inset 0 0 0 2px #b67715;font-weight:700;color:#59400a}
tbody tr.highlight td{box-shadow:inset 0 2px #1c7ab2,inset 0 -2px #1c7ab2}
tbody td.f-status,tbody td.f-description{text-align:left}tbody td.f-status{font-size:11px}tbody td.f-holiday{font-size:10px;color:#756f63;cursor:default}tbody td.f-holiday.great{color:var(--red);font-weight:700}tbody td.f-holiday.medium{color:var(--blue);font-weight:700}
tbody td.status-off{background:#92e8ae}tbody td.status-leave{background:#8fc3ff}tbody input,tbody select{display:block;border:0;background:transparent;width:100%;height:23px;text-align:center;padding:1px;font-size:12px;outline:0}tbody input:focus,tbody select:focus{box-shadow:inset 0 0 0 1px #347bbb;background:white}
tbody input.f-desc{font-size:11px;color:#50758f;text-align:left;padding:0 4px}tbody select{font-size:11px;text-align:left}
tbody td.f-wage{text-align:center}tbody td.f-description{padding:0}tbody td.t-incomplete{color:#95651f}tbody td.f-end{position:relative}tbody input.end-input{width:100%;display:inline-block;vertical-align:middle}tbody td.f-end.has-next-day input.end-input{width:calc(100% - 23px)}tbody button.next-day:not(.visible){display:none}tbody button.next-day{height:21px;width:22px;font-size:10px;padding:0;color:#265681;border:1px solid #c3d1dd;background:#edf3f8;vertical-align:middle}tbody button.next-day.on{background:#b8e1ff;font-weight:700}
tfoot td{height:26px;background:#e9f1f7;border-top:1px solid #a7bdce;border-right:1px solid #d0dde6;border-bottom:1px solid #a4b9c9;padding:3px 5px;font-weight:700;font-size:11px;text-align:center;white-space:nowrap}
tfoot td:last-child{text-align:left}.foot-note{font-size:10px;color:#687e8f;padding:7px}
.notification{padding:7px;background:#fff4d2;color:#744c1c;border-bottom:1px solid #ddc587;font-weight:600}
.shade{position:absolute;inset:66px 0 0 0;z-index:35;background:#15263a35}
.sidepanel{position:absolute;z-index:36;top:66px;right:0;bottom:0;width:min(410px,98vw);border-left:2px solid #a5bac9;box-shadow:-3px 0 10px #20374f26;background:white;display:flex;flex-direction:column}
.sidepanel.expense-panel{width:min(830px,97vw)}.panelhead{flex:0 0 34px;display:flex;justify-content:space-between;align-items:center;background:#e5edf5;border-bottom:1px solid #a9bdce;padding:4px 8px;font-size:12px}.panelhead button{height:23px}
.panelbody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:7px;gap:7px;overflow:auto}
.summary-table{min-width:0;width:100%;table-layout:auto;border-collapse:collapse}.summary-table td{padding:5px 4px;font-size:12px;border-bottom:1px solid #e0e7ed}.summary-table td:last-child{text-align:right;font-weight:700}.summary-table tr:last-child{background:#e8f2fa}
.payment-form,.compact-entry{display:flex;flex-direction:column;gap:5px;padding:4px 0}.formline{display:grid;grid-template-columns:110px minmax(70px,1fr) auto;gap:5px;align-items:center}.formline input{width:100%;height:27px}.formline button{height:27px;background:#e2f2ea;border-color:#9bbbab}.payment-form>input,.compact-entry>input{width:100%;height:27px}
.section-heading{background:#eaf0f5;border:1px solid #d5e0e8;padding:6px;font-weight:700;font-size:11px}.section-heading b{color:#61758b}
.list-scroll{flex:1 1 auto;min-height:40px;overflow:auto}.ledger-table{border-collapse:collapse;table-layout:fixed;min-width:0;width:100%}.ledger-table th{position:sticky;top:0;z-index:4;background:#edf3f7;border-bottom:1px solid #b7c8d7;height:23px;text-align:left;padding:2px 4px;font-size:10px}.ledger-table td{border-bottom:1px solid #dce6eb;padding:5px 4px;font-size:11px;vertical-align:middle;overflow:hidden;text-overflow:ellipsis}.ledger-table td:first-child{width:70px}.ledger-table td:nth-child(3){width:87px;text-align:right;white-space:nowrap}.ledger-table td:last-child{width:45px;text-align:center}.ledger-table button{height:19px;font-size:10px;padding:0 3px;color:#7c3535}
.ledger-table tr.reversed{opacity:.5;text-decoration:line-through}.panelhint{font-size:10px;color:#677b8b;line-height:1.4;padding:2px}
.expense-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #ccd9e3;min-height:47px}.expense-stats>div{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:4px 8px;border-right:1px solid #d7e1e8}.expense-stats>div:last-child{border:0;background:#e7f1f9}.expense-stats small{font-size:10px;color:#597083}.expense-stats b{font-size:13px;font-variant-numeric:tabular-nums}
.ledger-columns{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:1 1 auto;min-height:140px}.ledger-column{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid #d4e0e9}.ledger-column .section-heading{flex:0 0 auto}.ledger-column .compact-entry{padding:4px 5px;border-bottom:1px solid #d4e0e9}
.login-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:#eaf1f7;padding:15px}.login-card{width:min(350px,100%);background:white;padding:25px;border:1px solid #a8becf;box-shadow:0 5px 22px #142d4219;display:flex;flex-direction:column;gap:12px}.login-card h1{font-size:23px;color:#234564;margin:0}.login-sub{color:#5b758a}.login-card label{display:flex;flex-direction:column;gap:5px;font-size:12px}.login-card label input{width:100%;height:34px}.login-card .primary{height:34px;background:#235a87;color:white;border-color:#225783;font-weight:700}.login-card small{color:#72869a}.form-error{font-size:12px;color:#b23437}
@media(max-width:1190px){.topbar{gap:5px}.top-stats{gap:6px}.top-stats strong{font-size:12px}.toolbar{gap:3px}.toolbar button{padding:2px 4px}}
@media(max-width:700px){.topbar{flex-wrap:wrap;overflow:visible;min-height:65px}.toolbar{margin-left:0}.holiday-strip{gap:3px}.holiday-strip>strong{font-size:9px}.shade,.sidepanel{top:95px}.ledger-columns{grid-template-columns:1fr;overflow:auto}.ledger-column{min-height:240px}}
@media print{.topbar,.holiday-strip,.shade,.sidepanel,.notification{display:none!important}.app{height:auto}.table-scroll{overflow:visible}thead th,tbody td.f-date,tbody td.f-day{position:static!important}table{min-width:0}tfoot td{position:static}}