:root {
  color-scheme: light;
  --ink: #172c32;
  --muted: #566a70;
  --line: #dfe5e1;
  --panel: #fff;
  --canvas: #f3f4ef;
  --navy: #0c1b24;
  --green: #16815b;
  --green-dark: #08734b;
  --green-soft: #e8f8f1;
  --red: #d84b4b;
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  background: var(--canvas);
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.app-shell { min-height: 100vh; display: block; }
.sidebar { position: sticky; top: 0; z-index: 10; height: 70px; padding: 0 clamp(22px, 4vw, 56px); display: flex; flex-direction: row; align-items: center; border-bottom: 1px solid var(--line); background: #ffffffed; color: var(--ink); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0; color: var(--ink); text-decoration: none; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #25c883, #0d8b5c); font-size: 1.15rem; font-weight: 900; box-shadow: 0 9px 26px #0bc77a30; }
.brand strong,.brand small,.sidebar-foot strong,.sidebar-foot small { display: block; }
.brand strong { font-size: .92rem; letter-spacing: .15em; }
.brand small { margin-top: 2px; color: #8b989f; font-size: .72rem; }
.sidebar nav { display: flex; gap: 6px; margin-left: 46px; }
.nav-item { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 10px; color: #718087; text-decoration: none; font-size: .84rem; font-weight: 650; transition: .18s ease; }
.nav-item:hover { color: var(--ink); background: #f3f6f5; }
.nav-item.active { color: #08734b; background: var(--green-soft); box-shadow: none; }
.nav-icon { width: 22px; color: #7f959f; font-size: 1.2rem; text-align: center; }
.nav-item.active .nav-icon { color: #0b8a5a; }
.sidebar-foot { margin: 0 0 0 auto; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fafcfc; }
.sidebar-foot strong { color: #35474f; font-size: .73rem; }
.sidebar-foot small { color: #8a989e; margin-top: 2px; font-size: .65rem; }
.health-dot,.status-indicator { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #28c781; box-shadow: 0 0 0 4px #28c78120; }
.busy { animation: pulse 1.25s infinite; }
.error-state { background: var(--red); box-shadow: 0 0 0 4px #d84b4b18; }
.main { width: min(1900px, 100%); min-width: 0; margin: 0 auto; padding: 28px clamp(16px, 2vw, 32px) 56px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 22px; }
.page-tabs { display: inline-flex; gap: 6px; margin-bottom: 18px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: #ffffffc8; box-shadow: 0 6px 20px #19323d08; }
.page-tabs a { display: inline-flex; align-items: center; min-height: 32px; padding: 7px 12px; border-radius: 9px; color: #718087; text-decoration: none; font-size: .78rem; font-weight: 800; }
.page-tabs a:hover { color: var(--ink); background: #f3f6f5; }
.page-tabs a.active { color: var(--green-dark); background: var(--green-soft); }
.breadcrumb,.eyebrow { margin: 0 0 9px; color: #839099; font-size: .74rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.breadcrumb span { margin: 0 7px; color: #bec7cc; }
h1 { margin: 0; font-size: clamp(2rem, 3.2vw, 3.15rem); line-height: 1; letter-spacing: -.045em; }
.total-summary { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 11px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 6px 20px #19323d08; }
.total-summary span { color: #77858c; font-size: .72rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.total-summary strong { color: var(--ink); font-size: 1.15rem; }
.total-summary small { grid-column: 1 / -1; color: #8a979d; font-size: .65rem; text-align: right; }
.subtitle { margin: 10px 0 0; color: var(--muted); }
.primary-action { display: flex; align-items: center; gap: 9px; border: 0; border-radius: 12px; padding: 12px 18px; background: var(--ink); color: white; font-weight: 750; cursor: pointer; box-shadow: 0 9px 22px #0e232c20; transition: transform .18s, box-shadow .18s; }
.primary-action:hover { transform: translateY(-1px); box-shadow: 0 12px 28px #0e232c2b; }
.primary-action:disabled { opacity: .58; cursor: wait; transform: none; }
.action-icon { font-size: 1.2rem; line-height: 1; }
.spinning .action-icon { animation: spin 1s linear infinite; }
.metrics { display: grid; grid-template-columns: minmax(260px, 360px); gap: 15px; margin-bottom: 22px; }
.yard-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 15px; margin-bottom: 22px; }
.metric-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 7px 24px #19323d08; }
.metric-card.accent-card { color: white; border-color: transparent; background: linear-gradient(145deg, #0d8d5d, #086744); box-shadow: 0 11px 30px #08734b29; }
.metric-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #71818a; font-size: .73rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.accent-card .metric-top { color: #d0f8e8; }
.metric-icon { font-size: 1.2rem; }
.metric-card > strong { display: block; margin: 14px 0 5px; font-size: 2rem; line-height: 1; letter-spacing: -.04em; overflow: hidden; text-overflow: ellipsis; }
.metric-card > strong.metric-text { font-size: 1.12rem; line-height: 1.2; letter-spacing: -.015em; }
.metric-card > small { display: block; overflow: hidden; color: #89969d; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.accent-card > small { color: #b7e8d4; }
.notice { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; padding: 14px 17px; border: 1px solid #ccebdc; border-radius: 13px; background: var(--green-soft); color: #155d41; }
.notice[hidden] { display: none; }
.notice-error { border-color: #f1cece; background: #fff1f1; color: #942e2e; }
.notice-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: currentColor; color: white; font-weight: 900; }
.notice strong { font-size: .87rem; }
.notice p { margin: 2px 0 0; max-width: 1050px; font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; }
.orders-panel { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--panel); box-shadow: 0 12px 40px #19323d0a; }
.yard-actions { display: flex; align-items: center; gap: 12px; }
.yard-filter-bar { display: flex; align-items: end; gap: 12px; margin: -3px 0 18px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 7px 24px #19323d08; }
.yard-filter-field { display: grid; gap: 6px; }
.yard-filter-field.grow { flex: 1 1 280px; }
.yard-filter-bar label { color: #65747b; font-size: .73rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.yard-filter-bar select,.yard-filter-bar input { min-width: 220px; border: 1px solid #dbe3e6; border-radius: 10px; padding: 8px 10px; background: #f8fafb; color: var(--ink); font-size: .82rem; outline: 0; }
.yard-filter-bar input { width: 100%; }
.yard-filter-bar select:focus,.yard-filter-bar input:focus { border-color: #82c9ab; box-shadow: 0 0 0 4px #16a06a12; background: white; }
.yard-grid { display: grid; gap: 18px; }
.yard-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 12px 40px #19323d0a; }
.yard-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--line); background: #fbfcfc; }
.yard-card-head h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; }
.yard-card-head p { margin: 5px 0 0; color: #87949a; font-size: .76rem; }
.yard-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.yard-counts span { padding: 6px 9px; border: 1px solid #dbe9e2; border-radius: 999px; background: #f5fbf8; color: #176142; font-size: .68rem; font-weight: 850; }
.yard-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.yard-columns.trucks-only { grid-template-columns: 1fr; }
.yard-columns section { min-width: 0; padding: 18px 22px 22px; }
.yard-columns section + section { border-left: 1px solid var(--line); }
.yard-columns h3 { margin: 0 0 12px; color: #62727a; font-size: .75rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.yard-equipment-list { display: grid; gap: 7px; }
.yard-equipment { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 50px; padding: 11px 13px; border: 1px solid #ecf1f2; border-radius: 11px; background: #fff; }
.yard-equipment strong,.yard-equipment small { display: block; }
.yard-equipment strong { color: #263941; font-size: .96rem; }
.yard-equipment small { margin-top: 4px; color: #7f8b92; font-size: .75rem; }
.key-status-wrap { flex: 0 1 380px; min-width: 210px; display: grid; justify-items: end; gap: 4px; text-align: right; }
.key-status { max-width: 100%; overflow: hidden; padding: 6px 9px; border-radius: 999px; background: #eef2f3; color: #526168; font-size: .73rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.key-detail { max-width: 100%; overflow: hidden; color: #13232d; font-size: .78rem; font-weight: 650; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.key-status.inside_terminal { background: #e8f8f1; color: #08734b; }
.key-status.different_terminal,.key-status.checked_out { background: #fff7df; color: #8c5d00; }
.key-status.home_location { background: #eef6ff; color: #235f90; }
.key-status.not_found,.key-status.unknown,.key-status.error { background: #fff1f1; color: #a43b3b; }
.key-status.not_configured { background: #eef2f3; color: #607078; }
.yard-empty,.yard-warning { padding: 18px 20px; border: 1px dashed #d7e1dc; border-radius: 14px; background: #fafcfc; color: #718087; }
.yard-warning { border-color: #f0d5b5; background: #fff9ed; color: #875b1b; overflow-wrap: anywhere; }
.yard-empty strong,.yard-empty p { display: block; }.yard-empty p { margin: 5px 0 0; }
.yard-empty-copy { margin: 0; color: #98a4aa; font-size: .76rem; }
.departure-main { width: min(2100px, 100%); }
.refresh-link { text-decoration: none; }
.departure-panel { overflow: hidden; }
.departure-filters { display: flex; flex-wrap: wrap; gap: 12px; }
.departure-filter { display: grid; gap: 6px; }
.departure-filter label { color: #65747b; font-size: .73rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.departure-filter select { min-width: 230px; border: 1px solid #dbe3e6; border-radius: 10px; padding: 8px 10px; background: #f8fafb; color: var(--ink); font-size: .82rem; outline: 0; }
.departure-filter.customer-filter select { min-width: 320px; }
.departure-filter select:focus { border-color: #82c9ab; box-shadow: 0 0 0 4px #16a06a12; background: white; }
.departure-table-wrap { overflow: auto; border-top: 1px solid var(--line); }
.departure-table { min-width: 1550px; table-layout: fixed; }
.departure-table th,.departure-table td { padding: 9px 11px; vertical-align: top; white-space: normal; }
.departure-table th:nth-child(1),.departure-table td:nth-child(1) { width: 120px; }
.departure-table th:nth-child(2),.departure-table td:nth-child(2) { width: 245px; }
.departure-table th:nth-child(3),.departure-table td:nth-child(3) { width: 220px; }
.departure-table th:nth-child(4),.departure-table td:nth-child(4) { width: 710px; }
.departure-table th:nth-child(5),.departure-table td:nth-child(5) { width: 255px; }
.departure-card:hover { background: #fbfdfc; }
.dep-order strong,.dep-target strong,.dep-equipment span,.dep-stop-line strong,.dep-stop-line small,.dep-signal strong,.dep-order small,.dep-target small,.dep-equipment small { display: block; }
.dep-order strong { color: var(--ink); font-size: .86rem; }
.dep-order small,.dep-target small,.dep-equipment small { margin-top: 3px; color: #7f8d94; font-size: .66rem; line-height: 1.25; }
.dep-status-pill { display: inline-flex; max-width: 100%; margin-top: 6px; padding: 4px 7px; border-radius: 999px; background: #eef2f3; color: #526168; font-size: .62rem; font-weight: 850; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.dep-target strong { color: #253842; font-size: .82rem; }
.dep-equipment span { color: #253842; font-size: .74rem; font-weight: 800; line-height: 1.3; }
.dep-stops { display: grid; gap: 4px; }
.dep-stop-line { display: grid; grid-template-columns: minmax(190px, .75fr) minmax(430px, 1.25fr); gap: 10px; align-items: baseline; padding: 3px 6px; border-radius: 7px; background: #f8fafb; }
.dep-stop-line.shipper { background: #f6fcf9; }
.dep-stop-line.consignee { background: #f7fbff; }
.dep-stop-line.finished { opacity: .72; }
.dep-stop-line.target-stop { border: 1px solid #f1cb64; background: #fff9e8; box-shadow: inset 3px 0 0 #e5a900; opacity: 1; }
.dep-stop-line strong { color: #253842; font-size: .7rem; line-height: 1.25; overflow-wrap: anywhere; }
.dep-stop-line small { color: #72828a; font-size: .62rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.target-departure-time { display: inline; padding: 2px 5px; border-radius: 6px; background: #ffe7a3; color: #7a5100; font-weight: 900; }
.dep-signal { text-align: right; }
.departure-badge { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: #eef2f3; color: #526168; font-size: .7rem; font-weight: 900; letter-spacing: .04em; }
.departure-badge.yellow { background: #fff7df; color: #8c5d00; }
.departure-badge.red { background: #fff1f1; color: #a43b3b; }
.departure-badge.green { background: #e8f8f1; color: #08734b; }
.departure-badge.gray { background: #eef2f3; color: #526168; }
.live-departure-status { margin-top: 5px; color: #526168; font-size: .68rem; line-height: 1.25; }
.muted-text { color: #89969d !important; }
.live-green { color: #08734b !important; }
.live-yellow { color: #8c5d00 !important; }
.live-red { color: #a43b3b !important; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 21px 22px; }
.panel-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.01em; }
.panel-head p { margin: 4px 0 0; color: #8a979d; font-size: .76rem; }
.search { min-width: min(610px, 65%); display: flex; align-items: center; border: 1px solid #dbe2e5; border-radius: 12px; background: #f8fafb; transition: border .18s, box-shadow .18s; }
.search:focus-within { border-color: #82c9ab; box-shadow: 0 0 0 4px #16a06a12; background: white; }
.search-icon { padding-left: 14px; color: #8e9ba2; font-size: 1.1rem; }
.search input { width: 100%; min-width: 80px; border: 0; outline: 0; padding: 11px 9px; background: transparent; color: var(--ink); font-size: .84rem; }
.search select { align-self: stretch; max-width: 150px; border: 0; border-left: 1px solid #e1e7e9; outline: 0; padding: 0 10px; background: transparent; color: #526169; font-size: .75rem; cursor: pointer; }
.search button { margin: 4px; border: 0; border-radius: 9px; padding: 8px 13px; background: var(--ink); color: white; font-size: .77rem; font-weight: 750; cursor: pointer; }
.clear-search { color: #89969c; text-decoration: none; font-size: 1.2rem; }
.table-wrap { overflow: auto; border-block: 1px solid var(--line); }
table { width: 100%; table-layout: fixed; border-collapse: collapse; }
th,td { padding: 14px 16px; border-bottom: 1px solid #edf1f2; text-align: left; white-space: nowrap; }
th { position: sticky; top: 0; z-index: 1; background: #f8fafb; color: #718087; font-size: .67rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.sort-link { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.sort-link span { color: #adb8bd; font-size: .72rem; }
.sort-link:hover,.sort-link.active { color: var(--green-dark); }
.sort-link.active span { color: var(--green-dark); }
.column-filter { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.column-filter label { flex: 0 0 auto; }
.column-filter select { width: 100%; min-width: 0; max-width: 100%; border: 1px solid #d9e1e4; border-radius: 7px; padding: 4px 22px 4px 7px; background: white; color: #526169; font: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; }
.order-column { width: 88px; }
.bill-to-column { width: 180px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.party-column { width: 150px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.status-column { width: 145px; white-space: normal; }
.stops-column { width: 112px; white-space: normal; }
.stop-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.stop-dot { width: 8px; height: 8px; flex: 0 0 auto; border: 1.5px solid #697980; border-radius: 50%; background: transparent; }
.stop-dot.arrived { border-color: #75d9ad; background: #75d9ad; }
.stop-dot.departed { border-color: #e66f98; background: #e66f98; }
.trailer-column { width: 125px; white-space: normal; overflow-wrap: anywhere; }
.tractor-column { width: 150px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.edi-column { width: 105px; overflow: hidden; text-overflow: ellipsis; }
.date-column { width: 100px; }
.action-column { width: 46px; padding-inline: 8px; text-align: center; }
.order-number { color: var(--ink); font-size: .82rem; }
td { color: #53626a; font-size: .79rem; }
.order-row { cursor: pointer; transition: background .15s; }
.order-row:hover { background: #f7fbf9; }
.order-row:last-child td { border-bottom: 0; }
.route-link { display: flex; align-items: center; gap: 10px; border: 0; padding: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.route-link strong,.route-link small,.date-range strong,.date-range small { display: block; }
.route-link strong { max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; }
.route-link small,.date-range small { margin-top: 3px; color: #94a0a6; font-size: .68rem; }
.route-avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: #eaf4ef; color: var(--green-dark); font-size: .74rem; font-weight: 850; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: #eef2f3; color: #526168; font-size: .68rem; font-weight: 750; }
.pill > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill[data-status*="transit"],.status-pill[data-status*="active"],.status-pill[data-status*="dispatch"] { background: var(--green-soft); color: #118057; }
.status-pill[data-status*="complete"] { background: #eaf2ff; color: #3972bd; }
.status-pill[data-status*="cancel"],.status-pill[data-status*="fail"] { background: #fff0f0; color: #c44848; }
.asset-main { color: #253740; font-weight: 700; }
.equipment-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; margin-right: 5px; }
.equipment-link { border: 0; padding: 0; background: transparent; color: #176f9f; font: inherit; text-align: left; text-decoration: underline; text-decoration-color: #176f9f55; text-underline-offset: 2px; cursor: pointer; }
.equipment-link:hover { color: #0b527a; text-decoration-color: currentColor; }
.live-link { display: inline-flex; align-items: center; min-height: 21px; padding: 3px 7px; border: 1px solid #cfe5db; border-radius: 999px; background: #f2faf6; color: #08734b; font: inherit; font-size: .61rem; font-weight: 800; line-height: 1; text-decoration: none; text-transform: uppercase; letter-spacing: .035em; cursor: pointer; }
.live-link:hover { border-color: #9bd2ba; background: #e8f8f1; color: #075f3e; }
.live-link:disabled { opacity: .6; cursor: wait; }
.equipment-separator { color: #829097; }
.mono { font-family: "SFMono-Regular", Consolas, monospace; font-size: .73rem; }
.date-range strong { color: #33454e; font-size: .76rem; font-weight: 650; }
.row-action { width: 30px; height: 30px; border: 1px solid #dce4e7; border-radius: 9px; background: white; color: #56676f; cursor: pointer; transition: .15s; }
.order-row:hover .row-action { border-color: #9dd4bd; background: var(--green-soft); color: var(--green-dark); transform: translateX(2px); }
.empty-state { padding: 62px 20px; text-align: center; }
.empty-state > span,.empty-state > strong,.empty-state > p { display: block; }
.empty-state > span { color: #a8b5bb; font-size: 2rem; }.empty-state > strong { margin-top: 7px; color: #53636a; }.empty-state > p { margin: 5px 0 0; color: #94a0a6; }
.panel-footer { min-height: 62px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 22px; color: #829097; font-size: .75rem; }
.pagination { display: flex; align-items: center; gap: 7px; }
.pagination a,.pagination span,.pagination strong { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #dfe6e8; border-radius: 9px; color: #44555d; text-decoration: none; }
.pagination strong { border-color: var(--ink); background: var(--ink); color: white; }
.pagination .disabled { color: #c0c9cd; background: #f8f9fa; }
dialog { width: min(720px, 100%); height: 100vh; max-height: 100vh; margin: 0 0 0 auto; border: 0; padding: 0; background: white; box-shadow: -24px 0 70px #0712192b; animation: slideIn .22s ease-out; }
dialog::backdrop { background: #09151ca8; backdrop-filter: blur(2px); }
.map-dialog { width: min(1100px, 94vw); height: min(780px, 90vh); margin: auto; border-radius: 18px; animation: none; }
.map-dialog-body { height: calc(100% - 94px); padding: 22px; }
.equipment-route-map { width: 100%; height: 100%; min-height: 420px; overflow: hidden; border: 1px solid #dce5e1; border-radius: 13px; background: #edf3f0; }
.map-message { display: grid; place-items: center; height: 100%; min-height: 360px; padding: 30px; border: 1px dashed #d7e1dc; border-radius: 13px; background: #fafcfc; color: #718087; text-align: center; }
.equipment-route-map[hidden],.map-message[hidden] { display: none; }
.route-range { margin: 6px 0 0; color: #75858d; font-size: .76rem; }
.drawer-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; padding: 27px 30px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.drawer-head h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.035em; }
.drawer-head .eyebrow { color: var(--green-dark); }
.close { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: #f7f9f9; color: #5b696f; font-size: 1.25rem; cursor: pointer; }
.drawer-body { padding: 24px 30px 50px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.detail-grid article { padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fafcfc; }
.detail-grid small,.detail-grid strong { display: block; }.detail-grid small { color: #839097; font-size: .68rem; text-transform: uppercase; letter-spacing: .055em; }.detail-grid strong { margin-top: 6px; color: #283b44; font-size: .86rem; }
.detail-section { margin-top: 29px; }
.section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.section-title h3 { margin: 0; font-size: .9rem; }.section-title > span { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: #eaf0ed; color: #65766e; font-size: .65rem; font-weight: 800; text-align: center; }
.route-map { width: 100%; height: 285px; overflow: hidden; border: 1px solid #dce5e1; border-radius: 13px; background: #edf3f0; }
.map-empty { padding: 28px 18px; border: 1px dashed #d7e1dc; border-radius: 12px; background: #fafcfc; text-align: center; }
.map-stop-marker { min-width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid white; border-radius: 999px; padding: 0 7px; background: #0b7a50; color: white; font-size: .61rem; font-weight: 850; cursor: pointer; box-shadow: 0 3px 10px #09291d4d; }
.map-stop-marker:hover { background: #075f3e; transform: scale(1.08); }
.map-current-marker { width: 20px; height: 20px; margin: 1px; border: 4px solid white; border-radius: 50%; padding: 0; background: #ef4f91; cursor: pointer; box-shadow: 0 0 0 3px #ef4f9138, 0 4px 12px #6415334d; }
.map-current-marker:hover { transform: scale(1.12); }
.map-position-marker { position: relative; width: 22px; height: 22px; }
.map-history-marker { width: 18px; height: 18px; margin: 2px; border: 3px solid #ef4f91; border-radius: 50%; padding: 0; background: white; cursor: pointer; box-shadow: 0 2px 8px #64153345; }
.map-history-marker:hover { transform: scale(1.12); }
.map-position-time { position: absolute; top: 1px; left: 27px; min-width: 74px; padding: 2px 5px; border: 1px solid #e7d1db; border-radius: 5px; background: #fffefeee; color: #71334e; font-size: .61rem; font-weight: 750; line-height: 1.2; white-space: nowrap; box-shadow: 0 2px 7px #26343a1f; pointer-events: none; }
.maplibregl-popup-content { border-radius: 9px; color: #263941; font: .75rem/1.35 Inter, "Segoe UI", sans-serif; box-shadow: 0 7px 24px #0b1d1730; }
.maplibregl-popup-content strong { display: block; }
.maplibregl-popup-content p { margin: 3px 0 0; color: #73828a; }
.asset-list { display: flex; flex-wrap: wrap; gap: 8px; }
.asset-chip { min-width: 135px; padding: 10px 12px; border: 1px solid #dbe9e2; border-radius: 11px; background: #f5fbf8; }
.asset-chip small,.asset-chip strong,.asset-chip em { display: block; }.asset-chip small { color: #6e8c7d; font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; }.asset-chip strong { margin: 3px 0; color: #17583d; font-size: .79rem; }.asset-chip em { color: #91a39a; font-size: .6rem; font-style: normal; }
.muted-assets { opacity: .65; }.empty-copy { margin: 0; color: #8b979c; font-size: .78rem; }
.detail-table { overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.detail-table table { table-layout: fixed; }
.detail-table th,.detail-table td { padding: 11px 12px; }
.detail-table th { position: static; }
.detail-table th:first-child { width: 52px; }
.detail-table th:nth-child(2) { width: 40%; }
.detail-table td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.detail-table td strong,.detail-table td small { display: block; }
.detail-table td small { margin-top: 3px; color: #96a1a6; font-size: .66rem; }
.stop-times { display: grid; gap: 7px; white-space: normal; }
.stop-times > span { display: block; }
.stop-times small { margin: 0 0 2px; color: #8c999f; font-size: .6rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.stop-times strong { color: #42545d; font-size: .72rem; font-weight: 600; line-height: 1.3; }
.sequence { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #edf3f0; color: #507061; font-size: .67rem; font-weight: 800; }
.drawer-error { padding: 16px; border-radius: 12px; background: #fff1f1; color: #9c3636; overflow-wrap: anywhere; }
.loading-block { height: 120px; border-radius: 12px; background: linear-gradient(90deg,#f2f5f4 20%,#fafbfb 50%,#f2f5f4 80%); background-size: 240% 100%; animation: shimmer 1.25s infinite; }.loading-block.short { height: 260px; margin-top: 24px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; padding: 12px 17px; border-radius: 11px; background: var(--ink); color: white; font-size: .8rem; font-weight: 700; box-shadow: 0 15px 45px #09151c40; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s; }.toast.show { opacity: 1; transform: translateY(0); }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: .35; } } @keyframes slideIn { from { transform: translateX(35px); opacity: .5; } } @keyframes shimmer { to { background-position: -240% 0; } }
@media (max-width: 1180px) { .metrics,.yard-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 820px) { .sidebar { position: sticky; width: 100%; height: 62px; padding: 0 18px; }.sidebar nav { margin-left: auto; }.sidebar-foot { display: none; }.nav-item { padding: 9px 11px; }.main { padding: 25px 18px 42px; }.topbar,.yard-actions { align-items: flex-start; flex-direction: column; }.panel-head { align-items: stretch; flex-direction: column; }.search { min-width: 100%; }.table-wrap { max-height: 65vh; }.yard-columns { grid-template-columns: 1fr; }.yard-columns section + section { border-top: 1px solid var(--line); border-left: 0; } }
@media (max-width: 560px) { .sidebar nav .nav-item:not(.active),.brand small { display: none; }.topbar { flex-direction: column; }.primary-action { width: 100%; justify-content: center; }.metrics,.yard-summary-grid { grid-template-columns: 1fr; }.panel-head,.panel-footer { padding-inline: 15px; }.panel-footer { align-items: flex-start; flex-direction: column; }.drawer-head,.drawer-body { padding-inline: 18px; }.detail-grid { grid-template-columns: 1fr; }.yard-equipment { align-items: flex-start; flex-direction: column; }.key-status-wrap { width: 100%; min-width: 0; justify-items: start; text-align: left; } dialog { width: 100%; } }

/* Canada Post monitoring components. */
.cp-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .filter-toggle { border: 1px solid #d9e2e8; border-radius: 6px; padding: 8px 12px; color: #243847; text-decoration: none; background: #fff; }
    .cp-table-wrap { overflow: auto; border-top: 1px solid var(--line); }
    .cp-monitor-table { min-width: 1580px; table-layout: fixed; width: 100%; }
    .cp-overview { display: grid; gap: 14px; margin-bottom: 18px; }
    .cp-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
    .cp-summary-card { padding: 15px 17px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 7px 24px #19323d08; }
    .cp-summary-card span,.cp-summary-card small { display:block; color:#718087; font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
    .cp-summary-card strong { display:block; margin-top:7px; color:var(--ink); font-size:1.55rem; line-height:1; }
    .cp-summary-card small { margin-top:7px; font-weight:600; letter-spacing:0; text-transform:none; }
    .cp-summary-card.attention strong { color:#a43b3b; }
    .cp-problem-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0 20px 20px; }
    .cp-problem-card { min-width:0; padding:14px; border:1px solid #f0d9d6; border-left:4px solid #c45148; border-radius:9px; background:#fffafa; }
    .cp-problem-card.warning { border-color:#f1dfad; border-left-color:#d19919; background:#fffdf6; }
    .cp-problem-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
    .cp-problem-head strong { color:var(--ink); font-size:.95rem; }
    .cp-problem-card p { margin:8px 0; color:#526168; font-size:.78rem; line-height:1.4; }
    .cp-problem-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; color:#526168; font-size:.72rem; }
    .cp-problem-meta b { color:#263b45; }
    .cp-problem-card button { margin-top:11px; }
    .cp-pagination { display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid var(--line); color:#526168; font-size:.76rem; }
    .cp-pagination button,.cp-pagination select { padding:6px 9px; border:1px solid #d9e2e8; border-radius:6px; background:#fff; color:#243847; font:inherit; }
    .cp-pagination button:disabled { opacity:.45; cursor:not-allowed; }
    .cp-events-table { min-width:1150px; table-layout:fixed; width:100%; }
    .cp-events-table th,.cp-events-table td { white-space:normal; overflow-wrap:anywhere; vertical-align:top; line-height:1.4; }
    .cp-event-priority { display:inline-flex; padding:4px 7px; border-radius:999px; background:#eef6ff; color:#235f90; font-size:.64rem; font-weight:850; text-transform:uppercase; }
    .cp-event-priority.high,.cp-event-priority.critical,.cp-event-priority.error { background:#fff1f1; color:#a43b3b; }
    .cp-event-priority.warning { background:#fff7df; color:#8c5d00; }
    .cp-event-message { display:block; margin-top:5px; color:#718087; }
    .cp-monitor-table th,.cp-monitor-table td { padding: 9px 11px; vertical-align: top; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
    .cp-monitor-table th:nth-child(1),.cp-monitor-table td:nth-child(1) { width: 130px; }
    .cp-monitor-table th:nth-child(2),.cp-monitor-table td:nth-child(2) { width: 260px; }
    .cp-monitor-table th:nth-child(3),.cp-monitor-table td:nth-child(3) { width: 720px; }
    .cp-monitor-table th:nth-child(4),.cp-monitor-table td:nth-child(4) { width: 285px; }
    .cp-order strong,.cp-equipment span,.cp-stop-line strong,.cp-stop-line small,.cp-monitor strong,.cp-order small,.cp-equipment small { display: block; }
    .cp-order strong { color: var(--ink); font-size: .86rem; }
    .cp-order small,.cp-equipment small,.cp-monitor small { margin-top: 3px; color: #7f8d94; font-size: .66rem; line-height: 1.25; }
    .cp-status-pill { display: inline-flex; max-width: 100%; margin-top: 6px; padding: 4px 7px; border-radius: 999px; background: #eef2f3; color: #526168; font-size: .62rem; font-weight: 850; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
    .cp-equipment span { color: #253842; font-size: .74rem; font-weight: 800; line-height: 1.3; }
    .cp-equipment-line { display: block; margin-top: 3px; color: #253842; font-size: .72rem; font-weight: 760; line-height: 1.35; overflow-wrap: anywhere; }
    .cp-equipment-line small { display: inline; margin: 0; color: #7f8d94; font-size: .68rem; font-weight: 650; }
    .cp-equipment-pair { display: block; margin-top: 3px; color: #253842; font-size: .72rem; font-weight: 760; line-height: 1.35; overflow-wrap: anywhere; }
    .cp-equipment-pair small { display: inline; margin: 0; color: #7f8d94; font-size: .68rem; font-weight: 650; }
    .cp-stops { display: grid; gap: 4px; }
    .cp-stop-line { display: grid; grid-template-columns: minmax(190px, .75fr) minmax(430px, 1.25fr); gap: 10px; align-items: baseline; padding: 3px 6px; border-radius: 7px; background: #f8fafb; }
    .cp-stop-line.shipper { background: #f6fcf9; }
    .cp-stop-line.consignee { background: #f7fbff; }
    .cp-stop-line.finished { opacity: .72; }
    .cp-stop-line.target-stop { border: 1px solid #f1cb64; background: #fff9e8; box-shadow: inset 3px 0 0 #e5a900; opacity: 1; }
    .cp-stop-line strong { color: #253842; font-size: .7rem; line-height: 1.25; overflow-wrap: anywhere; }
    .cp-stop-line small { color: #72828a; font-size: .62rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
    .cp-monitor { text-align: right; }
    .cp-monitor-badge { display: inline-flex; padding: 7px 10px; border-radius: 999px; background: #eef2f3; color: #526168; font-size: .7rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
    .cp-monitor-badge.high,.cp-monitor-badge.warning { background: #fff7df; color: #8c5d00; }
    .cp-monitor-badge.alert { background: #fff1f1; color: #a43b3b; }
    .cp-monitor-badge.normal { background: #e8f8f1; color: #08734b; }
    .cp-events-table { table-layout: fixed; width: 100%; }
    .cp-events-table th,.cp-events-table td { white-space: normal; overflow-wrap: anywhere; word-break: normal; vertical-align: top; line-height: 1.35; }
    .cp-events-table th:nth-child(1),.cp-events-table td:nth-child(1) { width: 155px; }
    .cp-events-table th:nth-child(2),.cp-events-table td:nth-child(2) { width: 90px; }
    .cp-events-table th:nth-child(3),.cp-events-table td:nth-child(3) { width: 170px; }
    .cp-events-table th:nth-child(4),.cp-events-table td:nth-child(4) { width: 80px; }
    .cp-events-table th:nth-child(5),.cp-events-table td:nth-child(5) { width: auto; }
    .cp-events-table th:nth-child(6),.cp-events-table td:nth-child(6) { width: 170px; }
    .handoff-card { margin-top: 14px; padding: 14px; border: 1px solid #dfe8ed; border-radius: 8px; background: #f8fbfc; }
    .handoff-card h3 { margin: 0 0 8px; font-size: .9rem; }
    .handoff-card p { margin: 0 0 10px; color: #5c6d76; font-size: .78rem; line-height: 1.45; }
    .handoff-card label { display: block; margin-top: 9px; color: #526168; font-size: .68rem; font-weight: 850; text-transform: uppercase; }
    .handoff-card input,.handoff-card textarea { box-sizing: border-box; width: 100%; margin-top: 4px; padding: 8px 9px; border: 1px solid #cfdae0; border-radius: 6px; font: inherit; font-size: .78rem; }
    .handoff-card textarea { min-height: 74px; resize: vertical; }
    .handoff-card button { margin-top: 10px; }
    .handoff-status { display: block; min-height: 18px; margin-top: 8px; color: #526168; font-size: .74rem; }
    @media(max-width:760px) { .cp-summary-grid,.cp-problem-grid { grid-template-columns:1fr; } }

/* Operations visual system: quiet surfaces, strong hierarchy, precise states. */
:root {
  --shadow-panel: 0 2px 4px #18352d03, 0 16px 40px -24px #18352d28;
  --radius-panel: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
body { line-height: 1.5; }
::selection { background: #c6edcf; color: #132d24; }
a, button, input, select, textarea { touch-action: manipulation; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #19845f;
  outline-offset: 4px;
}
button:disabled { cursor: not-allowed; }
.main { padding: 28px clamp(16px, 3vw, 56px) 64px; }
.topbar {
  position: relative;
  padding: clamp(24px, 3vw, 44px);
  margin-bottom: 28px;
  border: 1px solid #25463f;
  border-radius: 24px;
  background: #152e2b;
  color: #f6f8f1;
  box-shadow: 0 16px 40px -24px #102f2860;
}
.topbar > div:first-child { min-width: 0; flex: 1; }
h1 {
  font-size: clamp(2rem, 3.8vw, 3.6rem);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.topbar .subtitle { max-width: 680px; margin-top: 14px; color: #bfd0c7; font-size: .87rem; line-height: 1.65; }
.page-tabs {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  gap: 4px;
  padding: 0 0 18px;
  margin-bottom: 24px;
  border: 0;
  border-bottom: 1px solid #ffffff26;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-tabs a {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #c3d2ca;
  font-size: .78rem;
  font-weight: 600;
  transition: color .18s, background .18s;
}
.page-tabs a:hover { background: #ffffff0d; color: #fff; }
.page-tabs a.active { background: #d4efb5; color: #173b2b; }
.topbar :focus-visible { outline-color: #d4efb5; }
.total-summary {
  flex: 0 1 auto;
  gap: 5px 16px;
  padding: 18px 22px;
  border: 1px solid #ffffff26;
  border-radius: 14px;
  background: #ffffff06;
  box-shadow: none;
}
.total-summary span { color: #c3d2ca; font-size: .66rem; letter-spacing: .09em; }
.total-summary strong { color: #e1f3c9; font-size: 1.6rem; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.total-summary small { color: #bdcec5; font-size: .7rem; text-align: left; }
.yard-actions { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
.primary-action {
  min-height: 44px;
  border: 1px solid #163c30;
  border-radius: 10px;
  background: #173e31;
  font-size: .8rem;
  font-weight: 650;
  box-shadow: 0 3px 7px #163c3010;
  transition: background .18s, transform .18s var(--ease), box-shadow .18s;
}
.primary-action:hover { background: #24553e; box-shadow: 0 5px 12px #163c3020; }
.topbar .primary-action { background: #d4efb5; color: #173b2b; border-color: #d4efb5; }
.topbar .primary-action:hover { background: #e2f5cc; }
.orders-panel, .yard-card { border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }
.panel-head { padding: 24px; gap: 24px; }
.panel-head h2 { font-size: 1.07rem; font-weight: 650; letter-spacing: -.025em; }
.panel-head p { color: var(--muted); line-height: 1.5; }
.search { min-width: min(610px, 65%); min-height: 46px; background: #f5f7f3; border-color: #dce3dd; border-radius: 10px; }
.search input { padding-block: 13px; }
.search input::placeholder { color: #62746e; }
.search button { min-height: 36px; padding-inline: 16px; border-radius: 7px; background: #173e31; }
.search button:hover { background: #24553e; }
.search select { color: #52665e; }
.search:focus-within { border-color: #16815b; box-shadow: 0 0 0 3px #16815b15; }
th { padding-block: 16px; background: #f1f4ee; color: #52665e; font-size: .66rem; letter-spacing: .075em; }
td { padding-block: 17px; color: #4b5f64; line-height: 1.45; }
td time, .mono, .metric-card > strong, .cp-summary-card strong { font-variant-numeric: tabular-nums; }
.table-wrap > table { min-width: 1151px; }
.order-number { font-size: .86rem; font-weight: 700; letter-spacing: -.02em; }
.order-row:hover { background: #f0f6ed; }
.order-row:focus-within { background: #f0f6ed; }
.column-filter select { min-height: 32px; border-color: #cdd8cf; color: #435b4e; }
.pill { padding: 6px 9px; font-weight: 650; }
.status-pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.live-link { padding: 5px 8px; min-height: 26px; }
.row-action { width: 32px; height: 32px; border-radius: 50%; }
.panel-footer { min-height: 72px; padding: 16px 24px; color: #586e66; }
.pagination a, .pagination span, .pagination strong { width: 36px; height: 36px; border-radius: 8px; }
.pagination a:hover { border-color: #16815b; background: #edf6ec; }
.pagination strong { background: #173e31; border-color: #173e31; }
.yard-summary-grid.trucks-only-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-card, .cp-summary-card { padding: 24px; border-radius: 16px; box-shadow: var(--shadow-panel); }
.metric-card.accent-card { background: #234d3d; border-color: #234d3d; box-shadow: var(--shadow-panel); }
.metric-top, .cp-summary-card span { color: #586e66; font-weight: 650; font-size: .7rem; letter-spacing: .075em; }
.metric-card > strong, .cp-summary-card strong { margin-block: 18px 8px; font-size: 2.5rem; font-weight: 600; letter-spacing: -.05em; }
.metric-card > small, .cp-summary-card small { color: #596e65; line-height: 1.5; }
.accent-card > small, .accent-card .metric-top { color: #c8e2d1; }
.yard-filter-bar { margin: 0 0 24px; padding: 20px 24px; border-radius: 14px; box-shadow: var(--shadow-panel); }
.yard-filter-field { min-width: 0; }
.yard-filter-bar input, .yard-filter-bar select, .departure-filter select { min-height: 44px; padding: 10px 12px; background: #f5f7f3; border-color: #dce3dd; border-radius: 8px; }
.yard-card-head { padding: 24px; background: #f7f9f4; }
.yard-card-head p, .yard-equipment small { color: #5e7269; }
.yard-columns section { padding: 22px 24px 26px; }
.yard-equipment { padding: 14px; background: #fbfcf9; border-color: #e2e9df; }
.yard-empty, .yard-empty-copy, .empty-copy, .empty-state > p { color: #60746a; }
.notice { border-radius: 12px; padding: 16px 20px; }
.notice-icon { background: #176342; color: #fff; }
.notice-error .notice-icon { background: #942e2e; }
.notice p { font-size: .82rem; }
.departure-filter label, .yard-filter-bar label { font-weight: 650; font-size: .68rem; }
.departure-table td, .cp-monitor-table td { padding-block: 15px; }
.departure-table-wrap, .table-wrap, .cp-table-wrap, .detail-table { scrollbar-width: thin; scrollbar-color: #aab9ac #f2f5ef; }
.cp-overview { gap: 24px; margin-bottom: 28px; }
.cp-summary-grid { gap: 18px; }
.cp-problem-grid { gap: 16px; padding: 0 24px 24px; }
.cp-problem-card { padding: 20px; border-radius: 12px; background: #fffaf8; }
.cp-problem-head { flex-wrap: wrap; }
.cp-problem-meta { line-height: 1.65; }
.cp-summary-card.attention { border-top: 3px solid #a43b3b; padding-top: 22px; }
.secondary, .filter-toggle, .cp-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #cdd8cf;
  border-radius: 8px;
  background: #fff;
  color: #264b39;
  font-size: .78rem;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
}
.secondary:hover, .filter-toggle:hover, .cp-pagination button:not(:disabled):hover { background: #edf5e9; border-color: #8eae97; }
.handoff-card { padding: 20px; border-radius: 12px; background: #f4f7f1; }
.handoff-card input, .handoff-card textarea { min-height: 44px; padding: 10px 12px; }
dialog { background: #fafbf7; }
.drawer-head { padding: 28px; background: #fff; }
.drawer-body { padding: 24px 28px 48px; }
.detail-grid article { padding: 18px; background: #fff; }
.detail-grid small, .detail-table td small, .stop-times small { color: #5f746a; }
.close { min-width: 40px; min-height: 40px; border-radius: 50%; background: #f0f4ed; }
.close:hover { background: #e1eadd; color: #183e2b; }
.map-dialog { border-radius: 20px; }
.map-dialog-body { display: flex; flex-direction: column; height: calc(100% - 130px); min-height: 0; padding: 20px; }
.equipment-route-map, .map-message { min-height: 0; flex: 1; }
.loading-block { background-image: linear-gradient(90deg, #eaf0e6 20%, #f7faf3 50%, #eaf0e6 80%); }
@media (max-width: 1180px) {
  .topbar { gap: 24px; flex-wrap: wrap; }
  .topbar > div:first-child { flex-basis: 100%; }
  .yard-actions { justify-content: flex-start; }
}
@media (max-width: 820px) {
  .main { padding: 18px 16px 40px; }
  .topbar { padding: 24px; border-radius: 18px; margin-bottom: 22px; gap: 22px; }
  .page-tabs { margin-bottom: 22px; gap: 4px; padding-bottom: 14px; }
  .page-tabs a { padding: 9px 12px; }
  .panel-head { padding: 20px; gap: 18px; }
  .search { min-width: 0; width: 100%; }
  .yard-filter-bar { flex-wrap: wrap; padding: 20px; }
  .yard-filter-field, .yard-filter-field.grow { flex: 1 1 220px; }
  .yard-filter-bar select, .yard-filter-bar input { width: 100%; min-width: 0; }
  .departure-filters, .departure-filter { width: 100%; }
  .departure-filter select, .departure-filter.customer-filter select { width: 100%; min-width: 0; }
  .cp-summary-grid, .cp-problem-grid { grid-template-columns: 1fr; }
  .cp-problem-grid { padding: 0 20px 20px; }
  .yard-card-head { flex-wrap: wrap; padding: 20px; }
  .yard-counts { justify-content: flex-start; }
  .map-dialog { width: calc(100% - 24px); height: 85dvh; }
}
@media (max-width: 560px) {
  .main { padding: 12px 12px 32px; }
  .topbar { padding: 20px 18px; border-radius: 16px; }
  .page-tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .page-tabs a { font-size: .72rem; padding: 10px 8px; justify-content: center; text-align: center; }
  h1 { font-size: clamp(1.9rem, 7.4vw, 2.5rem); }
  .total-summary { width: 100%; padding: 15px 18px; grid-template-columns: 1fr auto; }
  .total-summary strong { font-size: 1.35rem; }
  .yard-actions { width: 100%; gap: 14px; }
  .yard-summary-grid.trucks-only-summary { grid-template-columns: 1fr; }
  .search { flex-wrap: wrap; }
  .search input:not([type="hidden"]) { flex: 1; width: calc(100% - 40px); }
  .search select { flex: 1; max-width: none; min-height: 44px; border-left: 0; border-top: 1px solid var(--line); }
  .search button { min-height: 40px; }
  .clear-search { padding-inline: 10px; }
  .cp-problem-meta { grid-template-columns: 1fr; overflow-wrap: anywhere; }
  .cp-actions { width: 100%; }
  .cp-actions > * { flex: 1 1 auto; }
  .cp-pagination { flex-wrap: wrap; }
  .orders-panel, .yard-card { border-radius: 14px; }
  .drawer-head, .drawer-body { padding-inline: 18px; }
  .toast { right: 12px; bottom: 12px; left: 12px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}