/* shared.css — multi-page stylesheet for the tech app (keeps app.css untouched) */

.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

/* Your HTML uses .page-top-actions */
.page-top-actions{
  display:flex;
  gap:10px;
  align-items:center;
  width: 100%;
}

/* ✅ ALWAYS keep Back on the right (Web + PWA) */
.page-top-actions #backBtn{
  margin-left: auto;
}

/* ✅ IMPORTANT:
   Remove the standalone reversing behavior (it was swapping buttons in PWA)
   (intentionally no body.standalone overrides here)
*/

.btn-secondary{
  border:1px solid #e6e9ee;
  background:#ffffff;
  color:#1f2937;
  border-radius:12px;
  padding:10px 12px;
  font-weight:650;
  cursor:pointer;
  white-space:nowrap;
}
.btn-secondary:active{ transform: translateY(1px); }

/* SAVE & HOLD (2.2-H.3) — secondary button tinted to the on-hold identity.
   Coherent with the 2.2-H.4 history-row on-hold palette (row tint #fffbf5 /
   border #fde68a); the button is a touch warmer/darker so it reads as an
   actionable affordance, not a passive status tint. Padding / border-radius /
   cursor / font-weight / :active transform all inherit from .btn-secondary. */
.btn-secondary.btn-on-hold{
  /* Full-width parity with the primary SUBMIT button. VR's .actions is a
     plain block container (btn-primary gets width:100% from the remote
     common CSS); MR/SG submit-rows are flex-column stretch. block + 100%
     + border-box behaves correctly in all three. */
  /* !important: the remote common.lid-la.com base/portal CSS constrains
     .btn-secondary width/display with a rule that outranks this modifier
     (2.2-H.3 Option 1 diagnosis). Tint props below win without it. */
  /* CASCADE NOTE for Round 2.9 F.1: the display:block !important here
     beats any non-important inline style.display="none" set by JS, which
     leaks Save & Hold onto released-record edits. Hide via the .is-hidden
     utility below (also !important) instead of an inline style. */
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
  /* Breathing room above SUBMIT (additive to MR/SG flex gap; sole spacing
     in VR's non-flex .actions). */
  margin-bottom:8px !important;
  /* Match the primary button's heavier label weight for equal-weight
     pairing (base .btn-secondary is 650). */
  font-weight:700;
  background:#fff7ed;
  border-color:#fdba74;
  color:#9a3412;
}

/* Round 2.9 Item F.1-fix — JS-driven hide utility that wins the cascade
   against the .btn-on-hold display:block !important rule above (added
   2.2-H.3 to fight a remote common.lid-la.com width constraint). A plain
   inline style.display="none" loses to that !important; this utility
   defeats it. First consumer is the SG edit-on-form flow (Item F.1):
   released-record edits hide Save & Hold via classList toggle. Same
   utility will serve F.3 (VR) and any other surface that needs to hide
   an element whose CSS sets display !important.
   Convergent with the pre-existing scoped .X.is-hidden rules in
   photo_modal.css + field_visit.css (all of those already display:none;
   adding this bare !important utility doesn't change their behavior). */
.is-hidden { display: none !important; }

/* Round 2.3.H — spacing between adjacent buttons inside .card-chrome .right.
   Remote portal.css defines the cell as display:flex with no gap; without this
   rule a second chrome button would sit flush against its left sibling. */
.card-chrome .right > button + button { margin-left: 8px; }

/* On-hold counter badge (2.2-H.5) — amber chip injected into the three
   request-type tiles on project_actions.html. Same on-hold amber identity
   as .btn-on-hold above (#fff7ed / #fdba74 / #9a3412). JS toggles the
   [hidden] attribute; the explicit [hidden] rule below must win over the
   inline-flex display (a bare class would otherwise override the UA
   `[hidden]{display:none}` and show an empty badge at count 0). */
.on-hold-counter{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:8px;
  padding:2px 8px;
  border:1px solid #fdba74;
  border-radius:999px;
  background:#fff7ed;
  color:#9a3412;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  vertical-align:middle;
}
.on-hold-counter[hidden]{ display:none; }
.on-hold-counter .on-hold-glyph{ font-size:12px; line-height:1; }
.on-hold-counter .on-hold-label{ font-weight:500; opacity:0.85; }

/* Presence indicator — Round 2.4.C "who's here" pill on the request
   tiles. Same pill geometry as .on-hold-counter above. Color updated
   to cyan family in Round 2.4.I (B8): brighter and more visually
   distinct from the amber on-hold pill. JS toggles the [hidden]
   attribute; the explicit [hidden] rule below must win over the
   inline-flex display. */
.presence-indicator{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:8px;
  padding:2px 8px;
  border:1px solid #a5f3fc;
  border-radius:999px;
  background:#ecfeff;
  color:#0e7490;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  vertical-align:middle;
}
.presence-indicator[hidden]{ display:none; }
.presence-indicator .presence-glyph{ font-size:12px; line-height:1; }
.presence-indicator .presence-label{ font-weight:500; opacity:0.85; }

/* B9 — Round 2.4.I: label span fills remaining tile width so pills
   cluster at the right edge consistently for 0/1/2-pill cases. */
.btn-menu > span:first-child {
  flex: 1 1 auto;
}

/* Picker variant (Round 2.4.C) — on active_projects.html's project tiles the
   presence indicator is a glyph-only "someone is here" dot (no count or
   name; that detail is the action hub's job). It is absolutely positioned
   in the tile's bottom-right corner so it never disturbs the
   .fv-project-item flex row (name block | status). The .fv-project-item
   base rule lives in field_visit.css; this adds only the positioning
   context the picker badge needs. */
.fv-project-item{ position:relative; }
.fv-project-item .presence-indicator{
  position:absolute;
  right:10px;
  bottom:8px;
}

.panel{
  margin-top:14px;
  padding:14px;
  border:1px solid #e6e9ee;
  background:#ffffff;
  border-radius:14px;
}

.panel-title{
  font-size:12px;
  color:#5f6b7a;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:10px;
}

.pickers{
  display:grid;
  gap:10px;
}

.picker{
  position:relative;
  overflow:hidden;
}

.picker input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.meta-row{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.meta{
  font-size:12px;
  color:#8a94a6;
}

.btn-link{
  background:transparent;
  border:none;
  padding:0;
  font-weight:700;
  color:#1f6fd6;
  cursor:pointer;
}

.file-list{
  display:grid;
  gap:8px;
}

.file-item{
  border:1px solid #e6e9ee;
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  /* [maintenance/2.4.J-postdeploy-3] Was flex-start; thumbnail (80x80)
     vertically centers nicer with center alignment now that rows have
     a thumbnail-on-the-left + meta-in-middle + remove-on-right layout. */
  align-items:center;
}

/* [maintenance/2.4.J-postdeploy-4] Item J — card-chrome Back button override.
   Apply at all widths — chrome Back buttons follow the pill convention
   regardless of viewport tier, overriding both shared.css's base
   .btn-secondary (boxy at phone tier) and field_app_sizing.css's size bump
   (at tablet/desktop tier). Specificity-correct: 0,2,0 .card-chrome
   .btn-secondary beats 0,1,0 .btn-secondary at all breakpoints.
   Originally scoped to @media (min-width: 768px) in postdeploy-3 to
   match field_app_sizing.css's bump — but that left the phone tier on
   the boxy base rule. This commit unwraps the media query. */
.card-chrome .btn-secondary {
  min-height: auto;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 999px;
}

/* [maintenance/2.4.J-postdeploy-3] Photo / video thumbnail preview in
   each file row. Image files render as <img>; video files render as
   <video> with preload=metadata + muted + playsinline (iOS Safari
   requirements for first-frame rendering). Same 80x80 box + object-fit
   for both element types. */
.file-thumb{
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  background: #f3f5f8;   /* placeholder bg before media loads */
  border: 1px solid #e6e9ee;
}
/* Round 2.9 Item O: HEIC placeholder chip — shown while heic2any is
   transcoding the file to JPEG, or after a conversion failure. Sits in
   the same 80×80 box as .file-thumb (rule above applies via the shared
   class) and visually reads as a deliberate file-type chip rather than
   a broken-image icon. Once async conversion completes the chip is
   replaced by the normal <img class="file-thumb"> render. */
.file-thumb-heic{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f5f8;
  color: #5f6b7a;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.file-thumb-video{
  /* Same box shape as .file-thumb; <video> defaults paint their own
     controls — pointer-events:none keeps the thumbnail decorative
     (the row's remove button is the only interactive element). */
  pointer-events: none;
  /* [maintenance/2.4.J-postdeploy-4] Item I — belt-and-suspenders against
     <video> intrinsic-dimension flash during the loadedmetadata window.
     The base .file-thumb rule sets width:80px / height:80px, but for some
     iOS Safari versions an unconstrained max-* lets the intrinsic
     video size momentarily blow out the layout while metadata loads,
     which contributes to the post-camera-return viewport-stuck symptom.
     max-* constraints are more authoritative during initial layout. */
  max-width: 80px;
  max-height: 80px;
}

/* Round 2.9 Item N: flex:1 forces .file-main to fill remaining row space
   between .file-thumb (fixed 80px) and .file-remove (content width), so the
   planter input's width:100% resolves to the same width across all rows
   regardless of filename length. min-width:0 stays to allow shrink on long
   filenames (the text-overflow:ellipsis on .file-name needs the parent to
   be shrinkable below content-min). */
.file-main{
  flex: 1;
  min-width: 0;
}

.file-name{
  font-weight:750;
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 340px;
}

.file-sub{
  margin-top:3px;
  font-size:12px;
  color:#5f6b7a;
}

.file-remove{
  border:none;
  background:transparent;
  color:#1f6fd6;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}

.empty{
  font-size:13px;
  color:#5f6b7a;
}

.actions{
  margin-top:16px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * .btn-row — Round 2.9 Item D shared base for action button rows.
 *
 * Wide widths   : flex row, right-aligned, wraps progressively when content
 *                 exceeds the container width.
 * Phone (≤480px): full vertical stack with stretched children.
 *
 * Design template: page_header_row.css's .page-header-row / .phr-actions
 * pattern (which already does the same thing on visit_form.html /
 * materials.html / aggregate_media.html / project_actions.html).
 *
 * Per-surface margin-top stays on the per-surface stub class (e.g.,
 * .mr-submit-row { margin-top: 18px }, .fv-modal-footer { margin-top: 20px })
 * so this base class is layout-only and reusable across contexts.
 *
 * Replaces (consolidates the flex layout from):
 *   .fv-visit-row-btns   (visits.html)
 *   .mr-row-right        (materials_history.html)
 *   .ar-row-right        (aggregate_media_history.html)
 *   .mr-submit-row       (materials.css — margin-top stub stays)
 *   .amr-submit-row      (aggregate_media.css — margin-top stub stays)
 *   .fv-modal-footer     (field_visit.css — margin-top stub stays)
 *   .actions             (when used as a form-bottom button row)
 * ──────────────────────────────────────────────────────────────────────── */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Round 2.9 Item R: .is-danger destructive-confirm button styling.
   Consumed by FvConfirm-driven dialogs on history pages (Cancel/Void
   confirms) AND edit-form pages (discard-changes confirm). Centralized
   here so adding new consumers does not require duplicating the rule.
   Previously inline-duplicated in 3 history pages; consolidated under
   Item R. */
.fv-confirm-modal .btn-primary.is-danger {
  background: #991b1b;
  border-color: #991b1b;
}

/* Round 2.9 Item H: canonical form-control classes.
   .input / .field / .label were already declared in markup across every
   form page (aggregate_media.html, materials.html, visit_form.html,
   jobsite_contacts.html) but had no shared definition in tech CSS — only
   docs.css and gallery.css carried local copies. Without a definition
   the inputs fell through to browser-default styling, which is why the
   single-line fields rendered as native-looking boxes while the
   textareas (which additionally carry .fv-textarea) looked correct.

   Shape matches .fv-textarea in field_visit.css — same border color,
   radius, padding, background, focus shadow — so any element that
   carries both classes (e.g. <textarea class="input fv-textarea">) lays
   out identically under either rule.

   Font-size is intentionally NOT set here: field_app_sizing.css already
   has a blanket `input, select, textarea { font-size: 16px/18px }` tier
   rule that covers .input elements regardless of class. */
.input {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid #e6eaf0;
  border-radius: 14px;
  background: #ffffff;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}
.input:focus {
  border-color: #c9d3e3;
  box-shadow: 0 0 0 3px rgba(30, 90, 200, 0.08);
}
.field {
  display: block;
  margin: 10px 0 14px;
}
.label {
  display: block;
  font-size: 12px;
  color: #5f6b7a;
  margin-bottom: 6px;
}

/* Round 2.9 Item H: shared responsive 2-col grid utility. Pairs two
   form fields side-by-side at tablet/desktop tier, collapses to a
   single column on phone tier (same 480px breakpoint Item D's .btn-row
   uses). Replaces three previously-duplicated patterns:
     - .fv-time-row (field_visit.css — VR arrival/departure)
     - .jc-form-row-2 (jobsite_contacts.css — contacts role/phone)
     - inline `style="display:grid;grid-template-columns:1fr 1fr;..."`
       on aggregate_media.html + materials.html
   Use `<div class="form-grid-2"><label class="field">…</label>
   <label class="field">…</label></div>` to pair any two fields. */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 480px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}