/* Tailor Master - what this app adds on top of the shared app.css.
 *
 * The rule behind all of it: the same markup has to work on a shop counter PC driven by
 * keyboard, and on the owner's phone driven by thumb. Not two versions - one.
 */

/* ---------------------------------------------------------------- stage pills
   The order's stage is the thing a counter looks for first, so it gets colour, not just
   a word. Colours carry meaning: grey waiting, amber in hand, green done. */
.badge.b-booked    { background: #eef2f7; color: #40566d; }
.badge.b-cutting   { background: #fff2dc; color: #8a5a00; }
.badge.b-stitching { background: #fde9d2; color: #8f4b00; }
.badge.b-ready     { background: #dcf5e4; color: #14663a; }
.badge.b-delivered { background: #e6ecf2; color: #5a6b7d; }
.badge.b-cancelled { background: #fae1e1; color: #8a2020; }

/* Late and due-today need to shout across a shop. */
.ord-late   { color: #b4232a; font-weight: 700; }
.ord-today  { color: #9a5b00; font-weight: 700; }
.ord-ready  { color: #14663a; font-weight: 700; }

/* ---------------------------------------------------------------- order rows
   A table on a phone means sideways scrolling, and a shop loses orders that way. The
   same row markup renders as a table row on a wide screen and a card on a narrow one. */
.ord-row { display: grid; gap: 2px 10px; align-items: center; }
.ord-row .ord-no   { font-weight: 700; letter-spacing: .3px; }
.ord-row .ord-name { font-weight: 600; }
.ord-row .ord-sub  { color: #6d8499; font-size: 12.5px; }
.ord-row .ord-money { text-align: right; font-variant-numeric: tabular-nums; }

@media (min-width: 821px) {
  .ord-row {
    grid-template-columns: 96px minmax(140px, 1.4fr) 120px 96px 88px 110px 110px;
    padding: 9px 12px;
  }
}

/* ---------------------------------------------------------------- touch first
   Under 821px everything is finger-sized. 44px is the smallest target a thumb hits
   reliably; anything less and a shopkeeper taps the wrong order. */
@media (max-width: 820px) {
  .ord-row {
    grid-template-columns: 1fr auto;
    padding: 12px 14px;
    min-height: 68px;
    border-bottom: 1px solid var(--line, #e6ecf2);
  }
  .ord-row .ord-no    { grid-column: 1; }
  .ord-row .ord-name  { grid-column: 1; }
  .ord-row .ord-sub   { grid-column: 1; }
  .ord-row .ord-stage { grid-column: 2; grid-row: 1; justify-self: end; }
  .ord-row .ord-money { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .ord-row .ord-hide  { display: none; }

  .btn, .navlink, .bottomnav a,
  select, input[type="date"], input[type="text"], input[type="number"], input[type="tel"] {
    min-height: 44px;
  }
  .ord-row, .list-row, tr[data-open] { min-height: 44px; }

  /* Thumb reach: the actions a counter uses most sit at the bottom, not the top. */
  .form-actions {
    position: sticky; bottom: 0; z-index: 5;
    background: var(--card, #fff);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line, #e6ecf2);
    display: flex; gap: 8px;
  }
  .form-actions .btn { flex: 1; }

  /* One thing at a time. Two columns of measurements on a phone is unreadable. */
  .measure-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .order-cols   { grid-template-columns: 1fr !important; }

  /* A grid track is allowed to be narrower than the widest thing inside it.
     Without this, the measurement boxes set the width of the whole left column and the
     order screen ends up wider than the phone - so the counter has to scroll sideways to
     reach Save. Costs nothing on a PC, because there the column has the room anyway. */
  .order-cols > *, .measure-grid > * { min-width: 0; }
  .measure-grid input, .measure-grid select { min-width: 0; }

  /* Report and list tables that genuinely have too many columns for a phone scroll
     inside their own card instead of dragging the whole page sideways. */
  .card table { display: block; overflow-x: auto; }
}

/* ---------------------------------------------------------------- keyboard first
   On a PC every action has a key, and the key is shown on the button so people learn it
   without being taught. The owner can switch the hints off (Settings > Keyboard). */
.keyhint {
  display: inline-block; margin-left: 6px; padding: 1px 5px;
  border: 1px solid currentColor; border-radius: 4px;
  font-size: 10.5px; line-height: 1.5; opacity: .6; font-weight: 600;
}
body.no-keyhints .keyhint { display: none; }
@media (max-width: 820px) { .keyhint { display: none; } }  /* a phone has no F9 */

/* The row the keyboard is on. Without this, arrow-key navigation is invisible. */
.ord-row.cursor, .list-row.cursor { outline: 2px solid var(--primary, #2563eb); outline-offset: -2px; }

/* ---------------------------------------------------------------- measurements
   A measurement card is scanned, not read. Tight, aligned numbers, grouped the way a
   tailor takes them: top half, then bottom half, then style. */
.measure-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 12px; }
.measure-grid label { display: block; font-size: 12px; color: #5a6b7d; margin-bottom: 2px; }
.measure-grid input, .measure-grid select { width: 100%; text-align: center; font-variant-numeric: tabular-nums; }
.measure-group-title {
  grid-column: 1 / -1; margin: 6px 0 0; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; color: #6d8499;
}
/* A measurement that changed since the customer's last order */
.measure-changed input { background: #fff7e6; border-color: #e0b050; }

/* ---------------------------------------------------------------- new order form
   Everything on one screen. The old Windows version split this across tabs and the shop
   hated it: a counter wants measurements, items and money in one glance. */
.order-cols { display: grid; grid-template-columns: 420px 1fr; gap: 14px; align-items: start; }

/* Where the finished garment physically is. Small field, saves minutes a day. */
.rack-badge {
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  background: #0e2233; color: #fff; font-weight: 700; letter-spacing: .5px;
}

/* ---------------------------------------------------------------- photos
   Cloth and design pictures the customer brought in. */
.cloth-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.cloth-strip img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line, #e6ecf2); }
@media (max-width: 820px) { .cloth-strip img { width: 64px; height: 64px; } }