/* RoadRecord — the ATO logbook report, on screen and on paper.
 *
 * ═══ ONE DOCUMENT, TWO MEDIA ══════════════════════════════════════════════════
 *
 * The report is ordinary HTML in the ordinary page. On screen it is a preview inside
 * the Reports tab; at print time the @media print block removes the entire app around
 * it and the report becomes the only thing on the page. That is what makes "Save as
 * PDF" work with no library, no popup and no absolute positioning — the browser's own
 * typesetter reflows a long purpose field instead of clipping it, and for a tax
 * document the difference between reflowing and clipping is the difference between a
 * record and a liability.
 *
 * ═══ WHY THE APP IS `display: none` AND NOT `visibility: hidden` ══════════════
 *
 * A hidden element still occupies its layout box. The app shell is a full-height
 * flex column, so hiding it that way would push the report onto page two and print a
 * blank page one — the classic print-stylesheet bug, and one that only ever shows up
 * in the PDF a driver has already emailed to their accountant.
 *
 * `!important` is not decoration here: `[hidden]` in layout.css is already
 * `!important` (see the note there), and `.screen` sets display, so specificity alone
 * does not win.
 */

.report {
  margin-top: 18px;
}

.report:empty { display: none; }

/* The on-screen preview is a sheet of paper sitting in the tab. */
#rep-doc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

/* ---- headings ---- */

/* `.screen h2` in layout.css is an uppercase, letter-spaced section heading. That is
   right for "DON'T RECORD TRIPS HERE" in Settings and wrong for the title of a tax
   document — a logbook that shouts at an assessor reads as a template, not a record.
   Both properties are reset explicitly; #rep-doc h2 is more specific, so this wins. */
#rep-doc h2 {
  font-size: 16px;
  font-weight: 680;
  margin: 0 0 12px;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}

#rep-doc h3 {
  font-size: 13px;
  font-weight: 660;
  margin: 22px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

/* ---- the logbook body, collapsed by default (fb_mu0a8g3y_kfqoc) ----
   Same <details>/<summary> pattern as the Settings accordions (.set-sec):
   the summary replaces the heading rather than sitting beside it. Closed by
   default because the summary + trips tables are the bulk of the document and
   a driver checking who/what/when the report covers shouldn't have to scroll
   past all of it first. */
.rep-fold > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}
.rep-fold > summary::-webkit-details-marker { display: none; }
.rep-fold > summary h2 { margin: 0; flex: 1; }

.rep-fold > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.16s ease;
}
.rep-fold[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
  .rep-fold > summary::after { transition: none; }
}

/* ---- the header block ---- */

.report-meta {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.report-meta td { padding: 3px 10px 3px 0; vertical-align: top; }
.report-meta td:first-child { color: var(--text-faint); width: 90px; }
.report-meta td:last-child { color: var(--text-dim); }

/* ---- tables ----
   `.num` is right-aligned and tabular so a column of dollar figures lines up on the
   decimal point. An accountant reads down these columns, not across them. */

/* On a phone the seven-column trips table cannot fit 375px: without this the browser
   squeezes every column to one character per line and the report is unreadable
   (seen 2026-09-03). The table keeps a sane minimum width and the wrapper scrolls it
   sideways; print.css's @media print below lets it flow to the page instead. */
.report-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }

.report-table {
  width: 100%;
  /* Wide enough that the trip table scrolls sideways on a phone instead of crushing
     "Category" into three lines and "Private" into two (Steven, 2026-09-10: "just open
     it up a bit"). The date, vehicle and category cells never wrap; the route takes
     whatever is left. */
  min-width: 720px;
  border-collapse: collapse;
  font-size: 12px;
}
.report-table .rt-date, .report-table .rt-veh, .report-table .rt-cat { white-space: nowrap; }
.report-table .rt-route { min-width: 220px; }
.report-table th { white-space: nowrap; }

.report-table th,
.report-table td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--text-dim);
}

.report-table thead th {
  font-size: 11px;
  font-weight: 640;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.report-table .num,
.report-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The summary is a two-column key/value table, and its last row is the number the
   whole document exists to state. */
.report-summary td { color: var(--text-dim); }
.report-summary tr:last-child td {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  border-bottom: none;
  padding-top: 10px;
}

.report-dim { color: var(--text-faint); }

/* ---- notes and the edit history ---- */

.report-notes ul,
.report-edit ul {
  margin: 0;
  padding-left: 18px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-dim);
}
.report-notes li { margin-bottom: 6px; }

.report-note {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-faint);
  margin: 0 0 12px;
}

.report-edit { margin-bottom: 12px; }
.report-edit-head {
  font-size: 12px;
  font-weight: 620;
  color: var(--text);
  margin: 0 0 3px;
}
.report-edit li { margin-bottom: 2px; }

.report-foot {
  margin-top: 22px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-faint);
  /* ►► THIS LINE IS WHY THE BOTTOM NAV SAT UNDER THE ANDROID BUTTONS. ◄◄
   *
   * The footer prints the ATO rate provenance, which includes
   * https://softwaredevelopers.ato.gov.au/CentsperKilometreDeductionRateforCarExpenses
   * — 78 characters with no break opportunity in them. Without this it could not
   * wrap, so the document became 446 CSS px wide inside a 411 px viewport, and the
   * Android WebView responded by widening the LAYOUT viewport to 446 and scaling
   * everything by 1.085. innerHeight went 814 -> 883 while the visible area stayed
   * 814, and `position: fixed; bottom: 0` — which anchors to the layout viewport —
   * put the nav 69 px below the screen.
   *
   * Measured on a Pixel 7, three-button navigation, and proven by toggling this
   * one declaration on and off: overhang 69 -> 0 -> 69.
   *
   * It was Reports-only because this is the only screen that shows that URL. Two
   * earlier fixes went after the safe-area insets, which were identical on every
   * tab and never the cause. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- print ---- */

@media print {
  .report-scroll { overflow: visible; margin: 0; padding: 0; }
  .report-table { min-width: 0; }
  @page {
    size: A4 portrait;
    margin: 14mm 12mm;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    height: auto !important;
  }

  /* Everything that is not the document. The controls that produced the report do
     not belong on a page handed to a tax agent, and neither does the nav.
     
     ►► The report's ANCESTORS are hidden by SUBTRACTION, never directly. ◄◄
     
     `display: none` on an ancestor removes every descendant from the box tree, and
     no amount of forcing the child back on can undo it — the child has no box to
     turn on. Hiding `.app` here (which is what this rule used to do) printed a
     blank page: #rep-doc lives at .app > .screens > #screen-reports > #rep-doc.
     The symptom only ever appears in the PDF, which by then has been emailed to an
     accountant. So each level hides its OTHER children and stays rendered itself. */
  .nav, .header, .status, .toast, .sheet-back, .gate, .fab,
  .app > *:not(.screens),
  .screens > .screen:not(#screen-reports),
  #screen-reports > .card {
    display: none !important;
  }

  /* The report is promoted out of the tab it lives in. EVERY ancestor has to be
     forced back on: a `.screen` that is not the active tab is display:none, so
     printing from any other tab would otherwise produce an empty page. */
  #app,
  .app,
  .screens,
  #screen-reports,
  #rep-doc,
  .report {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    overflow: visible !important;
    margin: 0 !important;
    max-width: none !important;
  }

  #rep-doc {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 10pt;
  }

  /* Paper is white and the app's palette is not. Every token that could resolve to a
     light-on-dark colour is overridden rather than trusted. */
  #rep-doc h2, #rep-doc h3,
  .report-edit-head,
  .report-summary tr:last-child td { color: #000 !important; }

  .report-table td,
  .report-table th,
  .report-meta td:last-child,
  .report-notes ul,
  .report-edit ul { color: #1a1a1a !important; }

  .report-meta td:first-child,
  .report-note,
  .report-foot,
  .report-dim,
  .report-table thead th { color: #555 !important; }

  .report-table th,
  .report-table td { border-bottom: 1px solid #ccc !important; }
  #rep-doc h3 { border-bottom: 1px solid #999 !important; }
  .report-foot { border-top: 1px solid #999 !important; }

  /* A trip row split across a page break is a logbook entry an auditor cannot read.
     One trip's edit history is kept together for the same reason. */
  .report-table tr,
  .report-edit {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Repeat the column headers on every page. A five-page logbook whose later pages
     have unlabelled numeric columns is not a document anybody can check. */
  .report-table thead { display: table-header-group; }

  /* The on-screen collapse is a UI convenience, not part of the record: whatever is
     open or closed in the tab, the printed/shared logbook always shows everything.
     `details:not([open]) > *` is the UA rule this overrides — no `open` attribute
     needed, and the chevron would be meaningless on paper anyway. */
  .rep-fold > summary::after { display: none; }
  .rep-fold > * { display: block !important; }
}

/* Belt and braces for the whole report document. It renders addresses, vehicle
 * registrations and free-typed purposes — any of which can arrive as one long
 * unbreakable token from a driver who typed no spaces. The nav bug above is what
 * that costs when it is not contained. */
.report,
.report td,
.report th { overflow-wrap: anywhere; }

/* ---- the printing class ----
 *
 * reports-view.js sets `.printing` on <html> for the duration of the print, and the
 * @media print rules above are what actually do the work. This exists so the preview
 * does not flash a half-hidden app while the dialog opens, and so a WebView that
 * never fires `afterprint` (Safari, some Android builds) leaves nothing broken behind
 * — the class is also cleared on a timer.
 */
html.printing body { overflow: hidden; }