/* Documents use the same surfaces and controls as the route registry. */
.portal-view .documents-panel {
  width: 100%;
  max-width: 1480px;
  margin: 32px auto 64px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.documents-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.documents-header .eyebrow { margin: 0 0 8px; color: var(--ui-soft); }
.documents-header h2 { margin: 0; font-size: 2rem; font-weight: 650; letter-spacing: -.04em; line-height: 1.15; }
.documents-panel .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-muted);
  font-size: .8125rem;
  font-weight: 550;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.documents-panel .ghost-button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.documents-panel button.is-loading .ui-icon { opacity: .45; }
.documents-filters { padding: 16px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); }
.documents-search-line { display: flex; gap: 10px; }
.documents-search { position: relative; flex: 1; min-width: 0; }
.documents-panel .documents-filters-toggle { display: none; }
.documents-search > .ui-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ui-soft); }
.documents-panel .documents-search input { width: 100%; min-height: 48px; padding: 12px 40px 12px 44px; font-size: .9375rem; background: var(--ui-page); }
.documents-search input::-webkit-search-cancel-button { cursor: pointer; }
.documents-filter-fields { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.4fr) minmax(250px, 1.5fr) minmax(150px, 1fr) auto; gap: 12px; align-items: end; margin-top: 16px; }
.documents-filter-fields > div, .documents-date-range > div { min-width: 0; }
.documents-filters label:not(.sr-only), .documents-date-range legend, .account-form label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  color: var(--ui-muted);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.documents-panel :is(.custom-select, .custom-date) { width: 100%; }
.documents-panel :is(.custom-select__button, .custom-date__button) { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-page); color: var(--ui-ink); font-size: .8125rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.documents-panel :is(.custom-select__value, .custom-date__value) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.documents-panel [aria-invalid="true"] { border-color: var(--ui-accent); }
.documents-date-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.documents-date-range > span { color: var(--ui-soft); }
.documents-panel #documentsReset { min-width: 100px; background: transparent; }
.documents-status { margin: 16px 0 0; color: var(--ui-muted); font-size: .875rem; overflow-wrap: anywhere; }
.documents-status:empty { display: none; }
.documents-status.error { color: var(--ui-accent); }
.documents-results { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0 16px; color: var(--ui-muted); font-size: .8125rem; }
.documents-results #documentsCount { color: var(--ui-ink); font-weight: 550; font-variant-numeric: tabular-nums; }
.documents-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-soft); }
.documents-list { display: grid; gap: 20px; }
.document-route { min-width: 0; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); }
.document-route__header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px 24px; padding: 20px 22px 16px; background: var(--ui-raised); }
.document-route__heading { min-width: 0; }
.document-route__heading h3 { margin: 0 0 6px; color: var(--ui-ink); font-size: 1.125rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.35; overflow-wrap: anywhere; }
.document-route__heading p { margin: 0; color: var(--ui-muted); font-size: .8125rem; line-height: 1.5; overflow-wrap: anywhere; }
.document-route__heading p > span { margin-inline: 4px; color: var(--ui-soft); }
.document-route__date { display: grid; gap: 4px; text-align: right; }
.document-route__date > span { color: var(--ui-muted); font-size: .75rem; }
.document-route__date strong { font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.document-route__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--ui-muted); font-size: .75rem; }
.document-route__meta > span { display: inline-flex; gap: 6px; align-items: center; overflow-wrap: anywhere; min-width: 0; }
.document-route__meta .ui-icon { width: 15px; height: 15px; flex-basis: 15px; }
.document-route__meta > span + span::before { content: "·"; margin-right: 2px; color: var(--ui-soft); }
.documents-panel .document-bundle-button { background: transparent; color: var(--ui-ink); }
.document-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 18px 22px; border-top: 1px solid var(--ui-line); }
.document-file-type { display: grid; place-items: center; width: 40px; height: 48px; border: 1px solid var(--ui-line); border-radius: 6px; background: var(--ui-raised); color: var(--ui-muted); font-size: .625rem; font-weight: 650; letter-spacing: .04em; }
.document-item__body { min-width: 0; }
.document-item h4 { margin: 0 0 5px; color: var(--ui-ink); font-size: .875rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.documents-panel .document-source-name { margin: 0 0 4px; color: var(--ui-muted); font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; }
.document-item small { color: var(--ui-soft); font-size: .75rem; line-height: 1.5; }
.document-state { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--ui-line); border-radius: 6px; color: var(--ui-muted); font-size: .75rem; white-space: nowrap; }
.document-state .ui-icon { width: 15px; height: 15px; flex-basis: 15px; }
.document-state.is-reviewed { border-color: color-mix(in oklch, var(--ui-success) 25%, var(--ui-line)); background: color-mix(in oklch, var(--ui-success) 6%, var(--ui-surface)); color: var(--ui-success); }
.document-item__actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.documents-panel .document-icon-button { width: 44px; padding: 10px; }
.documents-panel .document-icon-button.is-reviewed { color: var(--ui-success); border-color: color-mix(in oklch, var(--ui-success) 35%, var(--ui-line)); }
.documents-panel .document-view-button { color: var(--ui-ink); }
.documents-empty { padding: 56px 24px; border: 1px dashed var(--ui-line); border-radius: 12px; text-align: center; }
.documents-empty > .ui-icon { width: 28px; height: 28px; color: var(--ui-soft); }
.documents-empty h3 { margin: 16px 0 8px; font-size: 1.125rem; font-weight: 600; }
.documents-empty p { max-width: 48ch; margin: 0 auto 20px; color: var(--ui-muted); font-size: .875rem; }
.documents-loading { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--ui-line); border-radius: 12px; }
.documents-loading span { display: block; height: 56px; border-radius: 6px; background: var(--ui-raised); }
.documents-loading span:first-child { width: 60%; height: 24px; }
.document-preview { margin-top: 24px; padding: 22px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); scroll-margin-top: 100px; }
.document-preview__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.document-preview__header > div { min-width: 0; }
.document-preview__header .eyebrow { margin: 0 0 8px; }
.document-preview__header h3 { margin: 0 0 6px; font-size: 1.125rem; line-height: 1.4; overflow-wrap: anywhere; }
.document-preview iframe { width: 100%; height: 70vh; border: 1px solid var(--ui-line); border-radius: 8px; }
.document-preview img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
.document-preview > a { margin-top: 16px; }
.driver-accounts { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ui-line); }
.driver-accounts summary { cursor: pointer; min-height: 44px; color: var(--ui-muted); font-size: .875rem; font-weight: 600; }
.driver-accounts summary:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 4px; }
.documents-privacy-note { max-width: 75ch; color: var(--ui-muted); font-size: .8125rem; line-height: 1.6; }
.driver-account { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--ui-line); }
.driver-account > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.driver-account strong { font-size: .875rem; font-weight: 600; }
.driver-account small { display: block; color: var(--ui-muted); font-size: .75rem; margin-top: 5px; }
.account-password-field { display: flex; align-items: center; gap: 8px; }
.account-password-field input { flex: 1; min-width: 0; }
.account-password-field button { flex-shrink: 0; }
.account-form { display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; align-items: end; gap: 14px; margin: 24px 0; }
.account-form > div { min-width: 0; }
.account-form input { width: 100%; min-height: 44px; }
/* Keep documents in a quiet, dedicated column beside the route. */
.portal-view .route-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  column-gap: 24px;
}
.portal-view .route-row__path,
.portal-view .route-row__footer { grid-column: 1; min-width: 0; }
.portal-view .route-document-status {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 140px;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ui-muted);
  font: inherit;
  text-align: left;
  line-height: 1.3;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 160ms var(--ui-ease);
}
.portal-view .route-document-status .ui-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.portal-view .route-document-status .route-document-status__copy { display: grid; gap: 3px; white-space: normal; }
.portal-view .route-document-status__copy strong { color: var(--ui-muted); font-size: .6875rem; font-weight: 500; }
.portal-view .route-document-status__copy > span { color: inherit; font-size: .75rem; white-space: normal; }
.portal-view .route-document-status.has-documents { color: var(--ui-success); }
.portal-view .route-document-status:disabled { opacity: 1; cursor: default; }
.portal-view .route-document-status:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.portal-view .route-document-status:not(:disabled):active { background: var(--ui-hover); }
@media (max-width: 980px) {
  .portal-view .route-row__main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 16px;
  }
  .portal-view .route-row__path { grid-column: 1 / -1; }
  .portal-view .route-row__footer { display: contents; }
  .portal-view .route-row__party {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    overflow-wrap: anywhere;
  }
  .portal-view .route-row__party-label { display: none; }
  .portal-view .route-row__summary { grid-column: 1 / -1; grid-row: 3; }
  .portal-view .route-document-status {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    padding: 0;
    text-align: right;
  }
  .portal-view .route-document-status .route-document-status__copy { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-view .route-document-status { transition: none; }
}
.portal-view .route-documents-dialog {
  width: min(1600px, calc(100% - 32px));
  height: calc(100dvh - 32px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  overflow: hidden;
}
.portal-view .route-documents-dialog[open] { display: flex; flex-direction: column; }
.route-documents-dialog::backdrop { background: oklch(8% 0.006 250 / .82); }
body.route-documents-open { overflow: hidden; }
.route-documents-dialog__header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 24px; border-bottom: 1px solid var(--ui-line); }
.route-documents-dialog__header > div { min-width: 0; }
.route-documents-dialog__header h2 { margin: 4px 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-documents-dialog__header p { margin: 0; color: var(--ui-muted); font-size: .75rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-documents-dialog__header .route-documents-dialog__eyebrow { color: var(--ui-soft); font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.route-documents-dialog__close, .route-documents-dialog__files button, .route-documents-dialog__pager button, .route-documents-dialog__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-raised);
  color: var(--ui-ink);
}
.route-documents-dialog__close { width: 44px; flex: 0 0 auto; }
.route-documents-dialog .ui-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.route-documents-dialog button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.route-documents-dialog__files { display: flex; flex: 0 0 auto; gap: 8px; padding: 10px 24px; border-bottom: 1px solid var(--ui-line); overflow-x: auto; }
.route-documents-dialog__files[hidden] { display: none; }
.route-documents-dialog__files button { flex: 0 0 auto; max-width: 280px; padding: 8px 12px; font-size: .75rem; background: transparent; color: var(--ui-muted); }
.route-documents-dialog__files button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-documents-dialog__files button[aria-pressed="true"] { border-color: var(--ui-line); background: var(--ui-raised); color: var(--ui-ink); }
.route-documents-dialog__status { flex: 0 0 auto; margin: 0; padding: 12px 24px; color: var(--ui-muted); font-size: .875rem; }
.route-documents-dialog__status:empty { display: none; }
.route-documents-dialog__content { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; min-width: 0; padding: 16px; overflow: hidden; background: var(--ui-page); }
.route-documents-dialog__content :is(canvas, img) { display: block; flex: 0 1 auto; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 2px 16px oklch(8% 0.006 250 / .35); }
.route-documents-dialog__content img { width: auto; height: auto; }
.route-documents-dialog__footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; flex: 0 0 auto; gap: 16px; padding: 8px 24px; border-top: 1px solid var(--ui-line); }
.route-documents-dialog [hidden] { display: none !important; }
.route-documents-dialog__fit { color: var(--ui-soft); font-size: .75rem; }
.route-documents-dialog__pager { display: flex; align-items: center; gap: 12px; grid-column: 2; }
.route-documents-dialog__pager span { min-width: 88px; color: var(--ui-muted); font-size: .75rem; font-variant-numeric: tabular-nums; text-align: center; }
.route-documents-dialog__pager button { width: 44px; background: transparent; }
.route-documents-dialog__download { grid-column: 3; justify-self: end; padding: 8px 12px; font-size: .75rem; text-decoration: none; background: transparent; }
.route-documents-dialog__download:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
@media (max-width: 640px) {
  .portal-view .route-documents-dialog { width: calc(100% - 16px); height: calc(100dvh - 16px); border-radius: 12px; }
  .route-documents-dialog__header { padding: 12px; gap: 12px; }
  .route-documents-dialog__header h2 { font-size: .9375rem; }
  .route-documents-dialog__files { padding: 8px 12px; }
  .route-documents-dialog__files button { max-width: 240px; }
  .route-documents-dialog__status { padding-inline: 16px; }
  .route-documents-dialog__content { padding: 8px; }
  .route-documents-dialog__footer { grid-template-columns: auto 1fr; gap: 8px; padding: 8px 12px; }
  .route-documents-dialog__fit { display: none; }
  .route-documents-dialog__pager { grid-column: 1; gap: 6px; }
  .route-documents-dialog__pager span { min-width: 78px; }
  .route-documents-dialog__download { grid-column: 2; }
}
.documents-panel [hidden] { display: none !important; }
.portal-view .tabs-indicator { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (hover: hover) {
  .route-documents-dialog button:hover { background: var(--ui-hover); border-color: var(--ui-muted); }
  .portal-view .route-document-status:not(:disabled):hover { background: var(--ui-hover); }
  .documents-panel .ghost-button:not(:disabled):hover { border-color: var(--ui-soft); background: var(--ui-hover); color: var(--ui-ink); }
  .document-item { transition: background-color 150ms var(--ui-ease); }
  .document-item:hover { background: var(--ui-hover); }
}
@media (max-width: 1200px) {
  .documents-filter-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(240px, 1.4fr); }
  .documents-filter-fields > div:nth-child(4) { grid-column: 1 / 3; }
  .documents-panel #documentsReset { justify-self: end; }
  .document-item { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px 16px; }
  .document-state { grid-column: 2; grid-row: 2; justify-self: start; }
  .document-item__actions { grid-column: 3; grid-row: 1 / 3; }
  .document-file-type { grid-row: 1 / 3; }
  .account-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .portal-view .documents-panel { margin-top: 24px; padding: 0 12px; }
  .documents-header h2 { font-size: 1.625rem; }
  .documents-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .documents-filters:not(.is-filter-open) .documents-filter-fields { display: none; }
  .documents-panel .documents-filters-toggle { display: inline-flex; min-height: 48px; }
  .documents-panel .documents-filters-toggle[aria-expanded="true"], .documents-panel .documents-filters-toggle.has-filters { border-color: var(--ui-accent); color: var(--ui-ink); }
  #documentsFilterCount { display: grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 3px; border-radius: 4px; background: var(--ui-accent); color: var(--ui-page); font-size: .75rem; font-variant-numeric: tabular-nums; }
  .documents-date-range { grid-column: 1 / -1; }
  .documents-filter-fields > div:nth-child(4) { grid-column: auto; }
  .documents-panel #documentsReset { width: 100%; }
  .documents-panel :is(.documents-search input, .custom-select__button, .custom-date__button, .account-form input) { font-size: 1rem; }
}
@media (max-width: 620px) {
  .documents-header { gap: 12px; margin-bottom: 20px; }
  .documents-header .eyebrow { font-size: .625rem; }
  .documents-panel #documentsRefresh { padding-inline: 10px; }
  .documents-filters { padding: 12px; }
  .documents-panel .documents-filters-toggle { width: 48px; padding: 10px; }
  .documents-panel .documents-filters-toggle > span:first-of-type { display: none; }
  .documents-panel .documents-filters-toggle.has-filters { width: auto; }
  .documents-search input::placeholder { font-size: .875rem; }
  .documents-filter-fields { gap: 14px 10px; }
  .documents-filters label:not(.sr-only), .documents-date-range legend { font-size: .8125rem; }
  .documents-results { gap: 6px 12px; font-size: .8125rem; }
  .documents-sort { font-size: .75rem; }
  .documents-sort .ui-icon { width: 15px; height: 15px; }
  .documents-list { gap: 16px; }
  .document-route__header { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 18px 14px 14px; }
  .document-route__heading { grid-column: 1 / -1; }
  .document-route__heading h3 { font-size: 1.125rem; }
  .document-route__heading p { font-size: .875rem; }
  .document-route__date { text-align: left; }
  .document-route__date > span { font-size: .8125rem; }
  .document-route__date strong { font-size: 1rem; }
  .document-route__meta { gap: 8px 12px; font-size: .8125rem; }
  .document-route__meta > span:first-child { flex-basis: 100%; }
  .document-route__meta > span:nth-child(2)::before { content: none; }
  .document-item { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 16px 14px; }
  .document-file-type { width: 32px; height: 40px; grid-row: 1; font-size: .5625rem; }
  .document-item h4 { font-size: .875rem; }
  .documents-panel .document-source-name, .document-item small { font-size: .8125rem; }
  .document-state { grid-column: 1 / -1; grid-row: 2; font-size: .8125rem; padding: 7px 9px; }
  .document-item__actions { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; width: 100%; }
  .documents-panel .document-view-button { font-size: .875rem; }
  .document-preview { padding: 14px; }
  .document-preview__header { flex-direction: column; gap: 12px; }
  .document-preview__header h3 { font-size: 1rem; }
  .driver-account { flex-wrap: wrap; }
  .driver-account > div { flex-basis: 100%; }
  .account-form { grid-template-columns: 1fr; }
  .documents-empty { padding: 36px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .documents-panel *, .documents-panel *::before, .documents-panel *::after { transition: none !important; animation: none !important; }
}