/* ISP Reports management board.
   The shared OSP stylesheet supplies the visual system; this file adapts
   that system to ISP's customer columns, report cards, and rate-backed
   Code + Qty workflow. */

.mp-main--isp-reports {
  position: relative;
}

.mir-toolbar {
  gap: 8px;
}

.mir-toolbar .bv-search-wrap {
  min-width: 190px;
}

.mir-toolbar .bv-select {
  max-width: 160px;
}

.mir-toolbar .bv-sort-select {
  max-width: 180px;
}

.mir-result-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.mir-board .bv-state {
  width: 100%;
  flex: 1 0 100%;
}

.mir-board .bv-state[hidden] {
  display: none !important;
}

.mir-customer-column {
  /* Now holds TWO side-by-side lanes (New production / Missing --
     .bv-col-lanes/.bv-lane-flat, the same "Mode A" flat-lane component
     Manage OSP Reports already uses for its own two-lane Customer panel)
     instead of one flat card list, so this needs OSP's own --col-width,
     not the old single-list 320px. */
  --mir-column-width: 560px;
  flex-basis: var(--mir-column-width);
  width: var(--mir-column-width);
  min-width: var(--mir-column-width);
}

.mir-customer-header {
  cursor: default;
}

/* ── Customer history expand/collapse (Production team approved / Paid) ──
   .bv-canvas (the board's outer row of columns) is overflow-y: hidden with
   align-items: stretch, i.e. every .bv-col is pinned to the SAME fixed
   height -- see management_osp_reports.css. Expanding a customer must
   therefore never grow that column taller than its siblings (there's
   nowhere for the extra height to go but clipped, since the canvas itself
   never scrolls vertically). Instead, the active lanes and the history
   lanes SHARE the column's existing fixed height via flex (each becomes
   flex: 1 1 0 once both are visible), with each row's own .bv-lane-body
   scrolling internally exactly as it already does today -- no new
   page-level or column-level scrollbar is introduced. */

.mir-customer-column .bv-col-lanes {
  flex: 1 1 0;
  min-height: 0;
}

.mir-customer-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  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;
}

.mir-customer-expand-btn:hover,
.mir-customer-expand-btn:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
  outline: none;
}

.mir-customer-expand-chevron {
  width: 12px;
  height: 12px;
  transition: transform .18s ease;
}

.mir-customer-expand-btn[aria-expanded="true"] .mir-customer-expand-chevron {
  transform: rotate(180deg);
}

.mir-customer-history-wrap {
  flex: 0 0 auto;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .25s ease, opacity .2s ease, flex-grow .25s ease;
}

.mir-customer-history-wrap.is-open {
  flex: 1 1 0;
  max-height: 2000px; /* generous transition ceiling; actual height is bounded by the flex share above */
  opacity: 1;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 4px;
}

.mir-customer-history-wrap .bv-col-lanes {
  height: 100%;
}

.mir-report-card {
  flex: 0 0 auto;
}

.mir-report-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-card);
  outline: none;
}

.mir-card-total {
  color: var(--text-primary);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.mir-modal {
  max-width: 820px;
  height: auto;
  max-height: calc(100vh - 40px);
}

.mir-modal-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.mir-modal-icon {
  background: linear-gradient(135deg, #ff8200, #ffad33);
  box-shadow: 0 5px 14px rgba(255, 130, 0, 0.22);
}

.mir-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mir-detail-field {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised, #fff);
}

/* Direct child only -- editable fields (Status/Report date/Crew Leader) now
   nest their own spans several levels deep (save-state indicator, crew
   pills, dropdown option labels, ...) which must NOT inherit this
   uppercase label styling; only the field's own leading label span, always
   a direct child, should ever get it. */
.mir-detail-field > span {
  display: block;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mir-detail-field strong {
  display: block;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status / Report Date fields now hold an editable control (select / date
   picker) plus a save-state indicator, not a plain label+value pair --
   .mir-detail-field span's generic label styling (uppercase, bold, small)
   would otherwise also apply to the save-state span since it's a second
   bare <span> in the same field; this override keeps it looking like the
   shared .bv-status-autosave indicator instead. */
.mir-detail-field .bv-status-autosave {
  display: block;
  margin-top: 4px;
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  min-height: 14px;
}

.mir-detail-field .bv-status-autosave.is-error {
  color: #b42318;
}

/* Crew Leader now holds a pill list + searchable add picker, which needs
   the full row width rather than a cramped 1/3 grid cell. */
.mir-detail-field--crew {
  grid-column: 1 / -1;
}

.mir-detail-field--total {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.mir-detail-field--total strong {
  color: var(--accent);
  font-size: 15px;
}

.mir-code-table {
  min-width: 680px;
}

.mir-code-table th:nth-child(1) { width: 16%; }
.mir-code-table th:nth-child(2) { width: 80px; }
.mir-code-table th:nth-child(3) { width: auto; }
.mir-code-table th:nth-child(4) { width: 120px; }
.mir-code-table th:nth-child(5) { width: 120px; }

.mir-code-table th:nth-child(4),
.mir-code-table th:nth-child(5),
.mir-code-table td:nth-child(4),
.mir-code-table td:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mir-add-code-form {
  margin-top: 10px;
}

.mir-code-select {
  flex: 1 1 auto;
  min-width: 0;
}

.mir-add-code-form .bv-new-subitem-amount {
  flex: 0 0 100px;
  width: 100px;
}

.mir-monday-link {
  text-align: right;
}

.mir-monday-link a {
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.mir-monday-link a:hover {
  text-decoration: underline;
}

.mir-detail-error {
  padding: 22px;
  border: 1px solid rgba(255, 59, 48, 0.2);
  border-radius: 12px;
  background: rgba(255, 59, 48, 0.08);
  color: #b42318;
  font-size: 13px;
  font-weight: 650;
}

body.mir-modal-open {
  overflow: hidden;
}

@media (max-width: 1100px) {
  .mir-toolbar .bv-filter-label {
    display: none;
  }

  .mir-result-count {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .mir-customer-column {
    --mir-column-width: min(360px, calc(100vw - 54px));
  }

  /* Manage OSP Reports' own two-lane Customer panel deliberately keeps its
     two lanes side by side even on narrow screens and falls back to local
     horizontal scrolling instead (see management_osp_reports.css's own
     640px comment) -- ISP's board explicitly wants mobile lanes to STACK
     instead, so this override is intentionally scoped to .mir-customer-
     column only and does not touch OSP's shared .bv-col-lanes/.bv-lane-flat
     rules for anyone else. */
  .mir-customer-column .bv-col-lanes {
    flex-direction: column;
  }

  .mir-customer-column .bv-lane-flat {
    min-width: 0;
  }

  .mir-customer-column .bv-lane-flat + .bv-lane-flat {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  .mir-toolbar .bv-search-wrap,
  .mir-toolbar .bv-select {
    flex: 1 1 145px;
    max-width: none;
  }

  .mir-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mir-modal {
    max-width: none;
  }

  .mir-add-code-form .bv-add-form-row {
    flex-wrap: wrap;
  }

  .mir-code-select {
    flex-basis: 100%;
  }
}

@media (max-width: 460px) {
  .mir-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Tools dropdown (Tools ▾ -> SURF Invoice generator / Prince Bulk report) */

.mir-tools-dropdown {
  position: relative;
}

.mir-tools-btn {
  width: auto;
  padding: 0 12px;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.mir-tools-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  /* Must outrank .bv-floating-layer's z-index (9000) -- an already-open
     tool window can be positioned near the toolbar, and the dropdown must
     still be clickable to open a second tool. */
  z-index: 9600;
  min-width: 220px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mir-tools-menu[hidden] {
  display: none !important;
}

.mir-tools-menu button {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: inherit;
  cursor: pointer;
}

.mir-tools-menu button:hover,
.mir-tools-menu button:focus-visible {
  background: var(--surface-2, #f8fafc);
  outline: none;
}

/* Tool window content -- built inside the shared .bv-rw-body via
   floating_tool_window.js, styled here to keep the visual language
   consistent with the rest of ISP Reports (bv-* tokens). */

.mir-tool-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.mir-tool-section {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
}

.mir-tool-section h3 {
  margin: 0 0 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted, #6b7280);
}

.mir-tool-drop {
  border: 2px dashed var(--border, #cbd5e1);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted, #6b7280);
  cursor: pointer;
}

.mir-tool-drop.is-dragover {
  border-color: #ff5a00;
  background: rgba(255, 90, 0, 0.05);
}

.mir-tool-file-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mir-tool-file-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--surface-2, #f8fafc);
}

.mir-tool-file-list button {
  border: 0;
  background: transparent;
  color: #b42318;
  cursor: pointer;
  font-weight: 600;
}

.mir-tool-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.mir-tool-summary-tile {
  background: var(--surface-2, #f8fafc);
  border-radius: 8px;
  padding: 8px 10px;
}

.mir-tool-summary-tile .mir-tool-summary-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  letter-spacing: 0.03em;
}

.mir-tool-summary-tile .mir-tool-summary-value {
  font-size: 1.05rem;
  font-weight: 700;
}

.mir-tool-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-wrap: wrap;
}

.mir-tool-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted, #6b7280);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.mir-tool-tab.is-active {
  color: #ff5a00;
  border-bottom-color: #ff5a00;
}

.mir-tool-table-wrap {
  overflow-x: auto;
}

.mir-tool-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.mir-tool-table th,
.mir-tool-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border, #e5e7eb);
  white-space: nowrap;
}

/* Included Jobs table (SURF Invoice Generator preview) -- the Billing cell
   concatenates every non-zero billing code onto one line (e.g. "(D1) New
   Drop Installation: 1, (SP) Splicing: 2"), which forced the whole table
   wide under the default nowrap rule above. Fixed column widths + wrapping
   Billing text keep rows readable without a page-wide horizontal
   scrollbar; .mir-tool-table-wrap's overflow-x:auto stays as a safety net
   for any remaining edge case. Other mir-tool-table instances (SP/LDD
   matches, ambiguous, unmatched) are untouched. */
.mir-tool-table--jobs {
  table-layout: fixed;
}

.mir-tool-table--jobs .mir-col-task-id { width: 12%; }
.mir-tool-table--jobs .mir-col-status { width: 10%; }
.mir-tool-table--jobs .mir-col-scheduled { width: 12%; }
.mir-tool-table--jobs .mir-col-address { width: 20%; }
.mir-tool-table--jobs .mir-col-city { width: 12%; }
.mir-tool-table--jobs .mir-col-billing { width: 34%; }

.mir-tool-table--jobs td {
  vertical-align: top;
}

.mir-tool-table--jobs th:nth-child(4),
.mir-tool-table--jobs td:nth-child(4),
.mir-tool-table--jobs th:nth-child(5),
.mir-tool-table--jobs td:nth-child(5) {
  white-space: normal;
  word-break: break-word;
}

.mir-tool-table--jobs th:nth-child(6),
.mir-tool-table--jobs td:nth-child(6) {
  white-space: normal;
  word-break: break-word;
}

@media (max-width: 640px) {
  .mir-tool-table--jobs {
    table-layout: auto;
  }
}

.mir-tool-warning {
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.78rem;
}

.mir-tool-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b42318;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.78rem;
}

.mir-tool-success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
}

.mir-tool-sync-note {
  font-size: 0.72rem;
  color: var(--muted, #6b7280);
}

/* Ezee reconciliation tool. */
.eig-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.eig-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted, #6b7280);
}

.eig-form-grid input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface, #fff);
  color: inherit;
}

.eig-form-grid input:disabled {
  background: var(--surface-2, #f8fafc);
}

.eig-period {
  margin: 0 0 10px;
  font-size: 0.82rem;
}

.eig-table-wrap {
  margin-top: 10px;
  max-height: 360px;
}

.eig-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface, #fff);
}

.eig-table td {
  vertical-align: top;
}

.eig-table .eig-address,
.eig-table .eig-codes {
  white-space: normal;
  min-width: 170px;
  max-width: 280px;
}

/* SURF V2 has eight audit columns in one preview.  Fixed layout and wrapping
   keep the floating window self-contained even when code/discrepancy text is
   long; the Ezee table keeps its existing sizing rules. */
.sig-v2-table {
  table-layout: fixed;
}

.sig-v2-table th,
.sig-v2-table td,
.sig-v2-table .eig-address,
.sig-v2-table .eig-codes {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: none;
}

.eig-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: normal;
}

.eig-badge--ok { background: #dcfce7; color: #166534; }
.eig-badge--warn { background: #fef3c7; color: #92400e; }
.eig-badge--error { background: #fee2e2; color: #991b1b; }

@media (max-width: 640px) {
  .eig-form-grid { grid-template-columns: 1fr; }
}