/* =========================================================
   Repeating photo capture — "Add photo", as many as the job needs
   Paired with js/components/photo-rows.js and components/_photo_rows.html.
   Used by ticket media and finance receipts, so it lives here rather than in
   either module's stylesheet.
   ========================================================= */

.tg-photo-rows{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* =========================
   A row waiting for a photo
========================= */
.tg-photo-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;

  padding: 8px;

  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--bg-soft, #f8fafc);
}

/* The whole label is the tap target — a bare file input is a small button with
   an unreadable "No file chosen" beside it.

   Scoped under .tg-photo-rows on purpose: the host form styles `.form-field
   label` (block, 12px, weight 900), which at two components beats a lone class
   and would flatten these rows into stacked blocks. */
.tg-photo-rows .tg-photo-take{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 12px;

  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--panel);

  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.tg-photo-rows .tg-photo-take:hover{
  border-color: #f7941d;
}

/* The input still has to be reachable — the button calls .click() on it — so it
   is hidden by size, not by display:none. */
.tg-photo-rows .tg-photo-take input[type="file"]{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tg-photo-rows .tg-photo-take-label::before{
  content: "📷 ";
}

.tg-photo-caption{
  min-width: 0;
}

.tg-photo-amount{
  min-width: 0;
  max-width: 130px;
}

.tg-photo-preview{
  grid-row: 1;
  grid-column: 1;

  width: 44px;
  height: 44px;

  border: 1px solid var(--border);
  border-radius: 6px;
  object-fit: cover;
}

/* When a preview appears it takes the first cell, so the take-photo label moves
   along one and the row stays three across. */
.tg-photo-row:has(.tg-photo-preview){
  grid-template-columns: auto auto 1fr auto;
}

/* With an amount the row is take / amount / note / remove. */
.tg-photo-row:has(.tg-photo-amount){
  grid-template-columns: auto auto 1fr auto;
}

.tg-photo-row:has(.tg-photo-amount):has(.tg-photo-preview){
  grid-template-columns: auto auto auto 1fr auto;
}

.tg-photo-drop{
  white-space: nowrap;
}

/* =========================
   Photos already stored — a 2x2 grid
   Four photos of one job are read together, so they sit side by side rather than
   as a list of rows. Two columns at every width: at 390px that is a ~160px tile,
   which is big enough to recognise the joint you photographed.
========================= */
.tg-photo-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tg-photo-tile{
  display: flex;
  flex-direction: column;

  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--panel);
  overflow: hidden;
}

.tg-photo-tile-img{
  display: block;
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}

.tg-photo-tile-img img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tg-photo-tile-img:hover{
  outline: 2px solid #f7941d;
  outline-offset: -2px;
}

.tg-photo-tile-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;

  padding: 6px 8px;

  border-top: 1px solid var(--border);
}

.tg-photo-tile-caption{
  flex: 1 1 auto;
  min-width: 0;

  font-size: 12px;
  font-weight: 700;

  /* One line, so tiles in a row stay the same height. The full text is the
     lightbox title. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
   Holding the host form off
   This component is dropped inside a .form-field, which in the ticket form
   styles `label` as a block and every `input` as width:100% height:--tg-field-h.
   That turned a checkbox into a 55x40 slab with its own word underneath. Two
   classes beat one class plus an element, so these win wherever the component
   is used, without the host needing to know about it.
========================= */
.tg-photo-rows .tg-photo-remove{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  flex: 0 0 auto;
  margin: 0;

  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.tg-photo-rows .tg-photo-remove input[type="checkbox"]{
  width: 16px;
  height: 16px;
  /* pwa.css gives every control a 40px min-height for thumbs, which is right for
     a field and wrong for a tickbox — and min-height outranks height. */
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
}

.tg-photo-rows .tg-photo-caption{
  width: 100%;
}

.tg-photo-add{
  align-self: flex-start;
}

@media (max-width: 640px){
  /* No room for three columns beside a thumbnail: the caption takes its own
     line and Remove sits under the take-photo button. */
  .tg-photo-row,
  .tg-photo-row:has(.tg-photo-preview){
    grid-template-columns: auto 1fr;
  }

  .tg-photo-caption{
    grid-column: 1 / -1;
  }

  .tg-photo-row:has(.tg-photo-amount),
  .tg-photo-row:has(.tg-photo-amount):has(.tg-photo-preview){
    grid-template-columns: auto 1fr;
  }

  .tg-photo-amount{
    max-width: none;
  }

  /* A fixed slot holds one field beside the camera, so that field keeps the line.
     The caption's own line above is for the open-ended rows, which carry take +
     amount + note + remove and genuinely cannot fit. Without this the fuel slip
     read as one line (it has an amount) while the odometer and pump read as two,
     and the three slots are meant to look like one thing.
     Scoped with :not(:has(amount)) so the casual slot, which has both an amount
     and a note, still drops its note to its own line. */
  .tg-photo-slot .tg-photo-row:not(:has(.tg-photo-amount)) .tg-photo-caption{
    grid-column: auto;
  }

  /* =========================
   Holding the host form off
   This component is dropped inside a .form-field, which in the ticket form
   styles `label` as a block and every `input` as width:100% height:--tg-field-h.
   That turned a checkbox into a 55x40 slab with its own word underneath. Two
   classes beat one class plus an element, so these win wherever the component
   is used, without the host needing to know about it.
========================= */
.tg-photo-rows .tg-photo-remove{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  flex: 0 0 auto;
  margin: 0;

  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.tg-photo-rows .tg-photo-remove input[type="checkbox"]{
  width: 16px;
  height: 16px;
  /* pwa.css gives every control a 40px min-height for thumbs, which is right for
     a field and wrong for a tickbox — and min-height outranks height. */
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
}

.tg-photo-rows .tg-photo-caption{
  width: 100%;
}

.tg-photo-add{
    align-self: stretch;
    text-align: center;
  }
}

/* What the shrink component reports back: "Ready — 3400KB to 210KB". Small and
   muted, because it is reassurance rather than information — the point is that
   something is happening while a big photo is being re-encoded. */
.tg-shrink-note{
  margin-top:4px;
  font-size:11.5px;
  line-height:1.3;
}