:root { color: #25313d; background: #f7f9fc; }
body { background-color: #f7f9fc; background-image: linear-gradient(#e9eef3 1px, transparent 1px), linear-gradient(90deg, #e9eef3 1px, transparent 1px); background-size: 24px 24px; }
.analysis-shell { min-height: 100vh; }
.analysis-header { max-width: 1490px; margin: 0 auto; padding: 25px 32px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.analysis-title { display: flex; align-items: flex-start; gap: 12px; }
.back-to-workspace { width: 32px; height: 32px; display: grid; place-items: center; color: #67747f; border: 1px solid #d9e1e7; background: #ffffff; text-decoration: none; }
.back-to-workspace svg { width: 16px; }.analysis-title h1 { color: #263140; font-size: 27px; line-height: 32px; }.analysis-title h1 strong { color: #ee8300; font-weight: 600; }.analysis-title p { margin: 3px 0 0; color: #7c8793; font-size: 12px; }
.header-context { display: flex; align-items: flex-end; gap: 16px; }.context-date { display: grid; grid-template-columns: auto auto; gap: 3px 10px; padding: 2px 0; color: #84909b; font-size: 11px; text-align: right; }.context-date b { color: #4d5965; font-weight: 500; }.context-date span:last-child { grid-column: 1 / -1; }
.analysis-main { max-width: 1490px; margin: 0 auto; padding: 0 32px 54px; }
.top-actions { gap: 7px; }.icon-command, .primary-command { min-height: 33px; border-radius: 5px; font-size: 12px; }.primary-command { background: #25323f; border-color: #25323f; }
.settings-button { min-height: 33px; border-radius: 5px; }.settings-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; color: #25313d; background: #ffffff; border: 1px solid #dce4ea; border-radius: 8px; box-shadow: 0 18px 48px rgba(31, 46, 59, .22); }.settings-dialog::backdrop { background: rgba(30, 44, 56, .32); }.settings-dialog form { padding: 20px; }.settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }.settings-heading h2 { font-size: 17px; }.settings-heading .eyebrow { margin-bottom: 4px; }.settings-field { display: grid; gap: 8px; color: #53616c; font-size: 12px; }.settings-field input { width: 100%; min-height: 38px; font-family: "IBM Plex Sans", "Noto Sans SC", sans-serif; }.settings-note { margin: 11px 0 0; color: #8c969e; font-size: 11px; line-height: 1.6; }.settings-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }.settings-actions .icon-command, .settings-actions .primary-command { padding: 0 13px; }.danger-command { min-height: 33px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; margin-right: auto; color: #a34c3d; background: #fff8f5; border: 1px solid #ebc8ba; border-radius: 5px; font: inherit; font-size: 12px; }.danger-command:hover { color: #803a2d; background: #ffefe8; }.danger-command svg { width: 14px; }
.sync-dates-dialog { width: min(500px, calc(100vw - 32px)); }.sync-dates-note { margin: -7px 0 13px; color: #87929b; font-size: 12px; line-height: 1.55; }.sync-dates-list { display: grid; gap: 7px; max-height: min(360px, 48vh); overflow: auto; padding-right: 3px; }.sync-date-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 42px; padding: 0 11px; color: #4f5e68; background: #f8fafb; border: 1px solid #e1e7eb; border-radius: 5px; cursor: pointer; }.sync-date-option:has(input:checked) { color: #226f65; background: #f0f8f6; border-color: #a7d6ce; }.sync-date-option input { width: 15px; height: 15px; min-height: 0; margin: 0 9px 0 0; accent-color: #16a494; }.sync-date-option span { display: flex; align-items: center; font-size: 13px; }.sync-date-option small { color: #89949c; font-size: 11px; }.sync-dates-count { margin-right: auto; color: #75818a; font-size: 12px; }
.file-drop-overlay { position: fixed; z-index: 20; inset: 0; display: none; place-items: center; padding: 24px; background: rgba(32, 45, 56, .18); pointer-events: none; }.file-drop-overlay.active { display: grid; }.file-drop-target { width: min(540px, 100%); min-height: 220px; display: grid; place-items: center; align-content: center; gap: 10px; color: #3f5960; background: #ffffff; border: 2px dashed #16a494; border-radius: 8px; box-shadow: 0 16px 42px rgba(32, 45, 56, .16); }.file-drop-target svg { width: 30px; height: 30px; color: #16a494; }.file-drop-target strong { font-size: 16px; font-weight: 500; }.file-drop-target span { color: #86919a; font-size: 12px; }
.analysis-filter { min-height: 48px; margin-bottom: 24px; border-radius: 7px; border-color: #dfe6ec; box-shadow: 0 4px 12px rgba(42, 54, 68, .035); }.analysis-filter select, .analysis-filter input { min-height: 28px; border-color: #d9e1e7; font-size: 12px; }.coverage-label { border-radius: 3px; color: #627078; background: #edf1f4; }
.customer-filter { position: relative; display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: #66767b; }.filter-field-label { flex: 0 0 auto; }.customer-filter-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: min(190px, 30vw); min-height: 28px; padding: 0 8px; overflow: hidden; color: #25313d; background: #ffffff; border: 1px solid #d9e1e7; border-radius: 3px; font-size: 12px; text-align: left; }.customer-filter-button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.customer-filter-button svg { flex: 0 0 auto; width: 14px; color: #77848e; }.customer-filter-button[aria-expanded="true"] { border-color: #6caea3; box-shadow: 0 0 0 2px rgba(22, 164, 148, .12); }.customer-filter-menu { position: absolute; z-index: 12; top: calc(100% + 7px); left: 28px; width: min(310px, calc(100vw - 48px)); padding: 9px; background: #ffffff; border: 1px solid #d8e1e7; border-radius: 6px; box-shadow: 0 12px 28px rgba(38, 53, 67, .16); }.customer-filter-menu[hidden] { display: none; }.customer-filter-search { display: flex !important; align-items: center; gap: 6px; min-height: 31px; padding: 0 8px; color: #77848e !important; background: #f7f9fa; border: 1px solid #e1e7eb; border-radius: 4px; }.customer-filter-search svg { width: 14px; }.customer-filter-search input { width: 100%; min-height: 27px !important; padding: 0 !important; background: transparent; border: 0 !important; outline: 0; }.customer-filter-meta { display: flex; align-items: center; justify-content: space-between; margin: 8px 1px 6px; color: #87929a; font-size: 11px; }.customer-filter-meta button { padding: 0; color: #397b70; background: transparent; border: 0; font: inherit; }.customer-filter-meta button:hover { color: #176d60; text-decoration: underline; }.customer-filter-options { display: grid; gap: 2px; max-height: 236px; overflow: auto; padding-right: 2px; }.customer-filter-option { display: flex !important; align-items: center; gap: 8px !important; min-height: 31px; padding: 0 7px; color: #4d5b65 !important; border-radius: 3px; cursor: pointer; }.customer-filter-option:hover { background: #f3f7f6; }.customer-filter-option:has(input:checked) { color: #216f65 !important; background: #edf7f5; }.customer-filter-option input { width: 14px; min-height: 14px !important; height: 14px; padding: 0; margin: 0; accent-color: #16a494; }.customer-filter-empty { margin: 10px 0; color: #8c969e; font-size: 12px; text-align: center; }
.query-progress { margin: -14px 0 24px; padding: 10px 13px; background: #ffffff; border: 1px solid #dfe6ec; border-radius: 7px; box-shadow: 0 3px 10px rgba(43, 58, 75, .03); }.query-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #5a6873; font-size: 12px; }.query-progress-actions { display: flex; align-items: center; gap: 10px; }.query-progress-eta { color: #8a969f; font-variant-numeric: tabular-nums; }.query-stop-button { min-height: 25px; padding: 0 9px; color: #a2553a; background: #fff8f5; border: 1px solid #ebc8ba; border-radius: 4px; font: inherit; cursor: pointer; }.query-stop-button:hover { color: #813f2a; background: #ffefe8; }.query-stop-button:disabled { color: #a7afb5; background: #f4f6f7; border-color: #e1e6e9; cursor: default; }.query-progress-track { height: 6px; margin-top: 8px; overflow: hidden; background: #e7edef; border-radius: 3px; }.query-progress-fill, #query-progress-fill { display: block; width: 0; height: 100%; background: #16a494; box-shadow: 0 0 0 1px rgba(8, 118, 102, .08); transition: width .2s ease; }.query-progress.is-stopped #query-progress-fill { background: #d88424; }.query-progress.is-complete #query-progress-fill { background: #16a494; }
.section-heading { align-items: center; margin: 0 0 10px; }.section-heading .eyebrow { display: none; }.section-heading h2 { color: #313d49; font-size: 16px; }.section-heading p { color: #929ca5; }.trend-heading { margin-top: 25px; }
.funnel-panel { padding: 8px 17px 16px; }.funnel-chart { min-height: 220px; }.funnel-pending-stages { display: flex; align-items: center; justify-content: center; gap: 13px; max-width: 600px; margin: -4px auto 0; }.funnel-pending-stages > div { display: grid; grid-template-columns: auto auto; gap: 3px 10px; min-width: 210px; padding: 10px 13px; color: #687681; background: #fbfcfd; border: 1px dashed #cbd5dc; border-radius: 5px; }.funnel-pending-stages span { font-size: 12px; }.funnel-pending-stages strong { justify-self: end; color: #9a7851; font-size: 12px; font-weight: 500; }.funnel-pending-stages small { grid-column: 1 / -1; color: #99a3ab; font-size: 10px; }.funnel-pending-stages > svg { width: 16px; color: #a5afb6; }.bid-coverage-heading { margin-top: 25px; }.bid-coverage-grid { grid-template-columns: .78fr 1.22fr; margin-top: 0; }.bid-status-chart { min-height: 250px; }.customer-bid-chart { min-height: 250px; }
.trend-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }.trend-card { min-width: 0; padding: 14px 17px 10px; background: #ffffff; border: 1px solid #e0e6ec; border-radius: 8px; box-shadow: 0 3px 12px rgba(43, 58, 75, .035); }.chart-heading { display: flex; align-items: center; gap: 7px; min-height: 25px; }.chart-heading h3 { margin: 0; color: #3a4651; font-size: 13px; font-weight: 500; }.chart-heading > span:last-child { margin-left: auto; color: #8a959e; font-size: 11px; }.chart-key { width: 7px; height: 7px; border-radius: 2px; }.chart-key.teal { background: #16a494; }.time-chart { min-height: 172px; }.time-chart svg { display: block; width: 100%; height: 172px; }.time-chart text { fill: #85909a; font-family: "IBM Plex Sans", "Noto Sans SC", sans-serif; font-size: 10px; }
.dispatch-heading { margin-top: 25px; }.dispatch-grid { display: grid; grid-template-columns: .7fr .7fr 1.6fr; gap: 14px; }.dispatch-metric, .dispatch-distribution { min-width: 0; min-height: 126px; padding: 16px 17px; background: #ffffff; border: 1px dashed #cbd5dc; border-radius: 8px; }.dispatch-metric { display: flex; flex-direction: column; justify-content: center; }.dispatch-metric span, .dispatch-distribution span { color: #5f6d78; font-size: 12px; }.dispatch-metric strong { margin: 10px 0 5px; color: #9a7851; font-size: 22px; font-weight: 500; }.dispatch-metric small, .dispatch-distribution small { color: #9aa4ac; font-size: 11px; }.dispatch-distribution { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; }.dispatch-distribution > div:first-child { display: grid; gap: 4px; }.dispatch-placeholder { min-height: 76px; display: grid; place-items: center; align-content: center; gap: 5px; color: #a4adb4; background: repeating-linear-gradient(135deg, #fafcfd, #fafcfd 7px, #f4f7f8 7px, #f4f7f8 14px); border: 1px dashed #d6dee3; }.dispatch-placeholder svg { width: 17px; }.dispatch-placeholder span { color: #9da7ae; font-size: 11px; }
.attention-strip { display: flex; align-items: center; gap: 9px; min-height: 36px; margin: 16px 0; padding: 0 13px; color: #986454; background: #fff6f0; border: 1px solid #f1d7ca; border-radius: 7px; font-size: 12px; }.attention-strip svg { width: 15px; color: #ea7758; }.attention-strip strong { color: #c45d42; font-weight: 500; }.attention-strip span { color: #9a7c71; }
.attention-orders-panel { margin-top: 14px; }.attention-table-wrap { margin: 0 -17px; }.attention-orders-table { min-width: 920px; }.attention-orders-table th { padding: 9px 17px; }.attention-orders-table td { padding: 11px 17px; }.attention-orders-table tbody tr { transition: background-color .15s ease; }.attention-orders-table tbody tr:hover { background: #fbfcfd; }.attention-orders-table .order-no { display: block; color: #33404b; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }.attention-orders-table .subtext { display: block; margin-top: 3px; color: #89949d; font-size: 11px; }.attention-duration { color: #5d6a75; font-variant-numeric: tabular-nums; white-space: nowrap; }.attention-action { color: #546270; font-size: 12px; white-space: nowrap; }.attention-orders-panel .panel-note { margin: 12px 0 0; }
.content-grid { gap: 14px; margin-top: 14px; }.panel { padding: 16px 17px; border-color: #e0e6ec; border-radius: 8px; box-shadow: 0 3px 12px rgba(43, 58, 75, .035); }.panel-heading { margin-bottom: 14px; }.panel-heading h2 { font-size: 15px; }.data-state { border-radius: 3px; color: #7d8993; background: #edf1f4; }.analysis-middle { grid-template-columns: 1.05fr .95fr; }
.group-count-chart { height: 245px; }
.competition-list { border-color: #e7ebef; }.competition-item { min-height: 88px; border-color: #e7ebef; }.competition-item span { color: #70808a; }.competition-item strong { color: #27333e; font-size: 22px; }.panel-note { color: #929da5; }
.compare-grid { grid-template-columns: 1fr 1fr; }.analysis-table { min-width: 500px; }.analysis-table th { padding: 9px 7px; background: #f6f8fa; color: #77838e; }.analysis-table td { padding: 10px 7px; }.bar-rate { border-radius: 3px; color: #397b70; background: #eef7f5; }.bar-rate.no-data { color: #97a0a7; background: #f2f4f5; }
.metric-help { position: relative; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 4px; vertical-align: 1px; color: #74818b !important; background: #eef2f4; border: 1px solid #d5dde2; border-radius: 50%; font-family: "IBM Plex Sans", "Noto Sans SC", sans-serif; font-size: 10px !important; font-weight: 500; line-height: 1; cursor: help; }.metric-help::after { content: attr(data-tooltip); position: absolute; z-index: 20; bottom: calc(100% + 7px); left: 50%; width: max-content; max-width: min(260px, calc(100vw - 36px)); padding: 7px 9px; color: #ffffff; background: #25323f; border-radius: 4px; box-shadow: 0 5px 12px rgba(27, 39, 49, .18); font-family: "IBM Plex Sans", "Noto Sans SC", sans-serif; font-size: 11px; font-weight: 400; line-height: 1.45; opacity: 0; pointer-events: none; text-align: left; white-space: normal; transform: translate(-50%, 3px); transition: opacity .15s ease, transform .15s ease; }.metric-help:hover::after, .metric-help:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }.metric-help:focus-visible { outline: 2px solid #6caea3; outline-offset: 2px; }
.toast { border-radius: 5px; background: #25323f; }
@media (max-width: 900px) { .analysis-header { padding: 20px 18px 12px; }.analysis-main { padding: 0 18px 40px; }.header-context { flex-direction: column; align-items: flex-end; gap: 8px; }.trend-grid, .analysis-middle, .compare-grid, .bid-coverage-grid, .dispatch-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .analysis-header { display: block; }.header-context { display: flex; align-items: flex-start; margin-top: 13px; }.context-date { text-align: left; }.analysis-filter { gap: 9px; }.customer-filter { flex: 1 1 calc(100% - 90px); }.customer-filter-button { width: 100%; }.customer-filter-menu { left: 0; width: min(310px, calc(100vw - 48px)); }.analysis-filter .route-search { flex-basis: 100%; }.coverage-label { margin-left: 0; }.funnel-chart { min-height: 190px; }.funnel-pending-stages { align-items: stretch; gap: 7px; }.funnel-pending-stages > div { min-width: 0; flex: 1; padding: 9px; }.funnel-pending-stages > svg { display: none; }.dispatch-distribution { grid-template-columns: 1fr; }.trend-heading { align-items: flex-start; flex-direction: column; }.trend-grid { gap: 10px; }.attention-strip { align-items: flex-start; padding: 9px 11px; }.attention-strip span { line-height: 1.5; } }