/* ==========================================================================
   Daily Work Reports -- app shell styling.

   Every colour is a token so light and dark stay in sync. The light theme is
   tuned for direct sunlight (strong borders, near-black text, no washed-out
   greys); the dark theme is tuned for night shifts. Sizing targets gloved
   thumbs on a phone: 44px minimum on anything tappable and 16px form text so
   iOS doesn't zoom on focus.
   ========================================================================== */

:root {
  color-scheme: light;

  --brand: #1c3d5a;
  --brand-strong: #142d43;
  --brand-light: #2f5d82;
  --on-brand: #ffffff;
  --on-brand-dim: #c9dcec;
  --brand-dim: rgba(28, 61, 90, 0.09);
  --link: #1a5c92;

  --bg: #eef2f6;
  --surface: #ffffff;
  --surface-2: #f4f7f9;
  --surface-3: #e7ecf1;

  --border: #c2ccd6;
  --border-strong: #94a3b1;

  --text: #10171d;
  --text-dim: #4f5c68;

  --danger: #b3261e;
  --danger-bg: rgba(179, 38, 30, 0.08);
  --ok: #17703a;
  --ok-bg: rgba(23, 112, 58, 0.1);
  --warn: #8a5209;
  --warn-bg: rgba(201, 114, 12, 0.1);
  --warn-border: rgba(201, 114, 12, 0.35);

  --shadow: 0 1px 2px rgba(16, 23, 29, 0.06), 0 2px 8px rgba(16, 23, 29, 0.06);
  --shadow-lg: 0 6px 20px rgba(16, 23, 29, 0.18);
  --focus: #2b7bbf;

  --radius: 12px;
  --radius-sm: 8px;
  --tap: 44px;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Dark theme. Declared twice on purpose: once for "device is dark and the user
   hasn't pinned light", once for an explicit dark choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --brand: #1d4b70;
    --brand-strong: #2a6390;
    --brand-light: #35719f;
    --on-brand: #ffffff;
    --on-brand-dim: #cfe3f2;
    --brand-dim: rgba(93, 160, 214, 0.16);
    --link: #7fbcf0;

    --bg: #0f1418;
    --surface: #1a2128;
    --surface-2: #212a32;
    --surface-3: #2a343d;

    --border: #35424e;
    --border-strong: #566673;

    --text: #eef3f7;
    --text-dim: #a2b1be;

    --danger: #ff8a80;
    --danger-bg: rgba(255, 138, 128, 0.12);
    --ok: #6ed69a;
    --ok-bg: rgba(110, 214, 154, 0.12);
    --warn: #f0b95c;
    --warn-bg: rgba(240, 185, 92, 0.12);
    --warn-border: rgba(240, 185, 92, 0.35);

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.55);
    --focus: #6db2ea;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --brand: #1d4b70;
  --brand-strong: #2a6390;
  --brand-light: #35719f;
  --on-brand: #ffffff;
  --on-brand-dim: #cfe3f2;
  --brand-dim: rgba(93, 160, 214, 0.16);
  --link: #7fbcf0;

  --bg: #0f1418;
  --surface: #1a2128;
  --surface-2: #212a32;
  --surface-3: #2a343d;

  --border: #35424e;
  --border-strong: #566673;

  --text: #eef3f7;
  --text-dim: #a2b1be;

  --danger: #ff8a80;
  --danger-bg: rgba(255, 138, 128, 0.12);
  --ok: #6ed69a;
  --ok-bg: rgba(110, 214, 154, 0.12);
  --warn: #f0b95c;
  --warn-bg: rgba(240, 185, 92, 0.12);
  --warn-border: rgba(240, 185, 92, 0.35);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.55);
  --focus: #6db2ea;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  padding-bottom: 3rem;
  -webkit-text-size-adjust: 100%;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Header / back-bar ---------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--brand);
  color: var(--on-brand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  box-shadow: var(--shadow);
}
.app-header h1 { font-size: 1.1rem; margin: 0; font-weight: 700; letter-spacing: 0.01em; }
.app-header .app-sub { font-size: 0.72rem; color: var(--on-brand-dim); margin-top: 2px; }
.app-header a.home-link { color: var(--on-brand); text-decoration: none; display: flex; flex-direction: column; }

/* ---------- Shared progress banner (see common.js) ---------- */
.progress-banner {
  background: var(--surface);
  border-bottom: 1.5px solid var(--border);
  padding: 0.7rem 1rem 0.8rem;
}
.progress-banner[hidden] { display: none; }

.pb-bar-track {
  height: 5px; border-radius: 3px; background: var(--surface-3);
  overflow: hidden; margin-bottom: 0.6rem; position: relative;
}
.pb-bar-fill {
  height: 100%; width: 6%; background: var(--brand); border-radius: 3px;
  transition: width 0.35s ease, background 0.25s ease;
}
.pb-bar-fill.pb-indeterminate {
  width: 32% !important;
  position: absolute; left: 0; top: 0;
  animation: pb-shimmer 1.15s ease-in-out infinite;
}
@keyframes pb-shimmer {
  0% { left: -35%; }
  100% { left: 100%; }
}
.progress-banner.pb-done .pb-bar-fill { background: var(--ok); }
.progress-banner.pb-error .pb-bar-fill { background: var(--danger); }

.pb-steps { display: flex; flex-direction: column; gap: 0.32rem; }
.pb-step { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; color: var(--text-dim); }
.pb-step-mark { width: 1.1rem; text-align: center; flex-shrink: 0; }
.pb-step-done { color: var(--text); }
.pb-step-done .pb-step-mark { color: var(--ok); font-weight: 700; }
.pb-step-active { color: var(--text); font-weight: 600; }
.pb-step-active .pb-step-mark::before {
  content: ''; display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--brand);
  animation: pb-spin 0.7s linear infinite;
}
@keyframes pb-spin { to { transform: rotate(360deg); } }
.pb-step-error { color: var(--danger); }
.pb-step-error .pb-step-mark { color: var(--danger); font-weight: 700; }

.pb-error-row {
  margin-top: 0.6rem; padding: 0.6rem 0.75rem;
  background: var(--danger-bg); border: 1.5px solid var(--danger); border-radius: var(--radius-sm);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  color: var(--danger); font-size: 0.85rem; white-space: pre-line;
}
.pb-error-row #pb-dismiss {
  background: none; border: none; color: inherit; font-size: 1.2rem; line-height: 1;
  cursor: pointer; padding: 0 0.1rem; flex-shrink: 0;
}

/* Company logo, shown in the header only once the app is installed (added to
   the home screen) -- a browser tab already has its own favicon, so this is
   reserved for the "feels like a real app" moment. */
.app-header .header-logo {
  height: 34px;
  width: auto;
  max-width: 92px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Gear in the header -- icon only, but a full 44px tap target. */
.header-gear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  color: var(--on-brand);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.header-gear:hover { background: rgba(255, 255, 255, 0.22); }
/* The source icon is black on transparent; inverting paints it white so it
   reads on the brand header in either theme. */
.header-gear img {
  width: 22px;
  height: 22px;
  display: block;
  filter: invert(1);
}

/* Segmented control (theme picker) */
.segmented {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.segmented button {
  flex: 1;
  min-height: var(--tap);
  padding: 0.6rem 0.5rem;
  border: none;
  border-right: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.segmented button:last-child { border-right: none; }
.segmented button:hover { background: var(--surface-2); }
.segmented button[aria-pressed="true"] {
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
}

/* Colour swatches (accent colour, etc). Each shows its own colour, so they
   can't reuse .segmented's aria-pressed rule (that forces the brand colour
   as the "selected" background, which would erase the swatch it's for). */
.color-swatches { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.5rem 0; }
.swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}
.swatch[aria-pressed="true"] {
  border-color: var(--link);
  box-shadow: 0 0 0 2px var(--focus);
}
.swatch-custom {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  padding: 3px;
  /* The global input{min-height:var(--tap)} rule would otherwise clamp this
     to a 40x44 ellipse instead of the circle every other swatch is. */
  min-height: 0;
  min-width: 0;
}
.swatch-custom::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.swatch-custom::-webkit-color-swatch { border: none; border-radius: 50%; }
.swatch-custom::-moz-color-swatch { border: none; border-radius: 50%; }

.back-bar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.back-bar a { color: var(--link); text-decoration: none; font-weight: 700; padding: 0.2rem 0; }
.back-bar .bb-sep,
.back-bar .bb-cur { color: var(--text-dim); }

main { max-width: 780px; margin: 0 auto; padding: 1rem; }

/* Optional per-project background photo on the project landing page --
   sits at the very top of the document (not fixed -- it scrolls away like
   normal content), fading via a dark gradient into the ordinary page
   background by about halfway down its own height so it blends away
   rather than cutting off. Page content (header excepted, which is
   opaque+sticky already) simply stacks on top via normal flow, since this
   sits at a negative z-index. */
.page-bg-img {
  position: absolute; top: 0; left: 0; width: 100%; height: 55vh; min-height: 320px;
  object-fit: cover; z-index: -1; pointer-events: none;
}
.page-bg-fade {
  position: absolute; top: 0; left: 0; width: 100%; height: 55vh; min-height: 320px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 35%, var(--bg) 100%);
  z-index: -1; pointer-events: none;
}

/* ---------- Hub / card grid ---------- */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1rem 0;
}
@media (max-width: 560px) { .hub-grid { grid-template-columns: 1fr; } }

.hub-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-decoration: none;
  color: var(--text);
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
/* Optional per-project background photo (Company Management) -- covers the
   top of the card, then fades to the card's own surface colour by roughly
   its halfway point so it blends back into a normal card rather than
   stopping abruptly. The dark gradient (not just a transparent fade) is
   what keeps the icon/title legible over an arbitrary uploaded photo. */
.hub-card .hc-bg-img {
  position: absolute; top: 0; left: 0; width: 100%; height: 55%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.hub-card .hc-bg-fade {
  position: absolute; top: 0; left: 0; width: 100%; height: 55%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.58) 40%, var(--surface) 100%);
  z-index: 0; pointer-events: none;
}
.hub-card .hc-icon, .hub-card .hc-title, .hub-card .hc-desc, .hub-card .hc-count {
  position: relative; z-index: 1;
}
.hub-card.has-bg .hc-icon, .hub-card.has-bg .hc-title { color: #fff; }
.hub-card:hover {
  border-color: var(--brand-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.hub-card .hc-icon { font-size: 1.9rem; display: block; margin-bottom: 0.5rem; }
.hub-card .hc-title { font-weight: 700; font-size: 1.08rem; margin-bottom: 0.3rem; }
.hub-card .hc-desc { font-size: 0.85rem; color: var(--text-dim); line-height: 1.45; }
.hub-card .hc-favorite {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%; cursor: pointer;
  font-size: 1.25rem; line-height: 1; color: rgba(255,255,255,0.55);
  padding: 0;
}
.hub-card:not(.has-bg) .hc-favorite { color: var(--border); }
.hub-card .hc-favorite:hover { color: #f5c518; background: rgba(0,0,0,0.12); }
.hub-card .hc-favorite.is-fav { color: #f5c518; }
.hub-card .hc-count {
  display: inline-flex;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--link);
  background: var(--brand-dim);
  padding: 3px 9px;
  border-radius: 10px;
}
.hub-card.add-card {
  border-style: dashed;
  border-width: 2px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--link);
  font-weight: 700;
  min-height: 96px;
  box-shadow: none;
}

.eyebrow {
  font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700;
  margin: 1.4rem 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}

/* ---------- Step sections ---------- */

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.step-header {
  background: var(--brand);
  color: var(--on-brand);
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.step-num {
  font-size: 0.68rem; font-weight: 700; background: rgba(255,255,255,0.22);
  padding: 3px 9px; border-radius: 10px; letter-spacing: 0.03em; white-space: nowrap;
}
.step-header h2 { font-size: 0.95rem; font-weight: 700; margin: 0; letter-spacing: 0.01em; }
.step-tag {
  margin-left: auto; font-size: 0.64rem; font-weight: 700; background: rgba(255,255,255,0.22);
  padding: 3px 9px; border-radius: 10px; white-space: nowrap;
}
.step-body { padding: 1rem; }

/* ---------- Required fields (admin-marked, per project) ---------- */

/* Red-border cue on report-editor.html for a field the admin marked
   required but this report hasn't filled in yet. Outline (not border) so it
   never nudges layout, and survives on step containers that use
   overflow:hidden for their own header/background effects. */
.rf-missing {
  outline: 2px solid var(--danger) !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Shared bits reused by both sections below: the drag handle/arrows and
   the small HIDDEN/REQUIRED badges. */
.fo-handle { cursor: grab; color: var(--text-dim); font-size: 1.1rem; line-height: 1; touch-action: none; }
.fo-arrows { display: flex; flex-direction: column; gap: 2px; }
.fo-arrow {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 0.55rem; line-height: 1; padding: 2px 4px; min-height: 0;
}
.fo-arrow:hover { color: var(--link); }
.fo-hidden-tag, .rf-required-tag {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 1px 6px; border-radius: 8px; margin-left: 0.4rem; white-space: nowrap;
}
.fo-hidden-tag { background: var(--surface-2); color: var(--text-dim); }
.rf-required-tag { background: var(--danger); color: #fff; }
.fo-btn {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px; cursor: pointer; min-height: 0; white-space: nowrap;
}
.fo-btn.active { background: var(--danger); color: #fff; border-color: var(--danger); }
.fo-btn.fo-hide-btn.active { background: var(--text-dim); border-color: var(--text-dim); }

/* ---- Section 1: click-the-image to mark Required/Hidden ---- */

.rf-preview-page-wrap { margin: 0 auto 0.9rem; position: relative; overflow: hidden; border: 1px solid var(--border); }
.rf-preview-page-wrap:last-child { margin-bottom: 0; }

/* One invisible-until-touched box per field, positioned over the live
   preview at that field's real printed coordinates (FIELD_HIGHLIGHT_REGIONS
   in render-report.js) -- the click target IS the report, not a separate
   list. State (required/hidden) is visible on the image itself so there's
   no need to open anything just to see what's already set. */
.rf-click-target {
  cursor: pointer;
  outline: 1px dashed rgba(128, 140, 160, 0.5);
  outline-offset: -1px;
  background: transparent;
  transition: background 0.1s;
  z-index: 4;
}
.rf-click-target:hover { background: rgba(70, 130, 230, 0.16); }
.rf-click-target.is-required { outline: 2px solid var(--danger); background: rgba(211, 47, 47, 0.18); }
.rf-click-target.is-hidden { outline: 2px dashed var(--text-dim); background: rgba(120, 120, 120, 0.18); }
.rf-click-target.rf-popover-open { outline: 2px solid var(--link); background: rgba(70, 130, 230, 0.22); }

/* The options popover that appears when a box on the image is clicked. */
.rf-popover {
  position: fixed; z-index: 600;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.75rem;
  width: 240px;
  max-width: calc(100vw - 1.5rem);
}
.rf-popover[hidden] { display: none; }
.rf-popover-close {
  position: absolute; top: 0.4rem; right: 0.5rem;
  background: none; border: none; color: var(--text-dim); font-size: 1.2rem;
  cursor: pointer; min-height: 0; padding: 0 0.25rem; line-height: 1;
}
.rf-popover-title { font-weight: 700; font-size: 0.88rem; margin: 0 1.2rem 0.6rem 0; color: var(--text); }
.rf-popover-actions { display: flex; flex-direction: column; gap: 0.4rem; }
.rf-popover-actions .fo-btn { width: 100%; text-align: center; }

/* ---- Section 2: drag-reorder, styled like the real report-editor form ---- */

#reorder-cards .step { margin-bottom: 0.6rem; cursor: default; }
#reorder-cards .step.dragging { opacity: 0.4; }
#reorder-cards .step.rf-hidden-card { opacity: 0.55; border-style: dashed; }
#reorder-cards .step .step-header { gap: 0.5rem; }
#reorder-cards .step .step-header h2 { flex: 1; }
#reorder-cards .step[draggable="true"] .step-header { cursor: grab; }
.rf-fixed-card .step-header { cursor: default; }
.rf-fixed-card { opacity: 0.75; }

/* Floating save bar (required-fields.html) -- edits are staged in memory as
   the admin clicks fields, and only written with saveProject() when this
   is pressed, rather than firing a write per click. */
.floating-save-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
  transform: translateY(100%);
  transition: transform 0.18s ease;
}
.floating-save-bar.show { transform: translateY(0); }
.floating-save-bar .btn-primary { width: auto; min-width: 200px; }
.floating-save-bar .fsb-status { font-size: 0.85rem; color: var(--text-dim); }

/* Large, hard-to-miss blocker shown when Generate Report is clicked with
   required fields still empty. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 440px; width: 100%;
  padding: 1.5rem;
}
.rf-warning-card { border: 2px solid var(--danger); text-align: center; }
.rf-warning-card .rf-warning-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 0.5rem; }
.rf-warning-card h2 { color: var(--danger); margin: 0 0 0.5rem; font-size: 1.15rem; }
.rf-warning-card p { margin: 0; color: var(--text-dim); font-size: 0.9rem; }
.rf-warning-card ul { text-align: left; margin: 0.9rem 0 1.3rem; padding-left: 1.3rem; }
.rf-warning-card li { font-weight: 700; margin-bottom: 0.3rem; }
.rf-warning-card .btn-primary { width: 100%; }

/* ---------- Forms ---------- */

label {
  display: flex;
  flex-direction: column;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 0.8rem;
  gap: 0.3rem;
}
input, textarea, select {
  font-size: 16px; /* below 16px iOS zooms the whole page on focus */
  padding: 0.65rem 0.7rem;
  min-height: var(--tap);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  width: 100%;
  background: var(--surface);
  color: var(--text);
}
input:focus, textarea:focus, select:focus { border-color: var(--focus); }
textarea { resize: vertical; min-height: 5rem; line-height: 1.45; }
input[type="checkbox"], input[type="radio"] {
  width: 1.35rem; height: 1.35rem; min-height: 0; accent-color: var(--brand-light);
}
input[type="file"] { min-height: 0; }

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.75rem;
}

.hint { font-size: 0.8rem; font-weight: 400; color: var(--text-dim); margin: 0.25rem 0 0; }
.warn {
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; font-size: 0.82rem;
  color: var(--warn); margin-bottom: 0.75rem;
}

.no-work-day-bar {
  background: var(--surface); border: 1.5px dashed var(--border);
  border-radius: var(--radius); padding: 0.85rem 1rem; margin-bottom: 1rem;
}
.no-work-day-bar .btn-secondary { margin-top: 0; }

/* ---------- Upload zones ---------- */

.uz {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 1.4rem 1rem;
  text-align: center;
  cursor: pointer;
  position: relative;
  background: var(--surface-2);
  transition: border-color 0.15s, background 0.15s;
}
.uz:hover { border-color: var(--brand-light); background: var(--surface-3); }
.uz.has { border-color: var(--ok); border-style: solid; background: var(--ok-bg); }
.uz input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.uz .uz-icon { font-size: 1.7rem; display: block; margin-bottom: 0.35rem; }
.uz .uz-lbl { font-weight: 700; font-size: 0.9rem; display: block; margin-bottom: 0.2rem; color: var(--text); }
.uz .uz-hint { font-size: 0.76rem; color: var(--text-dim); }
.uz .uz-fname { display: none; font-size: 0.76rem; color: var(--ok); margin-top: 0.3rem; font-weight: 700; word-break: break-all; }
.uz.has .uz-fname { display: block; }
.uz.has .uz-hint { display: none; }

/* ---------- Filters ---------- */

.filter-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.75rem 0; align-items: flex-end; }
.filter-box { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 130px; }
.filter-box label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 0;
}

/* ---------- Checklists (pay item selector) ---------- */

.check-list {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  max-height: 300px; overflow-y: auto; margin-top: 0.5rem; background: var(--surface);
}
.check-item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem;
  border-bottom: 1px solid var(--border); font-size: 0.9rem; cursor: pointer;
  min-height: var(--tap);
}
.check-item:last-child { border-bottom: none; }
.check-item:hover { background: var(--surface-2); }
.check-item.selected { background: var(--brand-dim); }
.check-item .ci-main { flex: 1; }
.check-item .ci-num { font-weight: 700; }
.check-item .ci-desc { color: var(--text-dim); font-size: 0.82rem; }
.check-item .ci-unit { font-size: 0.74rem; color: var(--text-dim); }
.empty-list { font-size: 0.82rem; color: var(--text-dim); text-align: center; padding: 1.25rem; }

/* A catalog item with Stations/Locations enabled (see project-file.js) can
   be logged more than once a day, so it gets a "+" tap-to-add row instead
   of the plain on/off checkbox everything else uses. */
.check-item.check-item-multi .ci-add-icon {
  flex: 0 0 auto; width: 1.35rem; height: 1.35rem; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700; color: var(--link); border: 1.5px dashed var(--link); border-radius: 50%;
}
.check-item .ci-flag {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em;
  background: var(--brand-dim); color: var(--link); padding: 1px 6px; border-radius: 8px;
  vertical-align: middle;
}

.selected-items { margin-top: 0.85rem; }
.selected-item-row-wrap {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 0.5rem; background: var(--surface); overflow: hidden;
}
.selected-item-row {
  display: grid; grid-template-columns: 1fr 90px auto; gap: 0.5rem; align-items: center;
  padding: 0.6rem;
}
.selected-item-row .si-desc { font-size: 0.85rem; line-height: 1.35; color: var(--text); }
.selected-item-row .si-desc .si-num { font-weight: 700; }
.selected-item-row input[type="number"] { text-align: right; }
.selected-item-row .si-remove {
  background: none; border: none; color: var(--danger); font-size: 1.3rem;
  cursor: pointer; padding: 0 0.35rem; min-width: var(--tap); min-height: var(--tap);
}
.si-extra {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 0 0.6rem 0.6rem; border-top: 1px dashed var(--border); margin-top: -1px; padding-top: 0.5rem;
}
.si-extra .si-station { flex: 1 1 120px; min-width: 0; }
.si-extra .si-location { flex: 1 1 160px; min-width: 0; }

.add-manual {
  background: var(--surface-2); border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm); padding: 0.85rem; margin-top: 0.75rem;
}
.add-manual-header {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 0.5rem; cursor: pointer;
  display: flex; align-items: center; gap: 0.4rem; min-height: 1.75rem;
}
.add-manual-fields { display: none; grid-template-columns: 1fr 1fr 1fr auto; gap: 0.5rem; align-items: flex-end; }
.add-manual-fields.show { display: grid; }
@media (max-width: 600px) { .add-manual-fields { grid-template-columns: 1fr 1fr; } }

/* ---------- Time worked ---------- */

.time-worked-block {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.75rem; margin-bottom: 0.9rem; background: var(--surface-2);
}
.time-entry-row { display: grid; grid-template-columns: 1fr auto 1fr auto auto; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.time-entry-row span.te-to { font-size: 0.82rem; color: var(--text-dim); }
.time-entry-row .te-subtotal { font-size: 0.82rem; color: var(--text-dim); white-space: nowrap; min-width: 3.4rem; text-align: right; }
.time-entry-row .te-remove {
  background: none; border: none; color: var(--danger); font-size: 1.4rem;
  cursor: pointer; padding: 0 0.3rem; min-width: 2.5rem; min-height: 2.5rem;
}
/* Two native <input type="time"> fields have a browser-enforced minimum
   render width that a 5-column row has no room for once a phone gets narrow
   enough -- it was pushing the whole page wider. Below that width, wrap the
   subtotal onto its own line instead of fighting the inputs for space. */
@media (max-width: 400px) {
  .time-entry-row {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "start to end" "subtotal subtotal remove";
    row-gap: 0.2rem;
  }
  .time-entry-row .te-start { grid-area: start; }
  .time-entry-row span.te-to { grid-area: to; }
  .time-entry-row .te-end { grid-area: end; }
  .time-entry-row .te-subtotal { grid-area: subtotal; text-align: left; min-width: 0; }
  .time-entry-row .te-remove { grid-area: remove; justify-self: end; }
}

.total-hours-row {
  display: flex; align-items: baseline; justify-content: space-between;
  background: var(--brand-dim); border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem; margin: 0.5rem 0 0.5rem; font-weight: 700; color: var(--text);
}
.total-hours-value { font-size: 1.5rem; color: var(--link); }
.hours-override { margin-bottom: 0 !important; }
.hours-override input { max-width: 8rem; }

/* ---------- Contractors / equipment ---------- */

.tab-row { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.6rem; }
.tab-btn {
  flex: 0 0 auto; padding: 0.6rem 1rem; border-radius: 22px; border: 1.5px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: 0.88rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; min-height: var(--tap);
}
.tab-btn.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.contractor-name-input { margin-bottom: 0.75rem; }
.equip-row {
  display: grid; grid-template-columns: 1fr 90px; gap: 0.5rem; align-items: center;
  padding: 0.4rem 0; border-bottom: 1px solid var(--border);
}
.equip-row:last-child { border-bottom: none; }
.equip-row input[type="number"] { text-align: right; }

/* ---------- Sign-off ---------- */

.radio-row { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.radio-row label {
  flex-direction: row; align-items: center; gap: 0.5rem; font-size: 1rem;
  color: var(--text); min-height: var(--tap);
}
.sig-block { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1.5px dashed var(--border); }
.sig-label { font-size: 0.85rem; font-weight: 700; color: var(--text-dim); display: block; margin-bottom: 0.3rem; }
.sig-pad {
  width: 100%; max-width: 100%; height: 150px;
  /* Always a light pad -- signatures are drawn in dark ink. */
  background: #fbfbfb;
  border: 2px dashed var(--border-strong); border-radius: var(--radius-sm);
  touch-action: none; display: block;
}

/* ---------- Photos ---------- */

.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.photo-slot {
  aspect-ratio: 4 / 3; border: 2px dashed var(--border-strong); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; position: relative;
  overflow: hidden; background: var(--surface-2); font-size: 0.88rem; color: var(--text-dim);
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.photo-slot .photo-remove {
  position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,0.65); color: #fff;
  border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 1.1rem; cursor: pointer;
}
.photo-slot input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-slot .photo-num { position: absolute; bottom: 5px; left: 7px; font-size: 0.72rem; color: var(--text-dim); }

/* ---------- Report list ---------- */

.report-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 5rem; }
.report-row {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 0.85rem 1rem; display: flex; justify-content: space-between; align-items: center;
  gap: 0.7rem; box-shadow: var(--shadow);
}
.report-row-check { width: 1.35rem; height: 1.35rem; flex-shrink: 0; }
.report-row-thumb-wrap {
  /* Matches the report sheet's own landscape aspect ratio (see
     renderReportPages/dailyWorkReport's orientation in print-layout.json)
     so object-fit:cover below crops top/bottom evenly instead of chopping
     off its left or right side. */
  flex: 0 0 auto; width: 64px; height: 51px; border-radius: 4px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.report-row-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.report-row-thumb-placeholder { font-size: 1.1rem; opacity: 0.5; }
.report-row-check-spacer { display: inline-block; width: 1.35rem; height: 1.35rem; flex-shrink: 0; }
.report-row .report-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; cursor: pointer; }
.report-row .report-row-date { font-weight: 700; font-size: 1rem; }
.report-row .report-row-author {
  font-size: 0.68rem; font-weight: 700; color: var(--link);
  background: var(--brand-dim); padding: 2px 8px; border-radius: 10px;
  vertical-align: middle; white-space: nowrap;
}
.report-row .report-row-nwd {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; color: #fff;
  background: var(--danger); padding: 2px 8px; border-radius: 10px;
  vertical-align: middle; white-space: nowrap;
}
.report-row .report-row-sub { font-size: 0.83rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-row .report-row-actions { display: flex; align-items: center; gap: 0.5rem; }
.report-row .report-row-no {
  font-size: 0.78rem; font-weight: 700; color: var(--on-brand);
  background: var(--brand-light); padding: 0.25rem 0.65rem; border-radius: 12px;
}

.select-all-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0.2rem 0.6rem; font-size: 0.88rem; color: var(--text-dim);
}

.empty-state {
  text-align: center; color: var(--text-dim); padding: 3rem 1rem;
  background: var(--surface); border: 1.5px dashed var(--border); border-radius: var(--radius);
  line-height: 1.5;
}

/* ---------- Buttons ---------- */

.btn-secondary, .btn-primary, .btn-danger {
  border: none; border-radius: var(--radius-sm); padding: 0.75rem 1rem;
  font-size: 1rem; font-weight: 600; font-family: inherit;
  cursor: pointer; margin-top: 0.5rem; min-height: var(--tap);
}
.btn-secondary { background: var(--surface-3); color: var(--text); border: 1.5px solid var(--border); }
.btn-secondary:hover { border-color: var(--brand-light); }
.btn-primary {
  background: var(--brand); color: var(--on-brand); width: 100%;
  padding: 0.95rem; font-size: 1.08rem; font-weight: 700; box-shadow: var(--shadow);
}
.btn-primary:hover { background: var(--brand-strong); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn-danger { background: var(--surface); color: var(--danger); border: 1.5px solid var(--danger); width: 100%; }
.btn-sm {
  background: var(--surface-2); color: var(--text); border: 1.5px solid var(--border);
  font-size: 0.82rem; padding: 0.5rem 0.9rem; font-weight: 700; cursor: pointer;
  border-radius: 16px; text-decoration: none; display: inline-flex; align-items: center;
  min-height: 2.25rem;
}
.btn-sm:hover { border-color: var(--brand-light); }

.text-btn {
  background: none; border: none; font-size: 0.92rem; font-weight: 700;
  padding: 0.4rem 0.5rem; cursor: pointer; font-family: inherit; color: var(--link);
  min-height: 2.25rem;
}
.app-header .text-btn { color: var(--on-brand); }
.select-all-row .text-btn { padding-left: 0; }
.fab {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: var(--on-brand); border: none; border-radius: 30px;
  padding: 1rem 1.75rem; font-size: 1.05rem; font-weight: 700; font-family: inherit;
  box-shadow: var(--shadow-lg); cursor: pointer; z-index: 20; text-decoration: none;
  min-height: var(--tap); display: inline-flex; align-items: center;
}
.fab:hover { background: var(--brand-strong); }
.fab:disabled { background: var(--border-strong); box-shadow: none; cursor: not-allowed; }

.export-bar { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }

.success {
  background: var(--ok-bg); border: 1.5px solid var(--ok); border-radius: var(--radius-sm);
  padding: 0.75rem 1rem; font-weight: 700; color: var(--ok); text-align: center;
  margin-bottom: 1rem; font-size: 0.92rem;
}
.err {
  background: var(--danger-bg); border: 1.5px solid var(--danger); border-radius: var(--radius-sm);
  padding: 0.75rem 1rem; color: var(--danger); margin: 0.75rem 0; font-size: 0.88rem;
}

/* ---------- Tooltips ---------- */
/* data-tip carries the text; the bubble is pure CSS so nothing needs to be
   positioned or shown/hidden from JS. Hover for a mouse, focus for a
   keyboard -- there's no touch equivalent, so on a phone these are just
   inert (the numbers still stand on their own). */
[data-tip] { position: relative; cursor: help; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  background: var(--text); color: var(--bg);
  font-size: 0.74rem; font-weight: 500; line-height: 1.4;
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm);
  width: max-content; max-width: 230px; text-align: left;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 30;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
[data-tip]::before {
  content: '';
  position: absolute; left: 50%; bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent; border-top-color: var(--text);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 30;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
[data-tip]:hover::after, [data-tip]:hover::before,
[data-tip]:focus-visible::after, [data-tip]:focus-visible::before {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* A touch device has no hover, so these can never actually be triggered --
   and being visibility:hidden rather than display:none, they still occupy
   layout space and were quietly widening the whole page's scrollable area
   on narrow screens even while invisible. Drop them outright where hover
   doesn't exist rather than carry dead, overflow-causing boxes around. */
@media (hover: none) {
  [data-tip]::after, [data-tip]::before { content: none; }
}

/* ---------- Project dashboard ---------- */

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem;
  margin: 1rem 0;
}
.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0; /* a grid/flex item's content otherwise refuses to shrink below its intrinsic size, which is how a long unbroken dollar figure pushed the card past its column and out of the grid */
}
.dash-card .dc-value {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--brand);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  /* Shrink-to-fit (see fitDashboardValues in project.html) keeps a long
     figure on one line by shrinking the font instead of wrapping it, which
     read as broken/uneven next to the other cards. Wrapping is only a
     fallback for the rare figure still too long even at the smallest
     readable size -- overflow-wrap keeps that fallback from spilling out
     of the card. */
  white-space: nowrap;
  overflow-wrap: anywhere;
}
.dash-card .dc-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dash-card .dc-sub {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 0.15rem;
}
.dc-bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
  margin-top: 0.5rem;
}
.dc-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* The headline card pairs an SVG ring with its own number/label -- it earns
   the extra width so the ring + two lines of text have room to sit side by
   side without wrapping into a mess. A dedicated narrow-phone override used
   to collapse this back to a single ~150px column, which was nowhere near
   enough room for the ring plus its label and left the text overflowing;
   removed rather than patched, since .dash-grid's own auto-fit already
   collapses to one column on anything too narrow for two, and span-2 on a
   one-column grid is just a no-op full-width card. */
.dash-card.dc-headline {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  gap: 1.1rem;
}
.dash-card.dc-headline > div { min-width: 0; }

.ring-wrap { position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--surface-3); stroke-width: 10; }
.ring-fill {
  /* No stroke here on purpose -- every ring sets its own color via the
     inline stroke="" attribute (ringSvg in project.html), which a
     stylesheet rule would otherwise always win over and silently override,
     regardless of what color the caller actually asked for. */
  fill: none; stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
}
.ring-wrap .ring-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 800; color: var(--text);
}

.dash-empty {
  text-align: center; color: var(--text-dim); padding: 2rem 1rem;
  background: var(--surface); border: 1.5px dashed var(--border); border-radius: var(--radius);
  font-size: 0.88rem; margin: 1rem 0;
}

.bar-list { display: flex; flex-direction: column; gap: 0.9rem; max-height: 560px; overflow-y: auto; padding-right: 0.25rem; }
.bar-row { min-width: 0; }
.bar-row .br-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.6rem; margin-bottom: 0.35rem; font-size: 0.82rem;
}
/* A flex item's default min-width is auto (its content's natural width), not
   0 -- without this, overflow:hidden/ellipsis never actually kicks in and a
   long description just pushes the row (and the whole page) wider instead
   of truncating. */
.bar-row .br-label { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .br-desc { color: var(--text-dim); font-weight: 400; }
.bar-track {
  height: 12px; border-radius: 8px; background: var(--surface-3); overflow: hidden;
}
.bar-fill {
  height: 100%; border-radius: 8px;
  transition: width 0.6s ease;
}
.bar-row .br-sub {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
  gap: 0.3rem 0.6rem; margin-top: 0.35rem; font-size: 0.76rem; color: var(--text-dim);
}
.bar-row .br-sub .br-pct { font-weight: 700; color: var(--text); white-space: nowrap; flex: 0 0 auto; }

/* ---------- Pay item status bands ----------
   One shared colour language (five bands + "no target") used in three
   places: the pill badge on each row, that row's bar fill, and the summary
   strip's segments/legend dots above the list -- so the colour always means
   the same thing wherever it shows up on the page. */
.status-dot.status-notstarted, .status-bar span.status-notstarted, .bar-fill.status-notstarted,
.status-dot.status-none, .status-bar span.status-none, .bar-fill.status-none { background: var(--border-strong); }
.status-dot.status-early, .status-bar span.status-early, .bar-fill.status-early { background: var(--warn); }
.status-dot.status-progress, .status-bar span.status-progress, .bar-fill.status-progress { background: linear-gradient(90deg, var(--brand), var(--brand-light)); }
.status-dot.status-near, .status-bar span.status-near, .bar-fill.status-near { background: linear-gradient(90deg, var(--ok), var(--brand-light)); }
.status-dot.status-over, .status-bar span.status-over, .bar-fill.status-over { background: linear-gradient(90deg, var(--danger), var(--warn)); }

.pill {
  display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 10px;
}
.pill.status-notstarted, .pill.status-none { background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border); }
.pill.status-early { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); }
.pill.status-progress { background: var(--brand-dim); color: var(--link); }
.pill.status-near { background: var(--ok-bg); color: var(--ok); }
.pill.status-over { background: var(--danger-bg); color: var(--danger); }

.status-bar { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: var(--surface-3); margin-bottom: 0.7rem; }
.status-bar span { height: 100%; display: block; }
.status-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-bottom: 1rem; }
.status-legend .sl-item {
  display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-dim);
  cursor: pointer; padding: 2px 6px; margin: -2px -6px; border-radius: 10px; user-select: none;
}
.status-legend .sl-item:hover { background: var(--surface-2); }
.status-legend .sl-item.sl-off { opacity: 0.4; text-decoration: line-through; }
.status-legend .sl-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }

/* Search/sort controls above the Pay Item Completion list -- band filtering
   is done via clicking the legend chips above instead of a control here. */
.pi-controls { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.pi-controls input[type="text"] { flex: 1 1 220px; margin-bottom: 0; }
.pi-controls select { flex: 0 0 auto; width: auto; min-width: 210px; margin-bottom: 0; }

/* ---------- Progress-over-time chart ---------- */

.trend-svg { width: 100%; height: auto; display: block; }
.trend-grid { stroke: var(--border); stroke-width: 1; }
.trend-axis-label { font-size: 9px; fill: var(--text-dim); }
.trend-area { fill: var(--brand-dim); stroke: none; }
.trend-line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.trend-dot { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }

/* ---------- Weather & schedule log ---------- */

.weather-log { display: flex; flex-direction: column; gap: 0.6rem; max-height: 460px; overflow-y: auto; padding-right: 0.25rem; }
.wlog-row { display: flex; gap: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.65rem 0.8rem; background: var(--surface); }
.wlog-date { flex: 0 0 auto; width: 60px; font-weight: 700; font-size: 0.8rem; color: var(--text); }
.wlog-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; color: var(--text-dim); }
.wlog-weather { color: var(--text); }
.wlog-tc { display: flex; align-items: center; gap: 0.4rem; }
.wlog-tc .status-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; flex: 0 0 auto; }
.wlog-comment { font-style: italic; }

.settings-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; padding: 0.85rem 1rem; margin-top: 0.5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-family: inherit; font-size: 0.92rem; font-weight: 700;
  cursor: pointer; min-height: var(--tap);
}
.settings-toggle:hover { border-color: var(--brand-light); }
.settings-toggle .st-chevron { transition: transform 0.2s ease; color: var(--text-dim); }
.settings-toggle[aria-expanded="true"] .st-chevron { transform: rotate(180deg); }
#project-settings-panel { margin-top: 0.75rem; }