/* My Utilization (utilization.js), from the Prezlab design: period header and navigation, the two lead tiles, the hour
   tiles, the period in a sentence, the breakdown (daily calendar, projects, overtime), where the time went and the
   trend. Levels: 80% or more good (teal), 50% or more mid (yellow), below 50% low (red). .sk-uz is its loading shape. */

/* ---------- Tokens used only here ---------- */
:root{--bar:var(--dark-teal);--bar-muted:#c9d8db;--low:#eaa9a6;--low-num:#8a1c22;--low-soft:#f6dad8;--low-ink:#8a1c22;--mid-bar:#cdbd3a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bar:var(--off-white);--bar-muted:#24555b;--low-soft:#5b2b2f;--low-ink:#ffc4bf}}
:root[data-theme="dark"]{--bar:var(--off-white);--bar-muted:#24555b;--low-soft:#5b2b2f;--low-ink:#ffc4bf}

.uz-page{display:grid;gap:var(--s5);min-width:0}
.uz-page .i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Header: the period, its sync time, the view and navigation ---------- */
.uz-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap}
.uz-title{margin:0;font:700 34px/1.05 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.uz-title em{font-family:var(--editorial);font-style:italic;font-weight:400;letter-spacing:-.035em}
.uz-sync{display:block;margin-top:var(--s2);font-size:12.5px;color:var(--ink-soft)}
.uz-sync.error{color:var(--danger)}
.uz-filters{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.uz-nav{display:flex;align-items:center;border:1px solid var(--line);background:var(--bg)}
.uz-nav .icon-button{border:0;width:38px;height:38px}
.uz-nav .icon-button:disabled{opacity:.35;cursor:default}
.uz-nav span{min-width:170px;text-align:center;font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums}

/* ---------- Lead tiles and hour tiles ---------- */
.uz-big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.uz-tile{display:grid;gap:10px;align-content:start;padding:var(--s5);color:var(--dark-teal)}
.uz-tile.low{background:var(--low)}.uz-tile.mid{background:var(--yellow)}.uz-tile.good{background:var(--light-teal)}
.uz-tile .eyebrow{color:var(--dark-teal)}
.uz-tile .v{font:italic 200 76px/.9 var(--editorial);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.uz-tile.low .v{color:var(--low-num)}
.uz-tile .s{font-size:14.5px;font-weight:600}
.uz-delta{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:700}
.uz-delta .i{width:16px;height:16px}
.uz-small{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.uz-small.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.uz-st{display:grid;gap:8px;align-content:start;min-width:0;padding:var(--s5) var(--s4);background:var(--panel)}
.uz-st .v{font:700 30px/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.uz-st .s{font-size:12.5px;color:var(--ink-soft)}
.uz-st .uz-delta{color:var(--ink-soft);font-weight:600}
.uz-insight{margin:0;max-width:70ch;font-size:15px;color:var(--ink)}

/* ---------- Panels ---------- */
.uz-main{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.uz-panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.uz-panel-head h2{margin:0;font:700 17px/1.2 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.uz-tabs{justify-self:start}
.uz-note{margin:0;font-size:13px;color:var(--ink-soft)}
.uz-strong{color:var(--ink)}
.uz-muted{color:var(--ink-soft)}
.uz-empty{padding:var(--s6) var(--s4);text-align:center;color:var(--ink-soft)}
.uz-empty b{display:block;margin-bottom:4px;font-size:15px;color:var(--ink)}
.uz-swatch{width:10px;height:10px;flex:none;border-radius:50%;background:var(--sw)}
.uz-swatch.sq{border-radius:0}
.uz-link{padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer}
.uz-link:hover,.uz-link[aria-current=true]{text-decoration-thickness:2px}
.uz-pill{padding:3px 8px;font-weight:700;font-size:13px;color:var(--dark-teal);font-variant-numeric:tabular-nums;white-space:nowrap}
.uz-pill.low{background:var(--low-soft);color:var(--low-ink)}.uz-pill.mid{background:var(--yellow)}.uz-pill.good{background:var(--light-teal)}

/* ---------- Daily calendar ---------- */
.uz-cal-months{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.uz-cal-months.one{grid-template-columns:minmax(0,1fr)}
.uz-cal-m h3{margin:0 0 6px;font:700 13px/1.2 var(--sans);color:var(--ink)}
.uz-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.uz-cal-h{font-size:11.5px;font-weight:700;color:var(--ink-soft);text-align:center}
.uz-cal-c{position:relative;display:grid;align-content:center;justify-items:center;gap:2px;min-height:62px;padding:6px 2px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}
.uz-cal-c:hover{border-color:var(--ink)}
.uz-cal-c .dn{font-size:11.5px;color:var(--ink-soft);font-weight:600}
.uz-cal-c .lb{font-size:13px;font-weight:700}
.uz-cal-c .tags{position:absolute;top:3px;inset-inline-end:3px;display:flex;gap:2px}
.uz-cal-c .tags i,.uz-cal-legend i{font-style:normal;font-weight:800;color:var(--dark-teal)}
.uz-cal-c .tags i{font-size:9px;padding:1px 3px}
.uz-tg-to{background:var(--lavender)}.uz-tg-ph{background:var(--sand)}.uz-tg-ot{background:var(--orange)}
.uz-cal-c.s-ok,.uz-cal-legend b.s-ok{background:color-mix(in srgb,var(--light-teal) 55%,var(--bg));border-color:var(--light-teal)}
.uz-cal-c.s-under,.uz-cal-legend b.s-under{background:color-mix(in srgb,var(--yellow) 60%,var(--bg));border-color:#e2dc6f}
.uz-cal-c.s-none,.uz-cal-legend b.s-none{background:var(--low-soft);border-color:var(--low)}
.uz-cal-c.s-wk{background:transparent;border-color:transparent;opacity:.5}
.uz-cal-c.s-up,.uz-cal-legend b.s-up{border-style:dashed;border-color:var(--line-strong)}
.uz-cal-c.s-ph{background:color-mix(in srgb,var(--sand) 60%,var(--bg));border-color:var(--sand)}
.uz-cal-c.s-to{background:color-mix(in srgb,var(--lavender) 55%,var(--bg));border-color:var(--lavender)}
.uz-cal-c.is-sel{outline:2px solid var(--ink);outline-offset:1px}
.uz-cal-c.blank{visibility:hidden}
.uz-cal.compact{gap:3px}
.uz-cal.compact .uz-cal-c{min-height:24px;padding:0}
.uz-cal.compact .lb,.uz-cal.compact .tags{display:none}
.uz-cal.compact .dn{font-size:10.5px}
.uz-cal-legend{display:flex;flex-wrap:wrap;gap:6px var(--s4);align-items:center;font-size:12px;color:var(--ink-soft)}
.uz-cal-legend span{display:inline-flex;align-items:center;gap:6px}
.uz-cal-legend b{display:inline-block;width:12px;height:12px;border:1px solid var(--line)}
.uz-cal-legend i{font-size:9.5px;padding:1px 4px}

/* ---------- Day detail, projects and overtime ---------- */
.uz-day{display:grid;gap:var(--s3);padding-top:var(--s4);border-top:1px solid var(--line)}
.uz-day-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.uz-day-h b{font-size:15px;color:var(--ink)}
.uz-day-h span{font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.uz-pj{display:grid}
.uz-pj-head{display:flex;justify-content:space-between;gap:var(--s3);padding-bottom:6px;font-size:12px;color:var(--ink-soft)}
.uz-pj-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px var(--s3);align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.uz-pj-row:first-of-type{border-top:0}
.uz-pj-name{display:flex;gap:10px;align-items:center;min-width:0}
.uz-pj-name span:last-child{min-width:0}
.uz-pj-name b{display:block;overflow:hidden;font-size:14px;white-space:nowrap;text-overflow:ellipsis;color:var(--ink)}
.uz-pj-num{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.uz-pj-bar{position:relative;grid-column:1/-1;height:6px;background:var(--bg)}
.uz-pj-bar i{position:absolute;inset-block:0;inset-inline-start:0;border:1px solid var(--line-strong)}
.uz-pj-bar b{position:absolute;inset-block:0;inset-inline-start:0;background:var(--bar)}
.uz-pj-bar b.ot{background:var(--orange)}
.uz-lines{width:100%;border-collapse:collapse;font-size:12.5px}
.uz-lines th{padding:6px 8px 6px 0;border-bottom:1px solid var(--line-strong);text-align:start;font-weight:700;color:var(--ink-soft)}
.uz-lines td{padding:7px 8px 7px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.uz-lines .n{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Where your time went ---------- */
.uz-wt{display:grid}
.uz-wt-who{padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.uz-wt-who b{display:block;font-size:15.5px;color:var(--ink)}
.uz-wt-who span{font-size:13px;color:var(--ink-soft)}
.uz-wt-sec{margin:var(--s5) 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.uz-wt-row{display:flex;justify-content:space-between;gap:var(--s3);padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink)}
.uz-wt-row b{font-variant-numeric:tabular-nums;white-space:nowrap}
.uz-wt-row.total{border-top:1px solid var(--line-strong);border-bottom:0;font-weight:700}
.uz-wt-row .d{margin-inline-start:auto;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.uz-wt-util{display:grid;gap:10px;padding:10px 0 14px}
.uz-wt-util .top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.uz-wt-util .top b{font-size:15px;color:var(--ink)}
.uz-wt-util .top span{display:inline-flex;align-items:center;gap:var(--s3);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.uz-wt-bar{position:relative;height:6px;background:var(--bg)}
.uz-wt-bar b{position:absolute;inset-block:0;inset-inline-start:0}
.uz-wt-bar b.low{background:var(--low)}.uz-wt-bar b.mid{background:var(--mid-bar)}.uz-wt-bar b.good{background:var(--bar)}

/* ---------- Trend: chart and table ---------- */
.uz-trend-tools{display:flex;gap:var(--s2);align-items:center}
.uz-legend{display:flex;flex-wrap:wrap;gap:6px var(--s4);font-size:12.5px;color:var(--ink-soft)}
.uz-legend span{display:inline-flex;align-items:center;gap:6px}
.table-scroll{overflow-x:auto}
.uz-chart{display:block;width:100%;min-width:560px;height:auto}
.uz-chart text{fill:var(--ink-soft);font:600 11px var(--sans)}
.uz-chart .val{fill:var(--ink);font-weight:700}
.uz-chart .grid{stroke:var(--line);stroke-width:1}
.uz-chart .bb{fill:var(--bar-muted)}
.uz-chart .bl.low{fill:var(--low)}.uz-chart .bl.mid{fill:var(--mid-bar)}.uz-chart .bl.good{fill:var(--bar)}
.uz-chart .selbox{fill:none;stroke:var(--ink);stroke-width:1.5}
.uz-chart .hit{fill:transparent;cursor:pointer}
.uz-chart .hit:hover,.uz-chart .hit:focus-visible{fill:color-mix(in srgb,var(--accent) 25%,transparent);outline:none}
.uz-plain{width:100%;border-collapse:collapse;font-size:13.5px}
.uz-plain th{padding:0 var(--s3) var(--s2) 0;border-bottom:1px solid var(--line-strong);text-align:start;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.uz-plain td{padding:12px var(--s3) 12px 0;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink)}
.uz-plain .n{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Loading shape (loadingSkeleton('utilization') in app.js) ---------- */
.sk-uz{display:grid;gap:var(--s5)}
.sk-uz .skeleton-block{border-radius:0}
.sk-uz-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap}
.sk-uz-head>div:first-child{display:grid;gap:var(--s2)}
.sk-uz .sk-uz-title{width:260px;height:34px}
.sk-uz .sk-uz-sync{width:120px;height:12px}
.sk-uz-filters{display:flex;gap:var(--s2);flex-wrap:wrap}
.sk-uz .sk-uz-seg{width:330px;height:40px}
.sk-uz .sk-uz-nav{width:250px;height:40px}
.sk-uz .sk-uz-button{width:104px;height:40px}
.sk-uz-big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.sk-uz-big .skeleton-block{height:190px}
.sk-uz-small{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.sk-uz-small .skeleton-block{height:132px}
.sk-uz .sk-uz-insight{width:min(640px,100%);height:16px}
.sk-uz-main{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.sk-uz-panel{display:grid;align-content:start;gap:var(--s4);padding:var(--s5);background:var(--panel)}
.sk-uz .sk-uz-panel-title{width:180px;height:18px}
.sk-uz .sk-uz-tabs{width:300px;height:40px}
.sk-uz .sk-uz-row{height:20px}
.sk-uz-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.sk-uz-cal .skeleton-block{height:62px}
.sk-uz .sk-uz-chart{height:240px}

/* ---------- Narrow screens ---------- */
@media (max-width:1100px){.uz-main,.sk-uz-main{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
 .uz-title{font-size:28px}
 .uz-tile .v{font-size:52px}
 .uz-small,.uz-small.three,.sk-uz-small{grid-template-columns:repeat(2,minmax(0,1fr))}
 .uz-filters{width:100%}
 .uz-nav{flex:1}.uz-nav span{flex:1;min-width:0}
 .uz-cal-c{min-height:52px}.uz-cal-c .lb{font-size:11.5px}
 .sk-uz .sk-uz-seg,.sk-uz .sk-uz-nav{width:100%}
 .sk-uz-cal .skeleton-block{height:52px}
}
@media (max-width:480px){
 .uz-big,.sk-uz-big{grid-template-columns:minmax(0,1fr)}
 .uz-filters .segmented{width:100%}.uz-filters .segmented button{flex:1}
 .uz-cal{gap:2px}.uz-cal-c{min-height:44px}.uz-cal-c .lb{font-size:10.5px}.uz-cal-c .tags{display:none}
}