*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

  :root {
    --font: -apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", "Fira Code", "Menlo", monospace;
    --accent: #ff8200;
    --accent-soft: rgba(255,130,0,0.10);
    --accent-border: rgba(255,130,0,0.22);
    --blue: #0a84ff;
    --blue-soft: rgba(10,132,255,0.07);
    --blue-border: rgba(10,132,255,0.18);
    --green: #30d158;
    --red: #ff3b30;
    --yellow: #ffd60a;
    --purple: #bf5af2;
    --radius: 14px;
    --radius-sm: 9px;
    --bg: #f0f2f5;
    --surface: #ffffff;
    --surface2: #e8eaed;
    --border: rgba(0,0,0,0.08);
    --border-hover: rgba(0,0,0,0.15);
    --text-primary: #111;
    --text-secondary: #555;
    --text-muted: rgba(0,0,0,0.38);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.05);
    --shadow-modal: 0 24px 60px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.10);
    /* Customer outer container: now holds TWO internal columns (New
       production / In Progress) side by side, so it's wider than the old
       single-column design; --subcol-min-width keeps each internal column
       comfortably readable (report-card width/density unchanged). */
    --col-width: 560px;
    --subcol-min-width: 260px;
    --col-gap: 14px;
    --header-h: 60px;
    --toolbar-h: 56px;
  }

  /* Integration note: board-view.html is a standalone full-viewport page
     (fixed topbar/toolbar/canvas covering the whole screen). This page
     lives INSIDE app-v3's manage/base.html shell (.mp-sidebar + .mp-main),
     so the board-view layout below is adapted from viewport-fixed to
     contained-within-.mp-main -- everything else (cards, modal, fields,
     pills, subitems, etc.) is the original board-view styling untouched.
     .bv-topbar is intentionally NOT reused (manage/base.html's own
     .mp-topbar already provides the page header/crumb). */

  .mp-osp-board-root {
    font-family: var(--font);
  }

  /* Fill the management shell's remaining height instead of a guessed
     `calc(100vh - Npx)`: .mp-main--osp (this page only -- other management
     pages keep their normal page-level scroll) becomes a flex column, the
     breadcrumb/topbar stays auto-height, and the OSP root takes the rest.
     .mp-main normally scrolls the whole page (overflow-y: auto); here the
     inner board provides its own scroll regions instead, so the outer
     scroll is turned off to avoid a redundant/confusing double scrollbar. */
  .mp-main--osp {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    /* .mp-main's shared 32px bottom padding is sized for a normally-scrolling
       page; the board fills exactly to the flex boundary already, so a
       tighter bottom inset (still respecting the safe-area inset) reads as
       "near the bottom" instead of leaving a second, redundant margin. */
    padding-bottom: calc(12px + var(--safe-bottom));
  }
  .mp-main--osp .mp-topbar {
    flex: 0 0 auto;
  }
  .mp-osp-board-root {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* ── Top bar (unused here -- manage/base.html's .mp-topbar replaces it;
     kept for selector completeness, force-hidden) ── */
  .bv-topbar { display: none !important; }
  ._bv-topbar-disabled {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 14px;
    z-index: 200;
  }

  .bv-logo {
    height: 32px;
    width: auto;
    flex-shrink: 0;
  }

  .bv-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    flex-shrink: 0;
  }

  .bv-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    flex-shrink: 0;
  }

  .bv-topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .bv-count-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--surface2);
    border: 1px solid var(--border);
  }

  /* ── Toolbar (contained in-flow, not viewport-fixed) ── */
  .bv-toolbar {
    position: relative;
    height: auto;
    min-height: var(--toolbar-h);
    flex: 0 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 10px;
    z-index: 20;
    margin-bottom: 14px;
  }

  .bv-search-wrap {
    position: relative;
    flex: 1;
    max-width: 320px;
  }

  .bv-search-icon {
    position: absolute;
    left: 11px; top: 50%;
    transform: translateY(-50%);
    width: 15px; height: 15px;
    color: var(--text-muted);
    pointer-events: none;
  }

  .bv-search {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 34px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-family: var(--font);
    font-size: 13.5px;
    color: var(--text-primary);
    outline: none;
    transition: border-color .18s, box-shadow .18s;
  }
  .bv-search:focus {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: #fff;
  }
  .bv-search::placeholder { color: var(--text-muted); }

  .bv-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .bv-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
  }

  /* Show Paid toolbar toggle -- only affects the five/six-lane workflow
     views (expanded Customer / global Crew); harmless/inert on the
     collapsed overview, which never shows Paid regardless. */
  .bv-show-paid {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
  }
  .bv-show-paid input[type="checkbox"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .bv-show-paid-box {
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
  }
  .bv-show-paid-box svg {
    width: 9px; height: 8px;
    color: #fff;
    opacity: 0;
    transition: opacity .1s;
  }
  .bv-show-paid input[type="checkbox"]:checked + .bv-show-paid-box {
    background: var(--accent);
    border-color: var(--accent);
  }
  .bv-show-paid input[type="checkbox"]:checked + .bv-show-paid-box svg { opacity: 1; }
  .bv-show-paid input[type="checkbox"]:focus-visible + .bv-show-paid-box {
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .bv-show-paid:hover .bv-show-paid-box { border-color: var(--accent-border); }

  .bv-select {
    height: 36px;
    padding: 0 28px 0 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color .18s;
    max-width: 180px;
  }
  .bv-select:focus { border-color: var(--accent-border); }
  .bv-sort-select { max-width: 210px; }
  .bv-sort-direction { max-width: 155px; }
  .bv-sort-direction:disabled { opacity: 0.55; cursor: default; }
  .bv-select.is-active {
    border-color: var(--accent-border);
    background-color: var(--accent-soft);
    color: var(--accent);
  }

  .bv-icon-btn {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    color: var(--text-primary);
    transition: border-color .18s, background .18s, transform .12s;
    position: relative;
    flex-shrink: 0;
  }
  .bv-icon-btn:hover { background: var(--surface2); border-color: var(--border-hover); }
  .bv-icon-btn:active { transform: scale(0.96); }
  .bv-icon-btn svg { width: 16px; height: 16px; }

  /* ── Board canvas (contained: horizontal-scrolls within .mp-main,
     height relative to viewport rather than the whole screen) ── */
  .bv-canvas {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 4px 8px;
    display: flex;
    gap: var(--col-gap);
    /* stretch (not flex-start) so every customer column's border reaches
       the bottom of the workspace instead of shrinking to its card content */
    align-items: stretch;
  }

  /* Higher specificity than the bare-class rules above/below so the
     [hidden] attribute (toggled by showBoardMode() in JS to switch between
     MODE A and MODE B) actually hides the element -- without this, a
     same-specificity author `display: flex` rule beats the browser's
     built-in `[hidden] { display: none }` UA rule regardless of source
     order, so both the collapsed canvas and the expanded board would
     render at once (every other Customer stays visible behind the
     expanded one, which the spec explicitly forbids). */
  .bv-canvas[hidden],
  .bv-expanded-board[hidden] {
    display: none;
  }

  /* Horizontal-scrollbar styling reused verbatim (thickness/color/radius/
     hover) from ISP Reporting's scrollbar
     (isp_reports.css: .isp-details-panel #miDetailsBody) -- that's the only
     custom-scrollbar pattern that already existed in this codebase (it's a
     vertical scrollbar there; ISP Reporting has no horizontal one to copy,
     so the same visual language is applied to the horizontal axis here). */
  .bv-canvas,
  .bv-workflow-lanes-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 90, 0, 0.35) transparent;
  }
  .bv-canvas::-webkit-scrollbar,
  .bv-workflow-lanes-wrap::-webkit-scrollbar {
    height: 8px;
  }
  .bv-canvas::-webkit-scrollbar-track,
  .bv-workflow-lanes-wrap::-webkit-scrollbar-track {
    background: transparent;
  }
  .bv-canvas::-webkit-scrollbar-thumb,
  .bv-workflow-lanes-wrap::-webkit-scrollbar-thumb {
    background-color: rgba(255, 90, 0, 0.35);
    border-radius: 999px;
  }
  .bv-canvas::-webkit-scrollbar-thumb:hover,
  .bv-workflow-lanes-wrap::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 90, 0, 0.55);
  }

  /* ── MODE B: expanded single-customer workflow board.
     Replaces the multi-customer canvas entirely (canvas gets [hidden])
     rather than widening one column inside it -- that was the bug: the
     old implementation kept rendering every OTHER customer column in the
     same flex row as the expanded one, which is why the expanded view
     looked like an oversized column with neighbors still visible and the
     horizontal scrollbar behaving oddly. ── */
  .bv-expanded-board {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .bv-expanded-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 14px;
    flex-shrink: 0;
  }
  .bv-expanded-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .bv-expanded-back:hover { background: var(--accent-soft); border-color: var(--accent-border); }
  .bv-expanded-back svg { width: 11px; height: 11px; }
  .bv-expanded-sep { color: var(--text-muted); font-size: 14px; }
  .bv-expanded-customer-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }

  /* Horizontal scroll only kicks in when the five lanes genuinely don't fit
     the viewport width -- the scrollbar then sits directly under the lanes,
     i.e. at the bottom of the workspace, never mid-page. */
  .bv-workflow-lanes-wrap {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .bv-workflow-lanes {
    display: grid;
    /* grid-auto-flow: column + grid-auto-columns (not a hardcoded
       repeat(5, ...)) so this cleanly supports the sixth Paid lane (Show
       Paid ON) without a separate five/six-lane layout -- every lane keeps
       the same 240px minimum width either way; horizontal scroll (on the
       .bv-workflow-lanes-wrap ancestor) still only kicks in once lanes
       genuinely don't fit. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: 14px;
    height: 100%;
    min-width: 100%;
  }
  .bv-lane {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
  }
  .bv-lane-header {
    padding: 9px 11px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    flex-shrink: 0;
  }
  .bv-lane-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
  }
  .bv-lane-count {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface2);
    border-radius: 20px;
    padding: 1px 6px;
  }
  /* Overlay-style auto-hide vertical scrollbar (Mode A's two internal lanes
     and Mode B's five workflow lanes both use this same .bv-lane-body
     element/class -- one rule covers both). The gutter/thumb WIDTH never
     changes between idle and scrolling -- only the thumb's color does, so
     nothing shifts. The .is-scrolling class is toggled by
     bindAutoHideScrollbar() in the JS on real scroll events. */
  .bv-lane-body {
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .bv-lane-body::-webkit-scrollbar {
    width: 6px;
  }
  .bv-lane-body::-webkit-scrollbar-track {
    background: transparent;
  }
  .bv-lane-body::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
  }
  .bv-lane-body.is-scrolling {
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
  }
  .bv-lane-body.is-scrolling::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.28);
  }
  .bv-lane-loadmore {
    margin: 6px 8px 8px;
  }

  /* ── Customer outer container (holds two internal lane columns) ── */
  .bv-col {
    flex: 0 0 var(--col-width);
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(255,255,255,0.5);
    border-radius: 16px;
    border: 1px solid var(--border);
    overflow: hidden;
  }

  .bv-col-header {
    padding: 13px 14px 11px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    flex-shrink: 0;
    cursor: pointer;
  }

  .bv-col-expand {
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .12s;
  }
  .bv-col-expand svg { width: 13px; height: 13px; }
  .bv-col-header:hover .bv-col-expand,
  .bv-col-expand:hover {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--accent);
  }
  .bv-col-expand:active { transform: scale(0.92); }

  .bv-col-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .bv-col-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Two separate colored counters in the Customer header -- no combined
     total. Same color language as the New production / In Progress card
     status pills (STATUS_COLORS.new / STATUS_COLORS["in progress"] in JS). */
  .bv-col-badge {
    font-size: 11.5px;
    font-weight: 800;
    border-radius: 20px;
    padding: 2px 8px;
    flex-shrink: 0;
  }
  .bv-col-badge--new {
    background: rgba(255,59,48,0.12);
    color: #c62f27;
  }
  .bv-col-badge--progress {
    background: rgba(10,132,255,0.12);
    color: #0a66cc;
  }

  /* Two flat status columns per Customer (Mode A only) -- New production /
     In Progress stay two separate data buckets, but render as one Customer
     panel with two plain sections side by side, not two nested
     bordered/rounded boxes. Only ONE outer border exists (.bv-col); the
     boundary between the two sections is a single subtle border-left on
     the second column. Mode B's expanded five-lane board is untouched --
     it still uses the boxed .bv-lane/.bv-lane-header (not -flat). */
  .bv-col-lanes {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 14px 12px;
  }
  .bv-lane-flat {
    flex: 1 1 0;
    min-width: var(--subcol-min-width);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .bv-lane-flat + .bv-lane-flat {
    border-left: 1px solid var(--border);
    margin-left: 14px;
    padding-left: 14px;
  }
  .bv-lane-header-flat {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .bv-lane-flat .bv-lane-body {
    padding: 0 2px 8px 0;
  }

  /* ── Item ID copy badge ── */
  .bv-item-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 6px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .14s, border-color .14s, color .14s;
  }
  .bv-item-id-badge:hover {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--accent);
  }
  .bv-item-id-copied {
    font-size: 11px;
    font-weight: 700;
    color: var(--green);
    display: none;
  }
  .bv-item-id-copied.is-visible { display: inline; }

  /* ── Compact modal body -- inspector/workbench density ── */
  .bv-modal-body { gap: 14px !important; padding: 14px 18px 18px !important; }
  .bv-modal-head { padding: 12px 20px !important; }
  .bv-updates-body { padding: 8px 0 !important; gap: 7px !important; }
  .bv-update-form { padding: 8px 0 0 !important; gap: 7px !important; }
  .bv-subitems-head { padding: 0 0 8px !important; }
  .bv-form-textarea { min-height: 60px !important; }
  .bv-card {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 12px 13px;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: border-color .18s, box-shadow .18s, transform .14s;
    animation: cardIn .28s ease both;
    position: relative;
  }

  /* Last human actor -- Activity-Log-derived (app_v3.osp_sync.
     activity_reconcile), NOT an Update's author; see buildCardHtml() in
     management_osp_reports.js. Sits in the top-right gutter .bv-card-name
     reserves (padding-right: 28px below). Report deletion lives entirely
     in the report detail window (Delete Report section), not on the card
     itself -- there is no card-level delete button to yield to here. */
  .bv-card-last-actor {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    z-index: 5;
    flex-shrink: 0;
    transition: opacity .15s;
  }
  .bv-card-last-actor img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .bv-card:hover .bv-card-last-actor { opacity: 0; }

  /* Status-tinted card backgrounds */
  .bv-card[data-status-key="new"]     { background: linear-gradient(145deg, #fff5f5 0%, #fff0f0 100%); border-color: rgba(255,59,48,0.18); }
  .bv-card[data-status-key="rejected"]{ background: linear-gradient(145deg, #fff1f1 0%, #ffe7e7 100%); border-color: rgba(255,59,48,0.28); }
  .bv-card[data-status-key="progress"]{ background: linear-gradient(145deg, #f0f6ff 0%, #eaf2ff 100%); border-color: rgba(10,132,255,0.18); }
  .bv-card[data-status-key="resubmitted"]{ background: linear-gradient(145deg, #f8f4ff 0%, #f1eaff 100%); border-color: rgba(126,87,194,0.30); }
  .bv-card[data-status-key="manager"] { background: linear-gradient(145deg, #fff8f0 0%, #fff3e5 100%); border-color: rgba(255,130,0,0.18); }
  .bv-card[data-status-key="ready"]   { background: linear-gradient(145deg, #f2fbf4 0%, #edf9f0 100%); border-color: rgba(48,209,88,0.22); }
  .bv-card[data-status-key="paid"]    { background: linear-gradient(145deg, #e8f8ee 0%, #e0f6e8 100%); border-color: rgba(48,209,88,0.35); }

  .bv-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.07);
    transform: translateY(-2px);
    filter: brightness(0.98);
  }
  .bv-card:active { transform: translateY(0) scale(0.99); }

  .bv-card[draggable="true"] { cursor: grab; }
  .bv-card.is-dragging { opacity: 0.45; transform: scale(0.98); cursor: grabbing; }
  .bv-col-body.is-drag-over { background: rgba(255,130,0,0.06); border-radius: 12px; }

  @keyframes cardIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .bv-card-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.35;
  }

  .bv-card-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
  }

  .bv-card-icon {
    width: 14px; height: 14px;
    flex-shrink: 0;
    color: var(--text-muted);
  }

  .bv-card-meta {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Submitted Date parenthetical -- stays inline with the primary Date
     (same .bv-card-meta line, no extra card height) but visually
     de-emphasized so Date remains the dominant value. */
  .bv-card-meta-sub {
    color: var(--text-muted);
  }

  .bv-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    margin-top: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--blue-soft);
    border: 1px solid var(--blue-border);
    transition: opacity .15s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .bv-card-link:hover { opacity: 0.78; }

  .bv-card-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8200, #ffb347);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  /* ── State ── */
  .bv-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    gap: 10px;
  }

  .bv-spinner {
    width: 20px; height: 20px;
    border: 2.5px solid var(--border-hover);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── Modal overlay ── */
  .bv-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(10, 20, 40, 0.50);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
  }
  .bv-modal-overlay.is-open { display: flex; }

  .bv-modal {
    background: #f4f6f9;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 32px 80px rgba(0,0,0,0.28), 0 4px 20px rgba(0,0,0,0.12);
    width: 100%;
    max-width: 700px;
    height: min(90vh, calc(100vh - 40px));
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn .24s cubic-bezier(0.34,1.56,0.64,1) both;
  }

  @keyframes modalIn {
    from { opacity: 0; transform: scale(0.93) translateY(14px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }

  .bv-modal-head {
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 24px 24px 0 0;
  }

  .bv-modal-head-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: none;
    overflow: hidden;
  }
  .bv-modal-head-icon svg { width: 18px; height: 18px; color: #fff; }

  .bv-modal-head-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }


  .bv-modal-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
  }

  .bv-modal-subtitle {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 2px;
  }

  .bv-modal-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--surface2);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: background .15s, color .15s, transform .12s;
  }
  .bv-modal-close:hover { background: #e0e0e5; color: var(--text-primary); transform: scale(1.08); }
  .bv-modal-close svg { width: 13px; height: 13px; }

  .bv-modal-body {
    overflow-y: auto;
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  .bv-modal-body::-webkit-scrollbar { width: 4px; }
  .bv-modal-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

  /* ── Multi-report floating windows (Gmail-compose-style) ──
     .bv-modal is now reused verbatim as the single per-report window root
     across all three states (is-modal / is-floating / is-minimized) --
     pin/minimize/restore just reparent the SAME element (never rebuilt) into
     a different layer and toggle its state class, so in-progress field
     edits/scroll position are never lost by a transition. */

  .bv-floating-layer {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none; /* only individual windows (and their controls) capture pointer events */
  }

  .bv-modal.is-floating {
    position: absolute;
    pointer-events: auto;
    margin: 0;
    max-width: none;
    min-width: 420px;
    min-height: 320px;
    animation: none;
  }

  .bv-modal.is-floating .bv-rw-header {
    cursor: grab; /* the header IS the drag handle -- report content/inputs below are never draggable */
    touch-action: none;
  }
  .bv-modal.is-floating .bv-rw-header:active { cursor: grabbing; }
  /* Locked: dragging is disabled (see makeDraggable's isLocked guard), so
     the header must not advertise movement it won't perform. */
  .bv-modal.is-floating.is-locked .bv-rw-header,
  .bv-modal.is-floating.is-locked .bv-rw-header:active {
    cursor: default;
  }

  /* ── Window chrome controls (pin / minimize / restore / close) ── */
  .bv-rw-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .bv-rw-pin.is-locked {
    /* Subtle orange accent for "locked" -- deliberately not a strong/loud
       treatment, just enough to distinguish it from the unlocked outline
       pin state at a glance. */
    background: #fdecd8;
    color: #b5651d;
  }
  .bv-rw-pin.is-locked:hover { background: #fbe0bd; color: #b5651d; }
  .bv-rw-pin.is-locked svg path { fill: currentColor; }
  .bv-rw-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--surface2);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: background .15s, color .15s, transform .12s;
  }
  .bv-rw-btn:hover { background: #e0e0e5; color: var(--text-primary); transform: scale(1.08); }
  .bv-rw-btn:active { transform: scale(0.95); }
  .bv-rw-btn svg { width: 12px; height: 12px; }
  /* .bv-rw-btn's unconditional `display: flex` above is an author-origin
     normal-priority rule, which always wins over the UA stylesheet's
     `[hidden] { display: none }` (also normal-priority) regardless of
     selector specificity -- so a button with the `hidden` property set
     would otherwise stay visible and clickable. Same class of bug as the
     .bv-canvas[hidden] fix elsewhere in this file; same fix shape. */
  .bv-rw-btn[hidden] { display: none; }

  /* ── Minimized tray: Gmail-style compact tabs, bottom-right, growing
     horizontally (never a vertical stack down half the screen). ── */
  .bv-minimized-tray {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9500; /* above the modal backdrop, so a minimized tab is never hidden behind it */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    align-content: flex-start;
    gap: 8px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
  }

  .bv-modal.is-minimized {
    position: static;
    pointer-events: auto;
    width: 230px;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    animation: none;
  }
  .bv-modal.is-minimized .bv-modal-body,
  .bv-modal.is-minimized .bv-modal-head-icon {
    display: none;
  }
  .bv-modal.is-minimized .bv-rw-header {
    padding: 10px 8px 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    gap: 8px;
  }
  .bv-modal.is-minimized .bv-rw-title {
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bv-modal.is-minimized .bv-rw-sub {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
  }
  .bv-modal.is-minimized .bv-item-id-badge,
  .bv-modal.is-minimized .bv-item-id-copied {
    display: none;
  }

  /* ── Customer multi-select dropdown ── */
  .bv-customer-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .bv-customer-btn {
    height: 36px;
    padding: 0 10px 0 11px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: border-color .18s, background .18s;
    user-select: none;
  }
  .bv-customer-btn:hover { background: var(--surface2); border-color: var(--border-hover); }
  .bv-customer-btn.is-active {
    border-color: var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent);
  }
  .bv-customer-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
  .bv-customer-badge {
    min-width: 18px; height: 18px;
    background: var(--accent);
    color: #fff;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  .bv-customer-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-width: 300px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.07);
    z-index: 500;
    overflow: hidden;
    display: none;
    animation: dropIn .15s ease both;
  }
  .bv-customer-dropdown.is-open { display: block; }

  @keyframes dropIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  .bv-customer-dd-head {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .bv-customer-dd-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
  }
  .bv-customer-dd-clear {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--font);
  }
  .bv-customer-dd-clear:hover { text-decoration: underline; }

  .bv-customer-dd-list {
    max-height: 240px;
    overflow-y: auto;
    padding: 6px 0;
  }
  .bv-customer-dd-list::-webkit-scrollbar { width: 4px; }
  .bv-customer-dd-list::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; }

  .bv-customer-dd-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    transition: background .12s;
  }
  .bv-customer-dd-item:hover { background: var(--bg); }
  .bv-customer-dd-item input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
  }
  /* ── Toolbar Crew filter: custom searchable/grouped dropdown (replaces
     the old native <select> of raw concatenated crew-leader strings). Reuses
     .bv-customer-btn/.bv-customer-dropdown/.bv-customer-dd-list for the
     shared chrome; only the crew-specific bits (avatar, search box, grouped
     option rows) are defined here. ── */
  .bv-crew-wrap { position: relative; flex-shrink: 0; }
  .bv-crew-btn-icon { width: 13px; height: 13px; flex-shrink: 0; }
  /* SVG root elements don't reliably honor the `hidden` attribute in every
     browser -- verified: an <svg> with `hidden` set still computed
     `display: block` here with NO other author rule involved, so this is
     needed even though nothing above sets `display` on `.bv-crew-btn-icon`
     itself. Applies to both the "All crews" icon and the company/building
     icon (shared class) -- toggling between the two (or to/from the
     avatar) would otherwise show more than one at once. */
  .bv-crew-btn-icon[hidden] { display: none; }
  .bv-crew-btn-avatar {
    width: 18px; height: 18px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Without this, the unconditional `display: inline-flex` above (an
     AUTHOR-origin rule) silently wins over the browser's default
     `[hidden] { display: none }` (a UA-origin rule) regardless of selector
     specificity -- so setting the `hidden` property/attribute in JS had no
     visible effect at all. This was the root cause of a real bug: switching
     the Crew filter from a selected person to a company left the previous
     person's avatar visibly on screen next to the new company label. */
  .bv-crew-btn-avatar[hidden] { display: none; }
  .bv-crew-btn-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .bv-crew-btn-avatar--initials {
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 9px;
    font-weight: 800;
  }
  #bvCrewBtnLabel {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bv-crew-dropdown { min-width: 260px; max-width: 300px; }
  .bv-crew-search-wrap {
    padding: 8px;
    border-bottom: 1px solid var(--border);
  }
  .bv-crew-search {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-family: var(--font);
    font-size: 12.5px;
    color: var(--text-primary);
    outline: none;
  }
  .bv-crew-search:focus { border-color: var(--accent-border); background: #fff; }

  .bv-crew-dd-list { max-height: 280px; }
  .bv-crew-group-label {
    padding: 8px 12px 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
  }
  .bv-crew-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    transition: background .12s;
  }
  .bv-crew-opt:hover { background: var(--bg); }
  .bv-crew-opt.is-selected { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
  .bv-crew-opt-all { font-weight: 700; border-bottom: 1px solid var(--border); }
  .bv-crew-opt-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .bv-crew-opt-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .bv-crew-opt-avatar--initials {
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
  }
  .bv-crew-opt-avatar--company { background: var(--surface2); color: var(--text-muted); }
  .bv-crew-opt-avatar--company svg { width: 13px; height: 13px; }
  .bv-crew-opt-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bv-crew-empty {
    padding: 14px 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
  }

  .bv-crew-edit-wrap {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .bv-crew-current {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
  }

  .bv-crew-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px 3px 10px;
    border-radius: 999px;
    background: var(--blue-soft);
    border: 1px solid var(--blue-border);
    color: #0056b3;
    font-size: 12px;
    font-weight: 700;
  }

  .bv-crew-pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(255,59,48,0.12);
    color: #ff3b30;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
    transition: background .15s, transform .12s;
    padding: 0;
  }
  .bv-crew-pill-remove:hover { background: rgba(255,59,48,0.22); transform: scale(1.1); }
  .bv-crew-pill-remove:active { transform: scale(0.95); }

  .bv-crew-empty {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
  }

  .bv-crew-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .bv-crew-select {
    height: 36px;
    flex: 1;
    min-width: 0;
    padding: 0 32px 0 11px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
  }

  .bv-crew-select:focus {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background-color: #fff;
  }

  .bv-crew-confirm-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(48,209,88,0.35);
    background: rgba(48,209,88,0.10);
    color: #1a7a35;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, transform .12s, opacity .15s;
    opacity: 0;
    pointer-events: none;
  }
  .bv-crew-confirm-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .bv-crew-confirm-btn:hover { background: rgba(48,209,88,0.20); }
  .bv-crew-confirm-btn:active { transform: scale(0.95); }
  .bv-crew-confirm-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .bv-crew-confirm-btn svg { width: 15px; height: 15px; }

  .bv-mini-btn {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s, transform .12s;
  }

  .bv-mini-btn:hover { background: rgba(255,130,0,0.16); }
  .bv-mini-btn:active { transform: scale(0.97); }
  .bv-mini-btn:disabled { opacity: 0.55; cursor: not-allowed; }

  /* ── Inline editable status ── */
  .bv-status-select-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .bv-status-select {
    width: 100%;
    min-height: 34px;
    padding: 0 30px 0 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background-color: var(--bg);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }

  .bv-status-select:focus {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background-color: #fff;
  }

  .bv-status-autosave {
    min-height: 15px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
  }

  /* ── Compact inspector: sections, not per-field cards ──
     A field is label+value/control with subtle spacing -- NOT its own
     bordered/background card. .bv-section provides one flat divider
     between logical groups (Overview, Production Details, ...); fields
     inside share that surface instead of nesting another one. ── */
  .bv-section {
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .bv-section:first-of-type { padding-top: 0; border-top: none; }

  .bv-field-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 16px;
  }
  /* Secondary metadata (Submitted date, Pay date, Pay period): a lighter,
     denser row -- visually subordinate to the primary grid above it, never
     given the same weight as Status/Total/Customer/etc. */
  .bv-field-grid--secondary {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 16px;
    margin-top: 10px;
  }
  .bv-field-grid--secondary:empty { display: none; margin: 0; }

  /* Overview: primary (Total/Date/Type of work/Last production) and
     secondary (Submitted date/Pay date/Pay period) rows share this SAME
     4-column template so they line up exactly -- Pay date (.bv-field--col-3)
     lands directly under Type of work (primary column 3), Pay period
     (.bv-field--col-4) directly under Last production (column 4). Submitted
     date is left auto-placed into column 1; column 2 is intentionally never
     claimed, reading as a blank spacer under Date. */
  .bv-field-grid--overview { grid-template-columns: repeat(4, 1fr); }
  .bv-field--col-3 { grid-column: 3; }
  .bv-field--col-4 { grid-column: 4; }

  /* Project + Customer share the top row, ~60/40 -- long project names get
     the larger share while Customer stays fully readable. */
  .bv-project-customer-row {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 10px 16px;
    align-items: baseline;
  }

  /* Team + Crew Leader share one row, ~50/50 -- top-aligned (not centered),
     so Crew Leader's pills/picker can grow taller without pulling Team's
     label out of alignment with it. */
  .bv-team-crew-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 16px;
    align-items: start;
    margin-bottom: 10px;
  }

  /* Production Details' Total / Field Notes row: ~50/50, 2 columns at
     normal/floating widths, stacking to 1 column narrow (see the 900px
     breakpoint elsewhere in this file). */
  .bv-split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-top: 10px;
  }
  .bv-field--split { min-width: 0; }

  .bv-field { min-width: 0; }
  .bv-field--wide { grid-column: 1 / -1; }

  .bv-field-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 3px;
  }

  .bv-field-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
  }
  .bv-field-empty { color: var(--text-muted); font-weight: 500; }

  .bv-field--secondary .bv-field-label { font-size: 9.5px; }
  .bv-field--secondary .bv-field-value,
  .bv-field--secondary .bv-field-input { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }

  /* Total per report -- compact, not a giant card; subtle positive accent
     only when a real amount is present. */
  .bv-field--total .bv-field-value--total {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text-muted);
  }
  .bv-field--total.bv-field--has-amount .bv-field-value--total { color: #1a7a35; }

  /* Inputs read as plain flowing text at rest (transparent, no box) and
     only look like a real input once focused -- read mode and edit mode
     are the SAME node, never swapped, so this is pure CSS: no risk to
     value-reading/save logic. */
  .bv-field-input {
    display: block;
    width: 100%;
    min-width: 0;
    border: 1px solid transparent;
    background: transparent;
    padding: 2px 0;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    outline: none;
    transition: background .15s, border-color .15s, padding .15s;
  }
  .bv-field-input::placeholder { color: var(--text-muted); font-weight: 500; opacity: 1; }
  .bv-field-input:hover { background: var(--bg); border-radius: 7px; }
  .bv-field-input:focus {
    background: #fff;
    border-color: var(--accent-border);
    border-radius: 7px;
    padding: 5px 8px;
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  textarea.bv-field-input { resize: vertical; min-height: 30px; }
  textarea.bv-field-input:focus { min-height: 60px; }
  select.bv-field-select { cursor: pointer; appearance: none; -webkit-appearance: none; }

  /* Editable report Date: the visible value is always the explicit
     MM/DD/YYYY mirror; the normalized YYYY-MM-DD input remains the native
     calendar control opened by the adjacent button. */
  .bv-date-editor { position: relative; min-width: 0; }
  .bv-date-display-input { padding-right: 30px; cursor: pointer; }
  .bv-date-picker-icon {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    padding: 0;
    pointer-events: none;
  }
  .bv-date-picker-icon svg { width: 16px; height: 16px; }
  .bv-date-native-picker {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
  }
  .bv-date-editor:focus-within .bv-date-display-input {
    background: #fff;
    border-color: var(--accent-border);
    border-radius: 7px;
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .bv-date-editor + .bv-field-save-icon { right: 28px; }
  .bv-field.is-dirty .bv-date-editor + .bv-field-save-icon { z-index: 3; }

  /* Last Production (and any other boolean field forced read-only): a
     styled ✓/✕ indicator, never a checkbox or background square. */
  .bv-field-bool {
    font-size: 14px;
    font-weight: 700;
  }
  .bv-field--secondary .bv-field-bool { font-size: 12.5px; }
  .bv-field-bool.is-true { color: #1a7a35; }
  .bv-field-bool.is-false { color: #c62f27; }

  .bv-field-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
  }
  .bv-field--secondary .bv-field-checkbox { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }

  /* Per-field save: a small floppy-disk icon, not a text button -- hidden at
     rest, revealed only while the field is DIRTY (current value differs
     from the last saved baseline -- tracked in JS via wireFieldDirtyTracking,
     never by :focus-within alone, so an edit stays visibly unsaved after the
     user blurs the field). Sits inside the field's own input area
     (bottom-right corner), never a separate row below it -- works the same
     for a single-line input and a multi-line textarea (Total, Field Notes). */
  .bv-field-input-wrap { position: relative; }
  .bv-field .bv-field-save-icon,
  .bv-field [data-generic-save-state] {
    display: none;
  }
  .bv-field.is-dirty .bv-field-save-icon,
  .bv-field.is-dirty [data-generic-save-state] {
    display: inline-flex;
  }
  .bv-field.is-dirty .bv-field-input-wrap .bv-field-input {
    padding-right: 26px;
  }
  .bv-field-save-icon {
    position: absolute;
    right: 2px;
    bottom: 3px;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--accent);
    border-radius: 5px;
    cursor: pointer;
    padding: 0;
  }
  .bv-field-save-icon:hover { background: var(--accent-soft); }
  .bv-field-save-icon:active { transform: scale(0.93); }
  .bv-field-save-icon svg { width: 12px; height: 12px; }

  /* Status row: one clean full-width row, not part of the multi-column
     grid -- kept visually near the top but compact, not a giant block. */
  .bv-status-row { margin-bottom: 2px; }
  .bv-status-row .bv-field-label { margin-bottom: 4px; }
  .bv-status-row .bv-field-select {
    width: 100%;
    min-height: 38px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--bg);
    font-size: 14px;
    font-weight: 700;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }
  .bv-status-row .bv-field-select:focus {
    background-color: #fff;
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-soft);
    padding: 0 30px 0 10px; /* select never grows a text-input-style focus inset */
  }
  /* Google Drive / file link field: read mode is a clear "open" action, not
     an input box; the url/text editors are tucked behind a small pencil
     toggle (.is-editing-link), unaffected by wireGenericFieldSaves(). */
  .bv-field-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .bv-field-link-action {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
  }
  .bv-field-link-action:hover { text-decoration: underline; }
  .bv-field-edit-toggle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .bv-field-edit-toggle:hover { background: var(--accent-soft); color: var(--accent); }
  .bv-field-link-edit { display: none; margin-top: 8px; }
  .bv-field.is-editing-link .bv-field-link-edit { display: block; }
  .bv-field-link-edit .bv-field-input { margin-bottom: 4px; }

  .bv-section-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 10px;
  }

  /* ── Subitems table -- compact, no card wrapper (lives in a .bv-section) ── */
  .bv-subitems-wrap {
    flex-shrink: 0;
  }

  .bv-subitems-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .bv-subitems-table-wrap {
    max-height: 260px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 10px;
  }


  .bv-subitems-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
  }

  .bv-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background .15s, transform .12s;
  }
  .bv-add-btn:hover { background: rgba(255,130,0,0.16); }
  .bv-add-btn:active { transform: scale(0.97); }
  .bv-add-btn svg { width: 13px; height: 13px; }

  .bv-subitem-table {
    width: 100%;
    /* A floor under the whole table, not just individual columns: in
       table-layout:fixed, percentage columns are relative to the table's
       OWN rendered width, so without this the Amount/Name columns (and
       the edit inputs inside them) would keep shrinking together as the
       report window narrows, collapsing to unusably tiny inputs -- exactly
       the reported bug. .bv-subitems-table-wrap already scrolls
       (overflow:auto) at any width narrower than this, so nothing breaks
       at a normal 600-700px report-window width -- it fits with little or
       no scroll. */
    min-width: 640px;
    border-collapse: collapse;
    font-size: 13px;
    /* Fixed layout + explicit per-column widths below means the Actions
       column (and every other column) keeps the SAME width whether a row
       is showing Edit/Delete icons or Save/Cancel -- switching a row into
       edit mode changes that row's cell CONTENT only, never the table's
       column widths, so nothing shifts. */
    table-layout: fixed;
  }

  .bv-subitem-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: #f5f6f8;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .bv-subitem-table th:nth-child(1) { width: 24%; }
  /* Fixed px, not %, like Actions below -- a percentage of a narrow table
     rounds down to an unusably tiny edit input (the original bug); this
     guarantees the Amount/Qty column (and its edit input) a real, stable
     width regardless of report-window size. */
  .bv-subitem-table th:nth-child(2) { width: 90px; }
  .bv-subitem-table th:nth-child(3) { width: 28%; }
  .bv-subitem-table th:nth-child(4) { width: 14%; }
  .bv-subitem-table th:nth-child(5) { width: 12%; }
  /* Dedicated Actions column -- fixed px width (not %) sized for the
     WIDER of its two possible contents (Save+Cancel in edit mode; the
     icon pair otherwise), right-aligned so it reads as a clear, separate
     zone that never crowds the Total column next to it. */
  .bv-subitem-table th.bv-subitem-th-actions {
    width: 150px;
    text-align: right;
  }

  .bv-subitem-table td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--text-primary);
    font-weight: 500;
    vertical-align: middle;
  }

  .bv-subitem-table tr:last-child td { border-bottom: none; }

  /* Subtle indicator while scheduleSubitemEnrichmentRetry has an
     outstanding background re-check for this row (Description/Unit
     Price/Total not yet populated by monday automation) -- a gentle
     opacity pulse, not a spinner, so a still-forming row reads as
     "settling" rather than "broken." Cleared the moment enrichment
     arrives or the short retry budget runs out. */
  .bv-subitem-row--updating {
    animation: bv-subitem-row-pulse 1.1s ease-in-out infinite;
  }
  @keyframes bv-subitem-row-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }

  .bv-subitem-empty {
    padding: 16px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
  }

  /* ── Subitem row actions ── */
  .bv-subitem-table tbody tr {
    transition: background .14s;
  }
  .bv-subitem-table tbody tr:hover {
    background: #f8f9fb;
  }
  .bv-subitem-table td.bv-subitem-td-actions {
    text-align: right;
    padding-left: 8px;
    padding-right: 8px;
  }
  .bv-subitem-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    opacity: 0;
    transition: opacity .16s;
  }
  .bv-subitem-table tbody tr:hover .bv-subitem-actions {
    opacity: 1;
  }
  /* Edit mode's Save/Cancel must stay visible on their own -- they aren't
     a hover affordance, they're the row's active controls, so hover-only
     visibility (meant for the read-only Edit/Delete icons) doesn't apply. */
  .bv-subitem-actions--edit {
    opacity: 1;
  }
  .bv-subitem-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .14s, border-color .14s, transform .12s;
    flex-shrink: 0;
    padding: 0;
  }
  .bv-subitem-action-btn svg { width: 15px; height: 15px; }
  .bv-subitem-action-btn.edit {
    color: var(--blue);
  }
  .bv-subitem-action-btn.edit:hover {
    background: var(--blue-soft);
    border-color: var(--blue-border);
  }
  .bv-subitem-action-btn.del {
    color: var(--red);
  }
  .bv-subitem-action-btn.del:hover {
    background: rgba(255,59,48,0.10);
    border-color: rgba(255,59,48,0.25);
  }
  .bv-subitem-action-btn:active { transform: scale(0.92); }

  /* Inline edit row for subitem */
  .bv-subitem-edit-row td {
    background: #fffbf5;
    border-bottom: 1px solid var(--accent-border) !important;
  }
  .bv-subitem-edit-input {
    height: 30px;
    padding: 0 8px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: #fff;
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
    width: 100%;
    /* Fills its column (see th:nth-child widths above), but never below a
       practical floor -- intrinsic/min-content sizing is what produced the
       original "extremely small" inputs. Name's column is comfortably
       wider than 100px in practice; this is the guaranteed minimum. */
    min-width: 100px;
    transition: border-color .16s, box-shadow .16s;
    box-sizing: border-box;
  }
  /* Amount/Qty's column is narrower by design (90px, see th:nth-child(2))
     -- a 100px floor would overflow it, so this input gets its own,
     still-practical minimum instead (task range: ~80-110px overall). */
  .bv-subitem-edit-input[data-edit-amount] {
    min-width: 70px;
  }
  .bv-subitem-edit-input:focus {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 2px var(--accent-soft);
  }
  .bv-subitem-save-btn {
    height: 28px;
    padding: 0 10px;
    border-radius: 7px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
  }
  .bv-subitem-save-btn:hover { background: #e67500; }
  .bv-subitem-save-btn:disabled { opacity: 0.55; cursor: not-allowed; }
  .bv-subitem-cancel-btn {
    height: 28px;
    padding: 0 10px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
  }
  .bv-subitem-cancel-btn:hover { background: #dde0e5; }

  /* ── Editable item controls ── */
  .bv-controls-wrap {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
  }

  .bv-controls-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

  .bv-form-select {
    min-height: 38px;
    padding: 0 11px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-family: var(--font);
    font-size: 13.5px;
    color: var(--text-primary);
    outline: none;
  }

  .bv-form-select[multiple] {
    min-height: 112px;
    padding: 8px 10px;
  }

  .bv-form-help {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.35;
  }

  /* ── Updates block: a normal static section, always visible -- NOT an
     accordion. Real monday.com update history (app_v3.osp_sync.
     updates_sync), read from the local replica -- newest first at the top
     level, replies within one thread oldest-first (see
     read_service._list_item_updates). ── */
  .bv-updates-wrap { flex-shrink: 0; }

  .bv-updates-header {
    display: flex;
    align-items: center;
    cursor: default;
  }

  .bv-updates-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
  }

  .bv-updates-body {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .bv-update-item {
    border: 1px solid rgba(0,0,0,0.06);
    background: #f8f9fb;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
  }

  .bv-update-item--reply {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.05);
  }

  .bv-update-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bv-update-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .bv-update-avatar--initials {
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 800;
  }

  .bv-update-content { min-width: 0; flex: 1; }

  .bv-update-replies {
    margin-top: 9px;
    padding-left: 14px;
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bv-update-meta {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .bv-update-author {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 12px;
  }

  .bv-update-date {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11.5px;
  }

  .bv-update-body {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
  }

  .bv-update-empty {
    padding: 14px 10px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
  }

  .bv-update-form {
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* ── Charge Back: a normal static section, always visible -- NOT an
     accordion. The header is a plain title row (no button, no click
     handler, no hover/press feedback, default cursor); only visually
     flagged (amber, ⚠) when a real chargeback exists. ── */
  .bv-chargeback-wrap { flex-shrink: 0; }

  .bv-chargeback-header {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: default;
  }

  .bv-chargeback-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }
  /* A real chargeback is flagged, not just labeled -- amber title/amount,
     distinct from the neutral empty state. */
  .bv-chargeback-wrap.has-value .bv-chargeback-title { color: #b35900; }

  .bv-chargeback-amount-pill {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-muted);
    margin-left: auto;
  }
  .bv-chargeback-wrap.has-value .bv-chargeback-amount-pill { color: #b35900; }

  .bv-chargeback-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
  }

  .bv-form-textarea {
    min-height: 76px;
    padding: 10px 11px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-family: var(--font);
    font-size: 13.5px;
    color: var(--text-primary);
    outline: none;
    resize: vertical;
    transition: border-color .18s, box-shadow .18s;
  }

  .bv-form-textarea:focus {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: #fff;
  }

  .bv-save-status {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: auto;
  }

  /* ── Add subitem form: one compact inline row (Name | Amount | Add |
     Cancel), not a tall stacked card -- a subtle border/background is
     enough, no separate title, minimal vertical padding. ── */
  .bv-add-form {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--accent-border);
    padding: 10px;
    display: none;
  }
  .bv-add-form.is-open { display: block; }

  .bv-add-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .bv-add-form-row .bv-new-subitem-name { flex: 1 1 auto; min-width: 0; }
  .bv-add-form-row .bv-new-subitem-amount { flex: 0 0 100px; width: 100px; }
  .bv-btn-compact { padding: 0 12px; height: 36px; flex-shrink: 0; white-space: nowrap; }

  .bv-form-input {
    height: 38px;
    padding: 0 11px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-family: var(--font);
    font-size: 13.5px;
    color: var(--text-primary);
    outline: none;
    transition: border-color .18s, box-shadow .18s;
  }
  .bv-form-input:focus {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: #fff;
  }
  .bv-btn {
    padding: 9px 18px;
    border-radius: 10px;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, transform .12s;
  }
  .bv-btn:active { transform: scale(0.97); }
  .bv-btn-primary { background: var(--accent); color: #fff; }
  .bv-btn-primary:hover { background: #e67500; }
  .bv-btn-primary:disabled { background: #ccc; cursor: not-allowed; }
  .bv-btn-ghost {
    background: var(--surface2);
    color: var(--text-secondary);
    border-color: var(--border);
  }
  .bv-btn-ghost:hover { background: #dde0e5; }
  .bv-btn-danger { background: var(--red); color: #fff; }
  .bv-btn-danger:hover { background: #e0352c; }
  .bv-btn-danger:disabled { background: #ccc; cursor: not-allowed; }

  .bv-form-error {
    font-size: 12.5px;
    color: var(--red);
    font-weight: 500;
  }

  /* ── Delete Report -- management-only destructive action ── */
  .bv-delete-section .bv-delete-open-btn { width: auto; }

  .bv-delete-confirm {
    margin-top: 12px;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: rgba(255,59,48,0.06);
    border: 1px solid rgba(255,59,48,0.24);
  }
  .bv-delete-confirm p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
  }
  .bv-delete-confirm p:last-of-type { margin-bottom: 12px; }
  .bv-delete-extra-warning {
    font-weight: 600;
    color: #a8281f;
  }
  .bv-delete-actions { display: flex; gap: 8px; }
  .bv-delete-actions .bv-btn { flex: 1 1 0; }
  .bv-delete-state { display: block; margin-top: 8px; }

  .bv-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
    z-index: 10050;
    opacity: 1;
    transition: opacity .25s ease;
  }
  .bv-toast--out { opacity: 0; }

  @media (max-width: 640px) {
    .bv-toast { left: 16px; right: 16px; bottom: 16px; transform: none; text-align: center; }
  }

  /* ── Status pill ── */
  .bv-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
  }
  .bv-rw-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Empty col ── */
  .bv-col-empty {
    padding: 20px 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
  }

  /* ── Loading skeleton ── */
  .bv-skeleton-col {
    flex: 0 0 var(--col-width);
    background: rgba(255,255,255,0.5);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 12px;
  }

  .bv-skeleton-header {
    height: 32px;
    background: linear-gradient(90deg, #e8eaed 25%, #f0f2f5 50%, #e8eaed 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    margin-bottom: 10px;
    animation: shimmer 1.4s ease-in-out infinite;
  }

  .bv-skeleton-card {
    height: 80px;
    background: linear-gradient(90deg, #e8eaed 25%, #f0f2f5 50%, #e8eaed 75%);
    background-size: 200% 100%;
    border-radius: 12px;
    margin-bottom: 8px;
    animation: shimmer 1.4s ease-in-out infinite;
  }
  .bv-skeleton-card:nth-child(3) { animation-delay: .1s; }
  .bv-skeleton-card:nth-child(4) { animation-delay: .2s; }

  @keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
  }

  @media (max-height: 760px) {
    /* Scoped to the blocking MODAL state only -- a short-but-wide laptop
       screen (very common) must not also force floating/minimized report
       windows full-height; those get their own sizing untouched here. */
    .bv-subitems-table-wrap { max-height: 190px; }
    .bv-modal-overlay {
      align-items: flex-start;
      padding: 10px;
    }
    .bv-modal.is-modal {
      height: calc(100dvh - 20px);
      max-height: calc(100dvh - 20px);
      border-radius: 20px;
    }
    .bv-modal.is-modal .bv-modal-head { padding: 14px 16px 10px; }
    .bv-modal.is-modal .bv-modal-body { padding: 14px 16px; }
  }

  @media (max-width: 640px) {
    /* Customer container keeps its two-column min-width here (subcolumns
       must not get squeezed below --subcol-min-width) -- narrow viewports
       fall back to local horizontal scrolling instead, per spec. */
    :root { --col-gap: 10px; }
    .bv-toolbar { padding: 0 10px; gap: 6px; }
    .bv-filter-label { display: none; }
    .bv-modal-overlay {
      align-items: flex-start;
      padding: 10px;
    }
    .bv-modal.is-modal {
      height: calc(100dvh - 20px);
      max-height: calc(100dvh - 20px);
      border-radius: 20px;
    }
    .bv-modal.is-modal .bv-modal-head { padding: 16px 16px 12px; }
    .bv-modal.is-modal .bv-modal-body { padding: 16px; }
    .bv-field-grid { grid-template-columns: 1fr; }
    .bv-field-grid--secondary { grid-template-columns: 1fr 1fr; }
    .bv-field-grid--overview { grid-template-columns: 1fr; }
    /* Explicit column placement only makes sense at the wider 4-column
       Overview layout -- at 1 column everything must fall back to plain
       DOM-order stacking, or these would force extra implicit columns. */
    .bv-field--col-3,
    .bv-field--col-4 { grid-column: auto; }
    .bv-project-customer-row { grid-template-columns: 1fr; }
    .bv-team-crew-row { grid-template-columns: 1fr; }
    .bv-split-row { grid-template-columns: 1fr; }
    .bv-add-form-row { flex-wrap: wrap; }
    .bv-add-form-row .bv-new-subitem-amount { flex: 1 1 100px; }
  }

  /* ── Multi-report floating windows: desktop management use is primary.
     On narrow/mobile screens, don't try to show draggable side-by-side
     windows -- fall back to one large, non-draggable, centered-ish window
     at a time (still switchable via z-index/focus and the minimized tray,
     which stays available since it's practical there). ── */
  @media (max-width: 900px) {
    .bv-modal.is-floating {
      left: 12px !important;
      top: 12px !important;
      width: calc(100vw - 24px) !important;
      height: calc(100dvh - 24px) !important;
    }
    .bv-modal.is-floating .bv-rw-header { cursor: default; }
  }
  #bvEditItemWrap { display: none !important; }
  .bv-edit-item-wrap { display: none !important; }

  /* Hard fallback: hide old EDIT ITEM block if any older markup survives */
  #bvSaveEditItem,
  #bvEditStatus,
  #bvEditCrew,
  #bvEditUpdate {
    display: none !important;
  }

  /* ── Date picker button ── */
  .bv-datepick-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .bv-datepick-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: border-color .18s, background .18s, color .18s;
    flex-shrink: 0;
  }
  .bv-datepick-btn svg { width: 16px; height: 16px; }
  .bv-datepick-btn:hover { background: var(--surface2); border-color: var(--border-hover); }
  .bv-datepick-btn.is-active {
    border-color: var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent);
  }

  .bv-datepick-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    display: none;
  }
  .bv-datepick-label.is-visible { display: block; }

  .bv-datepick-clear {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(255,59,48,0.12);
    color: #ff3b30;
    font-size: 11px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
    padding: 0;
  }
  .bv-datepick-clear.is-visible { display: inline-flex; }
  .bv-datepick-clear:hover { background: rgba(255,59,48,0.22); }

  .bv-datepick-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.07);
    z-index: 500;
    padding: 14px;
    width: 272px;
    display: none;
    animation: dropIn .15s ease both;
    user-select: none;
  }
  .bv-datepick-popup.is-open { display: block; }

  /* nav row */
  .bv-datepick-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .bv-datepick-nav-center {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .bv-datepick-nav-label {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 7px;
    transition: background .13s;
  }
  .bv-datepick-nav-label:hover { background: var(--bg); }

  .bv-datepick-arrow {
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    transition: background .14s;
    flex-shrink: 0;
  }
  .bv-datepick-arrow:hover { background: var(--surface2); }
  .bv-datepick-arrow svg { width: 12px; height: 12px; }

  /* weekday headers */
  .bv-datepick-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
  }
  .bv-datepick-wd {
    text-align: center;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 3px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* day grid */
  .bv-datepick-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }
  .bv-datepick-day {
    aspect-ratio: 1;
    border-radius: 8px;
    border: 1px solid transparent;
    background: none;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    text-align: center;
    display: flex; align-items: center; justify-content: center;
    transition: background .13s, color .13s, border-color .13s;
  }
  .bv-datepick-day:hover:not(.is-empty):not(.is-selected) {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-border);
  }
  .bv-datepick-day.is-empty { cursor: default; pointer-events: none; }
  .bv-datepick-day.is-today {
    border-color: var(--accent-border);
    color: var(--accent);
    font-weight: 700;
  }
  .bv-datepick-day.is-selected {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 800;
  }
  .bv-datepick-day.is-other-month {
    color: var(--text-muted);
    font-weight: 400;
  }

  /* month view (for clicking nav-label) */
  .bv-datepick-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
  .bv-datepick-month {
    padding: 8px 4px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: none;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
    transition: background .14s, color .14s, border-color .14s;
  }
  .bv-datepick-month:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-border);
  }
  .bv-datepick-month.is-selected {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 800;
  }

  /* Total per report — green highlighted card */
  .bv-field.is-total-report {
    background: linear-gradient(135deg, #f2fbf4 0%, #edf9f0 100%) !important;
    border-color: rgba(48,209,88,0.24) !important;
  }
  .bv-field.is-total-report .bv-field-label {
    color: rgba(26,122,53,0.72) !important;
  }
  .bv-field.is-total-report .bv-field-value {
    color: #1a7a35 !important;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.03em;
  }



  /* ─────────────────────────────────────────────
     Compact board cards
     Layout:
     1) Project #
     2) Report ID
     3) Date + User
     4) Files + Status
  ───────────────────────────────────────────── */
  .bv-card {
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }

  .bv-card-name {
    font-size: 13px !important;
    font-weight: 800 !important;
    margin-bottom: 5px !important;
    line-height: 1.22 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 28px;
  }

  /* ── Sync status pill (new: local-DB-driven, never calls monday) ── */
  .bv-sync-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
  }
  .bv-sync-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
  }
  .bv-sync-pill.is-delayed .bv-sync-dot { background: var(--yellow); }
  .bv-sync-pill.is-error .bv-sync-dot { background: var(--red); }

  /* ── All Board Fields (management-only verification section) ── */
  .bv-all-fields {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,0.6);
  }
  .bv-all-fields summary {
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .bv-all-fields-body {
    padding: 0 14px 12px;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 90, 0, 0.35) transparent;
  }
  .bv-all-fields-body::-webkit-scrollbar { width: 8px; }
  .bv-all-fields-body::-webkit-scrollbar-track { background: transparent; }
  .bv-all-fields-body::-webkit-scrollbar-thumb { background-color: rgba(255, 90, 0, 0.35); border-radius: 999px; }
  .bv-all-fields-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  .bv-all-fields-table th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 4px 8px;
    position: sticky;
    top: 0;
    background: #fff;
  }
  .bv-all-fields-table td {
    padding: 5px 8px;
    border-top: 1px solid var(--border);
    word-break: break-word;
  }
  .bv-all-fields-table td:nth-child(2) {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
  }

  .bv-empty-lane {
    padding: 14px 8px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
  }

  /* ONLY rendered in the global Crew workflow (buildCardHtml's
     opts.showCustomer) -- reports there can come from several authorized
     Customers, so each card needs its own subtle Customer identity. The
     collapsed overview and expanded single-Customer workflow never render
     this (Customer is already obvious from context there). */
  .bv-card-customer {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bv-card-report-id {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    padding: 1px 7px;
    margin-bottom: 5px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.55);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bv-card-report-id span:first-child {
    opacity: 0.65;
  }

  .bv-card-row {
    margin-top: 0 !important;
  }

  .bv-card-compact-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-bottom: 5px;
  }

  .bv-card-compact-date {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .bv-card-compact-person {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex: 1;
  }

  .bv-card-compact-person .bv-card-avatar {
    width: 19px;
    height: 19px;
    font-size: 9px;
  }

  .bv-card-compact-person-name {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bv-card-bottom-line {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex-wrap: wrap;
  }

  .bv-card-activity-badges {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 5px;
  }

  .bv-activity-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.68);
    color: var(--text-muted);
  }

  .bv-activity-badge.is-new {
    border-color: rgba(255,130,0,0.28);
    background: rgba(255,130,0,0.12);
    color: var(--accent);
  }

  .bv-card-link {
    margin-top: 0 !important;
    padding: 2px 7px !important;
    font-size: 11.5px !important;
    flex-shrink: 0;
  }

  .bv-status-pill {
    padding: 2px 8px !important;
    font-size: 11.5px !important;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }