/* ============================================================
 * Lions Tooth — Inspections module styles
 * (Legacy QA table chrome + shared QA badges/links)
 * ============================================================
 *
 * Phase 1.1 of the mobile-first refactor (ADR 0004).
 * Phase 2.1 (2026-05-03): split QA-tab-only rules out into qa.css.
 * Phase 4.1 (2026-05-03): split Job-Site-Status-only rules out into
 *                          job-site-status.css.
 *
 * This file is the canonical home for the LEGACY .qa-* shared chrome
 * still used by the Bore Stakes table on the Job Site Status tab and by
 * various inspection-form modals:
 *   .qa-summary, .qa-stat*  — summary pills (legacy)
 *   .qa-table, .qa-table-wrap, .drill-qa-table — table chrome
 *   .qa-badge*              — status badges (Pass 1/2, Fail 1/2, etc.)
 *   .qa-filters             — filter row container
 *   .qa-notes-cell, .qa-notes-toggle — notes cell in QA table
 *   .qa-sc-link, .qa-dp-link, .qa-photo-link — link buttons
 *   .qa-editable-note*, .qa-inline-edit*,
 *   .qa-field-readonly, .qa-edit-indicator — inline-edit affordances
 *
 * What's NOT in this file (moved out):
 *   .qa-section*, .qa-mini-summary, .qa-mini-stat*, .qa-type-btn,
 *   #qa-stats-toggle-btn, body.qa-stats-hidden .qa-mini-summary
 *                          → qa.css (Phase 2.1)
 *   .js-*, .js-card*, #js-all-cards, .js-cards-empty
 *                          → job-site-status.css (Phase 4.1)
 *   .qa-fr-*               → field-reports.css (Phase 3.1)
 *   .hp-*                  → Heat Pump QA sub-module (future)
 *   .qa-stepper-*          → Cross-cutting modal stepper, not Inspections-only
 *
 * Phase 1.1 / 2.1 / 4.1 are all purely additive at the production level:
 * the same rules still live inline in public/index.html's <style> block.
 * These module files shadow them via cascade order (loaded AFTER the
 * inline block) at equal specificity. Once we've verified no visual
 * regression (post-soak), the inline duplicates get cleaned up in a
 * follow-up.
 *
 * Tokens (--brand, --text, etc.) are inherited from :root in index.html.
 * No new tokens introduced; brand.md alignment from PR #75/#76 stands.
 * ============================================================ */


/* ─────────────────────────────────────────────────────────────
 * QA TRACKER — top-of-tab summary, filters, table chrome
 * ───────────────────────────────────────────────────────────── */
.qa-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.qa-stat{flex:1;min-width:110px;background:var(--white);border:2px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;text-align:center;cursor:pointer;transition:transform .1s,box-shadow .15s,border-color .15s;user-select:none;}
.qa-stat:hover{transform:scale(1.03);box-shadow:0 2px 8px rgba(0,0,0,.08);}
.qa-stat.active-filter{border-color:currentColor;box-shadow:0 0 0 2px rgba(91,110,248,.12);}
.qa-stat-num{font-size:22px;font-weight:700;color:var(--text);}
.qa-stat-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-top:2px;}
.qa-stat.fail .qa-stat-num{color:var(--red);}
.qa-stat.pass .qa-stat-num{color:var(--green);}
.qa-stat.pending .qa-stat-num{color:var(--orange);}
.qa-stat.total .qa-stat-num{color:var(--brand);}

.qa-filters{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px;align-items:center;}
.qa-filters select,.qa-filters input{font-size:12px;padding:6px 10px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--white);color:var(--text);transition:border-color .15s,box-shadow .15s;min-height:36px;}
.qa-filters select:focus,.qa-filters input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px rgba(91,110,248,.12);}
.qa-filters input[type="search"]{min-width:130px;flex:1;}

.qa-table{width:100%;border-collapse:collapse;font-size:11px;}
.qa-table th{background:linear-gradient(135deg,#eef1fb 0%,#e6eaf8 100%);border:1px solid #d4d9f0;padding:7px 8px;font-weight:700;color:#3a4580;text-transform:uppercase;letter-spacing:.4px;font-size:10px;position:sticky;top:0;z-index:2;white-space:nowrap;}
.qa-table td{border:1px solid var(--border);padding:6px 8px;vertical-align:top;}
.qa-table tr:hover td{background:var(--brand-light);}

.qa-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:700;white-space:nowrap;letter-spacing:.2px;}
.qa-badge.fail1{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;}
.qa-badge.fail2{background:#fce7f3;color:#831843;border:1px solid #f9a8d4;}
.qa-badge.pass1{background:#bbf7d0;color:#14532d;border:1px solid #86efac;}
.qa-badge.pass2{background:#d1fae5;color:#064e3b;border:1px solid #6ee7b7;}
.qa-badge.notstarted{background:#fde68a;color:#78350f;border:1px solid #fbbf24;}
.qa-badge.none{background:#e2e8f0;color:#475569;border:1px solid #cbd5e1;}
.qa-badge.rework-crit{background:#fde;color:#a00;border:1px solid #e88;}
.qa-badge.rework-non{background:var(--orange-light);color:var(--orange);border:1px solid var(--orange-border);}
.qa-badge.rework-ftc{background:var(--green-light);color:var(--green);border:1px solid var(--green-border);}

/* .qa-type-btn moved to qa.css (Phase 2.1) — QA-tab-only selector. */

.qa-notes-cell{max-width:250px;font-size:10px;color:var(--text2);line-height:1.4;}
.qa-notes-toggle{color:var(--brand);cursor:pointer;font-size:10px;font-weight:600;border:none;background:none;padding:0;margin-left:4px;}

.qa-sc-link{display:inline-flex;align-items:center;gap:3px;padding:4px 9px;font-size:11px;font-weight:700;border-radius:6px;border:1px solid;cursor:pointer;white-space:nowrap;transition:background .1s;text-decoration:none;color:var(--brand);border-color:var(--brand-mid);background:var(--brand-light);margin-bottom:2px;}
.qa-sc-link:hover{background:var(--brand);color:white;text-decoration:none;}
.qa-dp-link{display:inline-flex;align-items:center;gap:3px;padding:4px 9px;font-size:11px;font-weight:700;border-radius:6px;border:1px solid;cursor:pointer;white-space:nowrap;transition:background .1s;text-decoration:none;color:#0d9488;border-color:#99f6e4;background:#f0fdfa;}
.qa-dp-link:hover{background:#0d9488;color:white;text-decoration:none;}
.qa-photo-link{display:inline-flex;align-items:center;gap:3px;padding:4px 9px;font-size:11px;font-weight:700;border-radius:6px;border:1px solid;cursor:pointer;white-space:nowrap;transition:background .1s;text-decoration:none;color:#9333ea;border-color:#e9d5ff;background:#faf5ff;}
.qa-photo-link:hover{background:#9333ea;color:white;text-decoration:none;}


/* ─────────────────────────────────────────────────────────────
 * QA TABLE — wrapper, sticky address column, drilling variant
 * ───────────────────────────────────────────────────────────── */
.qa-table-wrap{max-height:70vh;overflow:auto;border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;}

/* Sticky address col — 2nd col on all standard tables (Community | Address | …) */
.qa-table th:nth-child(2),.qa-table td:nth-child(2){position:sticky;left:0;z-index:2;background:var(--white);box-shadow:2px 0 4px rgba(0,0,0,.08);}
.qa-table thead th:nth-child(2){background:var(--bg2);z-index:3;}

/* Drilling table (desktop): Mob | Community | Homesite — sticky 3rd col instead */
.drill-qa-table th:nth-child(2),.drill-qa-table td:nth-child(2){position:static;z-index:auto;background:unset;box-shadow:none;}
.drill-qa-table thead th:nth-child(2){position:static;z-index:auto;background:var(--bg2);}
.drill-qa-table th:nth-child(3),.drill-qa-table td:nth-child(3){position:sticky;left:0;z-index:2;background:var(--white);box-shadow:2px 0 4px rgba(0,0,0,.08);}
.drill-qa-table thead th:nth-child(3){background:var(--bg2);z-index:3;}


/* ─────────────────────────────────────────────────────────────
 * QA INLINE EDITING — note textareas, editable cells
 * ───────────────────────────────────────────────────────────── */
.qa-editable-note{width:100%;min-width:120px;padding:4px 6px;font-size:10px;border:1px solid var(--border);border-radius:4px;font-family:inherit;resize:none;height:36px;color:var(--text);background:var(--white);}
.qa-editable-note:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px rgba(91,110,248,0.15);}
.qa-editable-note.has-content{background:#fffef5;border-color:var(--yellow-border);}
.qa-note-saved{font-size:9px;color:var(--green);display:none;margin-top:2px;}
.qa-note-saved.show{display:block;}
.qa-inline-edit{padding:3px 5px;font-size:10px;border:1px dashed var(--border);border-radius:3px;background:#fffef5;color:var(--text);font-family:inherit;min-width:50px;}
.qa-inline-edit:focus{outline:none;border-color:var(--brand);border-style:solid;background:var(--white);}
.qa-inline-sel{padding:2px 4px;font-size:10px;border:1px dashed var(--border);border-radius:3px;background:#fffef5;color:var(--text);cursor:pointer;}
.qa-inline-sel:focus{outline:none;border-color:var(--brand);border-style:solid;}
.qa-field-readonly{font-size:10px;color:var(--text);}
.qa-edit-indicator{font-size:10px;color:var(--brand);margin-left:2px;}


/* QA collapsible sections (.qa-section*), mini-stats (.qa-mini-summary, .qa-mini-stat*),
 * and stats-visibility toggle (#qa-stats-toggle-btn, body.qa-stats-hidden) moved to
 * qa.css (Phase 2.1) — they're QA-tab-only selectors. */


/* Job Site Status form / autocomplete / history / recent / cards
 * (.js-*, .js-card*, #js-all-cards*, .js-cards-empty)
 * moved to job-site-status.css (Phase 4.1). */


/* ─────────────────────────────────────────────────────────────
 * RESPONSIVE — desktop-first scale-down (matches inline rules)
 *
 * NOTE FOR PHASE 1.3: These max-width queries get inverted to
 * min-width build-ups when we land the mobile-first card layout
 * behind the LT_FEATURE_INSPECTIONS_CARDS flag. Until then they
 * stay byte-equivalent to the inline rules so cascade order
 * doesn't change rendering.
 * ───────────────────────────────────────────────────────────── */

/* Tablet (≤1024px): tighter QA rows, mini-stat pills */
@media(max-width:1024px){
  .qa-table td{padding:4px 7px;font-size:11px;}
  .qa-table th{padding:5px 7px;font-size:10px;letter-spacing:0;}
  .qa-table tr.qa-link-row td{padding:2px 6px;}
  .qa-mini-stat{padding:7px 10px;min-width:60px;}
  .qa-mini-stat .num{font-size:14px;}
  .qa-sc-link,.qa-dp-link,.qa-photo-link{font-size:10px;padding:3px 7px;}
}

/* Phone (≤768px): horizontal-scroll table, hide Mob+Community on drilling */
@media(max-width:768px){
  .qa-table-wrap{-webkit-overflow-scrolling:touch;}
  .qa-table{min-width:700px;}

  /* Drilling table: hide Mob + Community on mobile — both shown in section header */
  .drill-qa-table th:nth-child(1),.drill-qa-table td:nth-child(1),
  .drill-qa-table th:nth-child(2),.drill-qa-table td:nth-child(2){display:none;}
  /* With Mob+Community hidden, Homesite (col3) is the first visible col — keep it sticky */
  .drill-qa-table th:nth-child(3),.drill-qa-table td:nth-child(3){position:sticky;left:0;z-index:2;background:var(--white);box-shadow:2px 0 4px rgba(0,0,0,.08);}
  .drill-qa-table thead th:nth-child(3){background:var(--bg2);z-index:3;}

  .qa-stat{min-width:80px;padding:6px 8px;}
  .qa-stat .qa-stat-count{font-size:18px;}
  .qa-stat .qa-stat-label{font-size:10px;}

  .qa-filters{flex-wrap:wrap;gap:4px;padding:6px 8px;}
  .qa-filters select,.qa-filters input{font-size:12px;padding:6px 10px;min-width:90px;min-height:36px;}

  /* .js-search-wrap, .js-status-row responsive overrides moved to
   * job-site-status.css (Phase 4.1). */
}

/* Small phone (≤480px): even tighter */
@media(max-width:480px){
  .qa-table{min-width:600px;}
  .qa-stat{min-width:65px;padding:5px 6px;}
  .qa-stat .qa-stat-label{font-size:10px;}
  .qa-filters select,.qa-filters input{font-size:12px;}
}


/* INSPECTIONS CARD LAYOUT (.js-card*, #js-all-cards*, .js-cards-empty)
 * moved to job-site-status.css (Phase 4.1). */