:root {
  color-scheme: light;
  --navy-950: #071128;
  --navy-900: #0b1735;
  --navy-800: #122249;
  --blue-600: #2d6df6;
  --blue-500: #3c7dff;
  --blue-100: #eaf1ff;
  --ink: #17213d;
  --muted: #6f7b96;
  --line: #e8ecf4;
  --canvas: #f4f6fa;
  --white: #ffffff;
  --green: #22a873;
  --green-soft: #e8f8f1;
  --orange: #ef8d28;
  --orange-soft: #fff2e4;
  --red: #e7565e;
  --red-soft: #fff0f1;
  --violet: #7758e8;
  --shadow: 0 10px 32px rgba(22, 35, 69, 0.07);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); font-size: 16px; }
button, input, select, textarea { font: inherit; }
/* Shared lighter typography across all screens and dialogs. */
b, strong, th { font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; }
.brand strong, .metric-card > strong, .utilization-panel .panel-header > strong,
.quote-price > strong, .price-total > b, .invoice-total > strong { font-weight: 500; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }

.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 20;
  display: flex; flex-direction: column; padding: 26px 18px 18px; color: #d8e0f4;
  background: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 58%, #102657 100%);
}
.brand { display: flex; align-items: center; gap: 11px; color: white; text-decoration: none; padding: 0 8px 28px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--blue-600); box-shadow: 0 8px 22px rgba(45,109,246,.35); }
.brand-mark svg { width: 30px; fill: none; stroke: white; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.brand strong { display: block; font-size: 1.32rem; letter-spacing: -.045em; line-height: 1; }
.brand small { display: block; margin-top: 5px; color: #8492b3; font-size: .62rem; letter-spacing: .19em; font-weight: 400; }
.main-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-label { margin: 20px 12px 8px; color: #6f7fa6; font-size: .68rem; letter-spacing: .16em; font-weight: 400; }
.nav-item { width: 100%; min-height: 46px; border: 0; outline: 0; border-radius: 12px; display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 8px; padding: 0 13px; color: #aebbd6; background: transparent; text-align: left; cursor: pointer; transition: .18s ease; }
.nav-item:focus-visible { outline: 2px solid #6f9aff; outline-offset: -2px; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); transform: translateX(2px); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(45,109,246,.26), rgba(45,109,246,.1)); box-shadow: inset 3px 0 var(--blue-500); }
.nav-icon { width: 24px; color: #8092ba; font-size: 1.12rem; text-align: center; }
.nav-item.active .nav-icon { color: #7ca5ff; }
.nav-count { min-width: 23px; padding: 3px 6px; border-radius: 999px; color: #a9c3ff; background: rgba(45,109,246,.22); font-size: .72rem; text-align: center; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; justify-self: center; }
.status-dot.warning { background: var(--orange); box-shadow: 0 0 0 4px rgba(239,141,40,.13); }
.sidebar-bottom { margin-top: auto; padding-top: 22px; }
.quote-nav { width: 100%; border: 1px solid rgba(111,151,255,.25); border-radius: 14px; display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; color: white; background: linear-gradient(135deg, rgba(45,109,246,.34), rgba(102,77,226,.22)); cursor: pointer; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.quote-nav span:first-child { display: grid; gap: 4px; text-align: left; }
.quote-nav small { color: #91adf2; font-size: .58rem; letter-spacing: .12em; font-weight: 400; }
.quote-nav strong { font-size: .9rem; }
.quote-nav > span:last-child { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.12); }
.user-card { display: grid; grid-template-columns: 38px 1fr 28px; gap: 10px; align-items: center; margin-top: 16px; padding: 15px 6px 2px; border-top: 1px solid rgba(255,255,255,.08); }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: white; background: #273966; font-size: .76rem; font-weight: 400; }
.user-card strong, .user-card small { display: block; }
.user-card strong { color: white; font-size: .78rem; }
.user-card small { margin-top: 3px; color: #7787a9; font-size: .69rem; }
.icon-button { border: 0; color: #8190af; background: transparent; cursor: pointer; }

.main-area { min-width: 0; }
.topbar { min-height: 98px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 32px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(16px); }
.eyebrow { margin: 0 0 5px; color: var(--blue-600); font-size: .67rem; letter-spacing: .13em; font-weight: 400; }
h1 { margin: 0; color: var(--navy-900); font-size: clamp(1.25rem, 2vw, 1.52rem); letter-spacing: -.035em; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.search-button { min-width: 205px; height: 43px; border: 1px solid var(--line); border-radius: 11px; display: flex; align-items: center; gap: 9px; padding: 0 12px; color: #8a95aa; background: #f8f9fc; font-size: .82rem; cursor: pointer; }
.search-button kbd { margin-left: auto; padding: 3px 6px; border: 1px solid #e0e4ed; border-radius: 5px; color: #929bb0; background: white; font: inherit; font-size: .68rem; }
.notification-button { position: relative; width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 11px; background: white; cursor: pointer; }
.notification-button span { position: absolute; right: -3px; top: -5px; width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; color: white; background: var(--red); font-size: .58rem; font-weight: 400; }
.primary-button { min-height: 43px; border: 0; border-radius: 11px; display: flex; align-items: center; gap: 7px; padding: 0 16px; color: white; background: linear-gradient(135deg, var(--blue-600), #245ada); box-shadow: 0 8px 18px rgba(45,109,246,.24); font-size: .82rem; font-weight: 400; cursor: pointer; }
.primary-button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.mobile-menu { display: none; border: 0; background: transparent; font-size: 1.4rem; }

.view { padding: 30px 32px 46px; }
.view-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 23px; }
.view-heading h2 { margin: 0 0 7px; color: var(--navy-900); font-size: 1.56rem; letter-spacing: -.035em; }
.view-heading p, .panel-header p { margin: 0; color: var(--muted); font-size: .82rem; }
.live-badge { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid #dce6df; border-radius: 999px; color: #50806a; background: #f5fbf8; font-size: .69rem; font-weight: 400; }
.live-badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,168,115,.12); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; margin-bottom: 18px; }
.metric-card { min-height: 146px; padding: 19px 20px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); box-shadow: 0 5px 16px rgba(22,35,69,.035); }
.metric-card.accent { border-color: #dce7ff; background: linear-gradient(145deg, #fff, #f4f7ff); }
.metric-card.alert { border-color: #f4e2e4; }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: #6a7690; font-size: .74rem; font-weight: 400; }
.metric-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: var(--blue-600); background: var(--blue-100); font-weight: 400; }
.alert .metric-icon { color: var(--red); background: var(--red-soft); }
.metric-card > strong { display: block; margin-top: 15px; color: var(--navy-900); font-size: 2rem; line-height: 1; letter-spacing: -.05em; }
.metric-card > strong small { color: #a0a8b9; font-size: .82rem; letter-spacing: 0; }
.metric-card > p { margin: 11px 0 0; color: #929aab; font-size: .69rem; }
.metric-card p b { color: #59647a; }
.positive { color: var(--green); font-weight: 400; }
.negative { color: var(--red); font-weight: 400; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, .72fr); gap: 18px; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow); }
.panel-header { min-height: 79px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 21px; border-bottom: 1px solid var(--line); }
.panel-header.compact { min-height: 72px; }
.panel-header h3 { margin: 0 0 6px; color: var(--navy-900); font-size: .98rem; letter-spacing: -.018em; }
.text-button { border: 0; color: var(--blue-600); background: transparent; font-size: .74rem; font-weight: 400; cursor: pointer; }
.text-button span { margin-left: 5px; }
.shipment-list { padding: 2px 8px 8px; }
.shipment-row { width: 100%; min-height: 78px; border: 0; border-bottom: 1px solid #edf0f5; display: grid; grid-template-columns: 42px minmax(125px, 1.35fr) minmax(120px, 1fr) 78px 84px 14px; gap: 11px; align-items: center; padding: 9px 12px; background: white; text-align: left; cursor: pointer; transition: .15s ease; }
.shipment-row:last-child { border-bottom: 0; }
.shipment-row:hover { border-radius: 12px; background: #f7f9fd; transform: translateX(2px); }
.danger-row { background: linear-gradient(90deg, #fffafa, #fff); }
.vehicle-chip { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; font-size: .68rem; font-weight: 400; }
.vehicle-chip.blue { color: #275ed4; background: #e8efff; }
.vehicle-chip.orange { color: #c66b12; background: #fff0dd; }
.vehicle-chip.violet { color: #6849d6; background: #efeafe; }
.vehicle-chip.green { color: #178459; background: #e7f6ef; }
.shipment-main strong, .shipment-main small, .driver strong, .driver small, .eta strong, .eta small { display: block; }
.shipment-main strong, .driver strong { color: #24304a; font-size: .76rem; }
.shipment-main small, .driver small { margin-top: 6px; color: #8b95a8; font-size: .67rem; }
.shipment-main small b { margin: 0 4px; color: var(--blue-600); }
.eta { text-align: right; }
.eta small { color: #a0a8b8; font-size: .54rem; letter-spacing: .08em; font-weight: 400; }
.eta strong { margin-top: 5px; color: #303b52; font-size: .74rem; }
.danger-row .eta strong { color: var(--red); }
.status-pill { justify-self: end; min-width: 76px; padding: 6px 8px; border-radius: 999px; font-size: .62rem; font-weight: 400; text-align: center; }
.status-pill.on-route { color: #2b65d9; background: #eaf1ff; }
.status-pill.delayed { color: #d36330; background: #fff0e7; }
.status-pill.loading { color: #6d50c7; background: #f0ecff; }
.status-pill.delivered { color: #17845b; background: #e8f7f1; }
.row-arrow { color: #a4acbb; font-size: 1.1rem; }
.right-column { display: grid; gap: 18px; }
.alert-count { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--red); background: var(--red-soft); font-size: .72rem; font-weight: 400; }
.attention-item { width: 100%; min-height: 67px; border: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 34px 1fr 12px; gap: 10px; align-items: center; padding: 10px 18px; background: white; text-align: left; cursor: pointer; }
.attention-item:last-child { border-bottom: 0; border-radius: 0 0 18px 18px; }
.attention-item:hover { background: #fafbfe; }
.attention-item > span:nth-child(2) strong, .attention-item > span:nth-child(2) small { display: block; }
.attention-item > span:nth-child(2) strong { color: #33405a; font-size: .72rem; }
.attention-item > span:nth-child(2) small { margin-top: 5px; color: #919aac; font-size: .63rem; }
.attention-item > span:last-child { color: #a7afbd; }
.attention-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--red); background: var(--red-soft); font-size: .76rem; font-weight: 400; }
.attention-icon.document { color: var(--orange); background: var(--orange-soft); }
.attention-icon.invoice { color: var(--green); background: var(--green-soft); }
.utilization-panel { padding-bottom: 13px; }
.utilization-panel .panel-header { border-bottom: 0; }
.utilization-panel .panel-header > strong { color: var(--blue-600); font-size: 1.26rem; }
.mini-chart { height: 128px; display: flex; align-items: end; justify-content: space-between; gap: 8px; padding: 10px 20px 22px; }
.mini-chart span { position: relative; width: 100%; height: var(--h); border-radius: 7px 7px 3px 3px; background: #dfe6f2; }
.mini-chart span.today { background: linear-gradient(180deg, var(--blue-500), var(--blue-600)); box-shadow: 0 6px 14px rgba(45,109,246,.25); }
.mini-chart span.future { opacity: .58; }
.mini-chart b { position: absolute; left: 50%; bottom: -20px; translate: -50% 0; color: #929bad; font-size: .58rem; font-weight: 400; }

.title-line { display: flex; align-items: center; gap: 10px; }
.demo-tag { padding: 4px 7px; border: 1px solid #dce4f2; border-radius: 6px; color: #78859e; background: #f4f6fa; font-size: .52rem; letter-spacing: .11em; font-weight: 400; }
.quote-nav.active { border-color: rgba(116,158,255,.55); background: linear-gradient(135deg, rgba(45,109,246,.7), rgba(102,77,226,.45)); }
.standalone { min-width: max-content; }
.secondary-button { min-height: 42px; border: 1px solid #dfe4ed; border-radius: 10px; padding: 0 15px; color: #45516a; background: white; font-size: .76rem; font-weight: 400; cursor: pointer; }
.secondary-button:hover { border-color: #cbd6ea; color: var(--blue-600); background: #f9fbff; }
.secondary-button.small { min-height: 36px; padding-inline: 12px; font-size: .69rem; }
.hidden { display: none !important; }

.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: white; box-shadow: 0 5px 18px rgba(22,35,69,.035); }
.summary-strip div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; border-right: 1px solid var(--line); }
.summary-strip div:last-child { border-right: 0; }
.summary-strip span { color: var(--muted); font-size: .7rem; }
.summary-strip strong { color: var(--navy-900); font-size: 1rem; }
.table-panel { overflow: hidden; }
.table-toolbar { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.filter-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.filter-tabs button { min-height: 36px; border: 0; border-radius: 9px; display: flex; align-items: center; gap: 7px; padding: 0 11px; color: #788399; background: transparent; font-size: .7rem; font-weight: 400; cursor: pointer; }
.filter-tabs button:hover { color: #46536c; background: #f5f7fb; }
.filter-tabs button.active { color: #285fcf; background: var(--blue-100); }
.filter-tabs button span { min-width: 20px; padding: 2px 5px; border-radius: 99px; background: rgba(255,255,255,.75); font-size: .58rem; text-align: center; }
.table-search { width: min(250px, 100%); min-height: 38px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; gap: 7px; padding: 0 11px; color: #9aa3b4; background: #fafbfc; }
.table-search input { width: 100%; border: 0; outline: 0; color: #34405a; background: transparent; font-size: .72rem; }
.table-search input::placeholder { color: #9ba4b5; }
.responsive-table { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 870px; }
th { padding: 13px 16px; color: #8792a7; background: #fafbfc; font-size: .58rem; letter-spacing: .07em; font-weight: 400; text-align: left; white-space: nowrap; }
td { padding: 14px 16px; border-top: 1px solid #edf0f5; color: #68738a; font-size: .69rem; vertical-align: middle; }
tbody tr { cursor: pointer; transition: background .14s ease; }
tbody tr:hover, tbody tr:focus { outline: 0; background: #f8faff; }
td > strong, td > small { display: block; }
td > strong { color: #34405a; font-size: .72rem; }
td > small { margin-top: 5px; color: #969faf; font-size: .61rem; }
td b { color: var(--blue-600); }
.chevron { width: 32px; color: #a2abba; font-size: 1rem; }
.empty-state { min-height: 180px; display: grid; place-content: center; gap: 7px; text-align: center; }
.empty-state strong { color: #43506a; }
.empty-state span { color: #919aab; }
.status-pill.neutral { color: #677287; background: #edf0f5; }
.status-pill.planned { color: #b86b12; background: #fff0dc; }
.plain-status { padding: 6px 9px; border-radius: 999px; color: #526078; background: #f0f2f6; font-size: .62rem; font-weight: 400; }

.date-switch { min-height: 39px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; overflow: hidden; background: white; }
.date-switch button { width: 36px; align-self: stretch; border: 0; color: #79859a; background: transparent; cursor: pointer; }
.date-switch button:hover { background: #f5f7fb; }
.date-switch strong { padding: 0 10px; color: #43506a; font-size: .7rem; }
.dispatch-alert { min-height: 67px; display: grid; grid-template-columns: 35px 1fr auto; gap: 12px; align-items: center; margin-bottom: 16px; padding: 11px 15px; border: 1px solid #f2d9dc; border-radius: 14px; background: linear-gradient(90deg, #fff5f6, #fffafa); }
.dispatch-alert > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--red); background: white; font-weight: 400; box-shadow: 0 4px 12px rgba(231,86,94,.12); }
.dispatch-alert strong, .dispatch-alert p { display: block; margin: 0; }
.dispatch-alert strong { color: #7a353b; font-size: .73rem; }
.dispatch-alert p { margin-top: 4px; color: #9e6468; font-size: .64rem; }
.dispatch-alert button { min-height: 34px; border: 1px solid #efcfd2; border-radius: 8px; padding: 0 12px; color: #bb4750; background: white; font-size: .66rem; font-weight: 400; cursor: pointer; }
.dispatch-board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 13px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.dispatch-column { min-height: 520px; border: 1px solid #e3e7ef; border-radius: 16px; background: #edf0f5; transition: .16s ease; }
.dispatch-column.drag-over { border-color: #7ba2fc; background: #e9f0ff; box-shadow: inset 0 0 0 2px rgba(45,109,246,.14); }
.dispatch-column > header { min-height: 73px; display: flex; align-items: center; justify-content: space-between; padding: 14px 15px; }
.dispatch-column > header h3, .dispatch-column > header p { margin: 0; }
.dispatch-column > header h3 { color: #3f4b63; font-size: .8rem; }
.dispatch-column > header h3 span { margin-left: 5px; padding: 3px 7px; border-radius: 999px; color: #7a8599; background: white; font-size: .6rem; }
.dispatch-column > header p { margin-top: 5px; color: #8a94a6; font-size: .6rem; }
.dispatch-column > header button { border: 0; color: #929bad; background: transparent; cursor: pointer; }
.dispatch-cards { display: grid; gap: 9px; padding: 0 9px 10px; }
.dispatch-card { border: 1px solid #e1e5ed; border-radius: 13px; padding: 13px; background: white; box-shadow: 0 4px 12px rgba(21,33,60,.045); cursor: grab; transition: .16s ease; }
.dispatch-card:hover { border-color: #cbd8ef; transform: translateY(-2px); box-shadow: 0 9px 22px rgba(21,33,60,.08); }
.dispatch-card.dragging { opacity: .46; transform: rotate(1.5deg); }
.dispatch-card.has-alert { border-left: 3px solid var(--red); }
.dispatch-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dispatch-card-top > strong { color: #6d7890; font-size: .62rem; letter-spacing: .03em; }
.dispatch-card .status-pill { min-width: 64px; padding: 5px 7px; font-size: .54rem; }
.dispatch-card h4 { margin: 14px 0 4px; color: #26324a; font-size: .82rem; letter-spacing: -.02em; }
.dispatch-card h4 span { margin: 0 4px; color: var(--blue-600); }
.dispatch-card > p { margin: 0; color: #8b95a8; font-size: .64rem; }
.dispatch-time { display: grid; grid-template-columns: 1fr 1fr; margin: 13px 0; padding: 10px 0; border-top: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; }
.dispatch-time span + span { padding-left: 12px; border-left: 1px solid #edf0f5; }
.dispatch-time small, .dispatch-time strong { display: block; }
.dispatch-time small { color: #9ca5b5; font-size: .51rem; letter-spacing: .07em; font-weight: 400; }
.dispatch-time strong { margin-top: 4px; color: #46526a; font-size: .67rem; }
.dispatch-assignee { display: flex; align-items: center; gap: 8px; }
.dispatch-assignee strong, .dispatch-assignee small { display: block; }
.dispatch-assignee strong { color: #46526a; font-size: .64rem; }
.dispatch-assignee small { margin-top: 3px; color: #939cad; font-size: .56rem; }
.mini-avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: white; background: #5873a9; font-size: .58rem; font-weight: 400; flex: 0 0 auto; }
.column-empty { min-height: 85px; border: 1px dashed #cdd4e0; border-radius: 11px; display: grid; place-items: center; color: #a1a9b8; background: rgba(255,255,255,.35); font-size: .62rem; }

.segmented-control { width: max-content; display: flex; gap: 4px; margin-bottom: 17px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.segmented-control button { min-height: 36px; border: 0; border-radius: 8px; padding: 0 14px; color: #7b869b; background: transparent; font-size: .7rem; font-weight: 400; cursor: pointer; }
.segmented-control button.active { color: white; background: var(--navy-900); box-shadow: 0 4px 12px rgba(11,23,53,.16); }
.segmented-control span { margin-left: 5px; opacity: .7; }
.fleet-overview { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 17px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.fleet-overview div { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-right: 1px solid var(--line); }
.fleet-overview div:last-child { border-right: 0; }
.fleet-overview span { color: var(--muted); font-size: .67rem; }
.fleet-overview strong { color: var(--navy-900); font-size: 1rem; }
.fleet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.fleet-card { border: 1px solid var(--line); border-radius: 17px; padding: 17px; background: white; text-align: left; box-shadow: 0 5px 16px rgba(22,35,69,.035); cursor: pointer; transition: .16s ease; }
.fleet-card:hover { border-color: #cfdaed; transform: translateY(-2px); box-shadow: var(--shadow); }
.truck-visual { height: 76px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 15px; color: #3c71e6; background: linear-gradient(145deg, #eef4ff, #e4ecfb); font-size: 2.2rem; }
.truck-visual.red { color: #d65a62; background: linear-gradient(145deg, #fff2f3, #fbe5e7); }
.truck-visual.violet { color: #7052d8; background: linear-gradient(145deg, #f4f0ff, #eae4fd); }
.truck-visual.green { color: #1b9869; background: linear-gradient(145deg, #ecfaf4, #dff4eb); }
.truck-visual.orange { color: #d47b1e; background: linear-gradient(145deg, #fff6ea, #f9ead6); }
.truck-visual.gray { color: #768297; background: linear-gradient(145deg, #f4f6f9, #e9edf3); }
.fleet-card-title { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.fleet-card-title strong, .fleet-card-title small { display: block; }
.fleet-card-title strong { color: #26324a; font-size: .9rem; }
.fleet-card-title small { margin-top: 4px; color: #8d97a9; font-size: .62rem; }
.fleet-state { padding: 5px 7px; border-radius: 999px; font-size: .55rem; font-weight: 400; white-space: nowrap; }
.fleet-state.blue { color: #2c63d6; background: #eaf1ff; }
.fleet-state.red { color: #c84c56; background: #fff0f1; }
.fleet-state.violet { color: #6849d6; background: #f0ecff; }
.fleet-state.green { color: #17845b; background: #e8f7f1; }
.fleet-state.orange { color: #bc6c16; background: #fff1df; }
.fleet-state.gray { color: #6f7b8e; background: #eef1f5; }
.fleet-detail { display: grid; grid-template-columns: .8fr 1.2fr; gap: 11px; margin: 16px 0; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fleet-detail small, .fleet-detail strong { display: block; }
.fleet-detail small { color: #9ba4b4; font-size: .5rem; letter-spacing: .07em; font-weight: 400; }
.fleet-detail strong { margin-top: 5px; color: #4a566d; font-size: .64rem; }
.fleet-footer { display: flex; justify-content: space-between; color: #929bac; font-size: .58rem; }
.person-cell { display: flex; align-items: center; gap: 9px; }

.prototype-note { min-height: 66px; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; margin-bottom: 17px; padding: 10px 15px; border: 1px solid #f2e0c9; border-radius: 13px; background: #fff8ee; }
.prototype-note > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #ba6e19; background: white; font-weight: 400; }
.prototype-note strong, .prototype-note p { margin: 0; }
.prototype-note strong { color: #704b24; font-size: .71rem; }
.prototype-note p { margin-top: 4px; color: #9a774d; font-size: .63rem; }
.prototype-note.blue-note { border-color: #d8e4fa; background: #f1f6ff; }
.prototype-note.blue-note > span { color: var(--blue-600); }
.prototype-note.blue-note strong { color: #325893; }
.prototype-note.blue-note p { color: #6c83a8; }
.tach-metrics .small-value { padding-top: 3px; font-size: 1.52rem; }
.source-chip { padding: 5px 7px; border-radius: 7px; color: #5c6981; background: #eff2f6; font-size: .58rem; font-weight: 400; }
.sync-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; font-size: .58rem; font-weight: 400; }
.sync-status.good { color: #17825a; background: #e9f7f1; }
.sync-status.warning { color: #ba6a16; background: #fff0df; }
.danger-text { color: var(--red) !important; }
.table-action { min-height: 31px; border: 1px solid #dfe5ef; border-radius: 8px; padding: 0 9px; color: #506079; background: white; font-size: .61rem; font-weight: 400; cursor: pointer; }
.table-action:hover { color: var(--blue-600); border-color: #cbd9f3; }
.spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.document-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 17px; margin-bottom: 17px; }
.missing-docs > button { width: 100%; min-height: 67px; border: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 41px 1fr 15px; gap: 12px; align-items: center; padding: 10px 18px; background: white; text-align: left; cursor: pointer; }
.missing-docs > button:last-child { border-bottom: 0; border-radius: 0 0 17px 17px; }
.missing-docs > button:hover { background: #fafbfe; }
.missing-docs > button strong, .missing-docs > button small { display: block; }
.missing-docs > button strong { color: #39465e; font-size: .7rem; }
.missing-docs > button small { margin-top: 5px; color: #9099aa; font-size: .62rem; }
.missing-docs > button > span:last-child { color: #a0a9b8; }
.document-type { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; color: #c44f57; background: #fff0f1; font-size: .55rem; font-weight: 400; }
.document-type.amber { color: #bd6c17; background: #fff1df; }
.document-stats .panel-header { border-bottom: 0; }
.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 8px 20px 24px; }
.donut { width: 103px; height: 103px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--blue-600) 0 94%, #edf0f5 94% 100%); position: relative; }
.donut::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: white; }
.donut span { position: relative; z-index: 1; color: var(--navy-900); font-size: 1.05rem; font-weight: 400; }
.donut-wrap p { display: grid; grid-template-columns: 8px 1fr auto; gap: 7px; align-items: center; margin: 9px 0; color: #7b869a; font-size: .61rem; }
.donut-wrap p strong { color: #3f4c64; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot.blue { background: var(--blue-600); }
.dot.orange { background: var(--orange); }
.dot.gray { background: #c4cad5; }

.integration-banner { min-height: 74px; display: grid; grid-template-columns: 42px 1fr auto auto; gap: 13px; align-items: center; margin-bottom: 17px; padding: 13px 16px; border: 1px solid #dceee6; border-radius: 15px; background: linear-gradient(90deg, #f1faf6, white); }
.integration-banner strong, .integration-banner p { margin: 0; }
.integration-banner strong { color: #315647; font-size: .75rem; }
.integration-banner p { margin-top: 4px; color: #739183; font-size: .62rem; }
.integration-logo { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: white; background: #3a75ed; font-size: .68rem; font-weight: 400; }
.integration-logo.sf { background: linear-gradient(145deg, #36a985, #1b8b6a); }
.integration-logo.ftp { background: linear-gradient(145deg, #627b9e, #405673); }
.integration-logo.gps { background: linear-gradient(145deg, #626dde, #4851ba); }
.integration-logo.wa { background: linear-gradient(145deg, #32b878, #1b9660); }
.integration-logo.excel { background: linear-gradient(145deg, #298c61, #18734d); }
.integration-logo.bank { background: linear-gradient(145deg, #e39534, #c26c18); }
.connection-pill { padding: 6px 9px; border-radius: 999px; color: #187f59; background: #e7f7ef; font-size: .58rem; font-weight: 400; white-space: nowrap; }
.connection-pill.warning { color: #b76816; background: #fff0dd; }
.connection-pill.optional { color: #6750bd; background: #f0ecff; }
.connection-pill.demo { color: #536278; background: #edf0f5; }
.integration-banner > button { border: 0; color: var(--blue-600); background: transparent; font-size: .65rem; font-weight: 400; cursor: pointer; }
.invoice-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 17px; }
.invoice-metrics article { display: grid; gap: 8px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 4px 14px rgba(22,35,69,.035); }
.invoice-metrics span { color: #7e899d; font-size: .65rem; }
.invoice-metrics strong { color: var(--navy-900); font-size: 1.23rem; }
.invoice-metrics small { color: #969faf; font-size: .59rem; }
.invoice-metrics article.red strong { color: var(--red); }

.integration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 17px; }
.integration-card { padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 4px 14px rgba(22,35,69,.035); }
.integration-card-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.integration-card h3 { margin: 14px 0 5px; color: #2e3a52; font-size: .88rem; }
.integration-card > p { min-height: 34px; margin: 0; color: #8a94a7; font-size: .65rem; line-height: 1.5; }
.integration-card-footer { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }
.integration-card-footer small, .integration-card-footer strong { display: block; }
.integration-card-footer small { color: #a0a8b7; font-size: .48rem; letter-spacing: .07em; font-weight: 400; }
.integration-card-footer strong { margin-top: 4px; color: #59657b; font-size: .61rem; }
.integration-card-footer button { border: 0; color: var(--blue-600); background: transparent; font-size: .62rem; font-weight: 400; cursor: pointer; }
.workflow-panel { overflow: hidden; }
.workflow-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap: 11px; align-items: center; padding: 23px 25px 27px; }
.workflow-flow > div { display: grid; justify-items: center; gap: 6px; text-align: center; }
.workflow-flow > b { color: #bdc5d2; font-size: 1rem; }
.workflow-flow strong { color: #46536b; font-size: .65rem; }
.workflow-flow span:not(.feature-icon) { color: #919aab; font-size: .55rem; }
.feature-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--blue-600); background: var(--blue-100); font-size: .9rem; font-weight: 400; }
.feature-icon.euro { color: #19815a; background: #e8f7f1; }
.feature-icon.check { color: #6b51c3; background: #f0ecff; }

.quote-hero { position: relative; overflow: hidden; margin-bottom: 18px; padding: 27px 29px; border-radius: 20px; color: white; background: linear-gradient(135deg, #0a1838 0%, #102657 58%, #15418a 100%); box-shadow: 0 16px 40px rgba(9,24,58,.18); }
.quote-hero::after { content: ""; position: absolute; width: 300px; height: 300px; right: -100px; top: -160px; border: 1px solid rgba(111,160,255,.2); border-radius: 50%; box-shadow: 0 0 0 42px rgba(93,140,244,.05), 0 0 0 84px rgba(93,140,244,.03); }
.quote-kicker { position: relative; z-index: 1; color: #82a7f6; font-size: .57rem; letter-spacing: .15em; font-weight: 400; }
.quote-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 310px; gap: 34px; align-items: end; margin-top: 20px; }
.quote-hero h2 { margin: 0; color: white; font-size: 2.1rem; letter-spacing: -.045em; }
.quote-hero h2 + p { max-width: 590px; margin: 10px 0 24px; color: #aabce3; font-size: .79rem; line-height: 1.55; }
.quote-meta { display: flex; gap: 32px; }
.quote-meta span { display: grid; gap: 5px; }
.quote-meta small { color: #6f88b9; font-size: .48rem; letter-spacing: .1em; font-weight: 400; }
.quote-meta strong { color: #e5ecfc; font-size: .68rem; }
.quote-price { border: 1px solid rgba(127,166,249,.24); border-radius: 16px; padding: 18px; background: rgba(255,255,255,.075); backdrop-filter: blur(8px); }
.quote-price > small, .quote-price > strong, .quote-price > span { display: block; }
.quote-price > small { color: #819dd5; font-size: .5rem; letter-spacing: .12em; font-weight: 400; }
.quote-price > strong { margin-top: 8px; color: white; font-size: 2rem; letter-spacing: -.05em; }
.quote-price > span { margin-top: 3px; color: #8296c1; font-size: .6rem; }
.quote-price button, .quote-next button { width: 100%; min-height: 42px; border: 0; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 0 13px; color: white; background: var(--blue-600); font-size: .68rem; font-weight: 400; cursor: pointer; }
.quote-content { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .65fr); gap: 18px; align-items: start; }
.quote-breakdown { overflow: hidden; }
.quote-breakdown .panel-header > strong { color: var(--blue-600); font-size: .9rem; }
.price-lines { padding: 4px 19px; }
.price-lines > div { min-height: 62px; display: grid; grid-template-columns: 31px 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
.price-lines > div:last-child { border-bottom: 0; }
.line-number { color: #a7afbd; font-size: .58rem; font-weight: 400; }
.price-lines strong, .price-lines small { display: block; }
.price-lines strong { color: #3d4961; font-size: .69rem; }
.price-lines small { margin-top: 4px; color: #929bad; font-size: .58rem; }
.price-lines b { color: #38445c; font-size: .7rem; }
.price-total { min-height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; color: white; background: var(--navy-900); }
.price-total span strong, .price-total span small { display: block; }
.price-total span strong { font-size: .73rem; }
.price-total span small { margin-top: 4px; color: #8291b4; font-size: .57rem; }
.price-total > b { font-size: 1.15rem; }
.price-total > b small { color: #8393b6; font-size: .54rem; font-weight: 400; }
.quote-side { display: grid; gap: 18px; }
.scope-card, .timeline-card { padding: 20px; }
.scope-card h3, .timeline-card h3, .assumptions h3 { margin: 0 0 16px; color: #2d3951; font-size: .85rem; }
.scope-card ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.scope-card li { display: flex; align-items: center; gap: 9px; color: #606d84; font-size: .65rem; }
.scope-card li span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 7px; color: #15805a; background: #e8f7f1; font-size: .6rem; font-weight: 400; }
.timeline-mini { display: grid; gap: 4px; }
.timeline-mini > div { position: relative; min-height: 54px; display: grid; grid-template-columns: 36px 1fr; gap: 10px; }
.timeline-mini > div:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 34px; height: 25px; border-left: 1px dashed #ccd4e2; }
.timeline-mini > div > b { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; color: var(--blue-600); background: var(--blue-100); font-size: .58rem; }
.timeline-mini strong, .timeline-mini small { display: block; }
.timeline-mini strong { margin-top: 2px; color: #4c5870; font-size: .65rem; }
.timeline-mini small { margin-top: 4px; color: #929bad; font-size: .55rem; }

.optional-section { margin-top: 28px; }
.section-title h3 { margin: 0 0 5px; color: #2d3951; font-size: 1rem; }
.section-title p { margin: 0 0 14px; color: #8993a6; font-size: .66rem; }
.optional-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.optional-grid article { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.optional-grid article > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: #46649a; background: #edf2fa; font-size: .55rem; font-weight: 400; }
.optional-grid h4, .optional-grid p { margin: 0; }
.optional-grid h4 { color: #3b485f; font-size: .68rem; }
.optional-grid p { margin-top: 4px; color: #919aac; font-size: .57rem; }
.optional-grid article > strong { color: #344159; font-size: .68rem; text-align: right; }
.optional-grid article > strong small { display: block; margin-top: 4px; color: #969faf; font-size: .48rem; font-weight: 400; }
.quote-bottom { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(300px,.6fr); gap: 18px; margin-top: 18px; }
.assumptions { padding: 20px; }
.assumptions details { border-top: 1px solid var(--line); }
.assumptions summary { min-height: 47px; display: flex; align-items: center; justify-content: space-between; color: #526078; font-size: .66rem; font-weight: 400; cursor: pointer; list-style: none; }
.assumptions summary::-webkit-details-marker { display: none; }
.assumptions summary span { color: #9aa3b3; font-size: .9rem; transition: transform .15s; }
.assumptions details[open] summary span { transform: rotate(45deg); }
.assumptions details p { margin: 0 0 15px; color: #808ba0; font-size: .62rem; line-height: 1.6; }
.quote-next { border-radius: 18px; padding: 23px; color: white; background: linear-gradient(145deg, #102655, #0b1735); }
.quote-next > span { color: #6d94e6; font-size: .52rem; letter-spacing: .13em; font-weight: 400; }
.quote-next h3 { margin: 12px 0 8px; font-size: 1.05rem; }
.quote-next p { margin: 0; color: #9aacd0; font-size: .66rem; line-height: 1.6; }
.quote-next small { display: block; margin-top: 12px; color: #687ba4; font-size: .53rem; text-align: center; }

.app-dialog { width: min(650px, calc(100% - 28px)); max-height: calc(100vh - 36px); border: 0; border-radius: 19px; padding: 0; color: var(--ink); background: white; box-shadow: 0 30px 90px rgba(6,15,36,.32); overflow: auto; }
.app-dialog::backdrop { background: rgba(5,12,29,.52); backdrop-filter: blur(3px); }
.app-dialog.drawer { width: min(720px, 92vw); height: 100vh; max-height: 100vh; margin: 0 0 0 auto; border-radius: 20px 0 0 20px; }
.app-dialog.search-modal { width: min(560px, calc(100% - 28px)); margin-top: 11vh; align-self: start; }
.app-dialog.compact-dialog { width: min(510px, calc(100% - 28px)); }
.dialog-shell { position: relative; min-height: 100%; padding: 27px; }
.dialog-close { position: absolute; z-index: 2; right: 18px; top: 17px; width: 34px; height: 34px; border: 1px solid #e2e6ed; border-radius: 9px; color: #8892a4; background: white; font-size: 1.15rem; cursor: pointer; }
.dialog-close:hover { color: #47536a; background: #f6f8fb; }
.dialog-header { padding-right: 36px; margin-bottom: 21px; }
.dialog-kicker { display: block; margin-bottom: 8px; color: var(--blue-600); font-size: .52rem; letter-spacing: .14em; font-weight: 400; }
.dialog-header h2 { margin: 0; color: var(--navy-900); font-size: 1.43rem; letter-spacing: -.035em; }
.dialog-header > p, .dialog-title-row p { margin: 7px 0 0; color: #7f8a9e; font-size: .69rem; line-height: 1.45; }
.dialog-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.route-card { display: grid; grid-template-columns: 14px 1fr minmax(80px,.55fr) 14px 1fr; gap: 10px; align-items: center; padding: 18px; border: 1px solid #dce6f8; border-radius: 14px; background: #f3f7ff; }
.route-point { width: 12px; height: 12px; border: 3px solid var(--blue-600); border-radius: 50%; background: white; }
.route-point.end { border-color: var(--green); }
.route-card small, .route-card strong { display: block; }
.route-card small { color: #8594ae; font-size: .51rem; letter-spacing: .05em; font-weight: 400; }
.route-card strong { margin-top: 5px; color: #334462; font-size: .8rem; }
.route-line { position: relative; height: 1px; background: #b9c8e3; text-align: center; }
.route-line span { position: relative; top: -11px; padding: 2px 6px; color: var(--blue-600); background: #f3f7ff; font-size: .7rem; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 16px; }
.detail-grid section { padding: 16px; border: 1px solid var(--line); border-radius: 13px; }
.detail-grid h3, .activity-feed h3 { margin: 0 0 13px; color: #46536b; font-size: .72rem; }
.detail-grid dl { margin: 0; }
.detail-grid dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 31px; border-bottom: 1px solid #edf0f5; }
.detail-grid dl > div:last-child { border-bottom: 0; }
.detail-grid dt { color: #8d97a9; font-size: .58rem; }
.detail-grid dd { margin: 0; color: #4b5870; font-size: .61rem; font-weight: 400; text-align: right; }
.margin-row dd { color: var(--green); }
.assigned-person { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 9px; border-radius: 10px; background: #f6f8fb; }
.assigned-person small, .assigned-person strong { display: block; }
.assigned-person small { color: #9aa3b3; font-size: .48rem; letter-spacing: .07em; font-weight: 400; }
.assigned-person strong { margin-top: 3px; color: #4b5870; font-size: .62rem; }
.truck-avatar { color: var(--blue-600); background: var(--blue-100); }
.check-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; min-height: 34px; }
.check-row > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; color: #a1aaba; background: #eef1f5; font-size: .54rem; font-weight: 400; }
.check-row.done > span { color: #17835a; background: #e8f7f1; }
.check-row strong { color: #536078; font-size: .58rem; }
.check-row small { color: #99a2b2; font-size: .52rem; }
.activity-feed { margin-top: 15px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; }
.activity-feed > div { display: grid; grid-template-columns: 9px 1fr; gap: 10px; align-items: start; margin-top: 10px; }
.feed-dot { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: #bcc4d0; }
.feed-dot.blue { background: var(--blue-600); }
.feed-dot.green { background: var(--green); }
.activity-feed p { margin: 0; }
.activity-feed strong, .activity-feed small { display: block; }
.activity-feed strong { color: #556177; font-size: .6rem; }
.activity-feed small { margin-top: 3px; color: #9ba4b4; font-size: .51rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin: 22px -27px -27px; padding: 15px 27px; border-top: 1px solid var(--line); background: #fafbfc; }

.wizard-steps { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 22px; }
.wizard-steps > span { display: flex; align-items: center; gap: 7px; color: #929bad; font-size: .6rem; font-weight: 400; }
.wizard-steps b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #8791a4; background: #eef1f5; font-size: .57rem; }
.wizard-steps > span.active { color: var(--blue-600); }
.wizard-steps > span.active b { color: white; background: var(--blue-600); }
.wizard-steps > span.complete b { color: #16815a; background: #e8f7f1; }
.wizard-steps i { height: 1px; background: #dde2ea; }
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-grid label { display: grid; gap: 6px; color: #59667d; font-size: .61rem; font-weight: 400; }
.field-grid label.full { grid-column: 1 / -1; }
.field-grid input, .field-grid select, .field-grid textarea { width: 100%; border: 1px solid #dfe4ec; border-radius: 10px; padding: 10px 11px; outline: 0; color: #344159; background: white; font-size: .72rem; font-weight: 400; }
.field-grid input, .field-grid select { height: 42px; }
.field-grid input:focus, .field-grid select:focus, .field-grid textarea:focus { border-color: #79a0f7; box-shadow: 0 0 0 3px rgba(45,109,246,.1); }
.wizard-summary { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; margin-top: 16px; padding: 14px; border: 1px solid #dce9e3; border-radius: 12px; background: #f2faf6; }
.wizard-summary > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #16815a; background: white; font-size: .65rem; font-weight: 400; }
.wizard-summary strong, .wizard-summary p { margin: 0; }
.wizard-summary strong { color: #416354; font-size: .68rem; }
.wizard-summary p { margin-top: 4px; color: #759183; font-size: .6rem; line-height: 1.45; }
.wizard-actions > span { flex: 1; }
.invoice-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; padding: 14px; border: 1px solid #dce7fa; border-radius: 12px; background: #f4f7fd; }
.invoice-preview span, .invoice-preview strong, .invoice-preview small { display: block; }
.invoice-preview span { color: #8a98b0; font-size: .49rem; letter-spacing: .08em; font-weight: 400; }
.invoice-preview strong { margin-top: 5px; color: #3e4f6d; font-size: .68rem; }
.invoice-preview small { margin-top: 4px; color: #8593a9; font-size: .55rem; }
.invoice-total { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 13px 15px; border-radius: 11px; color: white; background: var(--navy-900); }
.invoice-total span { color: #9bafd7; font-size: .62rem; }
.invoice-total strong { font-size: 1.02rem; }
.search-dialog { margin: -27px; }
.search-dialog > label { min-height: 66px; display: grid; grid-template-columns: 24px 1fr auto; gap: 9px; align-items: center; padding: 0 19px; border-bottom: 1px solid var(--line); }
.search-dialog > label > span { color: var(--blue-600); font-size: 1.1rem; }
.search-dialog input { border: 0; outline: 0; color: #2f3b52; font-size: .9rem; }
.search-dialog input::placeholder { color: #9ba4b4; }
.search-dialog kbd { padding: 4px 7px; border: 1px solid #dfe3ea; border-radius: 6px; color: #929bad; background: #f7f8fa; font: inherit; font-size: .55rem; }
.search-dialog > p { margin: 15px 19px 7px; color: #a0a8b7; font-size: .49rem; letter-spacing: .1em; font-weight: 400; }
.command-list { padding: 0 8px 10px; }
.command-list button { width: 100%; min-height: 55px; border: 0; border-radius: 10px; display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 7px 11px; background: white; text-align: left; cursor: pointer; }
.command-list button:hover { background: #f3f6fb; }
.command-list button > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--blue-600); background: var(--blue-100); }
.command-list strong, .command-list small { display: block; }
.command-list strong { color: #46536a; font-size: .67rem; }
.command-list small { margin-top: 3px; color: #939cad; font-size: .57rem; }
.command-list b { color: #a3abba; font-size: .65rem; }

.notification-list { display: grid; gap: 7px; }
.notification-list button { width: 100%; border: 1px solid var(--line); border-radius: 11px; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 11px; background: white; text-align: left; cursor: pointer; }
.notification-list button:hover { background: #f8faff; }
.notification-list strong, .notification-list small { display: block; }
.notification-list strong { color: #455169; font-size: .67rem; }
.notification-list small { margin-top: 4px; color: #919aac; font-size: .57rem; }
.upload-zone { min-height: 155px; border: 1px dashed #bfcce2; border-radius: 13px; display: grid; place-items: center; place-content: center; gap: 6px; margin-bottom: 16px; color: #66758d; background: #f6f9fe; cursor: pointer; }
.upload-zone input { position: absolute; opacity: 0; pointer-events: none; }
.upload-zone > span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; color: var(--blue-600); background: white; box-shadow: 0 5px 14px rgba(45,109,246,.11); font-weight: 400; }
.upload-zone strong { font-size: .69rem; }
.upload-zone small { color: #939db0; font-size: .58rem; }
.workshop-list { display: grid; gap: 8px; }
.workshop-list > div { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 11px; }
.workshop-list > div > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--blue-600); background: var(--blue-100); font-size: .57rem; font-weight: 400; }
.workshop-list p { margin: 0; }
.workshop-list strong, .workshop-list small { display: block; }
.workshop-list strong { color: #49566d; font-size: .65rem; }
.workshop-list small { margin-top: 4px; color: #929bad; font-size: .56rem; }
.workshop-result { display: grid; grid-template-columns: 35px 1fr; gap: 10px; align-items: center; margin-top: 12px; padding: 12px; border-radius: 11px; color: #35644f; background: #edf8f2; }
.workshop-result > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--green); font-size: .66rem; font-weight: 400; }
.workshop-result p { margin: 0; }
.workshop-result strong, .workshop-result small { display: block; }
.workshop-result strong { font-size: .65rem; }
.workshop-result small { margin-top: 4px; color: #6d8e7f; font-size: .56rem; }
.toast-region { position: fixed; z-index: 100; right: 20px; bottom: 20px; display: grid; gap: 9px; }
.toast { min-width: 310px; max-width: 390px; display: grid; grid-template-columns: 31px 1fr 22px; gap: 10px; align-items: center; padding: 12px; border: 1px solid #dce8e2; border-radius: 13px; color: #395448; background: white; box-shadow: 0 16px 42px rgba(8,20,46,.18); animation: toast-in .25s ease both; }
.toast > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--green); font-size: .65rem; font-weight: 400; }
.toast.info > span { background: var(--blue-600); }
.toast.warning > span { background: var(--orange); }
.toast strong, .toast small { display: block; }
.toast strong { font-size: .67rem; }
.toast small { margin-top: 4px; color: #849083; font-size: .57rem; }
.toast button { border: 0; color: #a0a8b6; background: transparent; cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 218px minmax(0, 1fr); }
  .sidebar { padding-inline: 13px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .right-column { grid-template-columns: 1fr 1fr; }
  .search-button { min-width: 43px; width: 43px; justify-content: center; font-size: 0; }
  .search-button kbd { display: none; }
  .fleet-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-hero-grid { grid-template-columns: 1fr 280px; }
  .integration-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; width: min(82vw, 280px); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 18px 0 40px rgba(5,12,30,.25); }
  body.menu-open .sidebar { transform: translateX(0); }
  body.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 15; background: rgba(5,12,30,.42); }
  .mobile-menu { display: block; }
  .topbar { min-height: 82px; padding: 16px 20px; }
  .topbar-actions .notification-button, .topbar-actions .search-button { display: none; }
  .view { padding: 24px 20px 38px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .summary-strip, .fleet-overview, .invoice-metrics { grid-template-columns: 1fr 1fr; }
  .summary-strip div:nth-child(2), .fleet-overview div:nth-child(2) { border-right: 0; }
  .summary-strip div:nth-child(-n+2), .fleet-overview div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .document-layout, .quote-content, .quote-bottom { grid-template-columns: 1fr; }
  .quote-side { grid-template-columns: 1fr 1fr; }
  .quote-hero-grid { grid-template-columns: 1fr; }
  .quote-price { max-width: 360px; }
  .workflow-flow { grid-template-columns: 1fr; gap: 7px; }
  .workflow-flow > b { transform: rotate(90deg); }
  .workflow-flow > div { grid-template-columns: 38px 1fr; justify-items: start; width: min(310px, 100%); margin-inline: auto; text-align: left; }
  .workflow-flow > div .feature-icon { grid-row: 1 / 3; }
}
@media (max-width: 620px) {
  .topbar > div:nth-child(2) { flex: 1; }
  .eyebrow { display: none; }
  h1 { font-size: 1.08rem; }
  .primary-button { width: 43px; padding: 0; justify-content: center; font-size: 0; }
  .primary-button span { font-size: 1.15rem; }
  .view-heading { align-items: start; }
  .live-badge { display: none; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 126px; }
  .right-column { grid-template-columns: 1fr; }
  .shipment-row { grid-template-columns: 38px 1fr auto; min-height: 84px; }
  .driver, .eta, .row-arrow { display: none; }
  .status-pill { grid-column: 3; grid-row: 1; }
  .view { padding-inline: 14px; }
  .panel-header { padding-inline: 16px; }
  .title-line { display: block; }
  .demo-tag { display: none; }
  .view-heading .standalone { min-width: 43px; width: 43px; padding: 0; font-size: 0; justify-content: center; }
  .view-heading .standalone span { font-size: 1rem; }
  .summary-strip, .fleet-overview, .invoice-metrics { grid-template-columns: 1fr; }
  .summary-strip div, .fleet-overview div { border-right: 0; border-bottom: 1px solid var(--line); }
  .summary-strip div:last-child, .fleet-overview div:last-child { border-bottom: 0; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .table-search { width: 100%; }
  .dispatch-board { margin-right: -14px; padding-right: 14px; }
  .dispatch-column { min-width: 265px; }
  .fleet-grid, .integration-grid, .optional-grid, .quote-side { grid-template-columns: 1fr; }
  .optional-grid article { grid-template-columns: 42px 1fr; }
  .optional-grid article > strong { grid-column: 2; text-align: left; }
  .quote-hero { padding: 22px 19px; }
  .quote-hero h2 { font-size: 1.7rem; }
  .quote-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .quote-price { width: 100%; }
  .price-lines { padding-inline: 12px; }
  .price-lines > div { grid-template-columns: 25px 1fr auto; }
  .price-lines small { display: none; }
  .app-dialog.drawer { width: 100vw; border-radius: 0; }
  .dialog-shell { padding: 22px 17px; }
  .detail-grid, .field-grid, .invoice-preview { grid-template-columns: 1fr; }
  .field-grid label.full { grid-column: auto; }
  .route-card { grid-template-columns: 12px 1fr; }
  .route-line { display: none; }
  .route-card .route-point.end { grid-row: 2; }
  .dialog-actions { margin: 20px -17px -22px; padding: 13px 17px; flex-wrap: wrap; }
  .dialog-actions .primary-button, .dialog-actions .secondary-button { flex: 1; justify-content: center; }
  .wizard-steps > span { font-size: 0; }
  .toast-region { left: 12px; right: 12px; bottom: 12px; }
  .toast { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}