/* Shared layout tokens and component rules, loaded after the original screens. */
:root{
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
 --page-gutter:24px;--card-inset:20px;--section-gap:16px;--card-radius:14px;--control-radius:6px;--tap-size:44px;
 --font-xs:.625rem;--font-sm:.75rem;--font-md:.875rem;--font-field:1rem;--font-heading:1.5rem;--font-section:1rem;
}
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:var(--font-md)}
main,main.grafik-page{max-width:calc(1024px + 2 * var(--page-gutter));width:100%;margin-inline:auto;padding:var(--page-gutter);min-width:0}
main.grafik-page{--calendar-inset:var(--card-inset)}
main>*,.workspace,.details-page,.payout-page,.settings-grid{min-width:0}
.details-page,.payout-page,.grafik-layout,.summary-page{max-width:1024px;width:100%;margin-inline:auto}
.panel{border:1px solid var(--line);border-radius:var(--card-radius)}
.calendar-panel,.details-page .payroll-card,.payout-form-panel,.settings-section{padding:var(--card-inset)}
.calendar-panel .month-summary{margin:0;padding:var(--space-3) 0 0}
.calendar-panel .month-controls{grid-template-columns:var(--tap-size) minmax(0,1fr) var(--tap-size)}
.calendar-panel .month-controls>.icon-button,.month-controls>.icon-button{width:var(--tap-size);height:var(--tap-size);min-width:var(--tap-size)}
.month-controls{justify-content:center;min-width:0;gap:var(--space-1)}
.month-select{min-width:0;max-width:100%;font-size:1.25rem;line-height:1.4}
.calendar-panel .month-select{font-size:clamp(1.125rem,3vw,1.5rem)}
.calendar-panel .calendar-toolbar{margin-bottom:var(--space-4)}
.calendar-panel .legend-toggle{width:var(--tap-size);height:var(--tap-size)}
.calendar-panel .legend-details{padding:0}
.calendar-panel .has-net .stat strong{overflow-wrap:anywhere;font-size:clamp(1rem,4.5vw,1.875rem)}
.calendar-panel .has-net .stat>span{font-size:var(--font-xs);min-height:2.8em}
.calendar-panel .net-stat{min-height:var(--tap-size)}
.calendar-panel .net-stat[aria-pressed=true]{font-size:var(--font-sm);overflow-wrap:anywhere;white-space:normal}
.page-title-row,.details-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin:0 0 var(--section-gap);min-height:var(--tap-size)}
.page-title-row{flex-wrap:wrap}
.page-title-row h1,.details-heading h1{margin:0;font:600 var(--font-heading)/1.25 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:-.5px;overflow-wrap:anywhere}
.details-heading>span{font-size:var(--font-xs);flex-shrink:0}
.details-month{margin-bottom:var(--section-gap)}
.details-month .month-select{font-size:1.125rem}
.details-page .payroll-card{margin:var(--section-gap) 0 0}
.details-page .forecast-net{font-size:clamp(1.5rem,7vw,2.5rem);overflow-wrap:anywhere}
.forecast-metrics strong{font-size:var(--font-md);overflow-wrap:anywhere}
.forecast-metrics span,.forecast-label{font-size:var(--font-xs)}
.payroll-control-body strong{white-space:normal;overflow-wrap:anywhere}
.payroll-controls{gap:var(--space-2);padding-top:var(--space-3);margin-top:var(--space-3)}
.payroll-control-label,.payroll-controls .payout-link{font-size:var(--font-xs)}
.payroll-controls .monthly-fixed-bonus{font-size:var(--font-sm)}
.deductions dl>div{font-size:var(--font-sm)}
.deductions>summary{min-height:var(--tap-size);padding-top:var(--space-2);font-size:var(--font-xs)}
.deductions dt,.deductions dd{overflow-wrap:anywhere;min-width:0}
.details-table-scroll,.table-scroll{max-width:100%;overscroll-behavior-inline:contain}
.details-table{min-width:440px}.details-table .date-col{width:64px}.details-table .shift-col{width:52px}.details-table .total-col{width:48px}.details-table .net-col{width:80px}.details-table th,.details-table td{height:46px;padding:4px 6px;font-size:var(--font-xs)}.details-table thead th,.details-table tfoot th,.details-table tfoot td{height:46px;border-top-width:1px}.details-table tbody th:first-child{border-right-width:2px}.details-table .shift-badge{width:36px;min-width:36px;height:36px}.details-table .hours-input{height:36px}.details-table-scroll{width:100%;min-width:0;overflow:auto;isolation:isolate}
.details-table .day-net{font-size:var(--font-xs)}
.details-table .day-total,.details-table .hours-input,.details-table tfoot td:nth-child(n+3):nth-child(-n+7){font-family:inherit;font-size:var(--font-field);font-weight:400;line-height:1.5;vertical-align:middle;font-variant-numeric:tabular-nums}
.details-table .day-control{font-size:12px;min-width:50px;height:36px;min-height:36px}
.details-table .day-control span{font-size:.5625rem}
.payout-form-panel{margin-bottom:0}
.payout-fields{gap:var(--space-2)}
.payout-fields label{font-size:var(--font-sm);line-height:1.4;min-width:0}
.payout-fields input{font-size:var(--font-field);border-radius:var(--control-radius)}
.payout-metric-card,.payout-overall-value{border-radius:var(--control-radius)}
.settings-grid{gap:var(--section-gap)}
.settings-heading{gap:var(--space-3);margin-bottom:var(--space-4);align-items:center}
.settings-heading h2{font-size:var(--font-section);margin:0;line-height:1.4}
.settings-heading p{font-size:var(--font-xs);line-height:1.6;margin:var(--space-1) 0 0}
.settings-heading>.icon{width:22px;height:22px;color:var(--gold);flex-shrink:0}
.payroll-fields,.limits-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.payroll-fields>label,.limits-fields>label{min-width:0;font-size:var(--font-sm);line-height:1.4;color:var(--muted)}
.payroll-fields input:not([type=checkbox]),.payroll-fields select,.limits-fields input,.limits-fields select{width:100%;max-width:none;min-width:0;min-height:var(--tap-size);margin-top:var(--space-2);padding:var(--space-2);border:1px solid var(--line);border-radius:var(--control-radius);background:var(--bg);color:var(--ink);font-size:var(--font-field);text-align:center}
.limits-fields .year-select{grid-column:1/-1;justify-self:start}
.year-select{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--font-xs);color:var(--muted);flex-shrink:0}
.year-select select,.limits-fields .year-select select{width:auto;min-width:76px;min-height:var(--tap-size);margin:0;padding:var(--space-2);border:1px solid var(--line);border-radius:var(--control-radius);background:var(--surface);color:var(--ink);font-size:var(--font-md);text-align:center}
.check-label{min-height:var(--tap-size);font-size:var(--font-sm)}
.theme-choice{min-height:var(--tap-size);font-size:var(--font-sm);padding:var(--space-2);gap:var(--space-2)}
.theme-columns{gap:var(--space-3)}
.button{min-height:var(--tap-size);border-radius:var(--control-radius)}
.icon-button:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dialog-top{gap:var(--space-3);margin-bottom:var(--space-4)}
.dialog-top h2{font-size:1.25rem;line-height:1.4;overflow-wrap:anywhere}
.dialog-top>.icon-button{width:var(--tap-size);min-width:var(--tap-size);height:var(--tap-size);margin:0}
.status-options{gap:var(--space-3)}
.status-option{min-height:var(--tap-size);font-size:var(--font-sm)}
.dialog-top p,.small-text{font-size:var(--font-xs)}
@media(max-width:700px){
 :root{--page-gutter:16px;--card-inset:14px;--section-gap:12px}
 main.grafik-page{--page-gutter:16px;padding-bottom:calc(84px + var(--page-gutter) + env(safe-area-inset-bottom))}
 .topbar{min-height:72px;height:auto;padding:var(--space-2) var(--page-gutter);border-radius:0 0 var(--card-radius) var(--card-radius)}
 .topbar-right{gap:var(--space-3)}
 .avatar{width:var(--tap-size);height:var(--tap-size);font-size:var(--font-sm);flex-shrink:0}
 .connection{font-size:.5625rem;white-space:nowrap}
 .mobile-brand>.brand-credit{font-size:12px;line-height:16px;font-weight:450;color:color-mix(in srgb,var(--ink) 76%,var(--muted))}
 .page-title-row h1,.details-heading h1{font-size:1.375rem}
 .payroll-fields{grid-template-columns:minmax(0,1fr)}
 .limits-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 .details-table{min-width:440px}
 .details-table .date-col{width:64px}.details-table .shift-col{width:52px}.details-table .total-col{width:48px}.details-table .net-col{width:80px}
 .payout-page .payout-fields label{font-size:var(--font-xs);white-space:normal}
 .payout-page .payout-actions .button{font-size:var(--font-xs)}
 .payout-actions .payout-status{font-size:var(--font-xs);white-space:normal}
 .payout-page .payout-metric-card dt{font-size:var(--font-sm)}
 .payout-page .payout-metric-card dd{font-size:var(--font-md)}
 .payout-page .has-long-money .payout-fields{grid-template-columns:minmax(0,1fr)}
 .bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-1);padding:6px max(6px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));border-radius:var(--card-radius) var(--card-radius) 0 0}
 .bottom-nav .nav-item{display:grid;grid-template-rows:27px 2.4em;justify-items:center;align-content:center;gap:4px;min-width:0;min-height:68px;padding:4px 1px;font-size:12px;line-height:1.2}
 .bottom-nav .nav-item span{max-width:100%;overflow-wrap:normal;white-space:normal;text-align:center;line-height:1.2}
 .bottom-nav .nav-item .icon{width:26px;height:26px}
 .page-footer{padding:var(--space-5) var(--page-gutter) calc(100px + env(safe-area-inset-bottom))}
 dialog{padding:var(--card-inset);border-radius:var(--card-radius);max-width:calc(100vw - 2 * var(--page-gutter))}
}
@media(max-width:360px){:root{--page-gutter:12px;--card-inset:12px}main.grafik-page{--page-gutter:12px}.year-select{gap:var(--space-1)}.year-select>span{display:none}.year-select select{min-width:72px}.topbar-right{gap:var(--space-2)}}

.brand .brand-credit{font-size:12px;font-weight:450;color:color-mix(in srgb,var(--ink) 76%,var(--muted))}.brand-credit i{font-size:14px}
.deductions>summary{flex-wrap:nowrap;font-size:var(--font-sm);font-weight:500;line-height:1.4}.deductions-label,.deductions-percent{font:inherit;line-height:inherit}.deductions-label{min-width:0}.deductions-total{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;flex:none;margin-left:auto;font-variant-numeric:tabular-nums}.deductions-percent{color:var(--ink);white-space:nowrap}.deductions-total b{display:grid;place-items:center;flex:none;width:16px;height:16px;margin:0;line-height:1}.deductions .deductions-grand-total{grid-template-columns:minmax(0,1fr);margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.deductions-grand-total dt,.deductions-grand-total dd{font-size:inherit;font-weight:600;color:var(--ink)}.deductions-grand-total dd{white-space:nowrap}

@media(max-width:700px){.bottom-nav .nav-item.active{color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--surface))}[data-theme=light] .bottom-nav .nav-item.active,[data-theme=warm] .bottom-nav .nav-item.active,[data-theme=frost] .bottom-nav .nav-item.active{color:color-mix(in srgb,var(--gold) 60%,var(--ink))}}

/* v74: preserve date/shift geometry and row heights; trim numeric padding only. */
.details-table th:nth-child(n+3),.details-table td:nth-child(n+3){padding-left:3px;padding-right:3px}
.details-table th:last-child,.details-table td:last-child{padding-left:1px;padding-right:1px}
.details-table .day-net,.details-table tfoot td:last-child{font-family:inherit;font-size:var(--font-field);font-weight:400;line-height:1.5;vertical-align:middle;white-space:nowrap}
.calendar-panel .calendar-day strong{position:relative}
.calendar-panel .calendar-day .manual-pencil{position:absolute;right:2px;bottom:2px;width:12px;height:12px;color:#fff;filter:drop-shadow(0 1px 1px #000b);pointer-events:none}
.calendar-panel{--stat-label-height:28px;--stat-value-height:44px}
.calendar-panel .stats-grid.has-net{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto;row-gap:0;align-items:stretch;min-width:0;max-width:100%}
.calendar-panel .has-net .stat{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--stat-label-height) var(--stat-value-height);align-items:stretch;min-width:0;margin:0;padding:0;border:0}
.calendar-panel .has-net .stat>span{min-width:0;display:flex;align-items:center;justify-content:center;width:100%;height:var(--stat-label-height);min-height:0;margin:0;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.calendar-panel .has-net .stat>.stat-value{min-width:0;display:grid;place-items:center;align-self:stretch;width:100%;height:var(--stat-value-height);min-height:var(--stat-value-height);margin:0;padding:0;line-height:1.25;border:1px solid transparent;box-sizing:border-box}
.calendar-panel .stat-number-line{display:inline-flex;align-items:baseline;justify-content:center;gap:3px;min-width:0;max-width:100%}
.calendar-panel .has-net .stat-number-line small{margin:0;white-space:nowrap;flex:none}
.calendar-panel .stat-number{display:block;line-height:1.25;white-space:nowrap}
.calendar-panel .has-net .stat>.net-stat{border-color:var(--gold);font-size:calc(var(--font-sm) * 1.125);white-space:nowrap;overflow-wrap:normal}
.calendar-panel .net-stat-value{max-width:100%;white-space:normal;overflow-wrap:anywhere}
#leave-balance-form{margin-top:var(--space-3)}
#leave-balance-form .button{margin-top:var(--space-3)}
.legacy-leave{font-size:var(--font-sm);color:var(--muted);margin-top:var(--space-3);line-height:1.6}
/* Desktop spacing; cell size is independent of the number of weeks. */
@media(min-width:701px){
 main.grafik-page{padding-block:10px}
 .grafik-page .calendar-panel{--calendar-inset:16px;--stat-value-height:56px;padding:var(--calendar-inset);overflow:visible}
 .grafik-page .calendar-identity{margin-bottom:4px}
 .grafik-page .calendar-toolbar{margin-bottom:8px}
 .grafik-page .calendar-weekdays{margin-bottom:6px}
 .calendar-panel .month-summary{padding:12px 0 0}
 .calendar-panel .stats-grid.has-net{column-gap:12px}
 .calendar-panel .has-net .stat>.net-stat{font-size:clamp(12px,2.3vw,calc(1.875rem * 1.125))}
}
.legacy-leave summary{cursor:pointer}
.setup-empty{padding:var(--card-inset);max-width:640px;margin:auto;text-align:center}
.setup-empty p{color:var(--muted);line-height:1.6}.setup-empty .button{margin:8px;max-width:100%}
@media(max-width:700px){
 .bottom-nav .nav-item{grid-template-rows:27px 1.2em}
 .bottom-nav .nav-item span{white-space:nowrap}
 .workspace>main:not(.grafik-page){padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){.bottom-nav{gap:0;padding-left:max(1px,env(safe-area-inset-left));padding-right:max(1px,env(safe-area-inset-right))}}

/* v88 review: all eight columns fit; only worksheet rows scroll. */
.avatar{width:52px;height:52px;flex:none}
.calendar-panel{padding:var(--calendar-inset,var(--card-inset))}
.calendar-panel .month-summary{margin:0;padding:12px 0 0}
@media(max-width:700px){
 .topbar{min-height:72px;padding-block:8px}
 .topbar-right{gap:10px;min-width:0}
 .avatar{width:56px;height:56px}
 .avatar img{width:100%;height:100%;object-fit:cover}
 .calendar-panel{padding:var(--calendar-inset,var(--card-inset))}
 .calendar-panel .month-summary{margin:0;padding:12px 0 0}
 .calendar-panel{--stat-label-height:36px}
 .calendar-panel .month-summary{max-width:100%;padding:12px 4px 4px;box-sizing:border-box}
 .calendar-panel .stats-grid.has-net{column-gap:4px}
 .calendar-panel .has-net .stat>span{font-size:clamp(10px,2.6vw,12px)}
 .calendar-panel .has-net .stat>.stat-value{font-size:clamp(14px,3.8vw,24px)}
 .calendar-panel .has-net .stat-number-line{gap:2px}
 .calendar-panel .has-net .stat-number-line small{font-size:clamp(7px,1.8vw,9px)}
 .calendar-panel .has-net .stat>.net-stat{font-size:clamp(11px,2.8vw,15px)}
 .calendar-panel .has-net .stat>.net-stat[aria-pressed=false]{font-size:clamp(16px,4vw,20px)}
 .details-table-scroll{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;max-width:100%}
 .details-table{width:100%;min-width:0;table-layout:fixed}
 .details-table .date-col{width:13%}.details-table .shift-col{width:9%}.details-table .total-col{width:11%}.details-table .net-col{width:20%}
 .details-table col:not([class]){width:11.75%}
 .details-table th,.details-table td{height:40px;padding:3px 1px;font-size:11px;line-height:1.25;vertical-align:middle}
 .details-table thead th{height:40px;font-size:10px;letter-spacing:-.25px;white-space:nowrap;padding-inline:0}
 .details-table .day-control{width:100%;min-width:0;height:32px;min-height:32px;padding:0 1px;font-size:10px;gap:2px;border-radius:5px}
 .details-table .day-control span{font-size:8px}
 .details-table .shift-badge{width:100%;min-width:0;height:32px;min-height:32px;padding:0;font-size:12px;border-radius:5px}
 .details-table .day-total,.details-table .hours-input,.details-table tfoot td:nth-child(n+3):nth-child(-n+7){font-size:12px;line-height:1.25}
 .details-table .hours-input{width:100%;max-width:100%;min-width:0;height:32px;padding:0;border-width:0}
 .details-table .day-net,.details-table tfoot td:last-child{font-size:12px;line-height:1.25;letter-spacing:-.25px}
 .details-table tfoot th,.details-table tfoot td{height:40px;padding-inline:0}
}

.deductions-info-heading{font-size:12px;color:var(--muted);font-weight:500;margin:12px 0 4px}

/* The calendar's bottom gutter matches its right inner gutter. Natural block
   height includes every week; six-week months scroll rather than shrink cells. */
.calendar-panel{overflow:visible}
.calendar-panel .calendar-grid{margin-block-end:var(--calendar-inset,var(--card-inset))}

/* Restore the approved compact worksheet and inset date/shift buttons.
   Scoped to Szczegóły; the calendar, themes and payroll cards keep their layout. */
.details-table th,.details-table td{height:38px;padding:3px 4px;text-align:center;vertical-align:middle}
.details-table thead th,.details-table tfoot th,.details-table tfoot td{height:38px}
.details-table .day-control,.details-table .shift-badge{height:28px;min-height:28px;border-radius:6px;font-size:11px}
.details-table .day-control{min-width:44px;width:auto;padding-inline:5px;gap:4px}
.details-table .day-control span{font-size:9px;color:inherit}
.details-table .shift-badge{width:28px;min-width:28px;padding-inline:3px}
.details-table .day-total,.details-table .hours-input,.details-table .day-net,.details-table tfoot td:nth-child(n+3){font:400 12px/1.25 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;text-align:center;vertical-align:middle;font-variant-numeric:tabular-nums}
.details-table .hours-input{height:28px;min-height:0}
.details-table tbody th:first-child{border-right-width:1px}
.details-table .selected-row{outline:1px solid var(--gold);outline-offset:-1px;box-shadow:none}
@media(max-width:700px){
 .details-table-scroll{overflow-x:auto;overflow-y:auto}
 .details-table .date-col{width:15%}.details-table .shift-col{width:10%}.details-table .total-col{width:11%}.details-table .net-col{width:18%}
 .details-table col:not([class]){width:11.5%}
 .details-table th,.details-table td,.details-table th:nth-child(n+3),.details-table td:nth-child(n+3){height:36px;padding:3px 2px}
 .details-table thead th,.details-table tfoot th,.details-table tfoot td{height:36px;padding-inline:0}
 .details-table thead th:nth-child(n+3),.details-table tfoot td:nth-child(n+3){padding-inline:0}
 .details-table .day-control{width:100%;min-width:0;gap:2px;padding-inline:1px;font-size:10px}
 .details-table .day-control span{font-size:8px}
 .details-table .shift-badge{width:100%;min-width:0;padding-inline:0}
 .details-table .day-net,.details-table tfoot td:last-child{letter-spacing:-.25px}
}
@media(max-width:360px){
 .details-table thead th{font-size:9px}
 .details-table thead th:nth-child(4){letter-spacing:-.6px}
 .details-table .day-net,.details-table tfoot td:last-child{font-size:11px}
}