/* mileage_log: rules for this tool only. Shared pieces are in ../office_tools.css.
   Read by marketing/office_tools/mileage_log (via _head); classes start .ot-ml-.
   Under 760px the trips table turns into one card per trip so nothing
   scrolls sideways. The print rules print only the log. */

/* The shared classes set display, which would beat the hidden attribute. */
.ot-ml [hidden] { display: none !important; }

.ot-ml { flex-direction: column; }

.ot-ml-head { padding: 24px 28px; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.ot-ml-head .ot-field { flex: 1 1 160px; }
.ot-ml-head .ot-ml-year { flex: 1 1 120px; }
.ot-ml-head .ot-ml-wide { flex: 2 1 220px; }

.ot-ml-table-wrap { padding: 8px 20px 4px; }
.ot-ml-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ot-ml-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ot-ml-table td { padding: 6px; border-bottom: 1px solid var(--bg-secondary); vertical-align: middle; }
.ot-ml-table tbody tr:hover td { background: transparent; }
.ot-ml-table td .ot-input { min-height: 44px; font-size: 15px; padding: 0 8px; }
.ot-ml-table td[data-label="Date"] { width: 150px; }
.ot-ml-miles { width: 84px; }
.ot-ml-round { width: 72px; text-align: center; }
.ot-ml-round-label { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 44px; min-height: 44px; cursor: pointer; }
.ot-ml-round input { width: 22px; height: 22px; accent-color: var(--primary); margin: 0; }
.ot-ml-round-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.ot-ml-remove { width: 52px; }
.ot-ml-remove .ot-btn { min-width: 44px; padding: 0 10px; font-size: 20px; line-height: 1; }
.ot-ml-table .ot-input[aria-invalid="true"] { border-color: var(--danger); }
.ot-ml-empty { margin: 12px 8px; color: var(--text-secondary); font-size: 15px; }

.ot-ml-add { padding: 12px 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.ot-ml-add > .ot-actions-row > .ot-btn { flex: 0 1 auto; }
.ot-ml-routes { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg-secondary); }
.ot-ml-subhead { margin: 0; font-size: 17px; color: var(--text); }
.ot-ml-route-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ot-ml-route-list li { display: flex; gap: 8px; }
.ot-ml-route-add { flex: 1 1 auto; justify-content: flex-start; text-align: left; min-width: 0; }
.ot-ml-route-delete { flex: none; min-width: 44px; padding: 0 10px; font-size: 20px; }
.ot-ml-route-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ot-ml-route-form > .ot-label { margin: 0; }
.ot-ml-route-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ot-ml-route-form .ot-actions-row > .ot-btn { flex: 0 1 auto; }

.ot-ml-totals { padding: 24px 28px; background: var(--bg-secondary); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
.ot-ml-stats { display: flex; flex-wrap: wrap; gap: 12px; }
.ot-ml-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; flex: 1 1 180px; min-width: 0; }
.ot-ml-stat b { display: block; font-size: 26px; letter-spacing: -0.01em; color: var(--text); }
.ot-ml-stat > span { font-size: 13px; color: var(--text-secondary); }
.ot-ml-downloads > .ot-btn { flex: 0 1 auto; }
.ot-ml-downloads > .ot-btn-primary { padding: 0 20px; }
.ot-ml-reset { display: flex; justify-content: flex-end; }

@media (max-width: 860px) {
  .ot-ml-route-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: one card per trip, each field with its own visible label. */
@media (max-width: 760px) {
  .ot-ml-head, .ot-ml-add, .ot-ml-totals { padding-left: 16px; padding-right: 16px; }
  .ot-ml-table-wrap { padding: 8px 16px 4px; }
  .ot-ml-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .ot-ml-table, .ot-ml-table tbody { display: block; }
  .ot-ml-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .ot-ml-table td { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; width: auto !important; text-align: left; }
  .ot-ml-table td[data-label]::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
  /* Date and miles, then from and to, then the purpose, then round trip and remove. */
  .ot-ml-table td[data-label="Date"] { order: 1; }
  .ot-ml-miles { order: 2; }
  .ot-ml-table td[data-label="From"] { order: 3; }
  .ot-ml-table td[data-label="To"] { order: 4; }
  .ot-ml-purpose { order: 5; grid-column: 1 / -1; }
  .ot-ml-round { order: 6; }
  .ot-ml-remove { order: 7; }
  .ot-ml-round { justify-content: flex-end; }
  .ot-ml-round-label { justify-content: flex-start; font-size: 15px; color: var(--text); }
  .ot-ml-round-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .ot-ml-remove { align-items: flex-end; justify-content: flex-end; }
  .ot-ml-add > .ot-actions-row > .ot-btn { flex: 1 1 100%; }
  .ot-ml-route-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Print: only the log, without the buttons. Everything that neither holds
   nor sits inside the log is taken out of the layout, so no blank pages. */
@media print {
  body *:not(:has(.ot-ml)):not(.ot-ml):not(.ot-ml *) { display: none !important; }
  body { background: #fff !important; }
  .ot-ml { border: 0; box-shadow: none; }
  .ot-ml button, .ot-ml .ot-privacy, .ot-ml .ot-status, .ot-ml .ot-hint:not([data-mileage-log-target="odoNote"]), .ot-ml-routes, .ot-ml-remove, .ot-ml-table th:last-child, .ot-ml-empty { display: none !important; }
  .ot-ml .ot-input, .ot-ml .ot-select { border: 0; min-height: 0; padding: 0; appearance: none; background: none; }
  .ot-ml .ot-input::placeholder { color: transparent; }
  .ot-ml-totals { background: none; }
}