/* One component vocabulary used by Owner, Shop and Driver. Layout lives in each screen. */
body.cvr-app{font-family:var(--cvr-font);background:var(--cvr-canvas);color:var(--cvr-ink)}
.cvr-app .cvr-button{min-height:44px;min-width:44px;border-radius:var(--cvr-radius-small)!important;font-family:var(--cvr-font);font-weight:750;line-height:1.25;touch-action:manipulation;background:var(--cvr-surface-muted)!important;color:var(--cvr-ink)!important;border:1px solid var(--cvr-line)!important;box-shadow:none}
.cvr-app .cvr-button.cvr-button-primary{background:var(--cvr-action)!important;color:var(--cvr-on-action)!important;border-color:var(--cvr-action)!important}
.cvr-app .cvr-button.cvr-button-danger{background:var(--cvr-danger-bg)!important;color:var(--cvr-danger)!important;border-color:var(--cvr-danger-line)!important}
.cvr-app .cvr-button[aria-pressed=true]{background:var(--cvr-brand)!important;color:var(--cvr-on-action)!important}
.cvr-app .cvr-button:disabled{opacity:.5;cursor:not-allowed;transform:none}
.cvr-app .cvr-button:not(:disabled):active{filter:brightness(.94)}
.cvr-app :is(.cvr-button,.cvr-field,.cvr-nav-item):focus-visible{outline:3px solid var(--cvr-action)!important;outline-offset:3px}
.cvr-app .cvr-field{font-family:var(--cvr-font);color:var(--cvr-ink)!important;background:var(--cvr-surface)!important;border:1px solid var(--cvr-line)!important;border-radius:var(--cvr-radius-small)!important;min-height:44px;max-width:100%;padding:10px}
.cvr-app input:is([type=checkbox],[type=radio]){accent-color:var(--cvr-action);min-width:22px;min-height:22px}
.cvr-app .cvr-dialog{background:var(--cvr-surface)!important;color:var(--cvr-ink)!important;border:1px solid var(--cvr-line);border-radius:var(--cvr-radius)!important;box-shadow:var(--cvr-shadow)}
.cvr-dialog::backdrop{background:var(--cvr-backdrop)!important}
.cvr-app :is(.dialog-head,.shop-task-head){background:var(--cvr-surface)!important;color:var(--cvr-ink)!important;border-color:var(--cvr-line)!important}
.cvr-app .cvr-message{padding:12px 14px;border-radius:var(--cvr-radius-small);line-height:1.45}
.cvr-app .cvr-message-error{background:var(--cvr-danger-bg)!important;color:var(--cvr-danger)!important;border:1px solid var(--cvr-danger-line)}
.cvr-app .cvr-message-warning{background:var(--cvr-warning-bg)!important;color:var(--cvr-warning)!important;border:1px solid var(--cvr-warning-line)}
.cvr-app .cvr-empty{padding:20px;border:1px dashed var(--cvr-line);border-radius:var(--cvr-radius);color:var(--cvr-muted)!important;background:var(--cvr-surface)!important;line-height:1.5;text-align:center}
.cvr-app :is(.card,.route-card,.stop-card,.pay-worker-card,.shop-sort-card,.home-today){background:var(--cvr-surface);color:var(--cvr-ink);border:1px solid var(--cvr-line);border-radius:var(--cvr-radius);box-shadow:var(--cvr-shadow)}
.cvr-app :is(.muted,.sub,small){color:var(--cvr-muted)}
#shopScreen{color:var(--cvr-ink);background:var(--cvr-canvas);border-radius:0}
#shopScreen :is(.shop-task,.shop-dialog,.shop-quick-window,.quick-window-tools){background:var(--cvr-surface);color:var(--cvr-ink)}
#shopScreen .shop-launcher .cvr-button{background:var(--cvr-surface)!important;box-shadow:var(--cvr-shadow);border-radius:var(--cvr-radius)!important}
#shopScreen .shop-launcher .cvr-button-primary{background:var(--cvr-action)!important;color:var(--cvr-on-action)!important}
#shopScreen .shop-launcher .cvr-button-primary small{color:var(--cvr-on-action)}
#shopScreen .shop-status{background:var(--cvr-success-bg);color:var(--cvr-success)}
#shopScreen .sort-pending .quick-sort-readybadge{background:var(--cvr-warning-bg);color:var(--cvr-warning)}
#shopScreen .checkout-total{background:var(--cvr-surface-muted);border-color:var(--cvr-line)}
#shopScreen .checkout-total [data-c-value]{background:transparent;color:var(--cvr-brand)}
@media(max-width:600px){.cvr-app .cvr-dialog{max-width:calc(100vw - 16px)}#shopScreen .shop-quick-window{max-width:100vw;border-radius:0!important}}
@media print{body.cvr-app{background:var(--cvr-print-paper)!important;color:var(--cvr-print-ink)!important}}
/* Shared meaning for progress and status, independent of screen layout. */
.cvr-app .sync-bar{background:var(--cvr-success-bg)}
.cvr-app .sync-bar:has(.offline){background:var(--cvr-warning-bg)}
.cvr-app .progress-track{background:var(--cvr-surface-muted)}
.cvr-app .progress-track span{background:var(--cvr-action)}
.cvr-app .route-status.ready{background:var(--cvr-success-bg);color:var(--cvr-success)}
.cvr-app .route-status.in_progress{background:var(--cvr-warning-bg);color:var(--cvr-warning)}
.cvr-app :is(.route-status.closed,.route-status.finished){background:var(--cvr-surface-muted);color:var(--cvr-muted)}
.cvr-app .pay-worker-totals .pay-balance{background:var(--cvr-success-bg)}
.cvr-app .cvr-page-navigation{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px;background:var(--cvr-surface);border-bottom:1px solid var(--cvr-line);min-height:64px}
.cvr-page-navigation [data-cvr-location]{font-size:14px;font-weight:650;color:var(--cvr-muted);text-align:right;overflow-wrap:anywhere}
.cvr-app .cvr-nav-control{flex:0 0 auto;min-width:76px!important;width:auto!important;min-height:44px!important;margin:0!important;font-size:14px!important;padding:10px 14px!important}
.cvr-app .cvr-close{align-self:flex-start}
.cvr-app :is(.dialog-head,.stop-dialog-top,.totals-heading,.shop-task-head,.quick-window-tools){display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
@media(max-width:600px){.cvr-app .cvr-page-navigation{padding:8px 12px}.cvr-page-navigation [data-cvr-location]{font-size:13px}}