/* ============================================================
 * Lions Tooth — Inspections module styles
 * (Job Site Status tab + shared QA chrome)
 * ============================================================
 *
 * 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.
 *
 * This file is the canonical home for:
 *   .js-*                 — Job Site Status form + autocomplete + history
 *   .js-card*             — Phase 1.2 mobile cards for Job Site Status
 *                            (see _renderJsAllUpdatesCards in 10-drilling.js)
 *   .qa-table, .qa-table-wrap, .drill-qa-table — table chrome (used by
 *                            Job Site Status; QA tab uses cards, not tables)
 *   .qa-summary, .qa-stat* — top-of-tab summary pills (legacy, may move to qa.css later)
 *   .qa-badge*            — status badges (used in both Job Site Status + QA tab cards)
 *   .qa-filters           — filter row container (shared)
 *   .qa-notes-cell, .qa-notes-toggle — notes cell in QA table
 *   .qa-sc-link, .qa-dp-link, .qa-photo-link — link buttons (shared)
 *   .qa-editable-note*, .qa-inline-edit*, .qa-field-readonly,
 *   .qa-edit-indicator    — inline-edit affordances on QA tables
 *
 * What's NOT in this file:
 *   .qa-section*, .qa-mini-summary, .qa-mini-stat*, .qa-type-btn,
 *   #qa-stats-toggle-btn, body.qa-stats-hidden .qa-mini-summary
 *                          → moved to qa.css (Phase 2.1)
 *   .qa-fr-*               → Field Reports module (separate, future)
 *   .hp-*                  → Heat Pump QA sub-module (future)
 *   .qa-stepper-*          → Cross-cutting modal stepper, not Inspections-only
 *
 * Both Phase 1.1 and Phase 2.1 are purely additive: 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 (Phase 1.4 soak +
 * Phase 2.4-equivalent), 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 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 — search, autocomplete, status form, history
 * ───────────────────────────────────────────────────────────── */
.js-search-card{overflow:visible!important;}
.js-search-wrap{position:relative;max-width:600px;}
.js-search{width:100%;padding:11px 36px 11px 13px;font-size:16px;border:1.5px solid var(--border2);border-radius:var(--radius-sm);background:var(--white);color:var(--text);transition:border-color 0.15s,box-shadow 0.15s;-webkit-appearance:none;appearance:none;}
.js-search::placeholder{color:var(--text3);}
.js-search:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(91,110,248,0.12);}
.js-clear-btn{position:absolute;right:11px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text3);font-size:15px;line-height:1;display:none;padding:4px;}

.js-autocomplete{position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--white);border:1.5px solid var(--brand);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);max-height:260px;overflow-y:auto;z-index:500;display:none;}
.js-autocomplete.open{display:block;}
.js-ac-item{padding:10px 13px;font-size:14px;line-height:1.3;color:var(--text);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
.js-ac-item:last-child{border-bottom:none;}
.js-ac-item:hover,.js-ac-item.highlighted{background:var(--brand-light);}
.js-ac-item .js-ac-info{flex:1;cursor:default;}
.js-ac-item .js-ac-comm{display:block;font-size:11px;color:var(--text3);margin-top:2px;}
.js-ac-select-btn{flex-shrink:0;padding:5px 12px;font-size:11px;font-weight:700;border:none;border-radius:6px;cursor:pointer;background:var(--brand);color:white;transition:background .15s;}
.js-ac-select-btn:hover{background:#4252c8;}
.js-ac-selected-btn{flex-shrink:0;padding:5px 12px;font-size:11px;font-weight:700;border:none;border-radius:6px;cursor:default;background:#d1fae5;color:#16a34a;}

.js-form{margin-top:16px;display:none;}
.js-form.open{display:block;}
.js-home-header{display:flex;align-items:center;gap:12px;padding:12px;background:var(--brand-light);border-radius:var(--radius-sm);margin-bottom:14px;}
.js-home-header .js-addr{font-weight:700;font-size:14px;color:var(--text);}
.js-home-header .js-comm{font-size:11px;color:var(--text2);}
.js-status-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px;}
.js-status-row select{padding:11px 13px;font-size:14px;border:1.5px solid var(--border2);border-radius:var(--radius-sm);min-width:200px;background:var(--white);transition:border-color .15s,box-shadow .15s;}
.js-status-row select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(91,110,248,.12);}
.js-notes-area{width:100%;min-height:80px;padding:11px 13px;font-size:14px;border:1.5px solid var(--border2);border-radius:var(--radius-sm);resize:vertical;font-family:inherit;color:var(--text);transition:border-color .15s,box-shadow .15s;}
.js-notes-area:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(91,110,248,.12);}
.js-save-btn{background:var(--brand);color:#fff;border:none;padding:14px 28px;border-radius:var(--radius-sm);font-weight:700;font-size:15px;cursor:pointer;margin-top:10px;box-shadow:0 3px 12px rgba(91,110,248,.3);transition:background .15s,transform .1s;letter-spacing:-.2px;}
.js-save-btn:hover{background:var(--brand-dark);}
.js-save-btn:active{transform:scale(.98);}

.js-history{margin-top:20px;}
.js-chip{display:inline-flex;align-items:center;gap:5px;background:var(--brand-light);color:var(--brand);border:1px solid var(--brand);border-radius:20px;padding:4px 10px 4px 12px;font-size:12px;font-weight:600;white-space:nowrap;}
.js-chip-x{background:none;border:none;cursor:pointer;color:var(--brand);font-size:14px;line-height:1;padding:0 2px;opacity:.7;}
.js-chip-x:hover{opacity:1;}
.js-hist-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px;align-items:flex-start;}
.js-hist-ts{color:var(--text3);font-size:10px;white-space:nowrap;min-width:80px;}
.js-hist-status{font-weight:700;font-size:11px;}
.js-hist-note{color:var(--text2);font-size:11px;flex:1;}

.js-recent{margin-top:16px;}
.js-recent-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;cursor:pointer;transition:background .1s;}
.js-recent-item:hover{background:var(--brand-light);}
.js-recent-addr{font-weight:600;font-size:12px;}
.js-recent-comm{font-size:10px;color:var(--text3);}
.js-recent-status{margin-left:auto;font-size:10px;font-weight:700;}


/* ─────────────────────────────────────────────────────────────
 * 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{max-width:100%;}
  .js-status-row{flex-wrap:wrap;gap:6px;}
  .js-status-row select{min-width:140px;font-size:12px;}
}

/* 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 — Phase 1.2 alternate renderer
 *
 * Activated by `LT_FEATURE_INSPECTIONS_CARDS=on` in localStorage.
 * When active, #js-all-cards-wrap is shown in place of the table.
 * Phase 1.3 will layer on mobile-first breakpoints, chip filter row,
 * and FAB. For now cards stack single-column at all widths so this
 * PR is purely a renderer swap with no layout responsiveness change.
 *
 * Stephen-facing toggle (DevTools console):
 *   LT_INSPECTIONS_CARDS_ENABLE(true)   // turn on
 *   LT_INSPECTIONS_CARDS_ENABLE(false)  // turn off
 * ───────────────────────────────────────────────────────────── */

/* Card container — mobile-first responsive grid (Phase 1.3).
 * Base (≤767px): single-column flex stack — same as Phase 1.2.
 * Tablet+ (≥768px): 2-column grid for density.
 * Desktop+ (≥1024px): 3-column grid (matches the desktop strip in
 *   previews/inspections-mobile-first.html). */
#js-all-cards{
  display:flex;flex-direction:column;gap:8px;
  margin-top:4px;
  /* Match the existing table-wrap height so the panel doesn't jump */
  max-height:50vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-right:2px; /* breathing room for scrollbar */
}

@media (min-width:768px){
  #js-all-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
}

@media (min-width:1024px){
  #js-all-cards{
    grid-template-columns:repeat(3,1fr);
  }
}

.js-card{
  background:var(--white,#fff);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 12px;
  min-height:88px;
  cursor:default;
  transition:border-color .15s,box-shadow .15s,background .1s;
}
.js-card[data-clickable="true"]{cursor:pointer;}
.js-card[data-clickable="true"]:hover{
  border-color:var(--brand);
  box-shadow:0 2px 8px rgba(96,138,253,.12);
}
.js-card[data-clickable="true"]:active{background:var(--bg2);}

.js-card-primary{
  grid-column:1;
  display:flex;flex-direction:column;gap:2px;
  min-width:0; /* allow ellipsis */
}
.js-card-comm{
  font-size:11px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.06em;
}
.js-card-comm .builder{
  text-transform:none;font-weight:600;color:var(--text3);
  letter-spacing:0;margin-left:4px;
}
.js-card-addr{
  font-family:'Inter Tight',sans-serif;
  font-size:16px;font-weight:700;
  color:var(--text);
  letter-spacing:-0.01em;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.js-card-model{
  font-size:11px;color:var(--text3);margin-top:1px;
}

.js-card-status{
  grid-column:2;grid-row:1;align-self:start;
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;
  border-radius:14px;
  font-size:11px;font-weight:700;
  white-space:nowrap;
  border:1px solid transparent;
}
.js-card-status .lt-icon{width:12px;height:12px;}

/* Status pill tints — mapped from JS_STATUS_COLORS in 04-core-utils.js.
 * Tints are hand-picked rather than computed from the var(--*) values so
 * we get correct contrast without relying on color-mix(). */
.js-card-status[data-status="Not Started"]      { background:#f3f4f6;color:#4b5563;border-color:#e5e7eb; }
.js-card-status[data-status="Staked"]           { background:#cffafe;color:#0e7490;border-color:#a5f3fc; }
.js-card-status[data-status="Excavation"]       { background:#ede9fe;color:#5b21b6;border-color:#ddd6fe; }
.js-card-status[data-status="Footing Formed"],
.js-card-status[data-status="Footing Poured"]   { background:#fff7ed;color:#9a3412;border-color:#fed7aa; }
.js-card-status[data-status="Foundation Forming"],
.js-card-status[data-status="Foundation Poured"]{ background:#fefce8;color:#854d0e;border-color:#fef08a; }
.js-card-status[data-status="Ready for GLC"]    { background:#dcfce7;color:#166534;border-color:#bbf7d0; }
.js-card-status[data-status="Other"]            { background:#f3f4f6;color:#475569;border-color:#e5e7eb; }

.js-card-meta{
  grid-column:1 / span 2;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:4px 14px;
  font-size:12px;color:var(--text2);
}
.js-card-meta span{display:inline-flex;align-items:center;gap:4px;}
.js-card-meta .lt-icon{width:13px;height:13px;color:var(--text3);}
.js-card-meta .synced-yes,.js-card-meta .synced-yes .lt-icon{color:var(--green);}
.js-card-meta .synced-no,.js-card-meta .synced-no .lt-icon{color:var(--orange);}

.js-card-notes{
  grid-column:1 / span 2;
  font-size:13px;color:var(--text);
  background:var(--bg2);
  padding:8px 10px;
  border-radius:6px;
  line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

.js-cards-empty{
  text-align:center;padding:32px 16px;
  color:var(--text3);font-size:13px;
}