/* Office workflow improvements: readable summaries, complete lists and focused detail views. */
.office-ux-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr)); gap:.8rem; margin:1rem 0; }
.office-ux-metrics .metric-label { white-space:normal; overflow:visible; text-overflow:clip; }
.office-metric-link { border:0; padding:0; border-radius:var(--radius-sm); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.office-metric-link .metric-card { height:100%; }
.office-metric-link:hover .metric-card { border-color:var(--accent); }
.office-ux-filters { display:flex; flex-wrap:wrap; align-items:end; gap:.75rem; margin:1rem 0; }
.office-ux-filters label { display:grid; gap:.35rem; flex:1 1 11rem; min-width:0; }
.office-ux-filters label > span { font-size:.85rem; font-weight:650; }
.office-ux-filters input,.office-ux-filters select { width:100%; min-width:0; }
.office-ux-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; margin-top:1rem; }
.sales-save-bar { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin:.75rem 0; }
.sales-save-bar p { margin:0; }
.office-review-page .office-review-card { padding:1rem; box-shadow:none; }
.office-review-page .office-review-card h3 { margin:.2rem 0; }
.office-review-page .office-review-card .definition-grid { gap:.5rem; }
.office-review-compare { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.office-source-panel { position:sticky; top:6rem; }
.office-source-preview { min-height:14rem; margin-top:1rem; border:1px solid var(--line); border-radius:.6rem; padding:.75rem; background:var(--surface); }
.office-source-preview iframe { display:block; width:100%; height:58vh; border:0; background:white; }
.office-source-preview img { display:block; width:100%; max-height:65vh; object-fit:contain; background:white; }
.office-source-preview h4 { overflow-wrap:anywhere; margin:0 0 .5rem; }
.review-comparison { width:100%; border-collapse:collapse; }
.review-comparison caption { text-align:left; font-size:1.05rem; font-weight:700; margin-bottom:.75rem; }
.review-comparison td,.review-comparison th { text-align:left; vertical-align:top; padding:.65rem; overflow-wrap:anywhere; white-space:normal; }
.review-comparison td small { display:block; font-weight:650; margin-top:.3rem; }
.review-field-changed { background:var(--warn-soft); }
.review-advanced { margin-top:1rem; }
.review-advanced summary { cursor:pointer; padding:.6rem 0; font-weight:650; }
.planner-details-button { display:flex; flex-direction:column; align-items:flex-start; border:0; border-radius:.3rem; padding:.3rem; background:transparent; color:inherit; cursor:pointer; font:inherit; text-align:left; }
.planner-details-button > span { font-size:.75rem; text-decoration:underline; }
.office-fleet-planner .planner-detail-overlay .side-card { position:fixed; inset:0 0 0 auto; margin:0; width:min(100%,29rem); max-width:none; height:100%; max-height:100dvh; overflow:auto; overscroll-behavior:contain; border-radius:1rem 0 0 1rem; box-shadow:-8px 0 30px rgba(0,0,0,.18); }
.planner-detail-overlay .side-card::backdrop { background:rgba(25,32,39,.5); }
.planner-detail-overlay .side-close { min-width:44px; min-height:44px; }
.office-fleet-planner .planner-split.planner-with-details { grid-template-columns:minmax(0,1fr); }
@media (max-width:1000px) {
  .office-review-compare { grid-template-columns:minmax(0,1fr); }
  .office-source-panel { position:static; }
  .office-source-preview iframe,.office-source-preview img { max-height:45vh; }
}

/* Native dialogs keep keyboard focus inside the active Office task. */
dialog.secure-preview-modal, dialog.office-policy-modal { width:100%; height:100%; max-width:none; max-height:100dvh; margin:0; border:0; box-sizing:border-box; color:var(--ink-900); }
dialog.secure-preview-modal:not([open]), dialog.office-policy-modal:not([open]) { display:none; }
dialog.secure-preview-modal::before { content:none; }
dialog.secure-preview-modal::backdrop, dialog.office-policy-modal::backdrop { background:rgba(25,32,39,.65); }
.secure-preview-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.secure-preview-head > div { min-width:0; overflow-wrap:anywhere; }
.secure-preview-head .button { flex:none; }
.wcb-day-weekday, .wcb-no-check { display:none; }
.sales-lines [data-label] input, .sales-lines [data-label] select { max-width:100%; }
.m-reports { grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr)); }

@media screen {
  .phone-layout .office-ux-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .phone-layout .office-ux-filters label { flex-basis:100%; }
  .phone-layout .mbars li { grid-template-columns:minmax(0,1fr) auto auto; }
  .phone-layout .mbar-label { grid-column:1/-1; white-space:normal; overflow-wrap:anywhere; overflow:visible; }
  /* One editable line stays together; totals keep using the server's numbers. */
  .phone-layout .office-sales-workspace .sales-lines-wrap { overflow:visible; }
  .phone-layout .office-sales-workspace .sales-lines { display:block; min-width:0; width:100%; }
  .phone-layout .sales-lines thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .phone-layout .sales-lines tbody, .phone-layout .sales-lines tfoot { display:block; }
  .phone-layout .sales-lines tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; padding:1rem 0; border-bottom:1px solid var(--line); }
  .phone-layout .sales-lines tbody td { display:block; min-width:0; padding:0; border:0; text-align:left; white-space:normal; }
  .phone-layout .sales-lines tbody td:first-child, .phone-layout .sales-lines tbody td:last-child:has(button) { grid-column:1/-1; }
  .phone-layout .sales-lines tbody td[data-label]::before { content:attr(data-label); display:block; margin-bottom:.3rem; color:var(--ink-500); font-size:.85rem; font-weight:650; }
  .phone-layout .sales-lines tbody input, .phone-layout .sales-lines tbody select, .phone-layout .sales-lines tbody .narrow { width:100%; min-width:0; min-height:44px; font-size:16px; }
  .phone-layout .sales-lines tfoot tr { display:flex; justify-content:space-between; gap:1rem; }
  .phone-layout .sales-lines tfoot td { display:block; padding:.65rem 0; border:0; }
  .phone-layout .sales-lines tfoot td:empty { display:none; }
  #sales-line-memory { width:100%; max-width:100%; min-width:0; }
  .phone-layout .office-sales-workspace .action-row { flex-wrap:wrap; }
  /* Screen preview reflows, while the renderer and its printed A4 layout stay unchanged. */
  .phone-layout .office-sales-workspace .paper-scroll { overflow:visible; }
  .phone-layout .office-sales-workspace .paper-preview { width:100%; min-height:0; padding:1rem; font-size:14px; line-height:1.5; }
  .phone-layout .office-sales-workspace .paper-preview .pf-head { display:flex; flex-wrap:wrap; gap:.75rem; }
  .phone-layout .office-sales-workspace .paper-preview .pf-brand { width:100%; min-width:0; }
  .phone-layout .office-sales-workspace .paper-preview .pf-ref { margin-left:auto; white-space:normal; }
  .phone-layout .office-sales-workspace .paper-preview .pf-parties, .phone-layout .office-sales-workspace .paper-preview .pf-header { grid-template-columns:minmax(0,1fr); }
  .phone-layout .office-sales-workspace .paper-preview .pf-party, .phone-layout .office-sales-workspace .paper-preview .pf-f { min-width:0; font-size:14px; overflow-wrap:anywhere; }
  .phone-layout .office-sales-workspace .paper-preview .pf-party strong, .phone-layout .office-sales-workspace .paper-preview .pf-f strong { font-size:15px; }
  .phone-layout .office-sales-workspace .paper-preview .pf-party span, .phone-layout .office-sales-workspace .paper-preview .pf-f span, .phone-layout .office-sales-workspace .paper-preview .pf-party-extra, .phone-layout .office-sales-workspace .paper-preview .pf-by, .phone-layout .office-sales-workspace .paper-preview .pf-foot, .phone-layout .office-sales-workspace .paper-preview .pf-payref { font-size:13px; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines, .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody, .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tfoot { display:block; width:100%; min-width:0; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; padding:.75rem 0; border-bottom:1px solid #777; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td { display:block; padding:0; border:0; width:auto; font-size:14px; text-align:left; white-space:normal; overflow-wrap:anywhere; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(2) { grid-column:1/-1; grid-row:2; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td::before { display:block; font-size:12px; color:#444; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(1)::before { content:"Line"; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(2)::before { content:"Description"; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(3)::before { content:"Quantity"; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(4)::before { content:"Unit price"; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(5)::before { content:"VAT rate"; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(6)::before { content:"Net"; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(7)::before { content:"VAT"; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tfoot tr { display:flex; justify-content:space-between; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tfoot td, .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tfoot th { display:block; width:auto; font-size:14px; border:0; padding:.5rem 0; }

  /* The monthly list retains date, vehicle and outcome, including days with no recorded check. */
  .phone-layout .walkaround-books .wcb-weekdays, .phone-layout .walkaround-books .wcb-day.wcb-outside { display:none; }
  .phone-layout .walkaround-books .wcb-calendar { grid-template-columns:minmax(0,1fr); border:1px solid var(--line); border-radius:.75rem; }
  .phone-layout .walkaround-books .wcb-day { display:grid; grid-template-columns:3rem minmax(0,1fr); gap:.7rem; min-height:0; padding:.7rem; align-items:start; }
  .phone-layout .walkaround-books .wcb-day-number { width:auto; height:auto; min-height:2.8rem; padding:.25rem; font-size:1rem; margin:0; }
  .phone-layout .walkaround-books .wcb-day-weekday { display:block; font-size:.8rem; font-weight:500; }
  .phone-layout .walkaround-books .wcb-no-check { display:block; grid-column:2; color:var(--ink-500); font-size:.85rem; align-self:center; }
  .phone-layout .walkaround-books .wcb-day-checks:empty { display:none; }
  .phone-layout .walkaround-books .wcb-entry { padding:.7rem; min-height:44px; gap:.3rem; }
  .phone-layout .walkaround-books .wcb-entry-vehicle, .phone-layout .walkaround-books .wcb-entry-outcome, .phone-layout .walkaround-books .wcb-entry-time .wcb-status-dot { display:block; }
  .phone-layout .walkaround-books .wcb-entry-vehicle, .phone-layout .walkaround-books .wcb-entry-time { font-size:.95rem; }
  .phone-layout .walkaround-books .wcb-entry-outcome { font-size:.85rem; }
  .phone-layout .walkaround-books .wcb-entry-time { justify-content:flex-start; }
  .phone-layout .walkaround-books .wcb-month-step { width:100%; }
  .phone-layout .walkaround-books .wcb-month-step h3 { min-width:0; flex:1; }
  .phone-layout .walkaround-books .wcb-month-picker { display:flex; flex-wrap:wrap; width:100%; }
  .phone-layout .walkaround-books .wcb-month-picker label { display:block; width:100%; }
  .phone-layout .walkaround-books .wcb-month-picker input { flex:1; min-width:0; width:8rem; }
  .phone-layout .walkaround-books .wcb-export-toolbar .action-row { display:grid; grid-template-columns:minmax(0,1fr); }
  .phone-layout .walkaround-books .wcb-selectable input { min-width:24px; min-height:24px; }

  .phone-layout .office-review-compare { grid-template-columns:minmax(0,1fr); gap:.8rem; }
  .phone-layout .office-source-panel { position:static; }
  .phone-layout .office-source-preview { min-height:8rem; padding:.5rem; }
  .phone-layout .office-source-preview iframe { height:48dvh; max-height:none; }
  .phone-layout .office-review-page .office-review-card { padding:.75rem; }
  .phone-layout .review-comparison { display:block; }
  .phone-layout .review-comparison thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .phone-layout .review-comparison tbody, .phone-layout .review-comparison tr, .phone-layout .review-comparison th, .phone-layout .review-comparison td { display:block; width:100%; box-sizing:border-box; }
  .phone-layout .review-comparison tr { border-top:1px solid var(--line); padding:.5rem 0; }
  .phone-layout .review-comparison td::before { display:block; color:var(--ink-500); font-size:.8rem; font-weight:600; }
  .phone-layout .review-comparison td:nth-child(2)::before { content:"Extracted value"; }
  .phone-layout .review-comparison td:nth-child(3)::before { content:"Driver-confirmed value"; }

  .phone-layout .office-fleet-planner .planner-detail-overlay .side-card { width:min(100%,29rem); padding:1rem; }
  .phone-layout .office-fleet-planner .planner-details-button { min-height:44px; width:100%; }
  .phone-layout .office-fleet-planner .side-list li { flex-wrap:wrap; gap:.5rem; }
  .phone-layout .office-fleet-planner .side-value { white-space:normal; }
  .phone-layout .office-fleet-planner .side-book, .phone-layout .office-fleet-planner .side-list .button { min-height:44px; }
  .phone-layout .office-fleet-planner .side-form input, .phone-layout .office-fleet-planner .side-form select { min-width:0; max-width:100%; font-size:16px; }
  .phone-layout .ask-turn, .phone-layout .ask-card, .phone-layout .ask-question, .phone-layout .ask-asked-by, .phone-layout .template-card, .phone-layout .doc-card { min-width:0; overflow-wrap:anywhere; }
  .phone-layout .ask-answer, .phone-layout .ask-card { padding:.75rem; }
  .phone-layout .template-card .panel-header, .phone-layout .doc-card .panel-header { align-items:flex-start; flex-wrap:wrap; }
  .phone-layout .omr-lesson-body, .phone-layout .omr-question-body { padding:.7rem; }
  .phone-layout .omr-form-fields, .phone-layout .omr-options { padding-left:1.15rem; }
  .phone-layout dialog.secure-preview-modal, .phone-layout dialog.office-policy-modal { padding:.5rem; }
  .phone-layout .secure-preview-modal .secure-preview-card { min-height:0; max-height:calc(100dvh - 1rem); border-radius:.75rem; padding:.75rem; }
  .phone-layout .secure-preview-modal .secure-preview-frame { min-height:10rem; }
  .phone-layout .secure-preview-modal .secure-preview-frame iframe { height:65dvh; }
  .phone-layout .office-policy-modal .policy-confirm { max-height:calc(100dvh - 1rem); overflow:auto; }
}
@media (max-width:520px) {
  .office-ux-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .office-ux-metrics .metric-card { padding:.8rem; }
  .office-ux-filters label { flex-basis:100%; }
  .office-fleet-planner .planner-detail-overlay .side-card { border-radius:0; }
}

/* What the office has recorded for a share code, under the code (Driver 360). */
.share-code-checks { display: grid; gap: .2rem; margin-top: .4rem; }
.share-code-check { display: block; max-width: 30rem; font-size: .82rem; line-height: 1.4; color: var(--ink-700); }
.share-code-check-done { color: var(--good); font-weight: 600; }
.share-code-check-expired { color: var(--bad); font-weight: 600; }
.share-code-file { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .2rem; }

/* Platform admin: what each company owes (0351). */
.billing-table select, .billing-table input[type="date"] { min-width: 12rem; }
.billing-table input[name="note"] { min-width: 14rem; }
.billing-table td { vertical-align: top; }

/* A sentence shown in a status colour. The pill capitalises every word, which is right for "Needs you" and wrong for
   a sentence: the owner's screenshot read "Confirmed And Kept, But The Vehicle's Record Did Not Move". */
.status-pill.status-sentence { display: block; width: auto; text-transform: none; font-weight: 700; font-size: .8rem;
  line-height: 1.45; letter-spacing: 0; padding: .6rem .8rem; border-radius: 12px; }