/* Phone layout. Loaded only on screens narrower than 760px (see the <link>
   in index.html), so nothing here can touch the desktop. Same page, same
   buttons, same data: the sidebar becomes a tab bar along the bottom, the
   wide lists become stacked cards, and the invoice editor's lines stack so a
   thumb can work them. */

:root { --tabbar: 54px; }

/* ------------------------------------------------------------ frame */
.app { grid-template-columns: 1fr; }
.side {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto;
  flex-direction: row; gap: 0; padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  border-right: 0; border-top: 1px solid var(--border); z-index: 30;
  box-shadow: 0 -4px 14px rgba(10, 14, 16, .06);
}
.side::-webkit-scrollbar { display: none; }
.brand, .side-foot { display: none; }
.nav-item {
  width: auto; flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 1px;
  min-height: var(--tabbar); padding: 6px 11px; font-size: 11px; white-space: nowrap;
  border: 0; border-radius: 0; border-top: 2px solid transparent; color: var(--ink-mute);
}
.nav-item.on { background: none; border-top-color: var(--accent); color: var(--accent); }
.nav-item .tally { font-size: 10px; }
.main { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px); }

.topbar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
.topbar h1 { font-size: 15px; }
.view { padding: 10px; }
.card-h { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }

/* ---------------------------------------------------------- controls */
/* Fingers, not a mouse pointer; and 16px text so iOS does not zoom the page on focus. */
button, .btn { min-height: 40px; padding: 8px 12px; }
.act, .quiet, .btn-ghost { min-height: 36px; }
input, select, textarea { font-size: 16px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { min-height: 40px; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
label.f { font-size: 12px; }

/* Tables that stay tables scroll sideways instead of squashing. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
td, th { padding: 9px 8px; }

/* Dialogs take the whole screen. */
dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
.dlg { padding: 14px; min-height: 100%; box-sizing: border-box; }
.dlg-grid { grid-template-columns: 1fr; }
.dlg-grid label.f[style*="span 2"] { grid-column: auto !important; }
.si-names { grid-template-columns: 1fr; }
.si-name { min-height: 48px; }

/* -------------------------------------------------- lists as cards */
/* Each row becomes a small card. Column order comes from the table head. */
#tbl-invoices thead, #tbl-estimates thead, #tbl-workorders thead, #tbl-customers thead { display: none; }
#tbl-invoices, #tbl-invoices tbody, #tbl-estimates, #tbl-estimates tbody,
#tbl-workorders, #tbl-workorders tbody, #tbl-customers, #tbl-customers tbody { display: block; width: 100%; }
#tbl-invoices tr, #tbl-estimates tr, #tbl-workorders tr, #tbl-customers tr {
  display: grid; column-gap: 8px; row-gap: 2px; padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
#tbl-invoices td, #tbl-estimates td, #tbl-workorders td, #tbl-customers td { display: block; padding: 0; border: 0; text-align: left; }

/* Invoices: tick | # ............ status
                  | customer ...... total
                  | unit .......... outstanding
                  | issued                       */
#tbl-invoices tr { grid-template-columns: 24px 1fr auto; }
#tbl-invoices td:nth-child(1) { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
#tbl-invoices td:nth-child(2) { grid-column: 2; grid-row: 1; font-weight: 700; }
#tbl-invoices td:nth-child(3) { grid-column: 3; grid-row: 1; justify-self: end; }
#tbl-invoices td:nth-child(4) { grid-column: 2; grid-row: 2; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tbl-invoices td:nth-child(5) { grid-column: 2; grid-row: 3; font-size: 12px; color: var(--ink-mute); }
#tbl-invoices td:nth-child(6) { grid-column: 2; grid-row: 4; font-size: 12px; color: var(--ink-mute); }
#tbl-invoices td:nth-child(7) { display: none; }
#tbl-invoices td:nth-child(8) { grid-column: 3; grid-row: 2; justify-self: end; font-weight: 700; }
#tbl-invoices td:nth-child(9) { grid-column: 3; grid-row: 3 / span 2; justify-self: end; font-size: 12px; color: var(--ink-mute); }

/* Estimates and work orders: # ...... status / customer ... total / unit, date */
#tbl-estimates tr, #tbl-workorders tr { grid-template-columns: 1fr auto; }
#tbl-estimates td:nth-child(1), #tbl-workorders td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 700; }
#tbl-estimates td:nth-child(2), #tbl-workorders td:nth-child(2) { grid-column: 2; grid-row: 1; justify-self: end; }
#tbl-estimates td:nth-child(3), #tbl-workorders td:nth-child(3) { grid-column: 1; grid-row: 2; font-weight: 600; }
#tbl-estimates td:nth-child(4), #tbl-workorders td:nth-child(4) { grid-column: 1; grid-row: 3; font-size: 12px; color: var(--ink-mute); }
#tbl-estimates td:nth-child(5), #tbl-workorders td:nth-child(5) { grid-column: 1; grid-row: 4; font-size: 12px; color: var(--ink-mute); }
#tbl-estimates td:nth-child(6), #tbl-workorders td:nth-child(6) { grid-column: 2; grid-row: 2 / span 3; justify-self: end; align-self: start; font-weight: 700; }

/* Customers: company / contact, city / phone, cell / the buttons */
#tbl-customers tr { grid-template-columns: 1fr 1fr; }
#tbl-customers td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; font-weight: 700; }
#tbl-customers td:nth-child(2), #tbl-customers td:nth-child(3) { grid-row: 2; font-size: 12px; color: var(--ink-mute); }
#tbl-customers td:nth-child(4), #tbl-customers td:nth-child(5) { grid-row: 3; font-size: 13px; }
#tbl-customers td:nth-child(5) .exempt { display: none; } /* "none" with no label says nothing on a card */
#tbl-customers td:nth-child(6), #tbl-customers td:nth-child(7), #tbl-customers td:nth-child(8) { display: none; }
#tbl-customers td:nth-child(9) { grid-column: 1 / -1; grid-row: 4; margin-top: 4px; }
#tbl-customers .ar-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* The month grids and list controls wrap instead of overflowing. */
.inv-months-bar { flex-wrap: wrap; padding: 6px 10px 8px; }
.rep-months-sm, .rep-months { grid-template-columns: repeat(6, 1fr); }
.card-h input, .card-h select { max-width: 100% !important; flex: 1 1 140px; }

/* -------------------------------------------------- invoice editor */
.doc-bar { flex-wrap: wrap; }
.doc-bar label.f { flex: 1 1 45%; }
.doc-bar label.f > input { max-width: none; }
.inv-panels { grid-template-columns: 1fr; }
.veh-grid { grid-template-columns: 1fr 1fr; }
.grid-2 { grid-template-columns: 1fr; }
.grid-2 > .card[style*="sticky"] { position: static !important; }
/* Back first, then the rest of the buttons wrap under the title. */
#view-job .card-h #btn-back { order: -1; }
#view-job .card-h .spacer { display: none; }
#view-job .card-h h2 { flex: 1; }

/* A parts line: part # .................. tools
                  description (full width)
                  qty | price | PST | total        */
#tbl-parts thead, #tbl-labour thead { display: none; }
#tbl-parts, #tbl-parts tbody, #tbl-labour, #tbl-labour tbody { display: block; width: 100%; }
#tbl-parts tr, #tbl-labour tr { display: grid; gap: 6px 8px; padding: 10px 8px; border-bottom: 1px solid var(--border); }
#tbl-parts td, #tbl-labour td { display: block; padding: 0; border: 0; }
#tbl-parts input, #tbl-labour input, #tbl-labour textarea { width: 100%; box-sizing: border-box; }
#tbl-parts td::before, #tbl-labour td::before {
  display: block; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin-bottom: 2px;
}
#tbl-parts tr { grid-template-columns: 1fr 1fr 44px 1fr; }
#tbl-parts td:nth-child(1) { grid-column: 1 / span 3; grid-row: 1; }
#tbl-parts td:nth-child(1)::before { content: "Part #"; }
#tbl-parts td:nth-child(7) { grid-column: 4; grid-row: 1; justify-self: end; align-self: end; }
#tbl-parts td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
#tbl-parts td:nth-child(2)::before { content: "Description"; }
#tbl-parts td:nth-child(3) { grid-column: 1; grid-row: 3; }
#tbl-parts td:nth-child(3)::before { content: "Qty"; }
#tbl-parts td:nth-child(4) { grid-column: 2; grid-row: 3; }
#tbl-parts td:nth-child(4)::before { content: "Price"; }
#tbl-parts td:nth-child(5) { grid-column: 3; grid-row: 3; text-align: center; }
#tbl-parts td:nth-child(5)::before { content: "PST"; }
#tbl-parts td:nth-child(6) { grid-column: 4; grid-row: 3; text-align: right; font-weight: 700; align-self: end; padding-bottom: 10px; }
#tbl-parts td:nth-child(6)::before { content: "Total"; text-align: right; }
#tbl-parts .p-src { display: inline-block; margin-top: 2px; }

/* A labour line: description (full width)
                  hours | rate | total | tools   */
#tbl-labour tr { grid-template-columns: 1fr 1fr 1fr auto; }
#tbl-labour td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
#tbl-labour td:nth-child(1)::before { content: "Work done"; }
#tbl-labour td:nth-child(2) { grid-column: 1; grid-row: 2; }
#tbl-labour td:nth-child(2)::before { content: "Hours"; }
#tbl-labour td:nth-child(3) { grid-column: 2; grid-row: 2; }
#tbl-labour td:nth-child(3)::before { content: "Rate / Amount"; }
#tbl-labour td:nth-child(4) { grid-column: 3; grid-row: 2; text-align: right; font-weight: 700; align-self: end; padding-bottom: 10px; }
#tbl-labour td:nth-child(4)::before { content: "Total"; text-align: right; }
#tbl-labour td:nth-child(5) { grid-column: 4; grid-row: 2; align-self: end; padding-bottom: 6px; }
.row-tools .row-del { min-height: 36px; min-width: 36px; font-size: 20px; }
.row-grip { display: none; } /* dragging lines is a mouse thing */

/* ------------------------------------------------------- settings */
.set-form { grid-template-columns: 1fr; }
.set-form .set-wide { grid-column: auto; }
.people-invite-row, .shops-invite-row { grid-template-columns: 1fr; }
.set-bar { flex-wrap: wrap; }

/* ----------------------------------------------------- parts bills */
.pd-view { grid-template-columns: 1fr; }
.pd-view .pd-pdf { position: static; height: 50vh; }