/* Feature surfaces use the same glass as the Office shell. Keep the existing
   layouts, status colours and paper documents; these are screen treatments. */
@media screen {
  /* Driver directory and the person currently open beside it. */
  .directory-summary,
  .driver-preview {
    background: var(--premium-glass);
    border-color: var(--premium-rim);
    box-shadow: var(--premium-shadow);
  }
  .directory-summary .metric-card {
    background: transparent;
    box-shadow: none;
  }
  .directory-summary > div > .icon,
  .driver-avatar,
  .driver-identity > .avatar,
  .driver-preview-avatar {
    color: var(--avatar-ink);
    background: var(--premium-icon);
    box-shadow: inset 0 1px 0 var(--premium-gleam);
  }
  .driver-preview-checks {
    background: var(--premium-glass-quiet);
    border-color: var(--line);
    border-radius: 12px;
  }
  .driver-preview-close,
  .driver-preview-trigger {
    color: var(--primary);
  }
  .directory-table tr.is-selected,
  .directory-table tr[aria-selected="true"] {
    background: var(--row-selected);
  }
  .directory-table tr.is-selected td:first-child,
  .directory-table tr[aria-selected="true"] td:first-child {
    box-shadow: inset 3px 0 0 var(--primary);
  }

  /* Fleet dates remain a quiet grid. Warning backgrounds, icons and left status
     rails keep their existing meanings instead of becoming decorative pink. */
  .office-fleet-planner .planner-panel,
  .office-fleet-planner .kpi {
    background: var(--premium-glass);
    border-color: var(--premium-rim);
    box-shadow: var(--premium-shadow);
  }
  .office-fleet-planner .kpi-on {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary), var(--premium-shadow);
  }
  .office-fleet-planner .kpi-icon {
    box-shadow: inset 0 1px 0 var(--premium-gleam);
  }
  .office-fleet-planner .ptable thead th,
  .directory-table thead th {
    color: var(--ink-700);
    background: var(--premium-table-head);
  }
  .office-fleet-planner .prow:hover { background: var(--row-hover); }
  .office-fleet-planner .prow.prow-selected { background: var(--row-selected); }
  .office-fleet-planner .pchip {
    box-shadow: inset 0 1px 0 color-mix(in srgb, currentColor 16%, transparent);
  }
  .office-fleet-planner .pchip-bad {
    box-shadow: inset 0 0 0 1px var(--p-bad-line);
  }
  .planner-more-links {
    background: var(--premium-glass);
    border-color: var(--premium-rim);
    box-shadow: var(--premium-shadow);
  }
  .office-fleet-planner .planner-detail-overlay .side-card {
    background: var(--premium-glass);
    background-color: var(--surface);
    border-color: var(--premium-rim);
    box-shadow: var(--premium-shadow);
  }

  /* Hours has a separate component kit, including a native dialog. Keep its
     live/unknown/stale indicators and responsive container queries intact. */
  .hours-board {
    --hb-muted: var(--ink-500);
    --hb-hero: var(--premium-primary);
    --hb-hero-ink: #ffffff;
    --hb-hero-muted: #f5dce8;
    --hb-shadow: var(--premium-shadow);
    --hb-backdrop: rgba(13, 4, 10, .72);
    background: transparent;
    padding: 0;
  }
  .hours-board .hb-board,
  .hours-board .hb-summary-item,
  .hours-board.hb-empty-view {
    background: var(--premium-glass);
    border-color: var(--premium-rim);
    border-radius: 16px;
    box-shadow: var(--premium-shadow);
  }
  .hours-board .hb-summary-item:hover { border-color: var(--primary); }
  .hours-board .hb-summary-item[aria-pressed="true"] {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary), var(--premium-shadow);
  }
  .hours-board .hb-summary-label { font-size: .75rem; }
  .hours-board .hb-columns {
    background: var(--premium-table-head);
    color: var(--ink-700);
    font-size: .7rem;
  }
  .hours-board .hb-record-button { background: transparent; }
  .hours-board .hb-record-button:hover { background: var(--row-hover); }
  .hours-board .hb-button,
  .hours-board .hb-icon-button {
    background: var(--premium-glass-quiet);
    border-color: var(--premium-rim);
    box-shadow: inset 0 1px 0 var(--premium-gleam);
  }
  .hours-board .hb-button:hover,
  .hours-board .hb-icon-button:hover { border-color: var(--primary); }
  .hours-board .hb-search,
  .hours-board .hb-selects select {
    background: var(--premium-field);
    border-color: var(--line);
    border-radius: 10px;
  }
  .hours-board .hb-search input { background: transparent; box-shadow: none; }
  .hours-board .hb-search:focus-within { border-color: var(--primary); }
  .hours-board .hb-avatar:not(.hb-avatar-unlinked) {
    background: var(--premium-icon);
    box-shadow: inset 0 1px 0 var(--premium-gleam);
  }
  .hours-board .hb-detail {
    background: var(--premium-glass);
    background-color: var(--surface);
    border-left-color: var(--premium-rim);
    box-shadow: var(--premium-shadow);
  }
  .hours-board .hb-detail-today {
    background: var(--premium-primary);
    border: 1px solid var(--premium-rim);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 var(--premium-gleam);
  }
  .hours-board .hb-source-record,
  .hours-board .hb-allowance {
    background: var(--premium-glass-quiet);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 var(--premium-gleam);
  }
  .hours-board .hb-source-record > summary { border-radius: 11px 11px 0 0; }
  .hours-board .hb-detail-footer {
    background: var(--premium-glass-quiet);
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .hours-board.hb-empty-view { padding: 65px 25px; }

  /* Download overview, daily check and infringement cards. */
  .tacho-board-panel,
  .tacho-board-metric {
    background: var(--premium-glass);
    border-color: var(--premium-rim);
    border-radius: 16px;
    box-shadow: var(--premium-shadow);
  }
  .tacho-board-panel-head,
  .tacho-board-table thead th {
    background: var(--premium-table-head);
  }
  .tacho-board-tile:not(.tacho-board-tile-warn) {
    color: var(--primary);
    background: var(--premium-icon);
    border-color: var(--premium-rim);
    box-shadow: inset 0 1px 0 var(--premium-gleam);
  }
  .tacho-board-avatar {
    background: var(--premium-icon);
    color: var(--avatar-ink);
    box-shadow: inset 0 1px 0 var(--premium-gleam);
  }
  .tacho-card {
    background: var(--premium-glass-quiet);
    box-shadow: inset 0 1px 0 var(--premium-gleam);
  }
  .tacho-card.tacho-bad {
    background: var(--bad-soft);
    border-color: var(--bad-line);
  }
  .tacho-card.tacho-warn { border-color: var(--warn-line); }
  .daily-row > summary:hover,
  .daily-row[open] > summary { background: var(--row-hover); }
  .daily-row.is-the-one > summary {
    background: var(--row-selected);
    box-shadow: inset 3px 0 0 var(--primary);
  }

  /* Secondary surfaces on forms, records and details. Border-left status rails
     are deliberately inherited. Actual documents, images and print sheets are
     outside this list, including the white paper inside an invoice preview. */
  .history-job-choice,
  .history-invoice,
  .office-policy .summary-grid > div,
  .office-policy .form-section,
  .onboarding-step,
  .onboarding-waiting-items li,
  .evidence-row,
  .report-row,
  .link-row,
  .start-check,
  .booking-form,
  .side-booking,
  .tacho-note,
  .ask-answer:not(.ask-answer-failed):not(.ask-answer-waiting),
  .ask-card:not(.ask-card-done) {
    background: var(--premium-glass-quiet);
    box-shadow: inset 0 1px 0 var(--premium-gleam);
  }
  .history-job-choice,
  .history-invoice { border-radius: 14px; }
  .history-invoice legend { color: var(--ink-900); }
  .history-file-list li,
  .history-batch-list li { border-color: var(--line); }
  .office-source-preview {
    background: var(--premium-field);
    border-color: var(--line);
    border-radius: 12px;
  }
  .inbox-item:hover,
  .wcb-driver:hover { background: var(--row-hover); }
}

@media screen and (max-width: 650px) {
  .hours-board .hb-detail {
    padding: 20px max(18px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  }
  .tacho-board-panel,
  .tacho-board-metric,
  .hours-board .hb-board,
  .hours-board .hb-summary-item { border-radius: 13px; }
}

@media screen and (forced-colors: active) {
  .hours-board .hb-summary-item[aria-pressed="true"],
  .office-fleet-planner .kpi-on {
    outline: 2px solid Highlight;
    outline-offset: -3px;
  }
  .directory-table tr.is-selected td:first-child,
  .directory-table tr[aria-selected="true"] td:first-child {
    border-left: 3px solid Highlight;
  }
}