/* ============================================
   OVERVIEW — company-wide status (js/overview.js), in place of the Dashboard.
   Muted earth for status: sage current, ochre deferred, clay overdue, slate
   never recorded. Colours are tokens; dark values are at the bottom.
   ============================================ */

.ov {
  --ov-raise: #f8f9fb;
  --ov-line2: #ebecf0;
  --ov-tx3: #6b778c;
  --ov-hd: #1f4a7a;
  --ov-hd-line: rgba(44, 82, 130, .22);
  --ov-on-tint: rgba(255, 255, 255, .22);
  --ov-tint: 10%;
  --ov-loc-tint: 8%;
  --ov-shadow: rgba(9, 30, 66, .08);
  --ov-sage: #6a9f7f;  --ov-sage-t: #3d7558;  --ov-sage-s: #e8f1ec;
  --ov-ochre: #c99a3e; --ov-ochre-t: #85601f; --ov-ochre-s: #f8f0de;
  --ov-clay: #c4664f;  --ov-clay-t: #a4492f;  --ov-clay-s: #f8e8e3;
  --ov-org: #d9813f;   --ov-org-t: #9a4a12;   --ov-org-s: #fbe6d4;
  --ov-slate: #97a0af; --ov-slate-t: #5e6c84; --ov-slate-s: #f0f1f4;
  --ov-gold: #e0a100;  --ov-gold-a: #ffd66b;
  --ov-due: #5b7fbf;   --ov-due-t: #3f62a0;

  display: flex; flex-direction: column; gap: 16px; max-width: 1400px; min-width: 0;
  color: var(--text-primary);
}
.ov.is-loading { opacity: .65; transition: opacity .15s; }
.ov *, .ov *::before, .ov *::after { box-sizing: border-box; }
.ov > * { flex: none; }
.ov button { font-family: inherit; }

/* ---- text helpers ---- */
.ov-muted { color: var(--ov-tx3); }
.ov-pad { padding: 18px 20px; }
.ov-error { color: var(--ov-clay-t); }
.ov-ok { color: var(--ov-sage-t) !important; }
.ov-warn { color: var(--ov-ochre-t) !important; }
.ov-bad { color: var(--ov-clay-t) !important; }
.ov-org { color: var(--ov-org-t) !important; }
.ov-mute { color: var(--ov-slate-t) !important; }
.ov-zero { color: var(--ov-tx3) !important; }
.ov-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ov-hd); }
.ov-card { background: var(--bg-card); border: 1px solid var(--box-border); border-radius: 12px; min-width: 0; }
.ov-tt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ov-tt > b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
.ov-tt > span { font-size: 11.5px; color: var(--ov-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- buttons ---- */
.ov-btn { height: 30px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--box-border); background: var(--bg-card); color: var(--text-primary); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.ov-btn:hover { border-color: var(--accent); color: var(--accent); }
.ov-btn:disabled { opacity: .5; cursor: default; }
.ov-btn-ac { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ov-btn-ac:hover { color: var(--on-accent); background: var(--accent-hover); }
.ov-link { border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0 4px; }

/* ---- header ---- */
.ov-ph { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.ov-ph-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov-ph h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.ov-sub { font-size: 12.5px; color: var(--ov-tx3); }
.ov-ph-r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-pseg { display: flex; gap: 2px; background: var(--ov-line2); border-radius: 7px; padding: 3px; flex-wrap: wrap; }
.ov-pseg button { border: 0; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.ov-pseg button.on { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 2px var(--ov-shadow); }
.ov-custom { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.ov-custom input, .ov-since input { height: 30px; border: 1px solid var(--box-border); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); padding: 0 8px; font: inherit; font-size: 12px; }
.ov-since { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px dashed var(--box-border-strong); background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
button.ov-since { cursor: pointer; }
button.ov-since:hover { border-color: var(--accent); color: var(--accent); }
.ov-since.editing { border-style: solid; padding-right: 6px; }
.ov-since.editing label { display: inline-flex; align-items: center; gap: 6px; }
.ov-since.editing .ov-btn { height: 24px; padding: 0 9px; }

/* ---- whole company strip ---- */
.ov-company { display: grid; grid-template-columns: 150px repeat(auto-fit, minmax(110px, 1fr)); align-items: center; padding: 14px 8px; }
.ov-lab { display: flex; flex-direction: column; gap: 1px; padding: 0 12px; }
.ov-lab b { font-size: 14px; }
.ov-k { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 0 8px; border-left: 1px solid var(--ov-line2); min-width: 0; }
.ov-k b { font-size: 20px; font-weight: 700; line-height: 1.1; }
.ov-k > span { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ov-k small { font-size: 11px; color: var(--ov-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---- department cards ---- */
.ov-rowhd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: -6px; }
.ov-rowhd h3 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ov-hd); }
.ov-rowhd > span { font-size: 12px; color: var(--text-secondary); }
/* A one-column grid of minmax(0, 1fr) keeps the scrolling row from widening the page. */
.ov-cards-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.ov-cards-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 16px; width: 40px; background: linear-gradient(90deg, transparent, var(--bg-main)); pointer-events: none; }
.ov-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 340px; gap: 12px; overflow-x: auto; padding: 2px 2px 18px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; }
.ov-cards > * { scroll-snap-align: start; }
.ov-dc { text-align: left; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-width: 0; position: relative; background: var(--bg-card); border: 1px solid var(--box-border); border-radius: 14px; padding: 16px 18px 14px; }
.ov-dc:hover { border-color: var(--accent); }
.ov-dc.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 24px var(--ov-shadow); }
.ov-dc.on::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; background: var(--bg-card); border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); transform: translateX(-50%) rotate(45deg); box-shadow: 1px 1px 0 var(--accent); }
.ov-dc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Tinted header band in the department's colour */
.ov-dc-h { display: flex; align-items: center; gap: 10px; margin: -16px -18px 2px; padding: 11px 14px; border-radius: 13px 13px 0 0; border-bottom: 1px solid var(--ov-line2); background: color-mix(in srgb, var(--dc) var(--ov-tint), transparent); }
.ov-dico { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--dc); flex: none; }
.ov-dc-n { font-size: 15px; font-weight: 700; letter-spacing: -.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-st { margin-left: auto; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; flex: none; }
.ov-st.bad { background: var(--ov-clay-s); color: var(--ov-clay-t); }
.ov-st.attn { background: var(--ov-ochre-s); color: var(--ov-ochre-t); }
.ov-st.clear { background: var(--ov-sage-s); color: var(--ov-sage-t); }
.ov-st.none { background: var(--ov-slate-s); color: var(--ov-slate-t); }
/* Ring */
.ov-r-body { display: flex; align-items: center; gap: 16px; }
.ov-ring { position: relative; width: 92px; height: 92px; flex: none; }
.ov-r-trk { fill: none; stroke: var(--ov-line2); stroke-width: 7; }
.ov-r-arc { fill: none; stroke-width: 7; stroke-linecap: round; }
.ov-r-arc.ok { stroke: var(--ov-sage); }
.ov-r-arc.warn { stroke: var(--ov-ochre); }
.ov-r-arc.bad { stroke: var(--ov-clay); }
.ov-r-arc.mute { stroke: var(--ov-slate); }
.ov-r-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ov-r-c b { font-size: 21px; font-weight: 700; letter-spacing: -.4px; line-height: 1; }
.ov-r-c small { font-size: 10.5px; color: var(--ov-tx3); margin-top: 2px; }
.ov-r-stats { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ov-r-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.ov-r-row b { font-size: 14px; font-weight: 700; text-align: right; }
.ov-r-sep { border-top: 1px solid var(--ov-line2); padding-top: 6px; }
.ov-r-d { width: 8px; height: 8px; border-radius: 50%; }
.ov-r-d.o { background: var(--ov-clay); }
.ov-r-d.d { background: var(--ov-ochre); }
.ov-r-d.n { border: 1.5px solid var(--ov-slate); }
.ov-r-d.s { background: var(--ov-sage); }
.ov-r-l { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-att { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; background: var(--ov-raise); min-width: 0; }
.ov-att-l, .ov-k-l { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ov-hd); flex: none; }
.ov-att-t { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-foot { display: flex; gap: 8px; align-items: baseline; border-top: 1px solid var(--ov-line2); padding-top: 9px; margin-top: auto; font-size: 12.5px; min-width: 0; }
.ov-foot-v { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- section panels ---- */
.ov-panel { background: var(--bg-card); border: 1px solid var(--box-border); border-radius: 12px; min-width: 0; position: relative; z-index: 1; overflow: hidden; }
.ov-phd { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--ov-line2); background: var(--ov-raise); flex-wrap: wrap; }
.ov-phd-tint { background: color-mix(in srgb, var(--lc) var(--ov-loc-tint), var(--bg-card)); }
.ov-num { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ov-phd-t { min-width: 0; }
.ov-phd h2 { margin: 1px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -.2px; display: flex; align-items: center; gap: 8px; color: var(--text-primary); }
.ov-phd h2 i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ov-subt { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.ov-phd-r { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ov-seg { display: flex; gap: 2px; background: var(--ov-line2); border-radius: 6px; padding: 3px; }
.ov-seg button { border: 0; background: transparent; font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 4px 10px; border-radius: 4px; white-space: nowrap; cursor: pointer; }
.ov-seg button.on { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 2px var(--ov-shadow); }
.ov-pbody { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.ov-dpbody { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 18px; }
.ov-subh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ov-subh h3 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ov-hd); }
.ov-subh > span { font-size: 12px; color: var(--ov-tx3); }

/* View buttons: clearly buttons, slim */
.ov-itabs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ov-lsec .ov-itabs { padding: 10px 20px; border-bottom: 1px solid var(--ov-line2); background: var(--ov-raise); }
.ov-it-lab { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ov-hd); margin-right: 6px; }
.ov-itab { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border-radius: 8px; border: 1px solid var(--box-border); background: var(--bg-card); color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px var(--ov-shadow); }
.ov-itab:hover { border-color: var(--accent); color: var(--accent); }
.ov-it-ic { width: 14px; height: 14px; flex: none; }
.ov-it-c { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 0 7px; line-height: 17px; background: var(--ov-line2); color: var(--text-secondary); }
.ov-itab.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 2px 8px var(--ov-shadow); }
.ov-itab.on .ov-it-c { background: var(--ov-on-tint); color: var(--on-accent); }
.ov-it-hint { margin-left: auto; font-size: 12px; color: var(--text-secondary); }

/* ---- pills and bars ---- */
.ov-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px 2px 7px; white-space: nowrap; flex: none; }
.ov-pill i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.ov-pill.current, .ov-pill.clear { background: var(--ov-sage-s); color: var(--ov-sage-t); }
.ov-pill.current i, .ov-pill.clear i { background: var(--ov-sage); }
.ov-pill.deferred { background: var(--ov-ochre-s); color: var(--ov-ochre-t); }
.ov-pill.deferred i { background: var(--ov-ochre); }
.ov-pill.overdue { background: var(--ov-clay-s); color: var(--ov-clay-t); }
.ov-pill.overdue i { background: var(--ov-clay); }
.ov-pill.norecord { background: var(--ov-slate-s); color: var(--ov-slate-t); }
.ov-pill.norecord i { border: 1.5px solid var(--ov-slate); }
.ov-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; background: var(--ov-line2); min-width: 0; }
.ov-bar i { display: block; height: 100%; }
.ov-bar .s { background: var(--ov-sage); }
.ov-bar .d { background: var(--ov-ochre); }
.ov-bar .o { background: var(--ov-clay); }
.ov-bar .n { background: var(--ov-slate); }

/* ---- location cards ---- */
/* Location cards keep at least 400px so group names fit on their tiles: two
   across on a laptop, three on a wide screen. */
.ov-g3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 14px; align-items: stretch; }
.ov-ico { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.ov-ico.sm { width: 24px; height: 24px; border-radius: 6px; }
.ov-ico.lg { width: 44px; height: 44px; border-radius: 11px; }
.ov-loc { text-align: left; color: inherit; cursor: pointer; display: flex; flex-direction: column; padding: 14px 16px 0; width: 100%; background: var(--bg-card); border: 1px solid var(--box-border); border-radius: 10px; min-width: 0; }
.ov-loc:hover { border-color: var(--accent); }
.ov-loc.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 16px var(--ov-shadow); }
.ov-lh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.ov-lh .ov-tt > b { font-size: 15px; font-weight: 700; }
.ov-lh .ov-tt > span { color: var(--text-secondary); }
.ov-lh-r { margin-left: auto; }
/* Group tiles (overview.py GROUPS; one per vehicle on the fleet card) */
.ov-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ov-tile { border: 1px solid var(--ov-line2); border-left-width: 3px; border-radius: 9px; padding: 7px 9px 7px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ov-tile.t-bad { border-left-color: var(--ov-clay); }
.ov-tile.t-mute { border-left-color: var(--ov-slate); }
.ov-tile.t-warn { border-left-color: var(--ov-ochre); }
.ov-tile.t-due { border-left-color: var(--ov-due); }
.ov-tile.t-ok { border-left-color: var(--ov-sage); }
.ov-tile-h { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-secondary); }
.ov-tile-ic { flex: none; }
/* Long names (vehicles on a narrow card) wrap to a second line rather than being cut off. */
.ov-tile-n { font-size: 12.5px; font-weight: 700; color: var(--text-primary); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ov-tile-h { align-items: flex-start; }
.ov-tile-ic { margin-top: 2px; }
.ov-tile-s { font-size: 12.5px; font-weight: 700; }
.ov-due { color: var(--ov-due-t) !important; }
/* "19 of 22 recurring tasks on schedule" under the card header */
.ov-hl { display: block; margin: -4px 0 10px; font-size: 13px; color: var(--text-secondary); }
.ov-hl b { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-right: 3px; }
/* Daily / weekly summary lines in Done · last 30 days */
/* Two lines, so a narrow card never pushes the rate into the next column:
   "20 weekly tasks" over "80% on schedule", with the tick beside both. */
.ov-sum { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 8px; row-gap: 1px; align-items: center; padding: 6px 8px; margin: 2px 0 4px; border-radius: 8px; background: var(--ov-raise); font-size: 12.5px; color: var(--text-secondary); min-width: 0; }
.ov-sum > svg { grid-row: span 2; width: 14px; height: 14px; }
.ov-sum b { font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-sum > span { font-size: 11.5px; font-weight: 600; }
/* Done · last 30 days | Needs attention */
.ov-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 12px 0 10px; }
.ov-col { display: flex; flex-direction: column; min-width: 0; }
.ov-colh { display: flex; align-items: baseline; gap: 6px; padding-bottom: 5px; margin-bottom: 3px; border-bottom: 2px solid var(--ov-hd-line); }
.ov-colh-t { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ov-hd); }
.ov-colh-n { font-size: 15px; font-weight: 700; }
.ov-ci { display: flex; flex-direction: column; padding: 4px 0; min-width: 0; font-size: 12.5px; }
.ov-ci b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-ci > span { font-size: 11.5px; color: var(--ov-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-ci-empty { font-size: 12px; color: var(--ov-tx3); padding: 4px 0; }
/* Status chips (Across all properties strip) */
.ov-chores { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; margin-right: 10px; flex: none; }
.ov-chores i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ov-lf { margin: auto -16px 0; padding: 9px 16px; border-top: 1px solid var(--ov-line2); font-size: 11.5px; color: var(--ov-tx3); display: flex; gap: 6px; white-space: nowrap; overflow: hidden; background: var(--ov-raise); border-radius: 0 0 10px 10px; min-width: 0; }
.ov-lf b { color: var(--text-secondary); font-weight: 600; flex: none; }
.ov-lf-v { overflow: hidden; text-overflow: ellipsis; }
.ov-lf-r { margin-left: auto; padding-left: 8px; flex: none; }
.ov-clearcard { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; align-self: start; background: var(--bg-card); border: 1px solid var(--box-border); border-radius: 10px; min-width: 0; }
.ov-ch { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ov-ch b { font-size: 14px; }
.ov-crow { border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 8px; border-top: 1px solid var(--ov-line2); border-radius: 6px; width: 100%; }
.ov-crow:hover { background: var(--accent-light); }
.ov-crow.sel { background: var(--accent-light); box-shadow: inset 0 0 0 1px var(--accent); }
.ov-crow .ov-tt > b { font-size: 13.5px; font-weight: 700; }
.ov-crow-r { font-size: 11.5px; color: var(--ov-tx3); text-align: right; white-space: nowrap; }
.ov-crow-r b { display: block; color: var(--ov-sage-t); font-size: 12.5px; }

/* ---- location detail ---- */
.ov-dk { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); border: 1px solid var(--ov-line2); border-radius: 10px; }
.ov-dk > div { padding: 11px 14px; border-left: 1px solid var(--ov-line2); display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ov-dk > div:first-child { border-left: 0; }
.ov-dk > div > span { font-size: 11.5px; color: var(--ov-tx3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-dk > div > .ov-dk-s { font-weight: 500; }
.ov-dk b { font-size: 18px; font-weight: 700; }
.ov-dcols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.ov-dcol { min-width: 0; }
.ov-dcol h4, .ov-rc h4 { margin: 0 0 4px; padding-bottom: 7px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ov-hd); border-bottom: 2px solid var(--ov-hd-line); }
.ov-dr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border: 0; border-top: 1px solid var(--ov-line2); background: transparent; color: inherit; text-align: left; width: 100%; font: inherit; }
.ov-dcol h4 + .ov-dr, .ov-rc h4 + .ov-dr, .ov-reqs > .ov-dr:first-child { border-top: 0; }
button.ov-dr { cursor: pointer; border-radius: 4px; }
button.ov-dr:hover { background: var(--accent-light); }
.ov-dr-r { font-size: 11.5px; color: var(--ov-tx3); text-align: right; white-space: nowrap; }
.ov-dr-r b { display: block; font-size: 12.5px; color: var(--text-primary); }
.ov-dr-empty { font-size: 12.5px; padding: 8px 0; }
.ov-more { border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 8px 0 0; }
.ov-subr { display: grid; grid-template-columns: minmax(0, 1fr) 60px 40px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--ov-line2); font-size: 12.5px; }
.ov-dcol h4 + .ov-subr { border-top: 0; }
.ov-subr > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-subr .c { text-align: right; font-weight: 600; }

/* item table (All items, Key items) */
.ov-table { min-width: 0; overflow-x: auto; contain: inline-size; }
.ov-it { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(110px, 1fr) 96px 150px 130px 112px; column-gap: 14px; align-items: center; min-width: 780px; }
.ov-it.nosub { grid-template-columns: minmax(180px, 1.6fr) 104px 150px 130px 112px; min-width: 680px; }
.ov-it.h { padding: 0 0 8px; border-bottom: 1px solid var(--border-light); }
.ov-it.h > span, .ov-pp.h > span { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: var(--text-secondary); text-transform: uppercase; white-space: nowrap; }
.ov-it.row { padding: 9px 0; border: 0; border-bottom: 1px solid var(--ov-line2); font-size: 12.5px; background: transparent; color: inherit; text-align: left; width: 100%; font-family: inherit; }
button.ov-it.row { cursor: pointer; }
button.ov-it.row:hover { background: var(--accent-light); }
.ov-it-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ov-it-t b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-it-t span { font-size: 11.5px; color: var(--ov-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-ig { padding: 12px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ov-hd); display: flex; gap: 8px; border-bottom: 1px solid var(--ov-line2); min-width: 780px; }
.ov-igc { color: var(--ov-tx3); letter-spacing: 0; text-transform: none; font-weight: 600; }
.ov-cell { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ov-cell b { display: block; color: var(--text-primary); font-weight: 600; }

/* other departments */
.ov-btiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ov-bt { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--ov-line2); border-radius: 10px; min-width: 0; }
.ov-bt .v { font-size: 20px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
.ov-bt .l { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.ov-bt .s { font-size: 11.5px; color: var(--ov-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-dgrid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.ov-dgrid .ov-subh { margin-bottom: 10px; }
.ov-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ov-more-btn { margin-top: 10px; }

/* ---- People / Patterns / Unplanned views ---- */
.ov-view { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ov-vxh { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ov-vxh h3 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ov-hd); }
.ov-vxh > span { font-size: 12px; color: var(--text-secondary); }
.ov-vxh > .ov-scope { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); background: var(--ov-line2); border-radius: 999px; padding: 2px 10px; }
.ov-pp { display: grid; grid-template-columns: minmax(200px, 1.6fr) 80px 90px minmax(160px, 1.3fr) 110px; column-gap: 16px; align-items: center; min-width: 700px; }
.ov-pp.h { padding: 0 0 8px; border-bottom: 1px solid var(--border-light); }
.ov-pp.row { padding: 9px 0; border-bottom: 1px solid var(--ov-line2); font-size: 13px; }
.ov-ppn { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ov-av { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ov-ppv { font-size: 14px; font-weight: 700; }
.ov-pot { font-weight: 700; }
.ov-ppg { display: grid; grid-template-columns: 14px 54px minmax(0, 1fr); gap: 8px; align-items: center; }
.ov-ppg b { font-size: 13px; }
.ov-star { color: var(--ov-gold); font-size: 13px; }
.ov-ppbar { height: 6px; border-radius: 3px; background: var(--ov-line2); overflow: hidden; display: block; }
.ov-ppbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ov-gold-a), var(--ov-gold)); border-radius: 3px; }
.ov-view .dash-card.dash-unplanned { border-color: var(--ov-line2); }

/* ---- narrower screens ---- */
@media (max-width: 1280px) {
  .ov-dcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-dgrid { grid-template-columns: minmax(0, 1fr); }
  .ov-company { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
  .ov-company .ov-lab { grid-column: 1 / -1; }
  .ov-company .ov-k:nth-of-type(4n + 2) { border-left: 0; }
}
@media (max-width: 760px) {
  .ov-g3 { grid-template-columns: minmax(0, 1fr); }
  .ov-dcols, .ov-btiles { grid-template-columns: minmax(0, 1fr); }
  .ov-company { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-company .ov-k { border-left: 0; }
  .ov-dk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-cards { grid-auto-columns: 86%; }
  .ov-ph-r { margin-left: 0; }
  .ov-it-hint { display: none; }
}

/* ---- In progress: an overdue item someone is working on ---- */
.ov-iptag { display: inline-flex; align-items: center; gap: 4px; flex: none; background: var(--bg-e3eefb); color: var(--fg-1f5f99); font-size: 10.5px; font-weight: 700; padding: 1px 7px 1px 5px; border-radius: 999px; white-space: nowrap; }
.ov-ipnote { grid-column: 1 / -1; display: block; margin-top: -2px; padding: 5px 9px; border-radius: 7px; background: var(--bg-f1f6fd); color: var(--fg-174a7c); font-size: 12px; line-height: 1.35; }
.ov-ipnote > i { display: block; font-style: normal; font-size: 11.5px; color: var(--ov-tx3); }
.ov-ipsplit { display: flex; align-items: center; gap: 6px; padding: 10px 0 2px; border-top: 1px solid var(--ov-line2); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-1f5f99); }
.ov-dcol h4 + .ov-ipsplit { border-top: 0; padding-top: 4px; }
.ov-ipsplit + .ov-dr { border-top: 0; }
.ov-ipn { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--fg-1f5f99); }
.ov-ipc { color: var(--fg-1f5f99) !important; }
.ov-ci i.ov-ipc { font-style: normal; }
.ov-ippair { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---- dark: black, gold and white ---- */
:root[data-theme="dark"] .ov {
  --ov-raise: #161616;
  --ov-line2: #1f1f1f;
  --ov-tx3: #8f8f8f;
  --ov-hd: #e2c35a;
  --ov-hd-line: rgba(212, 175, 55, .35);
  --ov-on-tint: rgba(0, 0, 0, .16);
  --ov-tint: 18%;
  --ov-loc-tint: 22%;
  --ov-shadow: rgba(0, 0, 0, .55);
  --ov-sage: #6fb08a;  --ov-sage-t: #8fd0a9;  --ov-sage-s: rgba(111, 176, 138, .14);
  --ov-ochre: #d9a648; --ov-ochre-t: #e8c070; --ov-ochre-s: rgba(217, 166, 72, .14);
  --ov-clay: #d97a62;  --ov-clay-t: #f0a08c;  --ov-clay-s: rgba(217, 122, 98, .15);
  --ov-org: #e0955a;   --ov-org-t: #f2b585;   --ov-org-s: rgba(224, 149, 90, .16);
  --ov-slate: #6b6b6b; --ov-slate-t: #b5b5b5; --ov-slate-s: #1c1c1c;
  --ov-due: #8aa6d6;   --ov-due-t: #a9c0e6;
}

/* The menu has the Overview twice: at the top for people whose Home screen it
   is, where the Dashboard was for everyone else (index.html, theme_boot.js). */
html:not([data-home="overview"]) #nav-overview-top,
html[data-home="overview"] #nav-overview { display: none !important; }

/* "Across all properties" strip (the All Properties place) */
.ov-pf { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; border: 1px solid var(--box-border); border-radius: 12px; background: var(--ov-raise); color: inherit; text-align: left; cursor: pointer; font: inherit; }
.ov-pf:hover { border-color: var(--accent); }
.ov-pf.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ov-pf-ic { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--ov-hd-line); color: var(--ov-hd); flex: none; }
.ov-pf .ov-tt > b { font-size: 14px; font-weight: 700; }
.ov-pf .ov-tt > span { color: var(--text-secondary); }
.ov-pf-r { margin-left: auto; display: flex; gap: 16px; align-items: center; font-size: 12.5px; white-space: nowrap; flex-wrap: wrap; justify-content: flex-end; }
.ov-pf-r .ov-chores { margin-right: 0; }
/* Places with no maintenance items: slim one-line cards */
.ov-subh-sm { margin-top: 4px; }
.ov-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 12px; }
.ov-mini { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border: 1px solid var(--box-border); border-radius: 12px; background: var(--bg-card); color: inherit; text-align: left; cursor: pointer; font: inherit; min-width: 0; }
.ov-mini:hover { border-color: var(--accent); }
.ov-mini.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ov-mini .ov-tt { flex: 1; }
.ov-mini .ov-tt > b { font-size: 14px; font-weight: 700; }
.ov-mini-r { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; font-size: 12.5px; flex: none; }
.ov-mini-r > span { font-size: 11.5px; color: var(--ov-tx3); }

/* Tile hover: what a tile holds at this location */
.ov-tile { position: relative; }
.ov-tip { position: absolute; left: -1px; top: calc(100% + 6px); z-index: 30; width: max(100%, 280px); display: none; flex-direction: column; gap: 4px; padding: 10px 12px; text-align: left; background: var(--bg-card); border: 1px solid var(--box-border); border-radius: 10px; box-shadow: var(--shadow-lg); cursor: default; }
.ov-tile:hover .ov-tip { display: flex; }
.ov-tile:nth-child(2n) .ov-tip { left: auto; right: -1px; }  /* right-hand tiles open leftwards */
.ov-tile:hover { border-color: var(--accent); }
.ov-tip-t { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.ov-tip-s { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; margin-bottom: 2px; }
.ov-tip-r { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 3px 0; border-top: 1px solid var(--ov-line2); color: var(--text-primary); }
.ov-tip-r b { color: var(--ov-tx3); }
.ov-tip-n { font-size: 11px; color: var(--ov-ochre-t); margin-top: 2px; }

/* Location Summary: headline band, sub-location chips, grouped lists */
.ov-band { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; border: 1px solid var(--ov-line2); border-radius: 12px; overflow: hidden; }
.ov-bc { padding: 14px 16px; border-left: 1px solid var(--ov-line2); display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ov-bc:first-child { border-left: 0; }
.ov-bcl { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ov-hd); }
.ov-bcv { font-size: 24px; font-weight: 700; letter-spacing: -.3px; line-height: 1.1; }
.ov-bcs { font-size: 12px; color: var(--text-secondary); }
.ov-rate { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 1px 0; color: var(--text-secondary); }
.ov-rate b { font-weight: 700; }
.ov-subchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ov-subchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--ov-line2); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ov-subchip b { color: var(--ov-tx3); font-weight: 700; }
.ov-subchip:hover { border-color: var(--accent); }
.ov-subchip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.ov-subchip.on b { color: var(--accent); }
.ov-subchips-h { font-size: 11.5px; color: var(--ov-tx3); margin-left: 4px; }
.ov-sum2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ov-side2 { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ov-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ov-sech { display: flex; align-items: baseline; gap: 8px; padding-bottom: 7px; border-bottom: 2px solid var(--ov-hd-line); }
.ov-sect { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ov-hd); }
.ov-sech > b { font-size: 15px; font-weight: 700; }
.ov-secs { margin-left: auto; font-size: 11.5px; color: var(--ov-tx3); }
.ov-sec .ov-dr:first-of-type { border-top: 0; }
.ov-grp { border: 1px solid var(--ov-line2); border-radius: 10px; overflow: hidden; }
.ov-grp-h { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--ov-raise); }
.ov-grp-i { color: var(--text-secondary); flex: none; }
.ov-grp-h b { font-size: 13px; }
.ov-grp-s { margin-left: auto; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ov-grp-r { display: grid; grid-template-columns: minmax(0, 1fr) 96px 130px; gap: 10px; align-items: center; width: 100%; padding: 7px 12px; border: 0; border-top: 1px solid var(--ov-line2); background: transparent; color: inherit; text-align: left; font: inherit; font-size: 12.5px; }
button.ov-grp-r { cursor: pointer; }
button.ov-grp-r:hover { background: var(--accent-light); }
.ov-grp-t { display: flex; flex-direction: column; min-width: 0; }
.ov-grp-t b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-grp-t span { font-size: 11px; color: var(--ov-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-grp-f { font-size: 11.5px; color: var(--ov-tx3); white-space: nowrap; }
.ov-grp-v { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-grp-r .ov-ipnote { grid-column: 1 / -1; }
.ov-grp-ip { padding: 8px 12px 2px; }
.ov-grp-m { display: block; width: 100%; padding: 7px 12px; border: 0; border-top: 1px solid var(--ov-line2); background: transparent; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.ov-empty-ok { padding: 10px 0; font-size: 12.5px; color: var(--ov-sage-t); font-weight: 600; }
@media (max-width: 1100px) { .ov-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov-bc:nth-child(3) { border-left: 0; } .ov-sum2 { grid-template-columns: minmax(0, 1fr); } }

/* Home screen switch in the header */
.ov-home { cursor: pointer; }
.ov-home.on { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

/* Time done in the window after a location or tile name: "(42h 30m)" */
.ov-tt > b.ov-tn { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.ov-tn-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ov-tm { flex: none; font-size: 12.5px; font-weight: 600; color: var(--ov-tx3); cursor: help; }
.ov-phd h2 .ov-tm { font-size: 14px; }
.ov-tile-tm { flex: none; font-size: 11.5px; font-weight: 600; color: var(--ov-tx3); line-height: 1.45; white-space: nowrap; }

/* Search on the department section: results open under the box */
.ov-dsec { overflow: visible; z-index: 3; }
.ov-dsec > .ov-phd { border-radius: 12px 12px 0 0; }
.ov-srch { position: relative; width: min(380px, 100%); }
.ov-srch-i { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--box-border); border-radius: 6px; background: var(--bg-card); color: var(--ov-tx3); cursor: text; }
.ov-srch-i:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a12); }
.ov-srch-i svg { flex: none; }
.ov-srch-i input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text-primary); padding: 0; }
.ov-srch-i input::placeholder { color: var(--ov-tx3); }
.ov-sres { position: absolute; right: 0; top: calc(100% + 6px); width: min(580px, calc(100vw - 48px)); max-height: min(560px, 70vh); overflow-y: auto; background: var(--bg-card); border: 1px solid var(--box-border); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 40; }
.ov-sres-h, .ov-sres-f { padding: 9px 14px; font-size: 11.5px; color: var(--ov-tx3); }
.ov-sres-h { border-bottom: 1px solid var(--ov-line2); }
.ov-sr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--ov-line2); background: transparent; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.ov-sr:hover { background: var(--bg-hover); }
.ov-sr.on { background: var(--accent-a08); }
.ov-sr .ov-tt > b { font-weight: 700; }
.ov-sr-ref { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--ov-tx3); }
.ov-sr-r { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 11.5px; color: var(--ov-tx3); white-space: nowrap; }
.ov-sr-r b { font-size: 12.5px; font-weight: 700; }
.ov-hist { padding: 6px 14px 12px; background: var(--accent-a06); border-bottom: 1px solid var(--ov-line2); font-size: 12px; }
.ov-hist-h { display: flex; align-items: baseline; gap: 8px; padding: 4px 0 6px; }
.ov-hist-h b { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ov-hd); }
.ov-hist-h span { color: var(--ov-tx3); font-size: 11.5px; }
.ov-hr { display: grid; grid-template-columns: 96px minmax(0, 1fr) 110px 84px; gap: 4px 10px; padding: 5px 0; border-top: 1px solid var(--ov-line2); color: var(--text-primary); }
.ov-hr.h { border-top: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ov-tx3); padding-top: 0; }
.ov-hr-n { grid-column: 1 / -1; color: var(--text-secondary); font-size: 11.5px; padding-left: 106px; }
.ov-hist-a { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ov-hist-a .ov-btn { height: 28px; }
@media (max-width: 760px) {
  .ov-srch { width: 100%; }
  .ov-sres { left: 0; right: auto; width: 100%; }
  .ov-hr { grid-template-columns: 80px minmax(0, 1fr) 90px; }
  .ov-hr > span:nth-child(4) { display: none; }
  .ov-hr-n { padding-left: 0; }
}

/* Location card (option B3): tinted title band, status row, groups panel,
   then Needs attention and Done as boxes with status chips. */
.ov-lband { display: flex; align-items: center; gap: 10px; margin: -14px -16px 10px; padding: 12px 16px 11px; border-bottom: 1px solid var(--ov-line2); border-radius: 9px 9px 0 0; background: color-mix(in srgb, var(--lc) var(--ov-loc-tint), var(--bg-card)); min-width: 0; }
.ov-lband .ov-tt > b { font-size: 15px; font-weight: 700; }
.ov-lband .ov-tt > span { color: var(--text-secondary); }
.ov-lstat { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--text-secondary); min-width: 0; }
.ov-lstat > b { font-size: 15px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.ov-lstat-l { white-space: nowrap; }
.ov-lstat-bar { flex: 1; min-width: 40px; margin: 0 6px; }
.ov-grpp { display: block; background: var(--ov-raise); border-radius: 10px; padding: 9px 10px 10px; }
.ov-grpp-h { display: flex; align-items: baseline; gap: 6px; margin: 0 2px 8px; }
.ov-grpp-h b { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ov-hd); }
.ov-grpp-h span { font-size: 11.5px; color: var(--ov-tx3); }
.ov-grpp .ov-tile { background: var(--bg-card); }
.ov-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; align-items: start; }
.ov-box { display: flex; flex-direction: column; border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; min-width: 0; }
.ov-boxh { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.ov-boxh b:first-child { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-boxh-n { font-size: 15px; font-weight: 800; }
.ov-boxh.h-bad { background: var(--ov-clay-s); color: var(--ov-clay-t); }
.ov-boxh.h-warn { background: var(--ov-ochre-s); color: var(--ov-ochre-t); }
.ov-boxh.h-mute { background: var(--ov-slate-s); color: var(--ov-slate-t); }
.ov-boxh.h-ok { background: var(--ov-sage-s); color: var(--ov-sage-t); }
.ov-br { display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; border-top: 1px solid var(--ov-line2); min-width: 0; }
.ov-br-t { font-size: 12.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-br-s { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ov-tx3); white-space: nowrap; overflow: hidden; min-width: 0; }
.ov-chip { flex: none; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 6px; }
.ov-chip.c-bad { background: var(--ov-clay-s); color: var(--ov-clay-t); }
.ov-chip.c-warn { background: var(--ov-ochre-s); color: var(--ov-ochre-t); }
.ov-chip.c-mute { background: var(--ov-slate-s); color: var(--ov-slate-t); }
.ov-chip.c-ok { background: var(--ov-sage-s); color: var(--ov-sage-t); }
.ov-chip.c-org { background: var(--ov-org-s); color: var(--ov-org-t); }
.ov-chip.c-neu { background: var(--ov-line2); color: var(--text-secondary); }
.ov-pill.attn { background: var(--ov-ochre-s); color: var(--ov-ochre-t); }
.ov-pill.attn i { background: var(--ov-ochre); }
.ov-tile.t-org { border-left-color: var(--ov-org); }
.ov-key { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--ov-tx3); white-space: nowrap; }
.ov-br-more, .ov-br-empty { padding: 6px 10px; border-top: 1px solid var(--ov-line2); font-size: 11.5px; font-weight: 600; color: var(--ov-tx3); }
.ov-boxh + .ov-br-empty { border-top: 0; }
.ov-boxh + .ov-br { border-top: 0; }

/* Weekly work report (js/overview.js, "weekly work report"): a dialog over
   the page. Its frame follows the theme; the paper is a printable document,
   so it stays white with fixed ink colours in both themes. */
html.ov-rp-open { overflow: hidden; }
.ov-rp { inset: 0; margin: auto; width: min(980px, calc(100vw - 32px)); height: calc(100vh - 48px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--box-border); border-radius: 14px; background: var(--bg-main); color: var(--text-primary); overflow: hidden; }
.ov-rp::backdrop { background: rgba(9, 30, 66, .45); }
.ov-rp-in { height: 100%; max-width: none; gap: 0; }
.ov-rp-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px 10px 16px; background: var(--bg-card); border-bottom: 1px solid var(--box-border); }
.ov-rp-wk { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.ov-rp-wkt { font-size: 13.5px; font-weight: 700; padding: 0 4px; white-space: nowrap; }
.ov-rp-step { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--box-border); background: var(--bg-card); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ov-rp-step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ov-rp-step:disabled { opacity: .4; cursor: default; }
.ov-rp-link { border: 0; background: none; padding: 0 4px; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ov-rp-link:hover { text-decoration: underline; }
.ov-rp-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ov-rp-x { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ov-rp-x:hover { background: var(--bg-hover); color: var(--text-primary); }
.ov-rp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 20px 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ov-rp-body.is-loading { opacity: .6; }
.ov-rp-body > .ov-card { width: 100%; max-width: 816px; }
.ov-rp-notes { width: 100%; max-width: 816px; font-size: 12.5px; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--box-border); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.ov-rp-notes p { margin: 0; line-height: 1.45; }

.ov-rp-paper { width: 100%; max-width: 816px; flex: none; background: #fff; color: #172b4d; border-radius: 4px; box-shadow: 0 1px 2px rgba(9, 30, 66, .18), 0 10px 30px rgba(9, 30, 66, .14); padding: 34px 52px 24px; font-size: 12.5px; line-height: 1.42; display: flex; flex-direction: column; gap: 14px; }
.ov-rp-hd { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ov-rp-eb { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1f4a7a; }
.ov-rp-tt { margin: 3px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: #172b4d; }
.ov-rp-hm { margin-left: auto; text-align: right; font-size: 11px; color: #6b778c; line-height: 1.55; }
.ov-rp-hm b { color: #172b4d; font-weight: 700; }
.ov-rp-sum { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; color: #42526e; padding: 8px 0 9px; border-top: 1px solid #dfe1e6; border-bottom: 1px solid #dfe1e6; }
.ov-rp-sum > span { display: inline-flex; align-items: baseline; gap: 6px; }
.ov-rp-sum > span > b { font-size: 17px; font-weight: 800; color: #172b4d; }
.ov-rp-sum > span.pd, .ov-rp-sum > span.pd > b { color: #85601f; }
.ov-rp-sum > span.tm { margin-left: auto; }
.ov-rp-locs { display: flex; flex-direction: column; gap: 12px; }
.ov-rp-loc { display: flex; flex-direction: column; gap: 5px; break-inside: avoid; }
.ov-rp-lh { display: flex; align-items: center; gap: 9px; margin: 0; padding-bottom: 5px; border-bottom: 2px solid var(--lc); font-size: 15px; font-weight: 800; letter-spacing: -.2px; color: #172b4d; }
.ov-rp-lh > span { font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: #6b778c; }
.ov-rp-lt { margin-left: auto; font-size: 12px; font-weight: 700; color: #42526e; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov-rp-sq { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--lc); }
.ov-rp-sub { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 2px 0; }
.ov-rp-subn { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #6b778c; padding-top: 2px; overflow-wrap: anywhere; }
.ov-rp-subn.op { color: #85601f; }
.ov-rp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ov-rp-list > li { display: flex; align-items: baseline; gap: 8px; }
.ov-rp-ck { width: 10px; flex: none; color: #6a9f7f; font-size: 11px; font-weight: 800; }
.ov-rp-op { width: 10px; height: 10px; flex: none; border-radius: 50%; border: 2px solid #c99a3e; transform: translateY(1px); }
.ov-rp-t { font-weight: 600; }
.ov-rp-m { color: #6b778c; font-size: 11.5px; }
.ov-rp-rq { display: inline-flex; margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: .03em; color: #3f62a0; border: 1px solid #c9d6ee; border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.ov-rp-ph { margin-left: 6px; font-size: 10.5px; font-weight: 700; color: #5e6c84; white-space: nowrap; }
.ov-rp-tag { display: inline-flex; margin-right: 6px; font-size: 10px; font-weight: 800; border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.ov-rp-tag.pd { color: #85601f; background: #f8f0de; }
.ov-rp-tag.hi { color: #42526e; background: #ebecf0; }
.ov-rp-tag.pl { color: #42526e; border: 1px solid #dfe1e6; }
.ov-rp-none { margin: 8px 0; color: #6b778c; }
.ov-rp-gen { margin: 0; font-size: 12px; color: #42526e; }
.ov-rp-gen b { color: #172b4d; }
.ov-rp-ft { font-size: 10px; color: #97a0af; border-top: 1px solid #ebecf0; padding-top: 8px; }
@media (max-width: 640px) {
  .ov-rp { margin: 0; width: 100%; height: 100%; border-radius: 0; border: 0; }
  .ov-rp-body { padding: 12px 8px 24px; }
  .ov-rp-paper { padding: 20px 16px 16px; }
  .ov-rp-hm { margin-left: 0; text-align: left; }
  .ov-rp-sub { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ov-rp-acts { margin-left: 0; width: 100%; }
}
/* Download PDF prints only the paper. */
@media print {
  html.ov-rp-printing body > *:not(.ov-rp) { display: none !important; }
  html.ov-rp-printing .ov-rp { position: static; width: auto; height: auto; border: 0; border-radius: 0; background: #fff; overflow: visible; }
  html.ov-rp-printing .ov-rp::backdrop { display: none; }
  html.ov-rp-printing .ov-rp-in { height: auto; }
  html.ov-rp-printing .ov-rp-bar, html.ov-rp-printing .ov-rp-notes { display: none; }
  html.ov-rp-printing .ov-rp-body { overflow: visible; padding: 0; background: #fff; }
  html.ov-rp-printing .ov-rp-paper { max-width: none; box-shadow: none; border-radius: 0; padding: 0; }
  html.ov-rp-printing .ov-rp-loc { break-inside: avoid; }
}