/* Web workspace components: one visual language for operations, finance,
   setup, and account pages. Native views keep their separate presentation. */
.web-app {
  --workspace-nav: #102b3c;
  --workspace-nav-muted: #99b1c2;
  --workspace-nav-text: #d7e5ee;
  --workspace-nav-active: #21485e;
  /* Popup and control geometry. Every menu, filter drawer, column drawer and
     toolbar control resolves its box from these, so nothing drifts out of
     line and every floating surface shares one corner radius. */
  --workspace-control-h: 40px;
  --workspace-control-radius: 12px;
  --workspace-popup-radius: 20px;
  --workspace-popup-shadow: 0 1px 2px rgb(15 23 42 / .06), 0 22px 48px -14px rgb(15 23 42 / .3);
}
.web-app #app-sidebar { width: 248px; background: var(--workspace-nav); color: var(--workspace-nav-text); border: 0; }
.web-app #app-sidebar > a:first-of-type { border-color: rgb(255 255 255 / .09); }
.web-app #app-sidebar .brand-text,
.web-app #app-sidebar .brand-text > span { color: #fff; }
.web-app #app-sidebar .brand-text > span + span { color: var(--workspace-nav-muted); }
.web-app #app-sidebar .nav-section { color: var(--workspace-nav-muted); }
.web-app #app-sidebar :is(.nav-link, .nav-sublink) { color: var(--workspace-nav-text); }
.web-app #app-sidebar :is(.nav-icon, .nav-chevron) { color: var(--workspace-nav-muted); }
.web-app #app-sidebar :is(.nav-link, .nav-sublink):hover { background: rgb(255 255 255 / .07); color: #fff; }
.web-app #app-sidebar :is(.nav-link[aria-current="page"], .nav-link.is-active, .nav-sublink[aria-current="page"]) { background: var(--workspace-nav-active); color: #fff; }
.web-app #app-sidebar .nav-link[aria-current="page"]::before { background: #80c4e3; }
.web-app #app-sidebar :is(.nav-link[aria-current="page"], .nav-link.is-active) .nav-icon { color: #91d5f0; }
.web-app #app-sidebar > div:last-child { border-color: rgb(255 255 255 / .09); }
.web-app #app-sidebar button[title] { color: var(--workspace-nav-text); }
.web-app #app-sidebar button[title]:hover { background: rgb(255 255 255 / .09); }
.web-app #app-sidebar [data-nav-collapse-target="panel"]::before { background: rgb(255 255 255 / .13); }
.web-app { max-width: 100%; overflow-x: clip; }
/* Lock the page while a drawer or popup is modal; its body can still scroll. */
html:has(.web-app dialog:modal),
.web-app:has(dialog:modal) { overflow: hidden; }
.web-app .web-page-heading { border: 0; padding-block: 2px; margin-bottom: 18px; gap: 16px; }
.web-app .page-heading-copy { max-width: 52rem; }
.web-app .page-heading-description { max-width: 45rem; margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--color-gray-500); }
.web-app .page-heading-actions { align-self: center; }
.web-app .workspace-main { min-width: 0; overflow-x: clip; padding-top: 18px; padding-bottom: 24px; }
.web-app .web-topbar > div,
.web-app .web-sidebar-header > div { max-width: none; margin-inline: 0; }
.web-app .group\/search:has([data-header-search-target="clear"]:not([hidden])) kbd { display: none; }
.web-app .dataset-toolbar { min-height: 60px; justify-content: flex-start; gap: 8px 12px; padding: 10px 16px; }
.web-app .dataset-toolbar__title { display: flex; min-width: 0; flex: 0 1 auto; align-items: center; gap: 10px; margin-inline-end: auto; overflow: hidden; }
.web-app .dataset-toolbar__title .card-title { font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: var(--color-gray-900); }
.web-app .dataset-toolbar__actions { display: flex; flex: 0 1 auto; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; margin-inline-start: auto; min-width: 0; }
.web-app .dataset-toolbar__actions > form { display: contents; }
.web-app .dataset-toolbar__group { display: inline-flex; align-items: center; gap: 8px; padding-inline-end: 8px; border-inline-end: 1px solid var(--color-gray-200); }
.web-app .dataset-toolbar__group:last-child { padding-inline-end: 0; border-inline-end: 0; }
.web-app .dataset-toolbar__chips { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
/* Every control in the toolbar resolves the same box, so the row reads as one
   aligned cluster instead of a mix of heights and gaps. */
.web-app .dataset-toolbar :is(.btn, .btn-icon, .btn-sm, .form-input, input, select) {
  height: var(--workspace-control-h);
  min-height: var(--workspace-control-h);
  border-radius: var(--workspace-control-radius);
}
.web-app .dataset-toolbar__actions > form > label { display: inline-flex; align-items: center; }
.web-app .dataset-toolbar__per-page { display: inline-flex; align-items: center; gap: 6px; color: var(--color-gray-500); }
.web-app .dataset-toolbar__per-page > svg { color: var(--color-gray-400); }
.web-app .dataset-toolbar__per-page select { width: 4.5rem; padding-inline-end: 6px; font-size: 13px; }
.web-app .dataset-toolbar input[type="search"] { min-width: 200px; }
/* A table ends with one compact operational footer: page size, visible range,
   then navigation. Shared markup keeps every list from inventing its own
   bottom-bar spacing and button treatment. */
.web-app .workspace-table-footer { display: flex; min-height: 58px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; border-top: 1px solid var(--color-gray-200); background: var(--color-surface); padding: 10px 16px; color: var(--color-gray-500); font-size: 12px; }
.web-app .workspace-table-footer__summary { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 12px; }
.web-app .workspace-rows-per-page { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.web-app .workspace-rows-per-page label { color: var(--color-gray-500); font-weight: 600; }
.web-app .workspace-rows-per-page__select { height: 32px; padding-top: 3px; min-width: 58px; border: 1px solid var(--color-gray-300); border-radius: 8px; background: var(--color-surface); padding-inline: 8px; color: var(--color-gray-700); font-size: 12px; font-weight: 600; }
.web-app .workspace-table-footer__range { border-inline-start: 1px solid var(--color-gray-200); padding-inline-start: 12px; color: var(--color-gray-600); font-variant-numeric: tabular-nums; white-space: nowrap; }
.web-app .workspace-pagination { display: inline-flex; align-items: center; gap: 3px; }
.web-app .workspace-pagination__button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--color-gray-600); transition: background-color 150ms ease, color 150ms ease; }
.web-app .workspace-pagination__button:hover { background: var(--color-gray-100); color: var(--color-gray-900); }
.web-app .workspace-pagination__button--disabled { color: var(--color-gray-300); cursor: default; }
.web-app .workspace-pagination__button--disabled:hover { background: transparent; color: var(--color-gray-300); }
@media (min-width: 768px) {
  .web-app .dataset-toolbar { flex-wrap: nowrap; }
  .web-app .dataset-toolbar__title { max-width: 34%; }
  .web-app .dataset-toolbar__actions { max-width: 66%; overflow-x: auto; scrollbar-width: none; }
  .web-app .dataset-toolbar__actions::-webkit-scrollbar { display: none; }
}
.web-app .dashboard-hero { background: linear-gradient(115deg, #123348, #1d4a63); border: 0; box-shadow: 0 8px 24px rgb(16 43 60 / .12); }
.web-app .dashboard-hero :is(h1, .welcome span) { color: #fff; }
.web-app .dashboard-hero :is(.context, .welcome) { color: #d0e0e9; }
.web-app .dashboard-hero__eyebrow { color: #9ed6ef; }
.web-app .dashboard-hero::after { width: 25rem; height: 25rem; background: repeating-radial-gradient(circle, transparent 0 44px, rgb(255 255 255 / .045) 45px 46px); }
.web-app .dashboard-hero .btn-primary { background: #fff; color: #183d53; box-shadow: 0 2px 6px rgb(0 0 0 / .1); }
.web-app .dashboard-hero .btn-primary:hover { background: #e5f1f8; }
.web-app .dashboard-hero .btn-secondary { border-color: rgb(255 255 255 / .25); background: rgb(255 255 255 / .08); color: #fff; }
.web-app .dashboard-section .stat::before { width: 0; }
.web-app .stat { padding: 22px 24px; }
.web-app .stat-label { color: var(--color-gray-500); font-weight: 550; font-size: 12px; }
.web-app .stat-label > span:has(svg) { width: 34px; height: 34px; border-radius: 10px; }
.web-app .stat-value { margin-top: 12px; font-size: 26px; line-height: 1.25; }
.web-app .status-tabs { padding: 12px 20px; gap: 8px; border-bottom: 1px solid var(--color-gray-200); background: var(--color-surface); scroll-snap-type: x proximity; }
.web-app .status-tab { border-radius: 8px; border: 1px solid transparent; min-height: 38px; padding: 8px 12px; scroll-snap-align: start; }
.web-app .status-tab::after { display: none; }
.web-app .status-tab[aria-current="true"] { background: var(--color-brand-50); color: var(--color-brand-700); border-color: var(--color-brand-100); }
.web-app .status-tab-count { background: var(--color-gray-100); font-size: 11px; min-width: 22px; }
.web-app .status-tab[aria-current="true"] .status-tab-count { background: var(--color-surface); color: var(--color-brand-700); }
.web-app .filter-bar { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 16px; }
.web-app .filter-heading { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 12px; border-bottom: 1px solid var(--color-gray-200); }
.web-app .filter-heading__title { display: inline-flex; align-items: center; gap: 8px; color: var(--color-gray-900); font-size: 12px; font-weight: 650; }
.web-app .filter-heading__hint { margin-inline-start: auto; color: var(--color-gray-500); font-size: 11px; }
.web-app .filter-bar .filter-actions { grid-column: auto; }
.web-app .form-outline { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; padding: 16px 20px; margin-bottom: 24px; border: 1px solid var(--color-gray-200); border-radius: 12px; background: var(--color-surface); }
.web-app .form-outline__label { display: flex; gap: 8px; align-items: center; color: var(--color-gray-500); font-size: 12px; font-weight: 600; }
.web-app .form-outline ol { display: flex; flex-wrap: wrap; gap: 8px; }
.web-app .form-outline a { display: inline-flex; gap: 8px; align-items: center; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 550; color: var(--color-gray-700); }
.web-app .form-outline a:hover { color: var(--color-brand-700); background: var(--color-brand-50); }
.web-app .form-outline__number { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 6px; background: var(--color-gray-100); color: var(--color-gray-500); font-size: 10px; font-variant-numeric: tabular-nums; }
.web-app .form-section { border: 0; padding-block: 0; margin-bottom: 28px; gap: 28px; scroll-margin-top: 90px; }
.web-app .form-section > div:first-child:not(.card) { padding-top: 20px; }
.web-app .form-section > .card { border-radius: 16px; padding: 24px; border: 1px solid var(--color-gray-200); box-shadow: 0 2px 8px rgb(15 23 42 / .025); }
.web-app .form-section .form-grid { gap: 22px 20px; }
.web-app .form-section .form-input { background: var(--color-surface); border-radius: 10px; transition: border-color 150ms ease, box-shadow 150ms ease; }
.web-app .form-section .form-input:focus { border-color: var(--color-brand-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-500) 12%, transparent); }
.web-app .form-section .form-input:disabled { background: var(--color-gray-50); color: var(--color-gray-500); cursor: not-allowed; }
.web-app .form-section .form-hint { margin-top: 6px; line-height: 1.6; }
.web-app .form-section-title { font-size: 16px; letter-spacing: -.025em; }
.web-app .form-section-desc { font-size: 13px; line-height: 1.75; max-width: 28rem; margin-top: 8px; }
.web-app .form-grid { gap: 22px 20px; }
.web-app .form-label { font-size: 12px; font-weight: 600; }
.web-app .form-input { min-height: 42px; box-shadow: none; }
.web-app select.form-input[multiple] { height: auto; min-height: 160px; padding: 8px; }
.web-app select.form-input[multiple] option { padding: 8px; border-radius: 5px; }
.web-app .form-actions { position: sticky; bottom: 12px; z-index: 20; gap: 10px; margin-top: 28px; padding: 16px 20px; border: 1px solid var(--color-gray-200); border-radius: 12px; background: var(--color-surface); box-shadow: var(--shadow-theme-md); }
.web-app .form-actions .btn-primary { min-width: 128px; }
.web-app .detail-term { font-size: 11px; letter-spacing: .02em; color: var(--color-gray-500); text-transform: none; font-weight: 500; }
.web-app .detail-value { margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 1.65; }
.web-app .detail-list { row-gap: 24px; }
.web-app .invoice-document { border-top: 3px solid var(--color-brand-500); }
.web-app .attachment-link { display: inline-flex; gap: 10px; align-items: center; border: 1px solid var(--color-gray-200); background: var(--color-gray-50); border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 550; color: var(--color-brand-700); }
.web-app .attachment-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.web-app .attachment-link:hover { border-color: var(--color-brand-300); background: var(--color-brand-50); }
.web-app .fleet-card { border-radius: 14px; }
.web-app .fleet-card:hover { transform: none; }
.web-app .fleet-board { background: var(--color-gray-50); scroll-snap-type: x proximity; }
.web-app .fleet-board__column { scroll-snap-align: start; background: var(--color-canvas); border: 1px solid var(--color-gray-200); box-shadow: none; }
.web-app .fleet-board__column > header { padding: 16px; }
.web-app .fleet-board__card { padding: 14px; border-radius: 10px; }
.web-app .fleet-table thead th:first-child,
.web-app .fleet-table tbody td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--color-surface); box-shadow: 1px 0 0 var(--color-gray-200); }
.web-app .fleet-table thead th:first-child { background: var(--color-gray-50); z-index: 2; }
.web-app .fleet-table tbody tr:hover td:first-child { background: var(--color-brand-25); }
.web-app .empty-state { min-height: 240px; justify-content: center; }
.web-app .empty-state > span { border-radius: 50%; width: 64px; height: 64px; background: var(--color-brand-50); color: var(--color-brand-600); --tw-ring-color: var(--color-brand-100); }
.web-app .empty-state p { margin-top: 8px; line-height: 1.7; }
.web-app .tracking-hero { background: linear-gradient(135deg, var(--color-surface), var(--color-brand-50)); }
.web-app .tracking-progress { padding-block: 12px; }
.web-app .settings-nav { border: 1px solid var(--color-gray-200); border-radius: 12px; background: var(--color-surface); padding: 6px; gap: 4px; }
.web-app .settings-nav a { min-height: 40px; display: inline-flex; align-items: center; }
.web-app .tab-list { border-radius: 12px; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-gray-200); }
.web-app .tab-list .tab { border-radius: 8px; min-height: 40px; padding: 10px 14px; font-size: 12px; border-bottom: 0; }
.web-app .tab-list .tab[aria-selected="true"] { background: var(--color-brand-50); color: var(--color-brand-700); }
.web-app .dataset-toolbar:has(.card-title) .card-title { font-size: 14px; }
@media (max-width: 767px) {
  .web-app .dataset-toolbar__actions { width: 100%; margin-inline-start: 0; justify-content: flex-start; }
  .web-app .dataset-toolbar__group { padding-inline-end: 0; border-inline-end: 0; }
  .web-app .workspace-table-footer { align-items: stretch; padding: 12px 14px; }
  .web-app .workspace-table-footer__summary { justify-content: space-between; width: 100%; }
  .web-app .workspace-pagination { justify-content: flex-end; width: 100%; }
}
@media (max-width: 639px) {
  .web-app .workspace-main { padding-top: 22px; padding-bottom: 24px; }
  .web-app .web-page-heading { margin-bottom: 14px; gap: 14px; }
  .web-app .page-heading-actions { width: 100%; }
  .web-app .page-heading-actions > .btn-primary { margin-inline-start: auto; }
  .web-app .stat { padding: 18px; }
  .web-app .stat-value { font-size: 22px; }
  .web-app .filter-heading__hint { width: 100%; margin-inline-start: 0; }
  .web-app .form-outline { padding: 14px; gap: 8px; }
  .web-app .form-outline ol { gap: 4px; }
  .web-app .form-outline a { padding: 6px; font-size: 11px; }
  .web-app .form-section { gap: 14px; margin-bottom: 24px; }
  .web-app .form-section > div:first-child:not(.card) { padding-top: 0; }
  .web-app .form-section > .card { padding: 18px; }
  .web-app .form-actions { bottom: 8px; padding: 12px; }
  .web-app .form-actions > .btn { flex: 1; min-width: 0; }
  .web-app .fleet-board__column { width: min(280px, 78vw); }
}
.web-app .form-actions { margin-inline: 0; }
.web-app .assignment-choices { min-width: 0; }
.web-app .assignment-choices__list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; padding: 6px; border: 1px solid var(--color-gray-200); border-radius: 10px; }
.web-app .assignment-choice { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 6px; font-size: 12px; line-height: 1.5; color: var(--color-gray-700); cursor: pointer; }
.web-app .assignment-choice:has(:checked) { background: var(--color-brand-50); color: var(--color-brand-700); }
.web-app .assignment-choice:hover { background: var(--color-gray-50); }
.web-app .delivery-error summary { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.web-app .vehicle-color { display: inline-flex; align-items: center; gap: 8px; color: var(--color-gray-700); }
.web-app .vehicle-color > span { width: 12px; height: 12px; border: 1px solid var(--color-gray-300); border-radius: 50%; }
.web-app .quote-placeholder { min-height: 340px; background: var(--color-surface); }
.web-app .shipping-detail .card-header { background: var(--color-gray-25); }

/* Lists prioritize records. Filters and secondary details are opened on demand. */
.web-app [hidden] { display: none !important; }
.web-app .workspace-filter-control { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.web-app .workspace-filter-trigger { min-width: 92px; border-color: var(--color-gray-300); background: var(--color-surface); color: var(--color-gray-700); font-weight: 650; }
.web-app .workspace-filter-trigger--compact { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: var(--workspace-control-h); padding-inline: 14px; border-radius: var(--workspace-control-radius); font-size: 12px; line-height: 1; white-space: nowrap; }
.web-app .workspace-filter-trigger > svg { color: var(--color-brand-600); }
.web-app .workspace-filter-trigger:hover { border-color: var(--color-brand-300); background: var(--color-brand-25); color: var(--color-brand-700); }
.web-app .workspace-filter-control--active .workspace-filter-trigger { border-color: var(--color-brand-300); background: var(--color-brand-50); color: var(--color-brand-700); }
.web-app .workspace-filter-trigger__count { display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; padding: 0 5px; border-radius: 999px; background: var(--color-brand-600); color: #fff; font-size: 10px; font-variant-numeric: tabular-nums; }
.web-app .workspace-filter-trigger__count:empty { display: none; }
.web-app .workspace-drawer-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: var(--workspace-control-h); padding-inline: 14px; border: 1px solid var(--color-gray-300); border-radius: var(--workspace-control-radius); background: var(--color-surface); color: var(--color-gray-700); font-size: 12px; font-weight: 650; line-height: 1; white-space: nowrap; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; }
.web-app .workspace-drawer-trigger:hover { border-color: var(--color-brand-300); background: var(--color-brand-25); color: var(--color-brand-700); }
.web-app .workspace-drawer-trigger > svg { color: var(--color-brand-600); }
.web-app .workspace-applied-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.web-app .workspace-applied-filters .filter-chip { flex: 0 0 auto; max-width: 22rem; white-space: nowrap; border-color: var(--color-brand-200); background: var(--color-brand-25); font-size: 11px; }

/* Popups: one shape, one elevation, one palette. Filters, columns and the
   legacy filter bar all slide in through the same drawer so they read as a
   single surface language rather than three competing ones. */
.web-app .workspace-drawer {
  position: fixed;
  inset: 0 0 0 auto !important;
  box-sizing: border-box;
  width: min(520px, 100vw);
  height: 100dvh;
  min-height: 100dvh;
  min-width: 0;
  max-width: none !important;
  max-height: none;
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
  border: 0 !important;
  border-inline-start: 1px solid var(--color-gray-200) !important;
  border-radius: 0 !important;
  background: var(--color-surface);
  color: var(--color-gray-900);
  box-shadow: var(--workspace-popup-shadow);
}
.web-app .workspace-drawer:modal { margin: 0 0 0 auto !important; }
.web-app .workspace-drawer[open] { display: flex; flex-direction: column; animation: workspace-drawer-in 220ms cubic-bezier(.22, 1, .36, 1); }
.web-app .workspace-drawer::backdrop { background: rgb(15 30 46 / .5); backdrop-filter: blur(3px); }
html[dir="rtl"] .web-app .workspace-drawer[open] { animation-name: workspace-drawer-in-rtl; }
@keyframes workspace-drawer-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes workspace-drawer-in-rtl { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.web-app .workspace-drawer__header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--color-gray-200); background: linear-gradient(135deg, var(--color-brand-25), var(--color-surface) 62%); }
.web-app .workspace-drawer__eyebrow { display: block; margin-bottom: 5px; color: var(--color-brand-600); font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.web-app .workspace-drawer__title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--color-gray-900); }
.web-app .workspace-drawer__description { margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--color-gray-500); }
.web-app .workspace-drawer__close { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -6px 0 0; border: 1px solid transparent; border-radius: 10px; background: color-mix(in srgb, var(--color-surface) 70%, transparent); color: var(--color-gray-500); font-size: 20px; line-height: 1; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.web-app .workspace-drawer__close:hover { border-color: var(--color-gray-200); background: var(--color-surface); color: var(--color-gray-900); }
.web-app .workspace-drawer__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 14px; width: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 20px; background: var(--color-canvas); }
.web-app .workspace-drawer__group { border: 1px solid var(--color-gray-200); border-radius: 14px; padding: 14px; background: var(--color-surface); box-shadow: 0 1px 2px rgb(15 23 42 / .03); }
.web-app .workspace-drawer__group-legend { padding-inline: 6px; color: var(--color-gray-600); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.web-app .workspace-drawer__group-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.web-app .workspace-drawer .filter-label { margin-bottom: 5px; color: var(--color-gray-600); font-size: 11px; font-weight: 600; }
.web-app .workspace-drawer .form-input { min-height: 40px; background: var(--color-surface); }
.web-app .workspace-drawer__footer { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; width: 100%; gap: 10px; padding: 14px 20px 16px; border-top: 1px solid var(--color-gray-200); background: var(--color-surface); box-shadow: 0 -8px 18px rgb(15 23 42 / .035); }
.web-app .workspace-drawer__footer > :first-child { margin-inline-end: auto; }
.web-app .workspace-drawer__list { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-y: auto; padding: 10px 20px 18px; background: var(--color-canvas); }
.web-app .workspace-drawer__list > p { margin-bottom: 10px; font-size: 12px; line-height: 1.6; color: var(--color-gray-500); }
.web-app .workspace-drawer__option { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 13px; color: var(--color-gray-700); cursor: pointer; }
.web-app .workspace-drawer__option:hover { background: var(--color-gray-100); }
.web-app .workspace-drawer__option:has(:checked) { background: var(--color-brand-50); color: var(--color-brand-700); }
.web-app .workspace-drawer__option input { accent-color: var(--color-brand-600); }
.web-app .workspace-drawer__options-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.web-app .workspace-drawer__options-grid .workspace-drawer__option { box-sizing: border-box; min-width: 0; height: 32px !important; min-height: 32px !important; max-height: 32px; align-items: center; overflow: hidden; border: 1px solid var(--color-gray-200); background: var(--color-surface); padding: 4px 6px; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; text-overflow: ellipsis; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; }
.web-app .workspace-drawer__options-grid .workspace-drawer__option input { appearance: none; flex: 0 0 auto; width: 14px; height: 14px !important; min-height: 14px !important; margin: 0; border: 1.5px solid var(--color-gray-400); border-radius: 3px; background: var(--color-surface); background-position: center; background-repeat: no-repeat; background-size: 8px; }
.web-app .workspace-drawer__options-grid .workspace-drawer__option input:checked { border-color: var(--color-brand-600); background-color: var(--color-brand-600); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6 2.4 2.4L10 2.8' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E"); }
.web-app .workspace-drawer__options-grid .workspace-drawer__option input:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 2px; }
.web-app .workspace-drawer__options-grid .workspace-drawer__option:hover { border-color: var(--color-brand-300); background: var(--color-brand-25); }
.web-app .workspace-drawer__options-grid .workspace-drawer__option:has(:checked) { border-color: var(--color-brand-200); }
@media (max-width: 640px) { .web-app .workspace-drawer__options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.web-app .workspace-drawer__search { position: relative; flex: 0 0 auto; display: flex; align-items: center; margin-bottom: 12px; }
.web-app .workspace-drawer__search > svg { position: absolute; inset-inline-start: 12px; color: var(--color-gray-400); pointer-events: none; }
.web-app .workspace-drawer__search .form-input { padding-inline-start: 36px; }
.web-app .workspace-legacy-filter-form > .workspace-drawer__footer { grid-column: 1 / -1; margin: 6px -24px -24px; }
.web-app .workspace-legacy-filter-control { display: flex; justify-content: flex-end; padding: 10px 20px; border-bottom: 1px solid var(--color-gray-200); background: var(--color-gray-25); }
.web-app .workspace-card-header-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; margin-inline-start: auto; }
.web-app .card-header > .workspace-card-header-actions .workspace-legacy-filter-control { padding: 0; border: 0; background: transparent; }
.web-app .rate-table-card > .card-header { min-height: 60px; padding: 10px 16px; }
.web-app .rate-table-card > .card-header .card-subtitle { margin-top: 2px; }
.web-app .rate-calculator-tabs-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.web-app .rate-calculator-tabs-row .tab-list { min-width: 0; }
.web-app .rate-calculator-info { position: relative; flex: 0 0 auto; }
.web-app .rate-calculator-info__trigger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--color-brand-200); border-radius: 10px; background: var(--color-brand-25); color: var(--color-brand-600); }
.web-app .rate-calculator-info__trigger:hover, .web-app .rate-calculator-info:focus-within .rate-calculator-info__trigger { border-color: var(--color-brand-300); background: var(--color-brand-50); color: var(--color-brand-700); }
.web-app .rate-calculator-info__trigger:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 2px; }
.web-app .rate-calculator-info__content { position: absolute; z-index: 20; top: calc(100% + 8px); inset-inline-end: 0; width: min(340px, calc(100vw - 40px)); padding: 10px 12px; border: 1px solid var(--color-gray-200); border-radius: 10px; background: var(--color-surface); box-shadow: var(--workspace-popup-shadow); color: var(--color-gray-600); font-size: 12px; line-height: 1.5; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 150ms ease, transform 150ms ease; }
.web-app .rate-calculator-info:hover .rate-calculator-info__content, .web-app .rate-calculator-info:focus-within .rate-calculator-info__content { opacity: 1; pointer-events: auto; transform: translateY(0); }
.web-app .rate-calculator-info__content a { color: var(--color-brand-600); font-weight: 650; text-decoration: underline; }
@media (max-width: 640px) {
  .web-app .workspace-card-header-actions { flex-wrap: wrap; }
  .web-app .rate-table-card > .card-header { align-items: flex-start; }
  .web-app .rate-calculator-tabs-row .tab-list { overflow-x: auto; scrollbar-width: none; }
  .web-app .rate-calculator-tabs-row .tab-list::-webkit-scrollbar { display: none; }
}
.web-app .workspace-summary > summary { cursor: pointer; padding: 10px 16px; font-size: 12px; font-weight: 600; color: var(--color-gray-500); }
.web-app .workspace-summary { border: 1px solid var(--color-gray-200); border-radius: 12px; background: var(--color-surface); }
.web-app .workspace-summary[open] > summary { margin-bottom: 12px; border-bottom: 1px solid var(--color-gray-200); }
.web-app .workspace-drawer__direct-filters { margin: 0; overflow: hidden; }
.web-app .workspace-drawer__direct-filters .dashboard-filter-panel__header { padding: 16px; }
.web-app .workspace-drawer__direct-filters .dashboard-filter-options { flex-wrap: wrap; overflow: visible; padding: 12px; }
.web-app .workspace-drawer__direct-filters .dashboard-filter-option { min-height: 40px; }
.web-app .workspace-table { table-layout: fixed; width: 100%; min-width: 0; }
.web-app .data-table { border-collapse: separate; border-spacing: 0; }
.web-app .data-table thead th { position: sticky; top: 64px; z-index: 4; border-bottom-color: var(--color-gray-200); background: var(--color-gray-50); box-shadow: 0 1px 0 var(--color-gray-200); }
.web-app .data-table .th { padding-block: 11px; color: var(--color-gray-600); font-size: 10px; font-weight: 700; letter-spacing: .07em; }
.web-app .data-table .td { padding-block: 12px; }
.web-app .data-table tbody tr { transition: background-color 140ms ease; }
.web-app .data-table tbody tr:hover { background: var(--color-brand-25); }
.web-app .data-table tbody tr + tr td { border-top-color: color-mix(in srgb, var(--color-gray-200) 72%, transparent); }
.web-app .workspace-table-region--all-columns { overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; }
.web-app .workspace-table-region--all-columns::-webkit-scrollbar { display: none; height: 0; }
.web-app .workspace-table-region--scrollable { cursor: grab; scrollbar-gutter: stable; scrollbar-color: var(--color-brand-400) var(--color-gray-100); }
.web-app .workspace-table-region--scrollable:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: -2px; }
.web-app .workspace-table-region--scrollable.workspace-table-region--dragging { cursor: grabbing; user-select: none; }
.web-app .workspace-table--all-columns { width: max-content; min-width: 100%; table-layout: auto; }
.web-app .workspace-table--all-columns th,
.web-app .workspace-table--all-columns td { min-width: 132px !important; max-width: 260px; white-space: normal !important; }
.web-app .workspace-table-region--scrollable::after { content: "Scroll horizontally, drag with a mouse, or use Shift + mouse wheel to see more columns"; display: block; width: max-content; min-width: 100%; padding: 6px 14px; color: var(--color-gray-500); font-size: 11px; font-weight: 600; text-align: start; background: var(--color-gray-25); border-top: 1px solid var(--color-gray-200); }
.web-app .workspace-table th, .web-app .workspace-table td { min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere; padding: 12px !important; position: static !important; }
.web-app .workspace-table th { font-size: 11px; line-height: 1.5; }
.web-app .workspace-table td > *, .web-app .workspace-table td .min-w-0 { max-width: 100%; }
.web-app .workspace-table td .truncate { white-space: normal; overflow: visible; }
.web-app .workspace-table td .whitespace-nowrap { white-space: normal; }
.web-app .workspace-table td .min-w-\[180px\] { min-width: 0; }
.web-app .workspace-table td .flex { flex-wrap: wrap; }
.web-app .workspace-table td .btn { white-space: normal; height: auto; min-height: 30px; }
.web-app .workspace-row-details-button { display: block; margin-top: 8px; padding: 4px 0; font-size: 11px; font-weight: 600; color: var(--color-brand-600); cursor: pointer; }
.web-app .workspace-detail-row { background: var(--color-gray-25); }
.web-app .workspace-row-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; padding: 8px; }
.web-app .workspace-row-details dt { font-size: 10px; font-weight: 600; color: var(--color-gray-500); margin-bottom: 4px; }
.web-app .workspace-row-details dd { font-size: 12px; color: var(--color-gray-800); overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .web-app .workspace-table, .web-app .workspace-table tbody { display: block; }
  .web-app .workspace-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .web-app .workspace-table tbody > tr { display: block; padding: 12px; border-bottom: 1px solid var(--color-gray-200); }
  .web-app .workspace-table td { display: grid; grid-template-columns: minmax(80px, 30%) minmax(0, 1fr); gap: 12px; align-items: start; border: 0; padding: 6px !important; }
  .web-app .workspace-table td::before { content: attr(data-label); color: var(--color-gray-500); font-size: 11px; font-weight: 500; }
  .web-app .workspace-table .workspace-detail-row td { display: block; }
  .web-app .workspace-table .workspace-detail-row td::before { display: none; }
  .web-app .workspace-table--all-columns { display: table; min-width: max-content; }
  .web-app .workspace-table--all-columns tbody { display: table-row-group; }
  .web-app .workspace-table--all-columns thead { position: static; width: auto; height: auto; padding: 0; overflow: visible; clip-path: none; }
  .web-app .workspace-table--all-columns tbody > tr { display: table-row; padding: 0; border-bottom: 0; }
  .web-app .workspace-table--all-columns td { display: table-cell; padding: 10px !important; border-bottom: 1px solid var(--color-gray-200); }
  .web-app .workspace-table--all-columns td::before { display: none; }
  .web-app .workspace-row-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-app #app-sidebar { width: 272px; }
  .web-app .dataset-toolbar__actions { flex-wrap: wrap; }
  .web-app .data-table thead th { position: static; }
  .web-app .workspace-drawer { inset: 0 !important; width: 100%; height: 100dvh; min-height: 100dvh; border: 0 !important; border-radius: 0 !important; }
  .web-app .workspace-drawer[open], html[dir="rtl"] .web-app .workspace-drawer[open] { animation-name: workspace-drawer-in; }
  .web-app .workspace-drawer__header { padding: 16px; }
  .web-app .workspace-drawer__body { padding: 16px; }
  .web-app .workspace-drawer__footer { padding: 12px 16px 16px; }
  .web-app .workspace-drawer__group { padding: 12px; }
  .web-app .workspace-drawer__options-grid { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .web-app .workspace-drawer__group-fields, .web-app .workspace-row-details { grid-template-columns: 1fr; }
  .web-app .workspace-filter-trigger, .web-app .workspace-drawer-trigger { flex: 0 0 auto; }
  .web-app .workspace-drawer__footer > :not(:first-child) { flex: 1 1 0; }
}
.web-app .workspace-compact-stats .stat { padding: 14px 18px; }
.web-app .workspace-compact-stats .stat-value { font-size: 22px; margin-top: 4px; }
.web-app .workspace-dashboard-filter { border: 1px solid var(--color-gray-200); border-radius: 12px; background: var(--color-surface); }
@media (max-width: 767px) {
  .web-app .workspace-row-details-button { grid-column: 2; justify-self: start; }
}
/* The drawer is one flex column, so its header and footer stay pinned and
   only the body scrolls — including on short screens. */
.web-app .workspace-drawer > form { display: flex !important; flex: 1 1 auto; flex-flow: column nowrap !important; align-items: stretch !important; gap: 0 !important; width: 100%; min-height: 0; overflow: hidden; }
.web-app .workspace-drawer .filter-field { width: 100%; }
.web-app .workspace-table.fleet-table thead th:nth-child(2) { width: 28%; }
.web-app .workspace-table.fleet-table tbody td:nth-child(2) > .flex { flex-wrap: nowrap; }

@media (min-width: 480px) and (max-width: 767px) {
  .web-app .workspace-drawer__options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* An empty result should still fit the available screen; it is not enhanced
   into cards because it has no data rows yet. */
.web-app :is(.card, .dashboard-panel, .overflow-x-auto) { min-width: 0; }
@media (max-width: 767px) {
  .web-app .overflow-x-auto > .data-table:not(.workspace-table) { width: 100%; min-width: 0; table-layout: fixed; }
}

/* Operational shortcuts reuse the drawer's filters and leave search intact. */
.web-app .workspace-quick-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--color-gray-200); }
.web-app .workspace-quick-filters__label { margin-inline-end: 6px; font-size: 12px; color: var(--color-gray-500); }
.web-app .workspace-quick-filter { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid transparent; border-radius: 8px; color: var(--color-gray-600); font-size: 12px; font-weight: 600; }
.web-app .workspace-quick-filter:hover { background: var(--color-gray-50); }
.web-app .workspace-quick-filter[aria-current] { border-color: var(--color-brand-200); color: var(--color-brand-700); background: var(--color-brand-50); }
.web-app .workspace-clear-filters { padding: 8px; color: var(--color-brand-600); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.web-app .workspace-search-clear { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-inline-start: 4px; border-radius: 8px; color: var(--color-gray-500); font-size: 20px; }
.web-app .workspace-search-clear:hover { background: var(--color-gray-100); }
.web-app .workspace-option-search { margin-bottom: 6px; }
:is(.web-app, .native-app) .empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.web-app .template-editor-body { padding: 0; }
.web-app .template-preview { min-width: 0; overflow-wrap: anywhere; }
.web-app .template-preview img { max-width: 100%; height: auto; }
@media (max-width: 640px) {
  .web-app .workspace-quick-filter { min-height: 44px; }
  .web-app .workspace-quick-filters { padding-inline: 12px; }
  .web-app .workspace-quick-filters__label { flex-basis: 100%; }
  .web-app .workspace-search-clear { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .web-app .form-section .form-input { transition: none; }
}