/* ============================================================
 * Lions Tooth — QA tab module styles
 * ============================================================
 *
 * Phase 2.1 of the mobile-first refactor (ADR 0004).
 *
 * This file is the canonical home for CSS rules that style the
 * QA tab and its sub-views (Drilling QA, GLC QA, Heat Pump QA,
 * Overview, Field Reports).
 *
 * What's in scope here:
 *   .qa-mini-summary, .qa-mini-stat*  — top-of-tab stat pills
 *   .qa-section*                       — collapsible section card
 *   .qa-type-btn                       — sub-view type selector
 *   #qa-stats-toggle-btn               — mini-stats hide/show toggle
 *   body.qa-stats-hidden ...            — body-level toggle class
 *
 * What's NOT in this file (and why):
 *   .qa-table, .qa-badge, .qa-filters,  — shared with Job Site Status table
 *   .qa-sc-link, .qa-dp-link,             (Inspections module owns them)
 *   .qa-photo-link, .qa-notes-cell,
 *   .qa-editable-note, .drill-qa-table
 *
 *   .qa-fr-*                           — Field Reports sub-view
 *                                        (lives with that module per ADR 0004 Phase 2)
 *
 *   .qa-card*                          — Job Site Status mobile cards from
 *                                        Phase 1.2 (used by _renderJsAllUpdatesCards
 *                                        in 10-drilling.js, not the QA tab).
 *                                        Stays in inspections.css.
 *
 *   The QA inspection form modals (drilling QA, GLC QA, HP commissioning)
 *   are explicitly out of scope per ADR 0004. Their styles stay in the
 *   inline <style> block until/unless a separate ADR amends scope.
 *
 * Phase 2.1 is purely additive: rules below are byte-equivalent to the
 * inline <style> block in public/index.html. Same cascade-order strategy
 * as the Inspections module: this file loads after the inline block, so
 * equal-specificity rules resolve to here. Once we've verified no visual
 * regression (Phase 2.4-equivalent soak), the 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 COLLAPSIBLE SECTIONS — header bar with toggle, body, mini-stats
 * (Used by qa-section-drilling, qa-section-glc, qa-section-hp)
 * ───────────────────────────────────────────────────────────── */
.qa-section{margin-bottom:12px;}
.qa-section-hdr{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;background:linear-gradient(135deg,#eef1fb 0%,#e6eaf8 100%);border:1px solid #d4d9f0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;cursor:pointer;transition:background .12s;}
.qa-section-hdr.collapsed{border-radius:var(--radius-sm);}
.qa-section-hdr:hover{background:linear-gradient(135deg,#e6eaf8 0%,#dde3f5 100%);}
.qa-section-title{font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px;color:#3a4580;}
.qa-section-toggle{font-size:10px;font-weight:700;color:var(--text3);border:1px solid var(--border);background:var(--white);cursor:pointer;padding:3px 10px;border-radius:5px;text-transform:uppercase;letter-spacing:.3px;transition:background .12s,color .12s;}
.qa-section-toggle:hover{background:var(--bg);color:var(--text2);}
.qa-section-body{border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);padding:14px;}
.qa-section-body.hidden{display:none;}


/* ─────────────────────────────────────────────────────────────
 * MINI-STATS — top-of-sub-view summary pills.
 * Each pill maps to a qa_status filter; clicking sets the active
 * filter and reruns renderDrillQaTable/renderGlcQaTable/renderHpTable.
 *
 * Phase 2.3: mobile-first responsive grid.
 *   Base (≤767px) — 2-col grid, left-aligned, larger numbers
 *   Tablet (≥768px) — 3-col grid
 *   Desktop (≥1024px) — single row of 6 (legacy flex layout)
 * ───────────────────────────────────────────────────────────── */
.qa-mini-summary{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  margin-bottom:12px;
}
.qa-mini-stat{
  padding:10px 12px;
  border-radius:10px;
  text-align:left;
  cursor:pointer;
  transition:transform .08s,box-shadow .12s;
  border:2px solid transparent;
  user-select:none;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-height:54px;
  justify-content:center;
}
.qa-mini-stat:active{transform:scale(.97);}
.qa-mini-stat.active-filter{border-color:currentColor;box-shadow:0 0 0 2px rgba(0,0,0,.08);}
.qa-mini-stat .num{font-weight:700;font-size:20px;line-height:1;display:block;}
.qa-mini-stat.pass{background:#dcfce7;color:#166534;}
.qa-mini-stat.pending{background:#fef3c7;color:#92400e;}
.qa-mini-stat.fail{background:#fee2e2;color:#991b1b;}
.qa-mini-stat.inprogress{background:#dbeafe;color:#1e40af;}
.qa-mini-stat.hold{background:#ffedd5;color:#c2410c;}

@media (min-width:768px){
  .qa-mini-summary{grid-template-columns:repeat(3,1fr);}
}

@media (min-width:1024px){
  /* Desktop: revert to the original single-row flex layout for density */
  .qa-mini-summary{display:flex;gap:8px;}
  .qa-mini-stat{
    padding:6px 12px;
    border-radius:6px;
    text-align:center;
    flex:1;
    max-width:120px;
    min-height:auto;
    display:block;
  }
  .qa-mini-stat:hover{transform:scale(1.04);box-shadow:0 2px 8px rgba(0,0,0,.1);}
  .qa-mini-stat .num{font-size:16px;display:inline;}
}


/* ─────────────────────────────────────────────────────────────
 * MINI-STATS VISIBILITY TOGGLE — header button to hide the stat row
 * for power-users who want the cards to take up the whole viewport.
 * ───────────────────────────────────────────────────────────── */
#qa-stats-toggle-btn{background:none;border:1px solid var(--border2);color:var(--text3);border-radius:6px;padding:3px 10px;font-size:10px;cursor:pointer;font-family:inherit;margin-bottom:7px;display:inline-block;}
#qa-stats-toggle-btn:hover{background:var(--gray-light);color:var(--text2);}
body.qa-stats-hidden .qa-mini-summary{display:none!important;}


/* ─────────────────────────────────────────────────────────────
 * QA TYPE BUTTONS — sub-view type selector (drilling/glc/hp)
 * Used in admin contexts; the main sub-view nav uses .sub-view-btn.
 * ───────────────────────────────────────────────────────────── */
.qa-type-btn{padding:7px 14px;font-size:12px;font-weight:700;border-radius:7px;border:1.5px solid var(--border2);background:var(--white);color:var(--text2);cursor:pointer;transition:all .15s;}
.qa-type-btn:hover{border-color:var(--brand);color:var(--brand);}
.qa-type-btn.active{background:var(--brand);color:white;border-color:var(--brand);}


/* ─────────────────────────────────────────────────────────────
 * QA TAB HOME CARDS — Phase 2.2 class-ified card markup
 *
 * Used by:
 *   #drill-qa-card-list — populated by renderDrillQaTable()
 *   #glc-qa-card-list   — populated by renderGlcQaTable()
 *   #hp-qa-card-list    — populated by renderHpTable()
 *
 * Phase 2.2 replaces the inline-style markup these renderers used to emit.
 * Same render output, same data, same click behavior — but now the markup
 * has class hooks for Phase 2.3's mobile-first breakpoints.
 *
 * Distinct from .js-card* (Job Site Status mobile cards in inspections.css)
 * which are rendered by _renderJsAllUpdatesCards in 10-drilling.js when the
 * LT_FEATURE_INSPECTIONS_CARDS flag is on.
 * ───────────────────────────────────────────────────────────── */

/* Card list wrapper — replaces inline style="display:flex;flex-direction:column;gap:8px;" */
.qa-card-list{display:flex;flex-direction:column;gap:8px;}

/* Individual card — mobile-first.
 * Base: vertical stack (id block on top, action row at bottom).
 * Tablet+ (≥768px): horizontal flex-row layout (legacy desktop look). */
.qa-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  background:var(--white,#fff);
  border:1px solid var(--border);
  border-radius:10px;
  transition:border-color .15s,box-shadow .15s;
}
.qa-card:hover{border-color:var(--brand);}

@media (min-width:768px){
  .qa-card{
    flex-direction:row;
    align-items:center;
    gap:12px;
    padding:12px 16px;
  }
}

/* Primary info block: address + badges, then meta, then progress */
.qa-card-id{flex:1;min-width:0;}
.qa-card-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px;}
.qa-card-addr{font-weight:700;font-size:15px;color:var(--text);letter-spacing:-0.01em;}
.qa-card-meta{font-size:12px;color:var(--text3);margin-bottom:6px;}

@media (min-width:768px){
  /* Tighten typography back down at desktop density */
  .qa-card-addr{font-size:13px;letter-spacing:0;}
  .qa-card-meta{font-size:11px;}
}

/* Status pill — replaces inline-styled <span> in _dqBadge/_gqBadge/_hpBadge.
 * data-state values map to JS_QA_STATUSES enum normalized via _qaStatePill(s):
 *   ready / inprog / pass / fail / hold / unknown */
.qa-status{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;
  border-radius:6px;
  font-size:11px;font-weight:600;
  white-space:nowrap;
}
.qa-status[data-state="ready"]   { background:#f3f4f6; color:#6b7280; }
.qa-status[data-state="inprog"]  { background:#dbeafe; color:#1e40af; }
.qa-status[data-state="pass"]    { background:#dcfce7; color:#166534; }
.qa-status[data-state="fail"]    { background:#fee2e2; color:#991b1b; }
.qa-status[data-state="hold"]    { background:#ffedd5; color:#c2410c; }
.qa-status[data-state="unknown"] { background:#f3f4f6; color:#6b7280; }

/* Progress bar — replaces inline-styled flex+bar+pct trio */
.qa-progress{display:flex;align-items:center;gap:6px;}
.qa-progress-bar{flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.qa-progress-bar > div{height:100%;border-radius:3px;transition:width .3s;}
.qa-progress-bar.brand > div{background:var(--brand);}
.qa-progress-bar.ok    > div{background:#22c55e;}
.qa-progress-bar.fail  > div{background:#ef4444;}
.qa-progress-pct{font-size:10px;color:var(--text3);white-space:nowrap;}
/* Empty placeholder when no inspection data exists yet */
.qa-progress-empty{height:5px;background:var(--border);border-radius:3px;opacity:.4;}

/* Action group — mobile-first.
 * Base (≤767px): full-width row at the bottom of the card with a top-border
 *                separator from the id block above. Inspect button is
 *                thumb-sized (40px+ tall, fills the row).
 * Tablet+ (≥768px): inline group on the right side of the flex-row card. */
.qa-card-actions{
  display:flex;
  align-items:center;
  gap:8px;
  border-top:1px solid var(--border);
  padding-top:10px;
  margin-top:2px;
}

@media (min-width:768px){
  .qa-card-actions{
    border-top:none;
    padding-top:0;
    margin-top:0;
    flex-shrink:0;
    gap:6px;
  }
}

/* Inspect button — primary CTA on each card.
 * Variants:
 *   .passed — used by GLC/HP when qa_status is Pass 1/2 (greens)
 *   .hp     — used by HP renderer (blues, distinct from drilling/glc)
 *
 * Mobile-first sizing: full-width 40px+ on phone, compact inline on desktop. */
.qa-inspect-btn{
  flex:1;
  font-size:13px;
  padding:10px 14px;
  min-height:40px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg2);color:var(--text);
  cursor:pointer;
  font-weight:600;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.qa-inspect-btn:hover{border-color:var(--brand);color:var(--brand);}
.qa-inspect-btn.passed{border-color:#bbf7d0;background:#f0fdf4;color:#166534;}
.qa-inspect-btn.passed:hover{border-color:#16a34a;color:#16a34a;}
.qa-inspect-btn.hp{border-color:#c7d0fd;background:#eef0ff;color:#4455d8;}
.qa-inspect-btn.hp:hover{border-color:#4455d8;color:#4455d8;}

@media (min-width:768px){
  .qa-inspect-btn{
    flex:0 0 auto;
    font-size:11px;
    padding:5px 12px;
    min-height:auto;
    border-radius:6px;
    justify-content:flex-start;
    gap:4px;
  }
}

/* Empty-state message */
.qa-cards-empty{
  padding:24px;
  text-align:center;
  color:var(--text3);
  font-size:13px;
}