/* ============================================================
 * Lions Tooth — Field Reports module styles
 * ============================================================
 *
 * Phase 3.1 of the mobile-first refactor (ADR 0004).
 *
 * This file is the canonical home for CSS rules that style the
 * Field Reports sub-view (under the QA tab) and the Field Report
 * detail panel (project info, JHA, header piping, pressure test,
 * flush & fill, bore details, casing, U-bends, grouting, etc.).
 *
 * What's in scope here:
 *   .qa-fr-filter-btn       — filter pills above the report list
 *   .qa-fr-review-card      — list-item card for a single field report
 *   .qa-fr-detail-section   — section card in the detail panel
 *   .qa-fr-field-row        — key/value row in the detail panel
 *   .qa-fr-field-label      — label cell text
 *   .qa-fr-field-val        — value cell text
 *   .qa-fr-photo-grid       — auto-fill grid for photo thumbnails
 *   .qa-fr-photo-thumb      — individual photo thumbnail
 *   .qa-fr-action-bar       — bottom bar with approve/reject/rework
 *   .qa-fr-action-btn       — primary CTAs in the action bar
 *
 * What's NOT in this file (and why):
 *   .qa-*  (without -fr-)   — Inspections / QA tab modules
 *                              (live in inspections.css and qa.css)
 *   The Field Reports CREATE/EDIT form (an FR-specific stepper UI
 *   inside the GLC sub-tab) — its CSS is intermixed with the GLC
 *   form rules in the inline <style> block. Future work to extract
 *   that fully will need a follow-up scoped to the form modal.
 *
 * Phase 3.1 is purely additive: rules below are byte-equivalent to
 * the inline <style> block in public/index.html. Same cascade-order
 * strategy as Phase 1.1 / 2.1: this file loads after the inline
 * block, equal-specificity rules resolve to here. Once Phase 1.4 +
 * Phase 2.4-equivalent soaks complete, 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.
 * ============================================================ */


/* ─────────────────────────────────────────────────────────────
 * REVIEW LIST — filter pills + report cards (the FR landing view)
 * ───────────────────────────────────────────────────────────── */
.qa-fr-filter-btn{padding:6px 14px;font-size:12px;font-weight:600;border:1px solid var(--border);border-radius:6px;background:var(--bg1);color:var(--text2);cursor:pointer;font-family:inherit;transition:all .15s;}
.qa-fr-filter-btn:hover{border-color:var(--brand);color:var(--brand);}
.qa-fr-filter-btn.active{background:var(--brand);color:white;border-color:var(--brand);}

.qa-fr-review-card{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:8px;transition:all .15s;}
.qa-fr-review-card:hover{border-color:var(--brand-mid);background:var(--bg2);}


/* ─────────────────────────────────────────────────────────────
 * DETAIL PANEL — section cards + key/value rows + photo grid
 * Used inside qaFrOpenDetail() popups in 15-field-reports-pdf.js.
 * ───────────────────────────────────────────────────────────── */
.qa-fr-detail-section{background:var(--bg1);border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:10px;}
.qa-fr-detail-section h4{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--text1);}

.qa-fr-field-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--bg3);font-size:12px;}
.qa-fr-field-label{color:var(--text3);font-weight:500;}
.qa-fr-field-val{color:var(--text1);font-weight:600;text-align:right;}

.qa-fr-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:8px;}
.qa-fr-photo-thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;border:1px solid var(--border);cursor:pointer;}


/* ─────────────────────────────────────────────────────────────
 * ACTION BAR — approve / reject / rework CTAs at the bottom of detail
 * ───────────────────────────────────────────────────────────── */
.qa-fr-action-bar{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
.qa-fr-action-btn{padding:10px 20px;font-size:13px;font-weight:700;border:none;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .15s;}
.qa-fr-action-btn.approve{background:#22c55e;color:white;}
.qa-fr-action-btn.approve:hover{background:#16a34a;}
.qa-fr-action-btn.reject{background:#ef4444;color:white;}
.qa-fr-action-btn.reject:hover{background:#dc2626;}
.qa-fr-action-btn.rework{background:#f59e0b;color:white;}
.qa-fr-action-btn.rework:hover{background:#d97706;}