/* Timesheet v2: weekly strip and notched KPI pill from the delivered reference.
   Workflow IDs, dialogs, permissions and snapshot semantics remain unchanged. */
:root {
 --timesheet-pill-width:404px;
 --timesheet-notch:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22460%22%20height%3D%2260%22%3E%3Cpath%20d%3D%22M0%20-1H460V0Q440%200%20440%2020V36Q440%2060%20416%2060H44Q20%2060%2020%2036V20Q20%200%200%200Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
 --timesheet-notch-width:460px;
 --timesheet-notch-height:60px;
 --timesheet-week-min:640px;
 --timesheet-day-min:240px;
 --timesheet-bar-width:34px;
}
.app-shell [data-view-panel="timesheet"] .page-heading {margin-bottom:var(--s-8)}
.app-shell [data-view-panel="timesheet"]>.muted {color:var(--ink2);font-size:var(--fs-sm)}
.app-shell .timesheet-toolbar {display:flex;justify-content:flex-end;margin:var(--s-8) 0 var(--s-12)}
#timesheetScopeTabs {display:flex;gap:var(--s-2);padding:var(--s-2);border:1px solid var(--btn-brd);border-radius:var(--r-pill);background:var(--btn)}
#timesheetScopeTabs[hidden],#timesheetScopeNative[hidden] {display:none!important}
#timesheetScopeTabs button {min-height:44px;padding:var(--s-6) var(--s-10);border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink2);font-family:var(--font);font-size:var(--fs-base);cursor:pointer}
#timesheetScopeTabs button[aria-selected="true"] {background:var(--acc);color:var(--on-acc)}
.timesheet-week-card {position:relative;isolation:isolate;padding:var(--s-10);margin-block:var(--s-12);min-width:0;border-radius:var(--r-3xl)}
.timesheet-week-card::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--glass);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-brd);border-radius:var(--r-3xl);box-shadow:var(--sh);mask:var(--timesheet-notch) top center no-repeat,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask:var(--timesheet-notch) top center no-repeat,linear-gradient(#000 0 0);-webkit-mask-composite:xor}
.app-shell .timesheet-kpi-pill {position:absolute;top:5px;left:50%;transform:translateX(-50%);z-index:1;display:flex;align-items:center;width:min(var(--timesheet-pill-width),calc(100% - 40px));min-height:50px;height:auto;margin:0;padding:var(--s-4);border:1px solid var(--glass-brd);border-radius:var(--r-pill);background:var(--glass-2);box-shadow:none}
.app-shell .timesheet-kpi-pill .summary-card {flex:1;min-width:0;text-align:center;background:transparent;border:0;border-radius:0;padding:0 var(--s-4);box-shadow:none;display:flex;flex-direction:column-reverse;gap:var(--s-2)}
.app-shell .timesheet-kpi-pill .summary-card+.summary-card {border-inline-start:1px solid var(--line-2)}
.app-shell .timesheet-kpi-pill .summary-card strong {font-family:UTNum,Poppins,sans-serif;font-size:var(--fs-lg);font-weight:500;line-height:1.2;overflow-wrap:anywhere;margin:0;color:var(--ink)}
.app-shell .timesheet-kpi-pill .summary-card span {font-size:var(--fs-2xs);color:var(--ink2);line-height:1.2}
.app-shell .timesheet-kpi-pill #displayTimezone {font-size:var(--fs-sm)}
.timesheet-week-heading {display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);min-height:46px;margin-bottom:var(--s-10)}
.timesheet-week-heading h2 {margin:0;font-size:var(--fs-xl);font-weight:500;color:var(--ink)}
.timesheet-week-navigation {display:flex;gap:var(--s-5);align-items:center}
.timesheet-week-navigation button {min-width:44px;min-height:44px;padding:var(--s-6);border:1px solid var(--btn-brd);border-radius:var(--r-pill);background:var(--btn);color:var(--ink);font-family:var(--font);cursor:pointer}
.timesheet-week-scroller {overflow-x:auto;min-width:0;max-width:100%;padding-bottom:var(--s-4)}
.app-shell .timesheet-week-card .week-grid {display:grid;grid-template-columns:repeat(7,minmax(84px,1fr));gap:var(--s-5);min-width:var(--timesheet-week-min);margin:0}
.app-shell .timesheet-week-card .day-cell {display:flex;flex-direction:column;gap:var(--s-5);min-height:var(--timesheet-day-min);padding:var(--s-7) var(--s-5);border:1px solid var(--card-brd);border-radius:var(--s-12);background:var(--card);color:var(--ink);box-shadow:none}
.app-shell .timesheet-week-card .day-cell.today-cell {background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.timesheet-day-heading {display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);font-size:var(--fs-base)}
.timesheet-day-heading bdi {font-size:var(--fs-xs)}
.timesheet-day-plot {flex:1;min-height:120px;display:flex;align-items:flex-end;justify-content:center}
.timesheet-day-bar {width:var(--timesheet-bar-width);border-radius:var(--s-6);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.timesheet-bar {display:block;flex-shrink:0;min-height:0}
.timesheet-bar.billable {background:var(--blue)}
.timesheet-bar.non-billable {background:var(--red)}
.timesheet-bar.unknown {background:var(--ink2)}
/* On the inverted today card the segment colours fall below 3:1 against the
   card (dark: all three; light: unknown), so each segment carries an outline
   in --on-acc (the card's text colour), which keeps 3:1 against the card in both themes. */
.app-shell .timesheet-week-card .today-cell .timesheet-bar {box-shadow:inset 0 0 0 2px var(--on-acc)}
.app-shell .timesheet-week-card .day-cell strong {font-family:UTNum,Poppins,sans-serif;font-size:18px;font-weight:500;line-height:1.2;color:inherit}
.timesheet-week-legend {display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s-9);margin-top:var(--s-7);font-size:var(--fs-sm);color:var(--ink2)}
.timesheet-week-legend span::before {content:"";display:inline-block;width:9px;height:9px;border-radius:3px;margin-inline-end:var(--s-3);background:var(--blue)}
#timesheetLegendNonBillable::before {background:var(--red)}
#timesheetLegendUnknown::before {background:var(--ink2)}
#timesheetLegendUnknown[hidden] {display:none!important}
.timesheet-local-note {margin:var(--s-8) 0 0;font-size:var(--fs-sm);color:var(--ink2);text-align:center}
.app-shell .timesheet-layout {display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1fr);gap:var(--s-9);align-items:start}
.timesheet-period-card,.timesheet-detail-card {min-width:0;padding:var(--s-10);border:1px solid var(--glass-brd);border-radius:var(--r-3xl);background:var(--glass);backdrop-filter:var(--glass-blur);box-shadow:var(--sh)}
.timesheet-period-heading {display:flex;align-items:center;justify-content:space-between;gap:var(--s-8);margin-bottom:var(--s-6)}
.timesheet-period-heading h2 {font-size:var(--fs-xl);font-weight:500;margin:0;color:var(--ink)}
#timesheetNewPeriod {min-width:44px;font-size:var(--fs-2xl)}
.app-shell .timesheet-list {display:flex;flex-direction:column;gap:var(--s-4);background:transparent;border:0;border-radius:0;margin:0;padding:0;box-shadow:none}
.app-shell .timesheet-list-item {min-height:62px;padding:var(--s-6) var(--s-7);border:1px solid transparent;border-radius:var(--r-xl);background:transparent;color:var(--ink);font-family:var(--font);font-size:var(--fs-base)}
.app-shell .timesheet-list-item.active {background:var(--glass-2);border-color:var(--glass-brd)}
.app-shell .timesheet-list-item>span:not(.timesheet-state) {color:var(--ink2);font-size:var(--fs-sm)}
.app-shell .timesheet-detail {background:transparent;border:0;border-radius:0;padding:0;margin:0;box-shadow:none}
.app-shell .timesheet-detail>.muted,.app-shell .timesheet-event span,.app-shell .timesheet-totals span {color:var(--ink2);font-size:var(--fs-sm)}
.app-shell .timesheet-detail h2 {font-size:var(--fs-xl);font-weight:500}
.app-shell .timesheet-note {background:var(--blue-soft);color:var(--ink);border-color:var(--blue-ink);border-radius:var(--r-md);font-size:var(--fs-sm)}
.app-shell .timesheet-totals {padding:var(--s-8);border:1px solid var(--card-brd);border-radius:var(--r-xl);background:var(--card)}
.app-shell .timesheet-totals strong {font-family:UTNum,Poppins,sans-serif;font-size:44px;font-weight:300;line-height:1.2}
.app-shell .timesheet-state {font-size:var(--fs-xs);font-weight:500;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--btn);color:var(--ink2)}
.app-shell .timesheet-state.submitted {background:var(--blue-soft);color:var(--blue-ink)}
.app-shell .timesheet-state.approved {background:var(--acc);color:var(--on-acc)}
.app-shell .timesheet-state.rejected {background:var(--red-soft);color:var(--red-ink)}
.app-shell .timesheet-actions button,#timesheetSubmit {min-height:44px;padding:var(--s-6) var(--s-8);border:1px solid var(--btn-brd);border-radius:var(--r-pill);font-family:var(--font);font-size:var(--fs-base)}
.app-shell .timesheet-consent {font-size:var(--fs-sm);color:var(--ink2);gap:var(--s-6)}
.app-shell .timesheet-consent input {width:18px;height:18px}
.app-shell .timesheet-review-blocks {border:1px solid var(--glass-brd);border-radius:var(--r-3xl);background:var(--glass);color:var(--ink);padding:var(--s-10)}
#newTimesheetDialog {max-width:calc(100vw - 32px);color:var(--ink);font-family:var(--font)}
#newTimesheetDialog .timesheet-create {width:min(680px,calc(100vw - 32px));margin:0;padding:var(--s-12);border:1px solid var(--glass-brd);border-radius:var(--r-3xl);background:var(--glass-2);backdrop-filter:var(--glass-blur);box-shadow:var(--sh)}
#newTimesheetDialog .timesheet-form-row {grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8)}
#newTimesheetDialog h2 {font-size:var(--fs-2xl);font-weight:500;color:var(--ink)}
#newTimesheetDialog label {font-size:var(--fs-sm);color:var(--ink2)}
#newTimesheetDialog input,#newTimesheetDialog select {min-height:44px;border-radius:var(--r-md);background:var(--card);color:var(--ink);font-family:var(--font)}
#newTimesheetDialog button {min-height:44px;border-radius:var(--r-pill);font-family:var(--font)}
#newTimesheetDialog :focus-visible {outline:3px solid var(--ink);outline-offset:3px}
@media(max-width:1180px) {.timesheet-week-heading {padding-top:64px}}
@media(max-width:950px) {.app-shell .timesheet-layout {grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px) {
 :root {--timesheet-pill-width:276px;--timesheet-notch:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%2260%22%3E%3Cpath%20d%3D%22M0%20-1H320V0Q300%200%20300%2020V36Q300%2060%20276%2060H44Q20%2060%2020%2036V20Q20%200%200%200Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E")}
 .timesheet-week-card {padding:var(--s-8)}
 .timesheet-week-heading {flex-direction:column;align-items:stretch;gap:var(--s-8)}
 .timesheet-week-navigation {justify-content:flex-end}
 .timesheet-week-heading h2 {font-size:var(--fs-lg)}
 .app-shell .timesheet-kpi-pill .summary-card strong {font-size:var(--fs-sm)}
 .app-shell .timesheet-kpi-pill #displayTimezone {font-size:10px}
 .timesheet-period-card,.timesheet-detail-card {padding:var(--s-8)}
 #newTimesheetDialog .timesheet-form-row {grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce) {.timesheet-week-card * {animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.app-shell .timesheet-week-card .today-cell .timesheet-day-heading span,.app-shell .timesheet-week-card .today-cell .timesheet-day-heading bdi {color:inherit}
@media(max-width:320px) {
 .app-shell .timesheet-kpi-pill {position:relative;left:auto;top:auto;transform:none;width:100%;flex-wrap:wrap;gap:var(--s-8);margin-bottom:var(--s-8)}
 .app-shell .timesheet-kpi-pill .summary-card {flex-basis:100%;border:0}
 .timesheet-week-heading {padding-top:0}
}
/* A native modal must own its width; intrinsic form width must not push it off
   the layout viewport on narrow screens. Scroll the modal, not the page. */
#newTimesheetDialog {inset:0;margin:auto;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box}
#newTimesheetDialog .timesheet-create {width:100%;max-width:100%;box-sizing:border-box}
#newTimesheetDialog .timesheet-form-row,#newTimesheetDialog label {min-width:0;max-width:100%}
#newTimesheetDialog input,#newTimesheetDialog select {min-width:0;max-width:100%;box-sizing:border-box;border-color:var(--line-2)}
#newTimesheetDialog .primary-btn {background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
#newTimesheetDialog .secondary-btn {background:var(--btn);color:var(--ink);border-color:var(--line-2)}
/* Keep intrinsic chart/table widths inside their own scrollers. The mobile
   fixed grid-child navigation must also use the device viewport, not an
   expanded layout viewport produced by min-content sizing. */
.timesheet-week-scroller,.timesheet-entry-table {width:100%;max-width:100%;min-width:0;contain:inline-size;overflow-x:auto}
.timesheet-week-card,.timesheet-period-card,.timesheet-detail-card {width:100%;max-width:100%;min-width:0;box-sizing:border-box}
@media(max-width:760px) {
 .app-shell .nav {grid-column:auto;grid-row:auto;width:100vw;max-width:100vw;box-sizing:border-box}
}
/* The measured overflow originates inside the weekly scroller. Establish its
   containing block and paint boundary so positioned grid descendants cannot
   contribute scrollable overflow to the page, while retaining local scrolling. */
.timesheet-week-scroller {position:relative;contain:layout paint inline-size;isolation:isolate}