:root{--ink:#16352f;--muted:#70817b;--accent:#24765b;--line:#dfe7e0;--paper:#f3f5ef}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Segoe UI,Arial,sans-serif;font-size:14px}a{color:var(--accent)}button,input,select,textarea{font:inherit}button{border:1px solid var(--accent);border-radius:7px;padding:10px 16px;background:var(--accent);color:white;font-weight:600;cursor:pointer}button:hover{filter:brightness(.94)}button:disabled{opacity:.5;cursor:default}button.secondary{background:white;color:var(--ink);border-color:var(--line)}.app-shell{display:flex;min-height:100vh}.sidebar{width:235px;background:#163c32;color:#eef4ef;position:fixed;inset:0 auto 0 0;padding:34px 22px;display:flex;flex-direction:column}.brand{font-size:44px;letter-spacing:-3px;color:white;text-decoration:none;font-weight:750}.brand span{display:block;font-size:11px;letter-spacing:.2px;font-weight:400;color:#a8c5b8;margin-top:2px}.sidebar nav{margin-top:55px;display:grid;gap:8px}.sidebar nav a{color:#c7d9cf;padding:13px 16px;text-decoration:none;border-radius:7px}.sidebar nav a.active{background:#315a48;color:white}.sidebar-footer{margin-top:auto;font-size:12px;line-height:1.8;color:#a8c5b8}.workspace{margin-left:235px;width:calc(100% - 235px)}.topbar{height:72px;border-bottom:1px solid var(--line);background:#fff9;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;letter-spacing:.7px}main{max-width:1500px;margin:auto;padding:38px 40px 60px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}h1{font-size:34px;letter-spacing:-1px;font-weight:650;margin:5px 0 12px}h2{font-size:18px;font-weight:650;margin:0 0 15px}h3{font-size:18px}.eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:700;color:var(--accent);margin:0 0 8px}.muted{color:var(--muted)}.branch-tabs{display:flex;gap:5px;overflow-x:auto;margin-bottom:24px;border-bottom:1px solid var(--line)}.tab{background:transparent;color:var(--muted);border:0;border-radius:0;border-bottom:3px solid transparent;white-space:nowrap;padding:13px 17px}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.tab span,.count{font-size:11px;background:#e2eae0;border-radius:12px;padding:2px 7px;margin-left:5px}.panel{background:white;border:1px solid var(--line);border-radius:12px;padding:25px;margin-bottom:22px}.section-heading,.actions{display:flex;align-items:center;gap:9px}.section-heading{justify-content:space-between;margin-bottom:12px}.section-heading h2{margin:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0}.wide{grid-column:1/-1}label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600}input:not([type=checkbox]),select,textarea{border:1px solid #cdd9d1;border-radius:6px;background:white;padding:10px;color:var(--ink);width:100%;min-width:0}input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent)}.inline{flex-direction:row;align-items:center}.table-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left}th{font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);padding:14px 10px;border-bottom:1px solid var(--line)}td{padding:18px 10px;border-bottom:1px solid #eef1ed;vertical-align:middle}td button{font-size:12px;white-space:nowrap}small{display:block;color:var(--muted);margin-top:5px;font-size:12px}.badge{display:inline-block;background:#edf2e8;color:#53734e;padding:6px 9px;border-radius:5px;font-weight:500}.overdue{color:#a95732}.empty{padding:45px 15px;text-align:center;color:var(--muted)}.notice{padding:14px 18px;background:#edf1dc;border:1px solid #d3dec0;border-radius:7px;margin-bottom:20px}.capacity-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.capacity-number{font-size:40px;font-weight:650;margin:10px 0}.capacity-number span{font-size:19px;font-weight:400;color:var(--muted)}progress{height:8px;width:100%;accent-color:var(--accent)}.date-toolbar{display:flex;align-items:center;gap:25px;margin-bottom:24px}.branch-capacities{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.branch-capacities>div{display:flex;flex-direction:column;gap:8px;border-left:2px solid #d6e4d1;padding-left:12px}.branch-capacities span{font-size:12px;color:var(--muted)}.job-row{display:flex;align-items:center;gap:20px;padding:17px 0;border-top:1px solid var(--line)}.job-row>div:first-child{flex:1}.panel>label{max-width:350px;margin-bottom:18px}.validation-message,.validation-errors{color:#a52c2c}.invalid{outline:1px solid #a52c2c}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid #64748b;outline-offset:2px}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:#64748b}#blazor-error-ui{display:none;position:fixed;bottom:0;background:#fff0c5;width:100%;padding:16px;z-index:1000}#blazor-error-ui .dismiss{float:right;cursor:pointer}
@media(max-width:1100px){.branch-capacities{grid-template-columns:repeat(4,1fr)}main{padding:25px}.sidebar{width:200px}.workspace{margin-left:200px;width:calc(100% - 200px)}}@media(max-width:760px){.app-shell{display:block}.sidebar{position:static;width:100%;padding:15px 20px}.brand{font-size:30px}.brand span,.sidebar-footer{display:none}.sidebar nav{display:flex;margin-top:12px;gap:3px}.sidebar nav a{padding:9px 12px;font-size:12px}.workspace{margin:0;width:100%}.topbar{padding:0 20px;height:50px;font-size:10px}main{padding:24px 16px}.page-heading{align-items:flex-start}h1{font-size:27px}.capacity-grid,.form-grid{grid-template-columns:1fr}.branch-capacities{grid-template-columns:repeat(2,1fr)}.section-heading,.date-toolbar{align-items:flex-start;flex-direction:column}.panel{padding:18px}.actions{flex-wrap:wrap}.job-row{flex-wrap:wrap}.job-row>div:first-child{min-width:60%}}

/* Give the measuring schedule the full available workspace. */
main:has(.dashboard-heading) { max-width: 1500px; padding: 18px 24px; }
@media (min-width: 1101px) and (min-height: 740px) {
    main:has(.dashboard-grid) {
        height: calc(100dvh - 72px);
        padding: 12px 24px;
        display: grid;
        grid-template-rows: auto minmax(270px, 1.6fr) minmax(178px, 1fr) auto;
        gap: 10px;
    }
}
main:has(.measuring-page) { max-width: none; padding: 26px 24px 28px; }
.measuring-page .page-heading { margin-bottom: 18px; }
.measuring-page .branch-tabs { margin-bottom: 18px; }
.measuring-schedule { padding: 18px; min-height: calc(100dvh - 290px); display: flex; flex-direction: column; }
.measuring-schedule .section-heading { flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.schedule-caption { color: var(--muted); font-size: 12px; margin: 7px 0 0; }
.schedule-range-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; padding: 0 0 18px; }
.schedule-range-controls label { min-width: 175px; }
.schedule-search { display: flex; align-items: flex-end; gap: 6px; flex: 1 1 300px; max-width: 420px; min-width: 0; }
.schedule-search label { flex: 1; min-width: 0; }
.schedule-navigation { display: flex; align-items: stretch; gap: 6px; }
.schedule-navigation .schedule-arrow { min-width: 40px; padding: 8px 10px; font-size: 18px; line-height: 1; }
.schedule-range-controls > .muted { align-self: center; font-size: 12px; }
.measuring-input-overview { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.measuring-page .measuring-input-overview .branch-tabs { min-width: 0; margin-bottom: 0; border-bottom: 0; }
.branch-week-overview { min-width: 0; max-width: 100%; }
.branch-week-caption { margin: 0 0 6px; color: var(--muted); font-size: 11px; }
.branch-tabs .branch-week-hours { color: var(--accent); font-size: 11px; font-weight: 600; margin-top: 6px; }
.branch-tabs .branch-week-hours.is-over { color: #b42332; }
.measured-week-counters { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.measured-week-counter { min-width: 190px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: #edf4ee; }
.measured-week-counter > span { display: block; font-size: 12px; font-weight: 600; }
.measured-week-counter > small { font-size: 11px; }
.schedule-range-message { color: var(--accent); font-size: 12px; margin: 0 0 16px; }
.measuring-days-viewport { overflow-x: auto; flex: 1; }
.measuring-days { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 8px; min-height: max(480px, calc(100dvh - 365px)); }
.measuring-day { min-width: 0; background: #f8faf6; border: 1px solid var(--line); border-radius: 6px; }
.measuring-day.is-today { border: 2px solid var(--accent); background: #f0f7ed; }
.measuring-span-grid { position: relative; align-content: start; row-gap: 6px; }
.measuring-day-backdrop { z-index: 0; pointer-events: none; }
.measuring-day-summary { z-index: 1; min-width: 0; padding: 1px; }
.measuring-span { z-index: 1; min-width: 0; margin: 0 7px; align-self: start; background: white; border: 1px solid var(--accent); border-radius: 5px; overflow: hidden; }
.measuring-span .measure-job { border: 0; border-radius: 0; }
.measuring-span-hours { display: grid; background: #edf5ef; border-top: 1px solid var(--line); }
.measuring-span-hours > span { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; font-size: 11px; }
.measuring-span-hours > span + span { border-left: 1px solid var(--accent); }
.measuring-span-note { display: block; padding: 5px 8px; font-size: 11px; }
.measuring-span-empty { z-index: 1; min-width: 0; align-self: start; }
.measuring-day-header { display: flex; align-items: center; gap: 7px; padding: 10px; border-bottom: 1px solid var(--line); }
.measuring-day-header > div { flex: 1; }
.measuring-day-header strong { display: flex; gap: 7px; flex-wrap: wrap; font-size: 13px; }
.measuring-day-header strong span { font-weight: 400; }
.measuring-day-header small { font-size: 11px; }
.today-label { color: var(--accent); font-size: 10px; font-weight: 700; }
.day-add { padding: 2px 8px; font-size: 19px; background: white; color: var(--accent); border-color: var(--line); }
.measuring-day-jobs { padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.day-empty { margin: 48px 0; text-align: center; color: var(--muted); font-size: 12px; }
.measure-job { min-width: 0; background: white; border: 1px solid var(--line); border-radius: 4px; padding: 7px 8px; overflow-wrap: anywhere; line-height: 1.3; }
.measure-job-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12px; }
.measure-job-heading > span { white-space: nowrap; color: var(--muted); font-size: 11px; }
.measure-job-customer { font-weight: 400; }
.measure-job > small { margin-top: 3px; font-size: 11px; }
.measure-job-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.measure-job-measurer { flex: 1; color: var(--muted); font-size: 11px; }
.measure-job .actions { flex-wrap: nowrap; gap: 4px; margin: 0 0 0 auto; }
.measure-job button { min-height: 26px; min-width: 26px; font-size: 11px; line-height: 1; padding: 5px 7px; border-radius: 4px; }
.measure-job.is-measured { border-color: var(--accent); }
.measure-job.is-jobsheeted { background: #e5f3e9; border: 2px solid var(--accent); }
.measure-job.is-on-hold { background: #ffedd5; border: 2px solid #ea580c; }
.hold-label { color: #9a3412; font-size: 10px; font-weight: 700; white-space: nowrap; }
.job-context-target { min-width: 0; }
.job-context-target:focus-visible > article { outline: 2px solid #2563eb; outline-offset: 2px; }
.job-context-dismiss { position: fixed; inset: 0; z-index: 1100; }
.job-context-menu { position: fixed; z-index: 1101; width: 180px; padding: 4px; border: 1px solid var(--line); border-radius: 5px; background: white; box-shadow: 0 4px 16px #0003; }
.job-context-menu button { width: 100%; text-align: left; background: white; color: #9a3412; border: 0; }
.job-context-menu button:hover, .job-context-menu button:focus-visible { background: #ffedd5; }
.jobsheeting-job { display: flex; align-items: center; gap: 4px; padding: 5px; white-space: nowrap; cursor: grab; }
.jobsheeting-job-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.jobsheeting-job-hours { flex-shrink: 0; font-size: 10px; color: var(--muted); }
.jobsheeting-job button { flex-shrink: 0; min-width: 22px; min-height: 24px; padding: 3px; font-size: 14px; }
.jobsheeting-job .job-drag-handle { border: 0; background: transparent; color: var(--muted); cursor: grab; min-width: 16px; }
.jobsheeting-job.is-jobsheeted, .jobsheeting-job .job-drag-handle:disabled { cursor: default; }
.jobsheeting-job[draggable="false"] { cursor: default; }
.jobsheeting-job .job-completion { min-height: 26px; min-width: 26px; font-size: 11px; padding: 5px 7px; }
.job-drop-target { outline: 2px dashed #78a18a; outline-offset: -3px; }
.job-priority-target { min-width: 0; }
.job-priority-target:empty { display: none; }
.job-priority-target.can-reorder { position: relative; }
.job-priority-target.priority-hover::before { content: ""; position: absolute; top: -4px; left: 0; right: 0; border-top: 3px solid var(--accent); pointer-events: none; }
.job-priority-target > span { display: block; padding: 8px 4px; font-size: 10px; color: var(--muted); text-align: center; border: 1px dashed var(--line); }
.measuring-draggable[draggable="true"] { cursor: grab; }
.measuring-draggable[draggable="true"]:active { cursor: grabbing; }
.measure-job .measure-status-toggle.is-unmeasured, .jobsheeting-job .job-completion:not(.is-complete) { background: #2563eb; border-color: #2563eb; color: white; }
.measure-job .measure-status-toggle.is-measured, .jobsheeting-job .job-completion.is-complete { background: var(--accent); border-color: var(--accent); color: white; }
.measure-job .overdue, .measure-job .badge { display: inline-block; margin: 0; font-size: 10px; }
.measure-job .badge { padding: 3px 5px; }
.planning-day-capacity { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 11px; }
.capacity-confirmation { position: fixed; inset: 0; margin: auto; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; border-color: #8fa6b8; background: #f5f5f6; box-shadow: 0 20px 60px #16352f40; }
.capacity-confirmation::backdrop { background: #16352f80; }
.capacity-confirmation .actions { justify-content: flex-end; margin-top: 20px; }
html:has(dialog.capacity-confirmation[open]) { overflow: hidden; scrollbar-gutter: stable; }
.planning-day-capacity progress.is-over-guideline { accent-color: #b42332; }
.planning-day-capacity progress.is-over-guideline::-webkit-progress-value { background-color: #b42332; }
.planning-day-capacity progress.is-over-guideline::-moz-progress-bar { background-color: #b42332; }
.planning-day-capacity > span { display: block; margin: 3px 0 6px; color: var(--muted); }
.planning-day-capacity summary { cursor: pointer; margin-top: 6px; color: var(--muted); }
.planning-branch-total { display: flex; justify-content: space-between; gap: 5px; padding-top: 5px; }
.factory-overview { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.measuring-page .factory-overview .branch-tabs { margin-bottom: 0; border-bottom: 0; }
.factory-tab-fill { margin-top: 6px; color: var(--accent); font-size: 11px; font-weight: 600; }
.factory-tab-fill small { margin-top: 2px; color: inherit; font-size: inherit; }
.factory-tab-fill .is-over { color: #b42332; }
.factory-week-summaries { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.factory-week-label { display: block; color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.factory-week-totals { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.factory-hours-summary strong { display: flex; gap: 10px; font-size: 13px; }
.factory-hours-summary strong span { font-weight: 400; }
.factory-hours-summary small { display: block; font-size: 11px; margin-top: 4px; }
.factory-hours-explanation { flex-basis: 100%; margin: 0; font-size: 12px; }
.factory-hours-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 5px; font-size: 12px; }
.factory-hours-actual { color: #18553e; }
.planning-day { position: relative; }
.planning-dropdown { position: absolute; top: 54px; right: 0; z-index: 10; width: min(380px, calc(100vw - 64px)); max-width: none; padding: 10px; border: 1px solid var(--accent); border-radius: 7px; background: white; box-shadow: 0 8px 24px #16352f26; }
.planning-day:first-child .planning-dropdown { left: 0; right: auto; }
.planning-dropdown-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.planning-dropdown-heading button { padding: 3px 8px; font-size: 18px; }
.planning-dropdown-list { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; padding: 3px; }
.planning-dropdown-job { display: block; width: 100%; padding: 8px; text-align: left; overflow-wrap: anywhere; font-size: 12px; }
.planning-dropdown-job:hover { border-color: var(--accent); }
.planning-dropdown-job-heading { display: flex; justify-content: space-between; gap: 10px; }
.planning-dropdown-job-heading > span { white-space: nowrap; font-size: 11px; font-weight: 400; }
.planning-dropdown-name { display: block; margin-top: 4px; font-weight: 400; }
.planning-dropdown-job > small { display: block; margin-top: 3px; }
.jobsheeting-assignee { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.jobsheeting-job-footer { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.jobsheeting-job-footer .hold-label { flex-shrink: 0; }
.jobsheeting-job-footer .jobsheeting-assignee { margin-top: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar-bottom { margin-top: auto; padding-top: 20px; }
.sidebar-bottom form { margin-bottom: 12px; }
.sidebar-bottom button.secondary { width: 100%; background: #254b3e; color: #c7d9cf; border-color: #416354; font-weight: 400; }
.sidebar-bottom button.secondary:hover { background: #315a48; color: #fff; filter: none; }
.sidebar-bottom .sidebar-footer { text-align: center; }
.branch-selector-row { display: flex; align-items: center; gap: 12px; }
.branch-selector-row .branch-tabs { flex: 1; min-width: 0; }
.branch-selector-row > button { flex-shrink: 0; white-space: nowrap; }
.schedule-view-switch { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; cursor: pointer; font-size: 12px; }
.schedule-view-switch input { appearance: none; width: 32px; height: 18px; padding: 2px; margin: 0; border: 1px solid #8fa6b8; border-radius: 12px; background: #dbe4e9; cursor: pointer; }
.schedule-view-switch input::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: white; transition: transform .15s; }
.schedule-view-switch input:checked { background: #24765b; border-color: #24765b; }
.schedule-view-switch input:checked::before { transform: translateX(14px); }
.schedule-view-switch input:disabled { opacity: .5; cursor: default; }
.measure-job-branch { display: inline-block; align-self: flex-start; color: #31566c; background: #eef5fa; padding: 2px 5px; border-radius: 3px; font-size: 10px; }
/* Navigation focuses the page title for screen readers without outlining it. */
main h1:focus { outline: none; }
.measure-job.jobsheeting-job.is-repeat-work { background: #fff0f0; border: 2px solid #c43131; }
.repeat-work-label { color: #a51f2b; font-size: 11px; font-weight: 700; }
.add-rework-button { margin-left: auto; }
.site-measure-chart { padding: 20px; }
.site-measure-chart .section-heading { gap: 12px; margin-bottom: 8px; }
.site-measure-chart h2 { font-size: 16px; }
.site-measure-chart .section-heading p { font-size: 12px; margin: 6px 0 0; }
.site-measure-chart .section-heading label { font-size: 11px; gap: 4px; }
.site-measure-chart input[type=date], .site-measure-chart select { padding: 6px 8px; font-size: 12px; }
.chart-branches { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chart-branches button { padding: 5px 8px; font-size: 11px; font-weight: 500; border-radius: 5px; }
.chart-branch { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--muted); border-color: var(--line); }
.chart-branch.is-selected { background: #f3f7fa; color: var(--ink); border-color: #ccd8e1; }
.chart-branch:not(.is-selected) .chart-colour { opacity: .3; }
.chart-colour { width: 7px; height: 7px; border-radius: 50%; }
.chart-viewport { overflow-x: auto; }
.chart-viewport svg { display: block; width: 100%; min-width: 800px; }
.chart-viewport text { fill: #647780; font-size: 11px; }
.chart-grid { stroke: #e9eef1; stroke-width: 1; vector-effect: non-scaling-stroke; }
.site-measure-chart summary { cursor: pointer; color: var(--muted); margin-top: 8px; font-size: 11px; }
.job-type-setting { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; max-width: 850px; margin-bottom: 12px; }
.job-type-setting label { flex: 1; min-width: 0; }
.job-type-setting label.inline { flex: 0 0 auto; padding-bottom: 10px; white-space: nowrap; }
.planning-warning, .planning-day-capacity > span.planning-warning { color: #934b0b; font-weight: 600; }
.outside-schedule summary { cursor: pointer; font-weight: 600; }
.outside-schedule summary .muted { font-size: 12px; font-weight: 400; margin-left: 8px; }
.outside-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 18px; }
.outside-jobs h3 { font-size: 13px; margin: 0 0 8px; }
@media (max-width: 600px) {
    main:has(.measuring-page) { padding: 20px 12px; }
    .measuring-schedule { padding: 12px; }
}
/* Compact workspace header; Stats uses the available desktop canvas. */
.topbar { height: 44px; }
main:has(.stats-page) { max-width: none; padding: 14px 24px 12px; }
@media (max-width: 760px) { main:has(.stats-page) { padding: 16px; } }
@media (min-width: 761px) {
    .sidebar { width: 180px; padding: 24px 12px; }
    .brand { padding-left: 6px; font-size: 40px; }
    .brand span { font-size: 10px; letter-spacing: 0; }
    .sidebar nav { margin-top: 54px; }
    .sidebar nav a { padding: 13px 14px; }
    .workspace { margin-left: 180px; width: calc(100% - 180px); }
    .topbar { padding: 0 30px; }
    main:has(.stats-page) { padding: 22px 24px 16px; }
}