/* ============================================================
 * Lions Tooth — Job Site Status module styles
 * ============================================================
 *
 * Phase 4.1 of the mobile-first refactor (ADR 0004).
 *
 * This file is the canonical home for CSS rules that style the
 * Job Site Status tab — the primary capture form (search → photo →
 * status → notes → save), the autocomplete dropdown, the update
 * history list, the recent-updates list, and the Phase 1.2 mobile
 * cards for the ALL STATUS UPDATES section.
 *
 * What's in scope here:
 *   .js-search*, .js-clear-btn        — search input chrome
 *   .js-autocomplete, .js-ac-*        — autocomplete dropdown
 *   .js-form, .js-home-header, .js-addr, .js-comm — form layout + selected home
 *   .js-status-row                    — status select + current status row
 *   .js-notes-area, .js-save-btn      — notes textarea + save CTA
 *   .js-history, .js-hist-*           — update history list
 *   .js-chip, .js-chip-x              — multi-address chip pills
 *   .js-recent, .js-recent-*          — recent-updates card list
 *   #js-all-cards, #js-all-cards-wrap — card list container (Phase 1.2)
 *   .js-card*                         — Phase 1.2 cards (mobile renderer)
 *   .js-cards-empty                   — empty state for filtered card list
 *
 * Previously homed in:
 *   inspections.css (Phase 1.1 / Phase 1.2 / Phase 1.3) — relocated here
 *   in Phase 4.1 to give Job Site Status its own module file. inspections.css
 *   keeps the legacy .qa-* shared chrome (qa-table, qa-badge, qa-sc-link, etc.)
 *   that's currently still used by the Bore Stakes table on this tab.
 *
 * Phase 4.1 is purely additive at the production level: rules below are
 * byte-equivalent to what was in inspections.css. Cascade order keeps
 * rendering identical. Phase 4.2 will class-ify the form markup; Phase 4.3
 * adds mobile-first breakpoints.
 *
 * Tokens (--brand, --text, etc.) are inherited from :root in index.html.
 * ============================================================ */


/* ─────────────────────────────────────────────────────────────
 * SEARCH + AUTOCOMPLETE — top of the JOB SITE STATUS UPDATE form
 * ───────────────────────────────────────────────────────────── */
.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;}


/* ─────────────────────────────────────────────────────────────
 * FORM — selected home header + status + notes + save
 * ───────────────────────────────────────────────────────────── */
.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);}


/* ─────────────────────────────────────────────────────────────
 * UPDATE HISTORY — chronological list under the form
 * Plus multi-address chip-select pills (.js-chip*)
 * ───────────────────────────────────────────────────────────── */
.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;}


/* ─────────────────────────────────────────────────────────────
 * RECENT UPDATES — separate card with a list of recent entries
 * ───────────────────────────────────────────────────────────── */
.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 OVERRIDES — Job-Site-Status-specific rules in the
 * legacy desktop-first @media(max-width:768px) block.
 * Phase 4.3 will replace these with min-width: build-ups.
 * ───────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .js-search-wrap{max-width:100%;}
  .js-status-row{flex-wrap:wrap;gap:6px;}
  .js-status-row select{min-width:140px;font-size:12px;}
}


/* ─────────────────────────────────────────────────────────────
 * ALL STATUS UPDATES CARDS — 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.
 *
 * 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;
}


/* ─────────────────────────────────────────────────────────────
 * BORE STAKES CARDS — Phase 4.2 alternate to horizontal-scroll table
 *
 * Each lot becomes a card with community + address (homesite) + an
 * editable status <select>. The select's per-status theming lives in
 * the data-state attribute (set by renderBoreStakesTable + _bsSelectColor)
 * so we get class-based coloring without inline styles on each option.
 * ───────────────────────────────────────────────────────────── */
.js-bs-list{display:flex;flex-direction:column;gap:8px;margin-top:4px;}

.js-bs-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 12px;
  align-items:center;
  padding:12px 14px;
  background:var(--white,#fff);
  border:1px solid var(--border);
  border-radius:10px;
  transition:border-color .15s,box-shadow .15s;
}
.js-bs-card:hover{border-color:var(--brand);}

.js-bs-info{
  grid-column:1;
  display:flex;flex-direction:column;gap:1px;
  min-width:0;
}
.js-bs-comm{
  font-size:11px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.06em;
}
.js-bs-addr{
  font-family:'Inter Tight',sans-serif;
  font-size:15px;font-weight:700;
  color:var(--text);
  letter-spacing:-0.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.js-bs-select{
  grid-column:2;
  font-size:12px;font-weight:600;
  padding:8px 12px;min-height:40px;
  border-radius:8px;
  border:1.5px solid var(--border);
  background:var(--bg2);color:var(--text);
  cursor:pointer;font-family:inherit;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;
}

/* Per-status theming via data-state — replaces the old inline-style
 * theming the legacy table emission did. _bsSelectColor() in
 * 10-drilling.js keeps data-state in sync on change. */
.js-bs-select[data-state="Requested"]      { background-color:#fff7ed; border-color:#fbb968; color:#9a3412; }
.js-bs-select[data-state="Complete"]       { background-color:#daefe0; border-color:#86efac; color:#166534; }
.js-bs-select[data-state="N/A"]            { background-color:#eceff3; border-color:#cbd5e1; color:#475569; }
.js-bs-select[data-state="Re-Stake-Needed"]{ background-color:#ffe1e1; border-color:#fca5a5; color:#8c2828; }

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


/* ─────────────────────────────────────────────────────────────
 * UPDATE FORM — Phase 4.2 mobile-first treatment
 *
 * Replaces inline-styled markup in the JOB SITE STATUS UPDATE card
 * with class-based markup hooked up to mobile-first responsive rules.
 *
 * Base (≤767px): vertical stack with thumb-friendly buttons.
 * Tablet+ (≥768px): photo row stays 2-up but inline; status row goes side-by-side.
 * ───────────────────────────────────────────────────────────── */

/* Photo capture row — 2-up grid on phone, inline on desktop */
.js-photo-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:10px 0 12px;
  flex-wrap:wrap;
}
.js-photo-row #js-photo-thumbs{
  grid-column:1 / -1;
  display:flex;gap:6px;flex-wrap:wrap;
}
.js-photo-row #js-photo-upload-status{
  grid-column:1 / -1;
  font-size:11px;color:var(--text3);min-height:14px;
}

.js-photo-btn{
  padding:12px 16px;font-size:13px;font-weight:700;
  border-radius:8px;border:1px solid;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;font-family:inherit;
  transition:transform .08s,background .12s,border-color .12s;
}
.js-photo-btn:active{transform:scale(.97);}
.js-photo-btn.primary{background:var(--brand);color:#fff;border-color:var(--brand);}
.js-photo-btn.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);}
.js-photo-btn.secondary{background:var(--bg1);color:var(--brand);border-color:#c5d2ff;}
.js-photo-btn.secondary:hover{border-color:var(--brand);background:var(--brand-light);}

@media (min-width:768px){
  .js-photo-row{
    display:flex;flex-direction:row;gap:6px;
    margin:6px 0 10px;
  }
  .js-photo-btn{
    flex:0 0 auto;
    padding:7px 14px;font-size:12px;
    min-height:auto;
  }
}

/* GLC task status row — same patterns as the form fields */
.js-glc-task-row{
  margin-bottom:10px;
  padding:10px 12px;
  background:var(--bg2);
  border-radius:8px;
  border:1px solid var(--border);
}
.js-form-section-label{
  font-size:11px;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:8px;
  font-family:'Inter Tight',sans-serif;
}
.js-glc-task-grid{
  display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
}
.js-glc-task-current-wrap,.js-glc-task-change-wrap{flex:1;min-width:140px;}
.js-glc-task-sublabel{
  font-size:11px;color:var(--text3);margin-bottom:3px;display:block;
}
.js-glc-task-current{
  font-weight:700;font-size:13px;color:var(--text);
}
.js-glc-task-sel{
  width:100%;font-size:12px;padding:5px 8px;
  border:1px solid var(--border);border-radius:6px;
  background:var(--bg);color:var(--text);
}

/* Mobile-first form refinements — applied at base width only.
 * Existing .js-search, .js-home-header, .js-status-row, .js-notes-area,
 * .js-save-btn rules were defined further up; we extend them here for
 * phone width without breaking desktop. */
@media (max-width:767px){
  /* Bigger search input + extra padding for thumb tap */
  .js-search{
    padding:14px 40px 14px 13px;
    border-radius:10px;
  }
  /* Hero treatment for selected home header */
  .js-home-header{
    padding:14px;
    border-radius:10px;
    border:1px solid #c5d2ff;
  }
  .js-home-header .js-addr{
    font-family:'Inter Tight',sans-serif;
    font-size:17px;
    letter-spacing:-0.01em;
    line-height:1.25;
  }
  .js-home-header .js-comm{
    font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;
    color:var(--brand-dark);
  }
  /* Stack the status row on phone (status select on top, current below) */
  .js-status-row{flex-direction:column;align-items:stretch;}
  .js-status-row > div{width:100%;}
  .js-status-row select{width:100%;font-size:16px;padding:14px;border-radius:10px;}
  /* Taller, brand-blue-focused notes textarea */
  .js-notes-area{
    min-height:100px;font-size:15px;padding:14px;border-radius:10px;
  }
  /* Full-width primary save CTA */
  .js-save-btn{
    width:100%;
    padding:14px 24px;font-size:15px;
    border-radius:10px;
    min-height:48px;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    margin-top:14px;
  }
}