/* Shared appearance for every dashboard fragment and dialog. Module styles own
   layout, column alignment, document previews and semantic status colours. */
:root {
    --ui-surface: #fff;
    --ui-surface-soft: #f7faf8;
    --ui-border: var(--border);
    --ui-radius: 10px;
    --ui-dialog-radius: 14px;
    --ui-control-radius: 7px;
    --ui-gap: 10px;
    --ui-panel-padding: 12px;
    --ui-heading-size: 1rem;
    --ui-subheading-size: .85rem;
    --ui-metric-size: 1.4rem;
    --ui-dialog-heading-size: 1.1rem;
    --ui-label-size: .72rem;
    --ui-value-size: .82rem;
    --ui-help-size: .7rem;
    --ui-control-size: .75rem;
    --ui-control-height: 34px;
    --ui-control-padding: 6px 9px;
    --ui-focus: var(--green-2);
    --action-button-min-height: var(--ui-control-height);
    --action-button-radius: var(--ui-control-radius);
    --action-button-font-size: var(--ui-control-size);
    --action-button-padding-block: 7px;
    --action-button-padding-inline: 12px;
    --action-button-primary-weight: 600;
    --action-button-secondary-weight: 500;
}
#contentPanel {
    --workspace-gap: var(--ui-gap);
    --workspace-padding: var(--ui-panel-padding);
    --workspace-control-height: var(--ui-control-height);
}
#contentPanel :is(.finance-module, .administration-compact) {
    --finance-gap: var(--ui-gap);
    --finance-padding: var(--ui-panel-padding);
    --admin-gap: var(--ui-gap);
    --admin-padding: var(--ui-panel-padding);
    --admin-control-height: var(--ui-control-height);
    --action-button-min-height: var(--ui-control-height);
    --action-button-font-size: var(--ui-control-size);
    --action-button-padding-block: 7px;
    --action-button-padding-inline: 12px;
}
.login-card { --ui-control-height: 40px; --action-button-min-height: var(--ui-control-height); }
/* A single flexible grid column prevents long headings/header actions from
   making the entire workspace wider than the viewport. Wide tables scroll. */
.admin-main { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.page-header { min-width: 0; flex-wrap: wrap; }
.page-header-left { min-width: 0; }
.page-header .global-navigation-search { flex: 1 1 180px; min-width: 140px; }
.header-actions { min-width: 0; flex-wrap: wrap; }

/* All register, report, administration and operations panel shells. */
#contentPanel :is(.panel-card, .users-card, .vehicle-table-card, .oil-master-card,
    .admin-section-page, .site-manager-phase2-card, .operation-module-card,
    .finance-chart, .report-register, .trip-workspace-panel, .site-manager-expense-card,
    .oil-closure-card, .operations-office-review, .diesel-bill-register),
#contentPanel :is(.finance-bill-foundation, .transport-bill-foundation) > section {
    min-width: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: none;
}
/* Embedded registers share their parent's frame rather than drawing two borders. */
#contentPanel .admin-page-content > .users-card { border: 0; border-radius: 0; }
body.admin-page #contentPanel :is(.panel-heading, .oil-master-heading, .oil-list-heading,
    .vehicle-register-heading, .driver-register-heading, .site-manager-card-heading,
    .billing-workspace-heading, .financial-progress-heading, .operation-module-heading) {
    gap: var(--ui-gap);
    padding: 10px var(--ui-panel-padding);
    border-color: var(--ui-border);
}
body.admin-page #contentPanel :is(.panel-heading, .oil-master-heading, .oil-list-heading,
    .vehicle-register-heading, .driver-register-heading, .site-manager-card-heading,
    .report-toolbar, .billing-workspace-heading, .financial-progress-heading,
    .role-catalogue-heading, .workspace-heading, .pol-dashboard-heading,
    .finance-billing-heading, .operation-module-heading, .report-hero) :is(h2, h3, h4),
body.admin-page #contentPanel :is(.oil-report-panel, .cng-report-panel) > h4 {
    margin: 0;
    color: var(--ink);
    font-family: inherit;
    font-size: var(--ui-heading-size);
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
#contentPanel :is(.panel-heading, .oil-master-heading, .vehicle-register-heading,
    .driver-register-heading, .role-catalogue-heading, .finance-billing-heading,
    .site-manager-card-heading, .workspace-heading, .pol-dashboard-heading) p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: var(--ui-help-size);
    line-height: 1.5;
}
#contentPanel :is(.user-summary-grid, .report-summary-grid, .diesel-bill-summary,
    .pol-dashboard-cards, .site-manager-phase2-summary) { gap: var(--ui-gap); }
#contentPanel :is(.user-summary-grid, .report-summary-grid, .diesel-bill-summary,
    .site-manager-phase2-summary) > article,
#contentPanel .metric-card {
    min-width: 0;
    padding: var(--ui-panel-padding);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: none;
}
#contentPanel :is(.user-summary-grid, .report-summary-grid, .diesel-bill-summary,
    .site-manager-phase2-summary) > article > :is(span, small),
#contentPanel .metric-card :is(span, .metric-label, p) { font-size: var(--ui-label-size); }
#contentPanel :is(.user-summary-grid, .report-summary-grid, .diesel-bill-summary,
    .site-manager-phase2-summary) > article > strong,
#contentPanel :is(.metric-card, .pol-dashboard-card) > strong {
    font-family: inherit;
    font-size: var(--ui-metric-size);
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
#contentPanel .pol-dashboard-card { border-radius: var(--ui-radius); padding: var(--ui-panel-padding); }
#contentPanel :is(.oil-card-main, .finance-bill-foundation, .transport-bill-foundation) h4,
body .user-dialog h4 { font-family: inherit; font-size: var(--ui-subheading-size); font-weight: 600; }
#contentPanel :is(.role-catalogue-grid, .oil-card-list, .station-chip-list) > article {
    min-width: 0;
    padding: var(--ui-panel-padding);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}

/* Shared operational section layout, filter rows and report bodies. */
#contentPanel .workspace-section { display: grid; gap: var(--ui-gap); min-width: 0; }
#contentPanel .workspace-section > :is(.workspace-tabs, .workspace-navigation) { margin: 0; }
#contentPanel .workspace-section .panel-heading { margin: 0; flex-wrap: wrap; }
#contentPanel .workspace-filterbar { min-width: 0; gap: var(--ui-gap); padding: 10px var(--ui-panel-padding); }
#contentPanel .workspace-filterbar > label { min-width: 0; max-width: 100%; }
#contentPanel .workspace-filterbar > label:has(input[type=search]) { flex: 1 1 220px; }
#contentPanel .workspace-filterbar :is(input, select) { max-width: 100%; }
#contentPanel .workspace-filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#contentPanel .workspace-filter-summary { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: var(--ui-help-size); line-height: 1.5; }
#contentPanel .workspace-panel-body { display: grid; gap: var(--ui-gap); min-width: 0; padding: var(--ui-panel-padding); font-size: var(--ui-value-size); line-height: 1.5; }
#contentPanel .workspace-panel-body > :is(p, h3, h4) { margin: 0; }
#contentPanel .workspace-panel-body :is(h3, h4) { color: var(--ink); font-family: inherit; font-size: var(--ui-subheading-size); font-weight: 600; }
#contentPanel .workspace-panel-body h3 { font-size: var(--ui-heading-size); }
#contentPanel .workspace-help { color: var(--muted); font-size: var(--ui-help-size); line-height: 1.5; }
#contentPanel .workspace-register-heading { margin: 0; padding: 10px var(--ui-panel-padding); color: var(--ink); font-family: inherit; font-size: var(--ui-subheading-size); font-weight: 600; line-height: 1.4; }
#contentPanel .workspace-disclosure { border-top: 1px solid var(--ui-border); }
#contentPanel .workspace-disclosure > summary { padding: 10px var(--ui-panel-padding); color: var(--green); font-size: var(--ui-label-size); font-weight: 600; cursor: pointer; }

/* Opt-in tables fit the workspace. Narrow editors become labelled rows so no
   columns, values or actions need to be clipped or scrolled sideways. */
#contentPanel .workspace-fit-tables { container: workspace-tables / inline-size; min-width: 0; }
#contentPanel .workspace-fit-tables > .workspace-tabs { flex-wrap: wrap; }
#contentPanel .workspace-fit-tables .vehicle-table-footer { min-width: 0; flex-wrap: wrap; gap: var(--ui-gap); }
#contentPanel .workspace-fit-tables .vehicles-table-wrap { min-width: 0; max-width: 100%; overflow-x: visible; }
#contentPanel .workspace-fit-tables table.vehicles-table { width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; }
#contentPanel .workspace-fit-tables table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
    min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: normal;
}
#contentPanel .workspace-fit-tables table > thead > tr > th button {
    min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
#contentPanel .workspace-fit-tables table :is(input:not([type=checkbox], [type=radio]), select, textarea, .ui-date-control) {
    width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
}
#contentPanel .workspace-fit-tables table .common-tender-row-actions { min-width: 0; flex-wrap: wrap; }
#contentPanel .workspace-fit-tables table :is(.table-action, .vehicle-status) { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@container workspace-tables (max-width: 1000px) {
    #contentPanel .workspace-fit-tables table.workspace-dense-table,
    #contentPanel .workspace-fit-tables table.workspace-dense-table > :is(tbody, tfoot) { display: block; }
    #contentPanel .workspace-fit-tables table.workspace-dense-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    #contentPanel .workspace-fit-tables table.workspace-dense-table > :is(tbody, tfoot) > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--ui-border); }
    #contentPanel .workspace-fit-tables table.workspace-dense-table > :is(tbody, tfoot) > tr > :is(th, td) { display: block; }
    #contentPanel .workspace-fit-tables table.workspace-dense-table td[colspan] { grid-column: 1 / -1; }
    #contentPanel .workspace-fit-tables table.workspace-dense-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: var(--ui-label-size); }
}
@container workspace-tables (max-width: 640px) {
    #contentPanel .workspace-fit-tables table.vehicles-table,
    #contentPanel .workspace-fit-tables table.vehicles-table > :is(tbody, tfoot) { display: block; }
    #contentPanel .workspace-fit-tables table.vehicles-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    #contentPanel .workspace-fit-tables table.vehicles-table > :is(tbody, tfoot) > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--ui-border); }
    #contentPanel .workspace-fit-tables table.vehicles-table > :is(tbody, tfoot) > tr > :is(th, td) { display: block; }
    #contentPanel .workspace-fit-tables table.vehicles-table td[colspan] { grid-column: 1 / -1; }
    #contentPanel .workspace-fit-tables table.vehicles-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: var(--ui-label-size); }
}
@container workspace-tables (max-width: 360px) {
    #contentPanel .workspace-fit-tables table.vehicles-table > :is(tbody, tfoot) > tr { grid-template-columns: minmax(0, 1fr); }
}

/* Compact registers keep complete values on one line within their own scroll area. */
#contentPanel .workspace-fit-tables .workspace-nowrap-table-wrap { max-width: 100%; overflow-x: auto; }
#contentPanel .workspace-fit-tables table.vehicles-table.workspace-nowrap-table { display: table; width: 100%; min-width: 0; max-width: none; table-layout: auto; }
#contentPanel .workspace-fit-tables table.workspace-nowrap-table > thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
#contentPanel .workspace-fit-tables table.workspace-nowrap-table > tbody { display: table-row-group; }
#contentPanel .workspace-fit-tables table.workspace-nowrap-table > tfoot { display: table-footer-group; }
#contentPanel .workspace-fit-tables table.workspace-nowrap-table > :is(thead, tbody, tfoot) > tr { display: table-row; }
#contentPanel .workspace-fit-tables table.workspace-nowrap-table > :is(thead, tbody, tfoot) > tr > :is(th, td) { display: table-cell; padding: 4px 7px; font-size: .72rem; line-height: 1.3; vertical-align: middle; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
#contentPanel .workspace-fit-tables table.workspace-nowrap-table > thead > tr > th button { white-space: nowrap; overflow-wrap: normal; }
#contentPanel .workspace-fit-tables table.workspace-nowrap-table td[data-label]::before { display: none; }
#contentPanel .workspace-fit-tables table.workspace-nowrap-table .common-tender-row-actions { flex-wrap: nowrap; gap: 4px; }
#contentPanel .workspace-fit-tables table.workspace-nowrap-table :is(.table-action, .vehicle-status) { max-width: none; white-space: nowrap; overflow-wrap: normal; font-size: inherit; }
#contentPanel .workspace-fit-tables table.workspace-nowrap-table :is(.table-action, .icon-action) { min-height: 26px; padding: 3px 5px; }

/* Every modal already uses user-dialog, including lazy-loaded workflows. */
dialog.user-dialog {
    max-height: calc(100dvh - 32px);
    overflow: auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-dialog-radius);
    background: var(--ui-surface);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--ui-value-size);
    line-height: 1.45;
    box-shadow: var(--shadow);
}
body.admin-page:has(dialog[open]) { overflow: hidden; }
dialog.user-dialog::backdrop { background: rgba(12, 36, 29, .48); backdrop-filter: blur(4px); }
body .user-dialog .dialog-heading { gap: 12px; }
body .user-dialog .dialog-heading :is(h2, h3) {
    margin: 0;
    font-family: inherit;
    font-size: var(--ui-dialog-heading-size);
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
body .user-dialog .dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-control-radius);
    background: var(--ui-surface-soft);
    color: var(--muted);
    font: inherit;
    font-size: 1.1rem;
    font-weight: 400;
    cursor: pointer;
}
body .user-dialog .dialog-actions { gap: 8px; border-color: var(--ui-border); }
body .user-dialog .ccms-entry-grid > label { white-space: normal; overflow-wrap: normal; }

/* Common controls, including forms and filters outside dialogs. Never change
   checkbox/radio geometry, hidden ISO dates or the module's responsive grid. */
:is(#contentPanel, dialog.user-dialog, .login-card) :is(input, select, textarea):not(
    [type=hidden], [type=checkbox], [type=radio], [type=range], [type=color], [type=submit], [type=button]) {
    min-width: 0;
    min-height: var(--ui-control-height);
    padding: var(--ui-control-padding);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-control-radius);
    background: var(--ui-surface);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--ui-control-size);
    font-weight: 400;
    line-height: 1.35;
    box-sizing: border-box;
}
:is(#contentPanel, dialog.user-dialog, .login-card) textarea { min-height: 72px; resize: vertical; }
:is(#contentPanel, dialog.user-dialog, .login-card) :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
    box-shadow: none;
}
:is(#contentPanel, dialog.user-dialog, .login-card) :is(input, textarea)[readonly] { background: var(--ui-surface-soft); }
:is(#contentPanel, dialog.user-dialog, .login-card) :is(input, select, textarea):disabled { background: #f0f3f1; color: var(--muted); }
:is(#contentPanel, dialog.user-dialog, .login-card) input[type=file] { height: auto; padding: 4px; }
:is(#contentPanel, dialog.user-dialog, .login-card) input[type=file]::file-selector-button {
    margin-right: 8px;
    padding: 4px 8px;
    border: 1px solid var(--ui-border);
    border-radius: 5px;
    background: var(--ui-surface-soft);
    color: var(--green);
    font: inherit;
    cursor: pointer;
}
#contentPanel form label, body .user-dialog label, .login-card label {
    color: var(--ink);
    font-size: var(--ui-label-size);
    font-weight: 500;
    line-height: 1.4;
}
#contentPanel form label small, body .user-dialog label small { color: var(--muted); font-size: var(--ui-help-size); font-weight: 400; }
#contentPanel :is(.user-form, .vehicle-form-sections, .firm-configuration-fields) fieldset:not(.compliance-fields) {
    min-width: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}
#contentPanel legend, body .user-dialog legend { color: var(--green); font-size: var(--ui-label-size); font-weight: 600; }

/* Dense table editors and ledger rows use one shared compact control variant. */
#contentPanel :is(table, .browser-register-controls, .pol-expense-entry-form, .vehicle-upload-editor),
dialog.user-dialog :is(table, .pol-expense-entry-form, .vehicle-upload-editor) {
    --ui-control-height: var(--table-control-height, 28px);
    --ui-control-padding: var(--table-control-padding, 4px 6px);
    --ui-control-size: .72rem;
    --action-button-min-height: var(--ui-control-height);
    --action-button-padding-block: 4px;
    --action-button-padding-inline: 7px;
    --action-button-font-size: var(--ui-control-size);
}
body.admin-page :is(#contentPanel, dialog.user-dialog) .ui-date-control > input[data-date-display] {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding-right: 2rem;
}
:is(#contentPanel, dialog.user-dialog) .ui-date-picker { min-height: 0; padding: 3px 5px; }

/* Button appearance stays owned by buttons.css; consistently apply its tokens
   after legacy module rules. Small table actions retain tables.css sizing. */
:is(#contentPanel, dialog.user-dialog, .login-card) :is(.primary-action, .secondary-action) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--action-button-gap);
    min-height: var(--action-button-min-height);
    padding: var(--action-button-padding-block) var(--action-button-padding-inline);
    border-radius: var(--action-button-radius);
    font-family: inherit;
    font-size: var(--action-button-font-size);
    line-height: var(--action-button-line-height);
}
:is(#contentPanel, dialog.user-dialog, .login-card) .primary-action { font-weight: var(--action-button-primary-weight); }
:is(#contentPanel, dialog.user-dialog, .login-card) .secondary-action { font-weight: var(--action-button-secondary-weight); }
#contentPanel .module-alert, body .user-dialog .module-alert { font-size: var(--ui-control-size); font-weight: 500; line-height: 1.45; border-radius: var(--ui-control-radius); }

/* Definition lists and legacy label/value spans share the same typography. */
:is(#contentPanel, dialog.user-dialog) :is(.vehicle-detail-grid, .finance-detail-grid, .common-tender-detail-grid) :is(dt, small) {
    margin: 0;
    color: var(--muted);
    font-size: var(--ui-label-size);
    font-weight: 400;
    line-height: 1.4;
}
:is(#contentPanel, dialog.user-dialog) :is(.vehicle-detail-grid, .finance-detail-grid, .common-tender-detail-grid) :is(dd, strong) {
    display: block;
    min-width: 0;
    margin: 4px 0 0;
    color: var(--ink);
    font-size: var(--ui-value-size);
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
:is(#contentPanel, dialog.user-dialog) :is(.vehicle-detail-grid, .finance-detail-grid, .common-tender-detail-grid) > :is(div, span) { min-width: 0; }

/* Respect deliberately compact two-column compliance upload dialogs. */
.vehicle-compliance-uploads-dialog { --action-button-min-height: 30px; --action-button-padding-block: 5px; --action-button-font-size: .73rem; }
.vehicle-compliance-uploads-dialog .vehicle-upload-footer { margin-top: 8px; }
#contentPanel .vehicle-compliance-uploads-dialog .vehicle-upload-editor { --ui-control-height: 32px; --action-button-min-height: 32px; }
@media (max-width: 650px) {
    :root { --ui-panel-padding: 10px; }
    body .user-dialog .dialog-heading :is(h2, h3) { font-size: 1rem; }
}

/* One filter component for static fragments, generated registers and modal pickers.
   The application shell selector takes precedence over older module filter grids.
   Inputs, names, data hooks and form submission remain owned by their workflows. */
:root {
    --filter-control-height: 34px;
    --filter-control-size: .75rem;
    --filter-label-size: .72rem;
    --filter-gap: 8px;
    --filter-padding: 8px 12px;
    --filter-date-width: 150px;
    --filter-search-width: 220px;
}

body .app-filterbar:not([hidden]),
body.admin-page #contentPanel .app-filterbar:not([hidden]) {
    --ui-control-height: var(--filter-control-height);
    --ui-control-size: var(--filter-control-size);
    --action-button-min-height: var(--filter-control-height);
    --action-button-font-size: var(--filter-control-size);
    --action-button-padding-block: 6px;
    --action-button-padding-inline: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--filter-gap);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: var(--filter-padding);
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    border-radius: 0;
    background: var(--ui-surface-soft);
    color: var(--muted);
    font-size: var(--filter-control-size);
    font-weight: 400;
    line-height: 1.4;
    box-sizing: border-box;
}

body .app-filterbar:not([hidden]) label:not([hidden]),
body.admin-page #contentPanel .app-filterbar:not([hidden]) label:not([hidden]) {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    color: var(--muted);
    font-size: var(--filter-label-size);
    font-weight: 400;
    line-height: 1.4;
}

/* Keep a duration preset and its date range together as one reusable filter group. */
body .app-filterbar:not([hidden]) .app-duration-group:not([hidden]),
body.admin-page #contentPanel .app-filterbar:not([hidden]) .app-duration-group:not([hidden]) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--filter-gap);
    min-width: 0;
    max-width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--ui-border, #d8e1dd);
    border-radius: var(--ui-control-radius, 8px);
    box-sizing: border-box;
}

body .app-filterbar:not([hidden]) :is(input, select):not([type=hidden], [type=checkbox], [type=radio], .ui-date-value),
body.admin-page #contentPanel .app-filterbar:not([hidden]) :is(input, select):not([type=hidden], [type=checkbox], [type=radio], .ui-date-value) {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: var(--filter-control-height);
    height: var(--filter-control-height);
    margin: 0;
    padding: 6px 9px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-control-radius);
    background: var(--ui-surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--filter-control-size);
    font-weight: 400;
    line-height: 1.35;
    box-sizing: border-box;
}

body .app-filterbar:not([hidden]) select,
body.admin-page #contentPanel .app-filterbar:not([hidden]) select {
    width: 180px;
    text-overflow: ellipsis;
}

body .app-filterbar:not([hidden]) > input[type=search],
body.admin-page #contentPanel .app-filterbar:not([hidden]) > input[type=search] {
    flex: 1 1 var(--filter-search-width);
    width: var(--filter-search-width);
}

body .app-filterbar:not([hidden]) > label:has(input[type=search]):not(.user-search-wrap),
body.admin-page #contentPanel .app-filterbar:not([hidden]) > label:has(input[type=search]):not(.user-search-wrap) {
    flex: 1 1 var(--filter-search-width);
}

body .app-filterbar:not([hidden]) > label:has(input[type=search]) input[type=search],
body.admin-page #contentPanel .app-filterbar:not([hidden]) > label:has(input[type=search]) input[type=search] {
    flex: 1 1 auto;
    width: 100%;
}

body .app-filterbar:not([hidden]) .user-search-wrap:not([hidden]),
body.admin-page #contentPanel .app-filterbar:not([hidden]) .user-search-wrap:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 var(--filter-search-width);
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: var(--filter-control-height);
    min-height: var(--filter-control-height);
    padding: 0 9px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-control-radius);
    background: var(--ui-surface);
    box-sizing: border-box;
}

body .app-filterbar:not([hidden]) .user-search-wrap input[type=search],
body.admin-page #contentPanel .app-filterbar:not([hidden]) .user-search-wrap input[type=search] {
    flex: 1;
    width: 100%;
    min-height: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body .app-filterbar:not([hidden]) .user-search-wrap:focus-within,
body.admin-page #contentPanel .app-filterbar:not([hidden]) .user-search-wrap:focus-within {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

body .app-filterbar:not([hidden]) .user-search-wrap input:focus-visible,
body.admin-page #contentPanel .app-filterbar:not([hidden]) .user-search-wrap input:focus-visible {
    outline: none;
}

body .app-filterbar:not([hidden]) .ui-date-control,
body.admin-page #contentPanel .app-filterbar:not([hidden]) .ui-date-control {
    flex: 0 1 var(--filter-date-width);
    width: var(--filter-date-width);
    min-width: 0;
    max-width: 100%;
}

body .app-filterbar:not([hidden]) .ui-date-control > input[data-date-display],
body.admin-page #contentPanel .app-filterbar:not([hidden]) .ui-date-control > input[data-date-display] {
    width: 100%;
    padding-right: 2rem;
}

body .app-filterbar:not([hidden]) :is(.vehicle-page-size, label:has(select:is([name=size], [name$=Size], [data-browser-size], [data-register-size], [data-hierarchy-size], [data-partner-tender-size]))),
body.admin-page #contentPanel .app-filterbar:not([hidden]) :is(.vehicle-page-size, label:has(select:is([name=size], [name$=Size], [data-browser-size], [data-register-size], [data-hierarchy-size], [data-partner-tender-size]))) {
    flex: 0 0 auto;
    white-space: nowrap;
}

body .app-filterbar:not([hidden]) select:is([name=size], [name$=Size], [data-browser-size], [data-register-size], [data-hierarchy-size], [data-partner-tender-size], [aria-label="Rows per page"]),
body.admin-page #contentPanel .app-filterbar:not([hidden]) select:is([name=size], [name$=Size], [data-browser-size], [data-register-size], [data-hierarchy-size], [data-partner-tender-size], [aria-label="Rows per page"]) {
    flex: 0 0 64px;
    width: 64px;
}

body .app-filterbar:not([hidden]) :is(button, a.secondary-action, a.primary-action):not(.ui-date-picker, .icon-action, .table-action),
body.admin-page #contentPanel .app-filterbar:not([hidden]) :is(button, a.secondary-action, a.primary-action):not(.ui-date-picker, .icon-action, .table-action) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 6px;
    min-height: var(--filter-control-height);
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-control-radius);
    font-family: inherit;
    font-size: var(--filter-control-size);
    line-height: 1.35;
    white-space: nowrap;
    box-sizing: border-box;
}

body .app-filterbar:not([hidden]) button:not(.primary-action, .ui-date-picker, .icon-action, .table-action),
body.admin-page #contentPanel .app-filterbar:not([hidden]) button:not(.primary-action, .ui-date-picker, .icon-action, .table-action) {
    background: var(--ui-surface);
    color: var(--green);
    font-weight: 500;
}

body .app-filterbar:not([hidden]) :is(.workspace-filter-actions, .fleet-report-filter-actions),
body.admin-page #contentPanel .app-filterbar:not([hidden]) :is(.workspace-filter-actions, .fleet-report-filter-actions) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--filter-gap);
    margin: 0;
    padding: 0;
}

body .app-filterbar:not([hidden]) .app-filterbar:not([hidden]),
body.admin-page #contentPanel .app-filterbar:not([hidden]) .app-filterbar:not([hidden]) {
    flex: 1 1 100%;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

body .app-filterbar:not([hidden]) .workspace-filter-summary,
body.admin-page #contentPanel .app-filterbar:not([hidden]) .workspace-filter-summary {
    flex: 1 1 100%;
    margin: 0;
    font-weight: 400;
}

body .report-toolbar.app-filterbar > div:first-child:not(.user-search-wrap) { flex: 1 1 260px; min-width: 0; }
body .user-dialog label.app-filter-field:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font-size: var(--filter-label-size); font-weight: 400; }
body .user-dialog label.app-filter-field input[type=search] { flex: 1 1 200px; min-width: 0; min-height: var(--filter-control-height); }
/* Old operational toolbars are intentionally superseded by server register filters. */
body.admin-page #contentPanel .compact-register-pane .oil-consignment-workspace > .oil-contract-toolbar,
body.admin-page #contentPanel .operations-register-card > .vehicle-toolbar { display: none; }

@media(max-width:600px) {

body .app-filterbar:not([hidden]) .app-duration-group:not([hidden]),
body.admin-page #contentPanel .app-filterbar:not([hidden]) .app-duration-group:not([hidden]) { flex: 1 1 100%; width: 100%; }
body .app-filterbar:not([hidden]) .app-duration-group:not([hidden]) > label:not([hidden]),
body.admin-page #contentPanel .app-filterbar:not([hidden]) .app-duration-group:not([hidden]) > label:not([hidden]) {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

body .app-filterbar:not([hidden]) > label:not([hidden]):not(.vehicle-page-size):not(.user-search-wrap):not(:has(select:is([name=size], [name$=Size], [data-browser-size], [data-register-size], [data-hierarchy-size], [data-partner-tender-size]))),
body.admin-page #contentPanel .app-filterbar:not([hidden]) > label:not([hidden]):not(.vehicle-page-size):not(.user-search-wrap):not(:has(select:is([name=size], [name$=Size], [data-browser-size], [data-register-size], [data-hierarchy-size], [data-partner-tender-size]))) {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

body .app-filterbar:not([hidden]) > :is(input[type=search], .user-search-wrap),
body.admin-page #contentPanel .app-filterbar:not([hidden]) > :is(input[type=search], .user-search-wrap) {
    flex-basis: 100%;
    width: 100%;
}

body .app-filterbar:not([hidden]) label :is(select, .ui-date-control),
body.admin-page #contentPanel .app-filterbar:not([hidden]) label :is(select, .ui-date-control) {
    flex: 1 1 auto;
    width: 100%;
}

body .app-filterbar:not([hidden]) label select:is([name=size], [name$=Size], [data-browser-size], [data-register-size], [data-hierarchy-size], [data-partner-tender-size]),
body.admin-page #contentPanel .app-filterbar:not([hidden]) label select:is([name=size], [name$=Size], [data-browser-size], [data-register-size], [data-hierarchy-size], [data-partner-tender-size]) {
    flex: 0 0 64px;
    width: 64px;
}
}

body .app-filterbar label:has([data-lookup-pages]),
body.admin-page #contentPanel .app-filterbar label:has([data-lookup-pages]) { flex: 0 1 260px; flex-wrap: wrap; }
body .app-filterbar label:has([data-lookup-pages]) > :is([data-lookup-search], select, [data-lookup-pages]),
body.admin-page #contentPanel .app-filterbar label:has([data-lookup-pages]) > :is([data-lookup-search], select, [data-lookup-pages]) { flex: 1 1 100%; width: 100%; }

body .app-filterbar .vehicle-page-size select,
body.admin-page #contentPanel .app-filterbar .vehicle-page-size select { flex: 0 0 64px; width: 64px; }
body .app-filterbar :is(input, select, button):disabled,
body.admin-page #contentPanel .app-filterbar :is(input, select, button):disabled { background: #f0f3f1; color: var(--muted); cursor: not-allowed; }
body .app-filterbar[hidden], body .app-filterbar [hidden],
body.admin-page #contentPanel .app-filterbar[hidden], body.admin-page #contentPanel .app-filterbar [hidden] { display: none; }

/* Keep a failed vehicle workbook's download visible above its optional error detail. */
.vehicle-import-issue-details{margin-top:12px}
.vehicle-import-issue-details>summary{cursor:pointer;font-size:.72rem;color:var(--ink)}
.vehicle-import-issue-details[open]>.vehicle-import-error-table-wrap{margin-top:8px}

.import-validation-feedback{display:grid;gap:8px;margin:0 0 12px}
.import-validation-feedback>.module-alert{margin:0}
.import-validation-feedback>.marked-workbook-link{justify-self:start;white-space:normal}
.import-validation-feedback:has(>[data-async-form-error][hidden]):not(:has(>[data-import-validation-download]:not([hidden]))){display:none}
[data-async-form-error]>.marked-workbook-link{display:flex;width:fit-content;margin-top:8px;white-space:normal}

/* Shared, temporary operation feedback; manual popover places it above dialogs. */
.app-toasts { position:fixed; inset:20px 20px auto auto; margin:0; z-index:10000; display:grid; gap:10px; width:min(420px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow-y:auto; border:0; padding:0; background:transparent; color:var(--ink); pointer-events:none; }
.app-toasts[hidden] { display:none; }
.app-toast { display:flex; align-items:flex-start; gap:12px; padding:13px 15px; border:1px solid var(--border); border-left:4px solid var(--green); border-radius:10px; background:var(--ui-surface,#fff); box-shadow:0 6px 24px #142c2426; font:inherit; font-size:var(--ui-value-size,.8rem); line-height:1.45; pointer-events:auto; }
.app-toast[data-type="error"] { border-left-color:#b42318; }
.app-toast>span { flex:1; min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.app-toast-close { flex:none; border:0; background:transparent; color:var(--muted); cursor:pointer; padding:0 3px; font:inherit; font-size:1.2rem; line-height:1.1; }
.app-toast-close:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
@media print { .app-toasts { display:none; } }