/* ============================================================
   Garage Manager — responsive.css
   Phone layout. Loaded after the theme stylesheet and independent of it:
   this file decides where things go on a narrow screen, never how they
   look. Colours, fonts, radii, and borders all come from the theme's
   tokens, so every theme gets the same phone layout without its own copy
   of these rules. Spacing is in px, as it is throughout style.css; the
   themes define no spacing tokens.

   The rule at phone widths (560px and under, the breakpoint style.css
   already uses): nothing scrolls sideways, not the page and not a table
   inside it. mobile/LAYOUT_AUDIT.md lists what each rule fixes.
   ============================================================ */

/* A grid item's minimum width defaults to its content's, so one wide child
   (the tab strip, a table) used to stretch the vehicle page past the edge
   of the screen once it drops to one column. Letting the column shrink
   keeps the page at the viewport's width, and a table that is still a
   table (561-860px) scrolls inside its own box instead. Scoped to the
   one-column layout: on a desktop the wide Upcoming table is allowed to
   widen its column, as it always has, so Mark done stays in view. */
@media (max-width: 860px) {
  .detail-grid > * {
    min-width: 0;
  }
}

/* iOS draws a native date input at a width of its own, wider than a
   phone-width form, so it poked out past the fields around it; only
   dropping the native appearance makes it take the width it is given.
   Without that appearance an empty date field collapses to no height, so
   it is held at a text field's (10px padding above and below one line),
   and its value sits left like every other field's instead of centred.
   This feature query matches only iOS WebKit (Safari and the app's web
   view), which leaves desktop date pickers exactly as they were. */
@supports (-webkit-touch-callout: none) {
  input[type='date'] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-height: calc(1.25em + 20px + 2 * var(--border-width));
    min-width: 0;
  }

  input[type='date']::-webkit-date-and-time-value {
    text-align: left;
  }
}

/* The History tab's sort control for phones, where the table's sortable
   headings are hidden. */
.card-sort {
  display: none;
}

@media (max-width: 560px) {
  /* iOS zooms into any focused field whose text is under 16px and stays
     zoomed, which left the page panning sideways after the keyboard
     closed. The viewport is deliberately not locked instead: that would
     also take pinch-zoom away from people who need it. */
  input,
  select,
  textarea,
  .field input,
  .field select,
  .field textarea,
  .filter-range input,
  .searchbar input {
    font-size: 16px;
  }

  /* ---------- Vehicle tabs: two rows of three ---------- */
  .tabs {
    border-bottom: 0;
    display: grid;
    flex: 1 1 100%;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tab {
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    justify-content: center;
    margin-bottom: 0;
    min-height: 44px;
    padding: 8px 4px;
    text-align: center;
  }

  .tab.active {
    background: var(--paper);
    border-color: var(--go-line);
    box-shadow: inset 0 -3px 0 var(--go-line);
  }

  /* The sliding underline is measured along one row; across two it would
     sit under the wrong tab. The active tab carries its own mark instead. */
  .tab-ink {
    display: none;
  }

  /* ---------- Tables become cards ----------
     dataTable() in app.js gives every cell its column's heading as
     data-label, plus the heading's card-* role. Each row becomes a card:
     [photo] name .......... key figure
     LABEL                        value
     LABEL                        value
     [ action button                  ] */
  .table-wrap {
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  table.tbl,
  table.tbl.tbl-wide {
    display: block;
    min-width: 0;
  }

  table.tbl thead {
    display: none;
  }

  table.tbl tbody {
    display: block;
  }

  table.tbl tbody tr {
    align-items: center;
    background: var(--paper);
    border: var(--rule-width) solid var(--line);
    border-radius: var(--radius);
    column-gap: 12px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 12px 14px;
  }

  table.tbl tbody tr:last-child {
    margin-bottom: 0;
  }

  table.tbl tbody td {
    border-bottom: 0;
    flex: 1 1 100%;
    font-size: 14px;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 5px 0;
    text-align: right;
  }

  table.tbl tbody td::before {
    color: var(--steel);
    content: attr(data-label);
    float: left;
    font-family: var(--font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-right: 12px;
    padding-top: 2px;
    text-align: left;
    text-transform: var(--label-case);
  }

  /* The card's header line. Order puts it first whatever column the
     heading was in; everything else is a full-width line below it. */
  table.tbl tbody td.card-photo,
  table.tbl tbody td.card-title,
  table.tbl tbody td.card-end {
    padding: 0 0 6px;
  }

  table.tbl tbody td.card-photo {
    flex: 0 0 auto;
    order: -3;
  }

  table.tbl tbody td.card-title {
    flex: 1 1 0;
    font-size: 15px;
    font-weight: 700;
    order: -2;
    text-align: left;
  }

  table.tbl tbody td.card-end {
    flex: 0 0 auto;
    max-width: 50%;
    order: -1;
  }

  table.tbl tbody td.card-photo::before,
  table.tbl tbody td.card-title::before,
  table.tbl tbody td.card-end::before,
  table.tbl tbody td.col-action::before {
    content: none;
  }

  table.tbl tbody td.card-photo .thumb {
    display: block;
    height: 48px;
    width: 48px;
  }

  /* A dash says "nothing here"; in a card the line can just be left out. */
  table.tbl tbody td.card-empty {
    display: none;
  }

  /* Row actions (Mark done, Renew, delete) become a full-width button row
     with finger-sized targets. */
  table.tbl tbody td.col-action {
    padding-top: 8px;
    white-space: normal;
  }

  table.tbl tbody td.col-action .btn {
    justify-content: center;
    min-height: 44px;
    width: 100%;
  }

  table.tbl tbody td.col-action .row-trash {
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  .card-sort {
    align-items: center;
    color: var(--steel);
    display: flex;
    font-family: var(--font-label);
    font-size: 11px;
    font-weight: 700;
    gap: 10px;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    text-transform: var(--label-case);
  }

  .card-sort select {
    background: var(--paper);
    border: var(--border-width) solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--ink);
    flex: 1;
    font-family: var(--font-body);
    letter-spacing: normal;
    padding: 8px 10px;
    text-transform: none;
  }

  /* ---------- Custom period: the two dates share a row ----------
     The label takes a line of its own so the dates are wide enough to read.
     They need a width to take, too: iOS draws an empty date field whose
     native look is removed (the fix above) as a sliver otherwise. */
  .filter-range .filter-label {
    flex: 1 1 100%;
  }

  .filter-range input {
    flex: 1 1 0;
    min-width: 0;
  }

  /* ---------- Filters button, folders, inspection checklist ----------
     Finger-sized targets for the v1.3 controls. */
  .filter-toggle,
  .docs-actions .btn,
  .folder-toggle {
    min-height: 44px;
  }

  .folder-edit,
  .collapse-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .section-toggle {
    min-height: 44px;
  }

  .cover-item {
    padding: 10px 6px;
  }
}

/* ============================================================
   The iOS and Android apps: the system bars
   Both apps draw edge to edge (their copy of index.html asks for
   viewport-fit=cover), so the status bar lies over the top of the page and
   the navigation bar or home indicator over the bottom. The bars' sizes
   arrive as --safe-area-inset-*: on Android from Capacitor's SystemBars
   plugin (0px on WebViews too old to draw under the bars, which Capacitor
   pads natively instead, so nothing is padded twice); on iOS from WebKit's
   env(), mapped just below. These rules keep content clear of the bars. The
   app bar grows by the status bar's height, so the theme's app-bar colour
   runs up behind it.

   Scoped to html.gm-edge, a class only the apps' native.js sets: the web
   never matches any of this. Layout only; colours still come from the theme.
   ============================================================ */
.gm-ios {
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

.gm-edge .appbar {
  padding-top: var(--safe-area-inset-top, 0px);
  padding-left: var(--safe-area-inset-left, 0px);
  padding-right: var(--safe-area-inset-right, 0px);
}

.gm-edge #banner-root,
.gm-edge #app {
  padding-left: var(--safe-area-inset-left, 0px);
  padding-right: var(--safe-area-inset-right, 0px);
}

.gm-edge body {
  padding-bottom: var(--safe-area-inset-bottom, 0px);
}

/* The desktop two-column vehicle page (tablets): the sidebar sticks below
   the app bar, which is now taller by the status bar. */
.gm-edge .sidebar {
  top: calc(86px + var(--safe-area-inset-top, 0px));
}

.gm-edge .modal-overlay {
  padding:
    calc(28px + var(--safe-area-inset-top, 0px))
    calc(16px + var(--safe-area-inset-right, 0px))
    calc(28px + var(--safe-area-inset-bottom, 0px))
    calc(16px + var(--safe-area-inset-left, 0px));
}

.gm-edge .picker-overlay {
  padding:
    calc(24px + var(--safe-area-inset-top, 0px))
    calc(24px + var(--safe-area-inset-right, 0px))
    calc(24px + var(--safe-area-inset-bottom, 0px))
    calc(24px + var(--safe-area-inset-left, 0px));
}

.gm-edge .toast-stack {
  bottom: calc(18px + var(--safe-area-inset-bottom, 0px));
}

.gm-edge .version-tag {
  bottom: calc(10px + var(--safe-area-inset-bottom, 0px));
  right: calc(14px + var(--safe-area-inset-right, 0px));
}