:root {
    --el-dispatch-navy: #062a54;
    --el-dispatch-navy-2: #0a3a6d;
    --el-dispatch-teal: #00aeb5;
    --el-dispatch-text: #10233f;
    --el-dispatch-muted: #718198;
    --el-dispatch-border: #dce6ee;
    --el-dispatch-bg: #f3f6fa;
    --el-dispatch-danger: #e83d57;
    --el-dispatch-warning: #e99314;
    --el-dispatch-success: #19a66f;
}

.el-dispatch {
    color: var(--el-dispatch-text);
    padding-bottom: 1.5rem;
}

.el-dispatch button,
.el-dispatch input,
.el-dispatch select,
.el-dispatch textarea {
    font: inherit;
}

.el-dispatch-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 1rem;
}

.el-dispatch-eyebrow {
    margin: 0 0 .25rem;
    color: var(--el-dispatch-teal);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.el-dispatch-header h1 {
    margin: 0;
    color: var(--el-dispatch-text);
    font-size: clamp(1.65rem, 2vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.04em;
}

.el-dispatch-header p:not(.el-dispatch-eyebrow) {
    max-width: 48rem;
    margin: .35rem 0 0;
    color: var(--el-dispatch-muted);
    font-size: .88rem;
}

.el-dispatch-header-actions,
.el-dispatch-date-nav,
.el-dispatch-view-switch {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.el-dispatch-view-switch,
.el-dispatch-date-nav {
    padding: .25rem;
    border: 1px solid var(--el-dispatch-border);
    border-radius: .82rem;
    background: rgba(255,255,255,.88);
    box-shadow: 0 6px 20px rgb(8 36 72 / 5%);
}

.el-dispatch-view-switch button,
.el-dispatch-date-nav button {
    min-height: 2.35rem;
    border: 0;
    border-radius: .58rem;
    color: #5d6f86;
    background: transparent;
    font-size: .78rem;
    font-weight: 750;
    cursor: pointer;
}

.el-dispatch-view-switch button {
    min-width: 4.4rem;
}

.el-dispatch-view-switch button.is-active {
    color: #fff;
    background: linear-gradient(135deg, #00aeb5, #078c9d);
    box-shadow: 0 7px 18px rgb(0 174 181 / 22%);
}

.el-dispatch-date-nav > button:not(.el-dispatch-date-label) {
    display: grid;
    place-items: center;
    width: 2.35rem;
    padding: 0;
}

.el-dispatch-date-nav svg {
    width: 1rem;
    height: 1rem;
}

.el-dispatch-date-label {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding-inline: .65rem;
    color: #18334f !important;
}

.el-dispatch-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid var(--el-dispatch-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 28px rgb(8 36 72 / 6%);
}

.el-dispatch-summary-item {
    display: grid;
    grid-template-columns: 2.45rem minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    min-height: 4.7rem;
    padding: .8rem .9rem;
    border: 0;
    border-right: 1px solid #e6edf3;
    color: var(--el-dispatch-text);
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}

.el-dispatch-summary-item:last-child {
    border-right: 0;
}

.el-dispatch-summary-item:hover {
    background: #f7fbfc;
}

.el-dispatch-summary-item.is-active {
    color: #fff;
    background: linear-gradient(135deg, #062f5b, #0b4279);
    box-shadow: inset 0 -3px 0 var(--el-dispatch-teal);
}

.el-dispatch-summary-icon {
    display: grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: .7rem;
    color: #087c86;
    background: #e6f9fa;
}

.el-dispatch-summary-item.is-active .el-dispatch-summary-icon {
    color: #fff;
    background: rgb(255 255 255 / 13%);
}

.el-dispatch-summary-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.el-dispatch-summary-item > span:last-child {
    display: grid;
    gap: .08rem;
}

.el-dispatch-summary-item strong {
    font-size: 1.22rem;
    line-height: 1;
}

.el-dispatch-summary-item small {
    color: #75859a;
    font-size: .68rem;
    font-weight: 700;
}

.el-dispatch-summary-item.is-active small {
    color: #bbd1e4;
}

.el-dispatch-active-resource-filter {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: fit-content;
    max-width: 100%;
    margin: -0.25rem 0 1rem;
    padding: .45rem .55rem .45rem .5rem;
    border: 1px solid #cfe2ea;
    border-radius: .75rem;
    color: #173652;
    background: #f6fbfc;
}

.el-dispatch-active-resource-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: .55rem;
    color: #087c86;
    background: #e1f7f8;
}

.el-dispatch-active-resource-icon svg {
    width: 1rem;
    height: 1rem;
}

.el-dispatch-active-resource-filter > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: .02rem;
}

.el-dispatch-active-resource-filter small {
    color: #718198;
    font-size: .58rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.el-dispatch-active-resource-filter strong {
    overflow: hidden;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-dispatch-active-resource-filter button {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .25rem;
    padding: .35rem .5rem;
    border: 0;
    border-radius: .5rem;
    color: #456078;
    background: #eaf2f5;
    font-size: .62rem;
    font-weight: 750;
    cursor: pointer;
}

.el-dispatch-active-resource-filter button:hover {
    color: #173652;
    background: #dfecef;
}

.el-dispatch-active-resource-filter button svg {
    width: .85rem;
    height: .85rem;
}

.el-dispatch-day-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
    gap: 1rem;
}

.el-dispatch-board-panel,
.el-dispatch-week-panel,
.el-dispatch-resource-panel {
    overflow: hidden;
    border: 1px solid var(--el-dispatch-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 28px rgb(8 36 72 / 5%);
}

.el-dispatch-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.25rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid #e7edf3;
}

.el-dispatch-panel-heading.compact {
    min-height: 3.8rem;
}

.el-dispatch-panel-heading h2 {
    margin: 0;
    color: #172c47;
    font-size: .92rem;
    font-weight: 800;
}

.el-dispatch-panel-heading p {
    margin: .18rem 0 0;
    color: #8290a1;
    font-size: .68rem;
}

.el-dispatch-panel-heading > svg {
    width: 1.15rem;
    height: 1.15rem;
    color: #7b8da1;
}

.el-dispatch-live-dot {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #6f8197;
    font-size: .68rem;
    font-weight: 700;
}

.el-dispatch-live-dot i {
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    background: var(--el-dispatch-success);
    box-shadow: 0 0 0 4px rgb(25 166 111 / 10%);
}

.el-dispatch-timeline {
    padding: .35rem 0;
}

.el-dispatch-trip-card {
    position: relative;
    display: grid;
    grid-template-columns: 6.8rem minmax(0, 1fr) 2.6rem;
    align-items: stretch;
    min-height: 7.4rem;
    border-bottom: 1px solid #edf1f5;
    background: #fff;
}

.el-dispatch-trip-card:last-child {
    border-bottom: 0;
}

.el-dispatch-trip-card::before {
    content: '';
    position: absolute;
    inset: .65rem auto .65rem 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: #9cb0c7;
}

.el-dispatch-trip-card.tone-danger::before { background: var(--el-dispatch-danger); }
.el-dispatch-trip-card.tone-teal::before { background: var(--el-dispatch-teal); }
.el-dispatch-trip-card.tone-blue::before { background: #3d87e8; }
.el-dispatch-trip-card.tone-success::before { background: var(--el-dispatch-success); }
.el-dispatch-trip-card.tone-muted::before { background: #aab5c3; }

.el-dispatch-trip-time {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .1rem;
    padding: .8rem .5rem;
    border-right: 1px solid #edf1f5;
    color: #61758f;
}

.el-dispatch-trip-time strong {
    color: #173354;
    font-size: 1rem;
}

.el-dispatch-trip-time > span {
    font-size: .66rem;
}

.el-dispatch-order-controls {
    display: flex;
    gap: .2rem;
    margin-top: .35rem;
}

.el-dispatch-order-controls button {
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border: 1px solid #dce5ed;
    border-radius: .42rem;
    color: #75869a;
    background: #fff;
    cursor: pointer;
}

.el-dispatch-order-controls svg {
    width: .75rem;
    height: .75rem;
}

.el-dispatch-trip-main {
    min-width: 0;
    padding: .85rem 1rem;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.el-dispatch-trip-main:hover h3 {
    color: #008c95;
}

.el-dispatch-trip-topline {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    color: #708198;
    font-size: .67rem;
    font-weight: 700;
}

.el-dispatch-status {
    flex: 0 0 auto;
    padding: .22rem .42rem;
    border-radius: .38rem;
    color: #496178;
    background: #edf2f7;
    font-size: .58rem;
    font-weight: 850;
    text-transform: uppercase;
}

.el-dispatch-status.tone-danger { color: #c92c45; background: #fff0f3; }
.el-dispatch-status.tone-teal { color: #007f87; background: #e5fafb; }
.el-dispatch-status.tone-blue { color: #2869b8; background: #eaf3ff; }
.el-dispatch-status.tone-success { color: #087d54; background: #e9f8f1; }
.el-dispatch-status.tone-muted { color: #64748b; background: #eef2f6; }

.el-dispatch-issues-count {
    display: grid;
    place-items: center;
    min-width: 1.15rem;
    height: 1.15rem;
    margin-left: auto;
    border-radius: 999px;
    color: #fff;
    background: var(--el-dispatch-danger);
    font-size: .58rem;
    font-style: normal;
}

.el-dispatch-trip-main h3 {
    margin: .42rem 0 .18rem;
    color: #163252;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: -.015em;
    transition: color .15s ease;
}

.el-dispatch-trip-main > p {
    margin: 0;
    color: #7a899a;
    font-size: .67rem;
}

.el-dispatch-trip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .8rem;
    margin-top: .55rem;
}

.el-dispatch-trip-meta span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #4f657e;
    font-size: .68rem;
    font-weight: 700;
}

.el-dispatch-trip-meta svg {
    width: .82rem;
    height: .82rem;
    color: #00a1aa;
}

.el-dispatch-cargo {
    display: block;
    overflow: hidden;
    margin-top: .45rem;
    color: #7d8b9c;
    font-size: .64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-dispatch-trip-open {
    display: grid;
    place-items: center;
    border: 0;
    border-left: 1px solid #edf1f5;
    color: #7b8ba0;
    background: #fbfcfd;
    cursor: pointer;
}

.el-dispatch-trip-open:hover {
    color: #008f98;
    background: #f3fbfb;
}

.el-dispatch-trip-open svg {
    width: 1rem;
    height: 1rem;
}

.el-dispatch-empty {
    display: grid;
    justify-items: center;
    padding: 4rem 1rem;
    color: #74869b;
    text-align: center;
}

.el-dispatch-empty > span {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    margin-bottom: .75rem;
    border-radius: 999px;
    background: #edf4f8;
}

.el-dispatch-empty svg { width: 1.4rem; height: 1.4rem; }
.el-dispatch-empty h3 { margin: 0; color: #213954; font-size: .9rem; }
.el-dispatch-empty p { margin: .3rem 0 0; font-size: .72rem; }

.el-dispatch-resources {
    display: grid;
    gap: 1rem;
}

.el-dispatch-resource-list {
    max-height: 21rem;
    overflow: auto;
    padding: .25rem .8rem .7rem;
}

.el-dispatch-resource-row {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-height: 3.55rem;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #eef2f5;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}

.el-dispatch-resource-row:last-child { border-bottom: 0; }
.el-dispatch-resource-row:hover { background: #f7fbfc; }
.el-dispatch-resource-row.is-active {
    background: #eef9fa;
    box-shadow: inset 3px 0 0 var(--el-dispatch-teal);
}

.el-dispatch-resource-row.is-active strong { color: #075f68; }

.el-dispatch-avatar {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    color: #085c66;
    background: linear-gradient(135deg, #cbfaf6, #7be2e2);
    font-size: .72rem;
    font-weight: 850;
}

.el-dispatch-avatar.vehicle {
    border-radius: .62rem;
    color: #366481;
    background: #edf4f8;
}

.el-dispatch-avatar svg { width: 1rem; height: 1rem; }

.el-dispatch-resource-row > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: .1rem;
}

.el-dispatch-resource-row strong {
    overflow: hidden;
    color: #233b56;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-dispatch-resource-row small {
    color: #8a98a9;
    font-size: .61rem;
}

.el-dispatch-resource-row em {
    padding: .2rem .38rem;
    border-radius: .35rem;
    color: #087d54;
    background: #e9f8f1;
    font-size: .6rem;
    font-style: normal;
    font-weight: 800;
}

.el-dispatch-resource-row em.tone-warning { color: #a25c00; background: #fff5df; }
.el-dispatch-resource-row em.tone-danger { color: #c92c45; background: #fff0f3; }
.el-dispatch-resource-empty { padding: 1rem .2rem; color: #8493a4; font-size: .7rem; }

.el-dispatch-week-panel { overflow: visible; }
.el-dispatch-week-grid { display: grid; grid-template-columns: repeat(7, minmax(9rem, 1fr)); overflow-x: auto; }
.el-dispatch-week-day { min-width: 9rem; border-right: 1px solid #e8eef3; background: #fff; }
.el-dispatch-week-day:last-child { border-right: 0; }
.el-dispatch-week-day.is-today { background: #f4fbfb; }
.el-dispatch-week-day > header { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; padding: .65rem .7rem; border-bottom: 1px solid #e8eef3; }
.el-dispatch-week-day > header span { color: #667a91; font-size: .68rem; font-weight: 700; }
.el-dispatch-week-day > header strong { color: #173655; font-size: .76rem; }
.el-dispatch-week-day > div { min-height: 25rem; padding: .45rem; }
.el-dispatch-week-card { display: grid; width: 100%; gap: .2rem; margin-bottom: .45rem; padding: .6rem; border: 1px solid #dce7ee; border-left: 3px solid #94a9bf; border-radius: .65rem; color: #173652; background: #fff; text-align: left; cursor: pointer; box-shadow: 0 5px 14px rgb(8 36 72 / 4%); }
.el-dispatch-week-card.tone-danger { border-left-color: var(--el-dispatch-danger); }
.el-dispatch-week-card.tone-teal { border-left-color: var(--el-dispatch-teal); }
.el-dispatch-week-card.tone-blue { border-left-color: #3d87e8; }
.el-dispatch-week-card.tone-success { border-left-color: var(--el-dispatch-success); }
.el-dispatch-week-card > span { color: #078d96; font-size: .62rem; font-weight: 800; }
.el-dispatch-week-card strong { font-size: .7rem; }
.el-dispatch-week-card p { margin: 0; color: #586d83; font-size: .64rem; line-height: 1.35; }
.el-dispatch-week-card small { color: #8a98a8; font-size: .58rem; line-height: 1.35; }
.el-dispatch-week-empty { padding: 1rem .25rem; color: #a0adba; font-size: .65rem; text-align: center; }

.el-dispatch-overlay {
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    background: rgb(5 21 41 / 48%);
    backdrop-filter: blur(4px);
}

.el-dispatch-drawer {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(42rem, 100vw);
    height: 100dvh;
    color: var(--el-dispatch-text);
    background: #f5f8fb;
    box-shadow: -24px 0 60px rgb(4 22 42 / 22%);
}

.el-dispatch-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid #dce6ed;
    background: #fff;
}

.el-dispatch-drawer-header span {
    color: #008d96;
    font-size: .66rem;
    font-weight: 800;
}

.el-dispatch-drawer-header h2 {
    margin: .18rem 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.025em;
}

.el-dispatch-drawer-header p {
    margin: .28rem 0 0;
    color: #74869b;
    font-size: .72rem;
}

.el-dispatch-drawer-header > button {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid #dce5ed;
    border-radius: .65rem;
    color: #65788e;
    background: #f8fafc;
    cursor: pointer;
}

.el-dispatch-drawer-header svg { width: 1rem; height: 1rem; }
.el-dispatch-drawer-scroll { overflow-y: auto; padding: .85rem; }

.el-dispatch-form-alert,
.el-dispatch-checks > div {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .65rem;
    padding: .72rem;
    border: 1px solid #dce6ed;
    border-radius: .75rem;
    background: #fff;
}

.el-dispatch-form-alert { margin-bottom: .75rem; }
.el-dispatch-form-alert.danger { color: #a91e38; border-color: #f4c4cd; background: #fff5f6; }
.el-dispatch-form-alert.warning { color: #8a5a08; border-color: #f1d69a; background: #fff9e8; }
.el-dispatch-form-alert > svg { width: 1.1rem; height: 1.1rem; margin: .18rem auto 0; }
.el-dispatch-form-alert strong { font-size: .75rem; }
.el-dispatch-form-alert p { margin: .18rem 0 0; font-size: .67rem; }

.el-dispatch-drawer-section {
    margin-bottom: .75rem;
    overflow: hidden;
    border: 1px solid #dce6ed;
    border-radius: .85rem;
    background: #fff;
}

.el-dispatch-drawer-section-heading {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 3.8rem;
    padding: .72rem .85rem;
    border-bottom: 1px solid #e7edf3;
    background: linear-gradient(180deg, #fff, #fbfdfe);
}

.el-dispatch-drawer-section-heading > span {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .55rem;
    color: #078d96;
    background: #e7f9fa;
}

.el-dispatch-drawer-section-heading svg { width: 1rem; height: 1rem; }
.el-dispatch-drawer-section-heading h3 { margin: 0; font-size: .78rem; font-weight: 800; }
.el-dispatch-drawer-section-heading p { margin: .12rem 0 0; color: #8090a2; font-size: .63rem; }

.el-dispatch-form-grid {
    display: grid;
    gap: .7rem;
    padding: .8rem;
}

.el-dispatch-form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.el-dispatch-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.el-dispatch-form-grid label,
.el-dispatch-notes { display: grid; gap: .32rem; }
.el-dispatch-form-grid label > span,
.el-dispatch-notes > span { color: #334d67; font-size: .68rem; font-weight: 750; }

.el-dispatch-form-grid input,
.el-dispatch-form-grid select,
.el-dispatch-notes textarea {
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid #cfdae5;
    border-radius: .65rem;
    color: #17324f;
    background: #fff;
    outline: none;
}

.el-dispatch-form-grid input,
.el-dispatch-form-grid select { padding: 0 .72rem; }
.el-dispatch-notes { padding: .8rem; }
.el-dispatch-notes textarea { min-height: 6rem; padding: .7rem; resize: vertical; }

.el-dispatch-form-grid input:focus,
.el-dispatch-form-grid select:focus,
.el-dispatch-notes textarea:focus {
    border-color: var(--el-dispatch-teal);
    box-shadow: 0 0 0 3px rgb(0 174 181 / 11%);
}

.el-dispatch-form-grid label.has-error input,
.el-dispatch-form-grid label.has-error select { border-color: #e95a6f; background: #fffafb; }
.el-dispatch-form-grid label > small { color: #d52f49; font-size: .62rem; }

.el-dispatch-checks {
    display: grid;
    gap: .55rem;
    padding: .8rem;
}

.el-dispatch-checks > div > span {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .55rem;
    color: #51708b;
    background: #edf4f8;
}

.el-dispatch-checks svg { width: 1rem; height: 1rem; }
.el-dispatch-checks strong { font-size: .72rem; }
.el-dispatch-checks p { margin: .15rem 0 0; color: #6f8195; font-size: .64rem; line-height: 1.4; }
.el-dispatch-checks > div.tone-danger { border-color: #f3c7cf; background: #fff7f8; }
.el-dispatch-checks > div.tone-danger > span { color: #d8324c; background: #ffeaee; }
.el-dispatch-checks > div.tone-warning { border-color: #f0d8a8; background: #fffaf0; }
.el-dispatch-checks > div.tone-warning > span { color: #b36b00; background: #fff0d0; }
.el-dispatch-checks > div.tone-success { border-color: #bfe8d7; background: #f4fcf8; }
.el-dispatch-checks > div.tone-success > span { color: #11855d; background: #dff7ec; }

.el-dispatch-drawer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .8rem;
    border-top: 1px solid #dce6ed;
    background: #fff;
    box-shadow: 0 -10px 25px rgb(8 36 72 / 6%);
}

.el-dispatch-drawer-footer > div { display: flex; gap: .5rem; }
.el-dispatch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 2.65rem;
    padding: 0 .95rem;
    border: 1px solid transparent;
    border-radius: .68rem;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
}

.el-dispatch-btn svg { width: .95rem; height: .95rem; }
.el-dispatch-btn.primary { color: #fff; background: linear-gradient(135deg, #00aeb5, #078e9d); box-shadow: 0 8px 20px rgb(0 174 181 / 20%); }
.el-dispatch-btn.primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.el-dispatch-btn.secondary { color: #164663; border-color: #cbd9e4; background: #fff; }
.el-dispatch-btn.ghost { color: #687b90; border-color: #dce5ed; background: #f8fafc; }
.el-dispatch-btn.ghost.danger { color: #c73049; }

@media (max-width: 1280px) {
    .el-dispatch-day-layout { grid-template-columns: minmax(0, 1fr) 17rem; }
    .el-dispatch-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .el-dispatch-summary-item:nth-child(3) { border-right: 0; }
    .el-dispatch-summary-item:nth-child(-n+3) { border-bottom: 1px solid #e6edf3; }
}

@media (max-width: 1023px) {
    .el-dispatch-header { align-items: flex-start; }
    .el-dispatch-header-actions { flex-wrap: wrap; justify-content: flex-end; }
    .el-dispatch-day-layout { grid-template-columns: 1fr; }
    .el-dispatch-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .el-dispatch-header { display: grid; gap: .8rem; }
    .el-dispatch-header-actions { display: grid; grid-template-columns: 1fr; }
    .el-dispatch-view-switch,
    .el-dispatch-date-nav { width: 100%; }
    .el-dispatch-view-switch button { flex: 1; }
    .el-dispatch-date-nav { justify-content: space-between; }
    .el-dispatch-date-label { flex: 1; justify-content: center; }
    .el-dispatch-summary { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
    .el-dispatch-summary-item { flex: 0 0 9.5rem; border-bottom: 0 !important; scroll-snap-align: start; }
    .el-dispatch-trip-card { grid-template-columns: 4.6rem minmax(0, 1fr); }
    .el-dispatch-trip-open { display: none; }
    .el-dispatch-trip-time { padding-inline: .35rem; }
    .el-dispatch-trip-main { padding: .8rem; }
    .el-dispatch-trip-topline { flex-wrap: wrap; }
    .el-dispatch-trip-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
    .el-dispatch-resources { grid-template-columns: 1fr; }
    .el-dispatch-week-grid { grid-template-columns: repeat(7, 11rem); }
    .el-dispatch-drawer { width: 100vw; }
    .el-dispatch-form-grid.two,
    .el-dispatch-form-grid.three { grid-template-columns: 1fr; }
    .el-dispatch-drawer-footer { align-items: stretch; }
    .el-dispatch-drawer-footer,
    .el-dispatch-drawer-footer > div { display: grid; grid-template-columns: 1fr; width: 100%; }
    .el-dispatch-drawer-footer > div:first-child:empty { display: none; }
    .el-dispatch-btn { width: 100%; }
}

/* ELEMOVE DISPATCH COURSE CREATOR V4 */
.el-dispatch-create-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 2.85rem;
    padding: 0 1rem;
    border: 0;
    border-radius: .75rem;
    color: #fff;
    background: linear-gradient(135deg, #00aeb5, #078e9d);
    box-shadow: 0 9px 22px rgb(0 174 181 / 22%);
    font-size: .75rem;
    font-weight: 800;
    cursor: pointer;
}

.el-dispatch-create-button svg {
    width: 1rem;
    height: 1rem;
}

.el-dispatch-empty .el-dispatch-btn {
    margin-top: .8rem;
}

.el-dispatch-create-drawer {
    width: min(49rem, 100vw);
}

.el-dispatch-order-context {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, .7fr);
    align-items: end;
    gap: .8rem;
    padding: .8rem;
    border: 1px solid #dce7ee;
    border-radius: .75rem;
    background: linear-gradient(135deg, #f5fbfc, #fbfdfe);
}

.el-dispatch-order-context > div:first-child {
    display: grid;
    gap: .18rem;
}

.el-dispatch-order-context > div:first-child > span {
    color: #008e97;
    font-size: .62rem;
    font-weight: 850;
    text-transform: uppercase;
}

.el-dispatch-order-context > div:first-child > strong {
    color: #17334f;
    font-size: .86rem;
}

.el-dispatch-order-context p {
    margin: 0;
    color: #75869a;
    font-size: .66rem;
}

.el-dispatch-order-context label {
    display: grid;
    gap: .32rem;
}

.el-dispatch-order-context label > span {
    color: #334d67;
    font-size: .68rem;
    font-weight: 750;
}

.el-dispatch-order-context input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0 .72rem;
    border: 1px solid #cfdae5;
    border-radius: .65rem;
    color: #17324f;
    background: #fff;
    outline: none;
}

.el-dispatch-route-selector {
    display: grid;
    gap: .5rem;
    padding: .8rem;
}

.el-dispatch-route-selector > label {
    display: grid;
    grid-template-columns: 1.15rem 2rem minmax(0, 1fr);
    align-items: center;
    gap: .6rem;
    min-height: 3.5rem;
    padding: .55rem .65rem;
    border: 1px solid #dce6ed;
    border-radius: .72rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.el-dispatch-route-selector > label:has(input:checked) {
    border-color: #9ddfe2;
    background: #f3fbfc;
}

.el-dispatch-route-selector input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--el-dispatch-teal);
}

.el-dispatch-route-number {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: #087f88;
    background: #e5f8f9;
    font-size: .68rem;
    font-weight: 850;
}

.el-dispatch-route-copy {
    display: grid;
    min-width: 0;
    gap: .12rem;
}

.el-dispatch-route-copy strong {
    overflow: hidden;
    color: #17334f;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-dispatch-route-copy small {
    overflow: hidden;
    color: #8291a3;
    font-size: .62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-dispatch-route-selector.has-error {
    background: #fff9fa;
}

.el-dispatch-inline-error {
    display: block;
    padding: .25rem .2rem 0;
    color: #d52f49;
    font-size: .64rem;
}

.el-dispatch-cargo-planner {
    display: grid;
    gap: .6rem;
    padding: .8rem;
}

.el-dispatch-cargo-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(7rem, .48fr) minmax(9rem, .62fr);
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid #dce6ed;
    border-radius: .78rem;
    background: #fff;
}

.el-dispatch-cargo-row.is-complete {
    opacity: .62;
    background: #f8fafc;
}

.el-dispatch-cargo-row > div:first-child,
.el-dispatch-cargo-remaining {
    display: grid;
    gap: .14rem;
}

.el-dispatch-cargo-row > div:first-child strong {
    color: #17334f;
    font-size: .74rem;
}

.el-dispatch-cargo-row > div:first-child span,
.el-dispatch-cargo-remaining small {
    color: #8190a2;
    font-size: .61rem;
}

.el-dispatch-cargo-remaining strong {
    color: #087f88;
    font-size: .74rem;
}

.el-dispatch-cargo-row > label {
    display: grid;
    gap: .3rem;
}

.el-dispatch-cargo-row > label > span {
    color: #334d67;
    font-size: .65rem;
    font-weight: 750;
}

.el-dispatch-cargo-row > label > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid #cfdae5;
    border-radius: .62rem;
    background: #fff;
}

.el-dispatch-cargo-row input {
    width: 100%;
    min-height: 2.55rem;
    padding: 0 .65rem;
    border: 0;
    color: #17324f;
    background: transparent;
    outline: none;
}

.el-dispatch-cargo-row em {
    padding: 0 .65rem;
    color: #6d8095;
    font-size: .66rem;
    font-style: normal;
    font-weight: 750;
}

.el-dispatch-cargo-row label.has-error > div {
    border-color: #e95a6f;
    background: #fffafb;
}

.el-dispatch-cargo-row label > small,
.el-dispatch-cargo-row > p {
    color: #d52f49;
    font-size: .6rem;
}

.el-dispatch-cargo-row > p {
    grid-column: 1 / -1;
    margin: -.25rem 0 0;
    color: #6c8095;
    text-align: right;
}

.el-dispatch-create-warning {
    padding: .8rem;
    border: 1px solid #efd5a6;
    border-radius: .72rem;
    color: #9a6105;
    background: #fffaf1;
    font-size: .68rem;
}

@media (max-width: 767px) {
    .el-dispatch-create-button {
        width: 100%;
    }

    .el-dispatch-header-actions .el-dispatch-create-button {
        order: -1;
    }

    .el-dispatch-order-context,
    .el-dispatch-cargo-row {
        grid-template-columns: 1fr;
    }

    .el-dispatch-cargo-row > p {
        text-align: left;
    }

    .el-dispatch-route-copy strong,
    .el-dispatch-route-copy small {
        white-space: normal;
    }
}

/* ELEMOVE DISPATCH CREATOR UI V5 */
.el-dispatch-create-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.el-dispatch-create-button span {
    white-space: nowrap;
}

.el-dispatch-create-drawer {
    width: min(58rem, 100vw);
}

.el-dispatch-create-drawer,
.el-dispatch-create-drawer * {
    box-sizing: border-box;
}

.el-dispatch-create-drawer .el-dispatch-drawer-scroll {
    min-width: 0;
    overflow-x: hidden;
    padding: 1rem;
}

.el-dispatch-create-drawer .el-dispatch-drawer-section,
.el-dispatch-create-drawer .el-dispatch-form-grid,
.el-dispatch-create-drawer .el-dispatch-form-grid > *,
.el-dispatch-create-drawer .el-dispatch-order-context,
.el-dispatch-create-drawer .el-dispatch-route-selector,
.el-dispatch-create-drawer .el-dispatch-cargo-planner,
.el-dispatch-create-drawer .el-dispatch-cargo-row {
    min-width: 0;
}

.el-dispatch-order-section {
    position: relative;
    z-index: 20;
    overflow: visible;
}

.el-dispatch-order-picker {
    position: relative;
    display: grid;
    gap: .34rem;
    min-width: 0;
}

.el-dispatch-field-label {
    color: #334d67;
    font-size: .68rem;
    font-weight: 750;
}

.el-dispatch-order-search-control {
    display: grid;
    grid-template-columns: 1.1rem minmax(0, 1fr) 2.35rem;
    align-items: center;
    gap: .5rem;
    min-height: 3rem;
    padding-left: .8rem;
    overflow: hidden;
    border: 1px solid #cfdae5;
    border-radius: .72rem;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.el-dispatch-order-picker:focus-within .el-dispatch-order-search-control {
    border-color: var(--el-dispatch-teal);
    box-shadow: 0 0 0 3px rgb(0 174 181 / 11%);
}

.el-dispatch-order-picker.has-error .el-dispatch-order-search-control {
    border-color: #e95a6f;
    background: #fffafb;
}

.el-dispatch-order-search-control > svg {
    width: 1rem;
    height: 1rem;
    color: #8293a6;
}

.el-dispatch-order-search-control input {
    width: 100%;
    min-width: 0;
    min-height: 2.9rem;
    padding: 0;
    border: 0;
    outline: 0;
    color: #17324f;
    background: transparent;
}

.el-dispatch-order-search-control input::-webkit-search-cancel-button {
    display: none;
}

.el-dispatch-order-clear,
.el-dispatch-order-toggle {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.9rem;
    padding: 0;
    border: 0;
    border-left: 1px solid #e2e9ef;
    color: #6b7f94;
    background: #f8fafc;
    cursor: pointer;
}

.el-dispatch-order-clear:hover,
.el-dispatch-order-toggle:hover {
    color: #087f88;
    background: #f0fafb;
}

.el-dispatch-order-clear svg,
.el-dispatch-order-toggle svg {
    width: .95rem;
    height: .95rem;
}

.el-dispatch-order-options {
    position: absolute;
    z-index: 100;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    display: grid;
    max-height: 20rem;
    overflow-y: auto;
    padding: .35rem;
    border: 1px solid #cedbe5;
    border-radius: .78rem;
    background: #fff;
    box-shadow: 0 20px 45px rgb(5 29 53 / 20%);
}

.el-dispatch-order-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    width: 100%;
    min-width: 0;
    padding: .72rem .75rem;
    border: 0;
    border-radius: .62rem;
    color: #17324f;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.el-dispatch-order-option:hover,
.el-dispatch-order-option.is-selected {
    background: #eefafb;
}

.el-dispatch-order-option.is-selected {
    box-shadow: inset 3px 0 0 var(--el-dispatch-teal);
}

.el-dispatch-order-option-main {
    display: grid;
    min-width: 0;
    gap: .14rem;
}

.el-dispatch-order-option-main strong {
    overflow: hidden;
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-dispatch-order-option-main small {
    overflow: hidden;
    color: #74869a;
    font-size: .64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-dispatch-order-option-status {
    max-width: 11rem;
    padding: .3rem .48rem;
    border-radius: 999px;
    color: #087f88;
    background: #e7f8f9;
    font-size: .61rem;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.el-dispatch-order-option-status.is-complete {
    color: #718196;
    background: #edf1f5;
}

.el-dispatch-order-empty {
    display: grid;
    justify-items: center;
    gap: .28rem;
    padding: 1.4rem .8rem;
    color: #7a8b9f;
    text-align: center;
}

.el-dispatch-order-empty svg {
    width: 1.35rem;
    height: 1.35rem;
}

.el-dispatch-order-empty strong {
    color: #334d67;
    font-size: .72rem;
}

.el-dispatch-order-empty span {
    font-size: .63rem;
}

.el-dispatch-field-error {
    color: #d52f49;
    font-size: .62rem;
}

.el-dispatch-route-selector {
    grid-template-columns: 1fr;
}

.el-dispatch-route-selector > label {
    width: 100%;
    min-width: 0;
}

.el-dispatch-cargo-row > * {
    min-width: 0;
}

@media (max-width: 1100px) {
    .el-dispatch-header {
        align-items: flex-start;
    }

    .el-dispatch-header-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        width: min(34rem, 100%);
    }

    .el-dispatch-header-actions .el-dispatch-create-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .el-dispatch-view-switch,
    .el-dispatch-date-nav {
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .el-dispatch-create-drawer {
        width: 100vw;
    }

    .el-dispatch-order-context {
        grid-template-columns: 1fr;
    }

    .el-dispatch-cargo-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .el-dispatch-cargo-row > label,
    .el-dispatch-cargo-row > p {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .el-dispatch-create-drawer .el-dispatch-drawer-header {
        padding: .95rem 1rem;
    }

    .el-dispatch-create-drawer .el-dispatch-drawer-scroll {
        padding: .7rem;
    }

    .el-dispatch-create-drawer .el-dispatch-drawer-section-heading {
        align-items: flex-start;
        padding: .7rem;
    }

    .el-dispatch-create-drawer .el-dispatch-form-grid,
    .el-dispatch-create-drawer .el-dispatch-route-selector,
    .el-dispatch-create-drawer .el-dispatch-cargo-planner,
    .el-dispatch-create-drawer .el-dispatch-notes {
        padding: .7rem;
    }

    .el-dispatch-order-option {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .el-dispatch-order-option-status {
        max-width: 100%;
        justify-self: start;
    }

    .el-dispatch-order-option-main strong,
    .el-dispatch-order-option-main small {
        white-space: normal;
    }

    .el-dispatch-route-selector > label {
        grid-template-columns: 1.1rem 1.8rem minmax(0, 1fr);
        gap: .45rem;
        padding: .55rem;
    }

    .el-dispatch-route-number {
        width: 1.8rem;
        height: 1.8rem;
    }

    .el-dispatch-cargo-row {
        grid-template-columns: 1fr;
        gap: .55rem;
    }

    .el-dispatch-cargo-row > label,
    .el-dispatch-cargo-row > p {
        grid-column: auto;
    }
}

/* ELEMOVE LIVE DRIVER STATUS V1 */
.el-dispatch-live-stage {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .55rem;
    align-items: center;
    margin-top: .65rem;
    padding: .55rem .65rem;
    border: 1px solid #dfe8ef;
    border-radius: .65rem;
    background: #f7fafc;
}

.el-dispatch-live-stage > span,
.el-dispatch-live-panel-current > span {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .58rem;
    color: #50708d;
    background: #eaf0f5;
}

.el-dispatch-live-stage svg,
.el-dispatch-live-panel-current > span svg {
    width: 1.05rem;
    height: 1.05rem;
}

.el-dispatch-live-stage > div {
    display: grid;
    gap: .08rem;
    min-width: 0;
}

.el-dispatch-live-stage strong {
    overflow: hidden;
    color: #173451;
    font-size: .72rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-dispatch-live-stage small {
    overflow: hidden;
    color: #6f8196;
    font-size: .61rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-dispatch-live-stage em,
.el-dispatch-live-panel-current em {
    color: #b14b13;
    font-size: .59rem;
    font-style: normal;
    font-weight: 800;
}

.el-dispatch-live-stage.tone-blue,
.el-dispatch-live-panel-current.tone-blue { border-color: #cfe2fa; background: #f3f8ff; }
.el-dispatch-live-stage.tone-blue > span,
.el-dispatch-live-panel-current.tone-blue > span { color: #2869b8; background: #e4f0ff; }
.el-dispatch-live-stage.tone-teal,
.el-dispatch-live-panel-current.tone-teal { border-color: #c8e8e9; background: #f1fbfb; }
.el-dispatch-live-stage.tone-teal > span,
.el-dispatch-live-panel-current.tone-teal > span { color: #007f87; background: #ddf7f8; }
.el-dispatch-live-stage.tone-warning,
.el-dispatch-live-panel-current.tone-warning { border-color: #f1d8a7; background: #fffaf0; }
.el-dispatch-live-stage.tone-warning > span,
.el-dispatch-live-panel-current.tone-warning > span { color: #a96810; background: #fff0ce; }
.el-dispatch-live-stage.tone-success,
.el-dispatch-live-panel-current.tone-success { border-color: #cbe9db; background: #f2fbf7; }
.el-dispatch-live-stage.tone-success > span,
.el-dispatch-live-panel-current.tone-success > span { color: #087d54; background: #def5ea; }
.el-dispatch-live-stage.tone-danger,
.el-dispatch-live-panel-current.tone-danger { border-color: #f2ccd3; background: #fff5f6; }
.el-dispatch-live-stage.tone-danger > span,
.el-dispatch-live-panel-current.tone-danger > span { color: #c92c45; background: #ffe5e9; }
.el-dispatch-live-stage.is-stale,
.el-dispatch-live-panel-current.is-stale { border-color: #efc48e; box-shadow: 0 0 0 3px rgb(230 145 43 / 7%); }

.el-dispatch-week-stage {
    display: block;
    margin-top: .42rem;
    padding: .28rem .4rem;
    border-radius: .38rem;
    overflow: hidden;
    color: #50647a;
    background: #eef3f7;
    font-size: .56rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-dispatch-week-stage.tone-teal { color: #007f87; background: #e4f8f8; }
.el-dispatch-week-stage.tone-blue { color: #2869b8; background: #eaf3ff; }
.el-dispatch-week-stage.tone-warning { color: #9a6418; background: #fff2d7; }
.el-dispatch-week-stage.tone-success { color: #087d54; background: #e8f8f0; }
.el-dispatch-week-stage.tone-danger { color: #c92c45; background: #fff0f3; }

.el-dispatch-live-panel {
    display: grid;
    gap: .65rem;
}

.el-dispatch-live-panel-current {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: .72rem;
    align-items: start;
    padding: .85rem;
    border: 1px solid #dce6ed;
    border-radius: .78rem;
    background: #f7fafc;
}

.el-dispatch-live-panel-current > span {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .72rem;
}

.el-dispatch-live-panel-current > span svg {
    width: 1.25rem;
    height: 1.25rem;
}

.el-dispatch-live-panel-current > div {
    display: grid;
    gap: .12rem;
}

.el-dispatch-live-panel-current small {
    color: #7a8da2;
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.el-dispatch-live-panel-current strong {
    color: #173451;
    font-size: .91rem;
    line-height: 1.3;
}

.el-dispatch-live-panel-current p {
    margin: 0;
    color: #667b91;
    font-size: .68rem;
}

.el-dispatch-live-panel-current time {
    margin-top: .16rem;
    color: #7c8da0;
    font-size: .61rem;
}

.el-dispatch-live-history {
    overflow: hidden;
    border: 1px solid #dce6ed;
    border-radius: .72rem;
    background: #fff;
}

.el-dispatch-live-history summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .7rem .8rem;
    color: #294761;
    font-size: .68rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.el-dispatch-live-history summary::-webkit-details-marker { display: none; }
.el-dispatch-live-history summary span {
    display: grid;
    place-items: center;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 .35rem;
    border-radius: 999px;
    color: #007f87;
    background: #e5fafb;
    font-size: .59rem;
}

.el-dispatch-live-history > div {
    border-top: 1px solid #e6edf3;
}

.el-dispatch-live-history article {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: center;
    padding: .62rem .75rem;
    border-bottom: 1px solid #edf2f6;
}

.el-dispatch-live-history article:last-child { border-bottom: 0; }
.el-dispatch-live-history article > i {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .5rem;
    color: #47708f;
    background: #edf3f7;
}
.el-dispatch-live-history article > i svg { width: .9rem; height: .9rem; }
.el-dispatch-live-history article.tone-teal > i { color: #007f87; background: #e4f8f8; }
.el-dispatch-live-history article.tone-warning > i { color: #9a6418; background: #fff2d7; }
.el-dispatch-live-history article.tone-success > i { color: #087d54; background: #e8f8f0; }
.el-dispatch-live-history article > div { display: grid; gap: .08rem; min-width: 0; }
.el-dispatch-live-history article strong { color: #294761; font-size: .66rem; }
.el-dispatch-live-history article small { color: #74869a; font-size: .59rem; }
.el-dispatch-live-history article time { color: #8494a5; font-size: .57rem; white-space: nowrap; }

@media (max-width: 767px) {
    .el-dispatch-live-stage { grid-template-columns: 1.8rem minmax(0, 1fr); padding: .5rem; }
    .el-dispatch-live-stage > span { width: 1.8rem; height: 1.8rem; }
    .el-dispatch-live-stage strong,
    .el-dispatch-live-stage small { white-space: normal; }
    .el-dispatch-live-history article { grid-template-columns: 1.8rem minmax(0, 1fr); }
    .el-dispatch-live-history article time { grid-column: 2; }
}

/* ELEMOVE LIVE DRIVER STATUS V1 */
.el-details-trip-live {
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    margin: 0 1rem .9rem;
    padding: .85rem;
    border: 1px solid #dce6ed;
    border-radius: .8rem;
    background: #f7fafc;
}

.el-details-trip-live > span {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .72rem;
    color: #50708d;
    background: #eaf0f5;
}

.el-details-trip-live > span svg { width: 1.3rem; height: 1.3rem; }
.el-details-trip-live > div { display: grid; gap: .1rem; min-width: 0; }
.el-details-trip-live small {
    color: #7b8da1;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.el-details-trip-live strong { color: #173451; font-size: .94rem; line-height: 1.3; }
.el-details-trip-live p { margin: 0; color: #64798f; font-size: .71rem; }
.el-details-trip-live time { margin-top: .18rem; color: #7d8da0; font-size: .63rem; }
.el-details-trip-live em { color: #b14b13; font-size: .62rem; font-style: normal; font-weight: 800; }

.el-details-trip-live.tone-blue { border-color: #cfe2fa; background: #f3f8ff; }
.el-details-trip-live.tone-blue > span { color: #2869b8; background: #e4f0ff; }
.el-details-trip-live.tone-teal { border-color: #c8e8e9; background: #f1fbfb; }
.el-details-trip-live.tone-teal > span { color: #007f87; background: #ddf7f8; }
.el-details-trip-live.tone-warning { border-color: #f1d8a7; background: #fffaf0; }
.el-details-trip-live.tone-warning > span { color: #a96810; background: #fff0ce; }
.el-details-trip-live.tone-success { border-color: #cbe9db; background: #f2fbf7; }
.el-details-trip-live.tone-success > span { color: #087d54; background: #def5ea; }
.el-details-trip-live.tone-danger { border-color: #f2ccd3; background: #fff5f6; }
.el-details-trip-live.tone-danger > span { color: #c92c45; background: #ffe5e9; }
.el-details-trip-live.is-stale { border-color: #efc48e; box-shadow: 0 0 0 3px rgb(230 145 43 / 7%); }

.el-details-trip-timeline {
    margin: 0 1rem .9rem;
    overflow: hidden;
    border: 1px solid #dce6ed;
    border-radius: .8rem;
    background: #fff;
}

.el-details-trip-timeline > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .75rem .85rem;
    color: #294761;
    cursor: pointer;
    list-style: none;
}

.el-details-trip-timeline > summary::-webkit-details-marker { display: none; }
.el-details-trip-timeline > summary > span { display: inline-flex; align-items: center; gap: .42rem; font-size: .7rem; font-weight: 850; }
.el-details-trip-timeline > summary svg { width: .95rem; height: .95rem; color: #007f87; }
.el-details-trip-timeline > summary em { color: #798b9e; font-size: .62rem; font-style: normal; font-weight: 700; }
.el-details-trip-timeline-list { border-top: 1px solid #e6edf3; }
.el-details-trip-timeline-list article {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .68rem .8rem;
    border-bottom: 1px solid #edf2f6;
}
.el-details-trip-timeline-list article:last-child { border-bottom: 0; }
.el-details-trip-timeline-list article > i {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .55rem;
    color: #47708f;
    background: #edf3f7;
}
.el-details-trip-timeline-list article > i svg { width: .95rem; height: .95rem; }
.el-details-trip-timeline-list article.tone-teal > i { color: #007f87; background: #e4f8f8; }
.el-details-trip-timeline-list article.tone-warning > i { color: #9a6418; background: #fff2d7; }
.el-details-trip-timeline-list article.tone-success > i { color: #087d54; background: #e8f8f0; }
.el-details-trip-timeline-list article > div { display: grid; gap: .08rem; min-width: 0; }
.el-details-trip-timeline-list article strong { color: #294761; font-size: .68rem; }
.el-details-trip-timeline-list article small { color: #74869a; font-size: .61rem; }
.el-details-trip-timeline-list article time { color: #8494a5; font-size: .59rem; white-space: nowrap; }

@media (max-width: 767px) {
    .el-details-trip-live,
    .el-details-trip-timeline { margin-inline: .7rem; }
    .el-details-trip-live { grid-template-columns: 2.35rem minmax(0, 1fr); padding: .7rem; }
    .el-details-trip-live > span { width: 2.35rem; height: 2.35rem; }
    .el-details-trip-timeline-list article { grid-template-columns: 1.9rem minmax(0, 1fr); }
    .el-details-trip-timeline-list article time { grid-column: 2; }
}

/* Dispatch week view v2 */
.el-dispatch-week-heading {
    align-items: center;
}

.el-dispatch-week-hint {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #7a8b9d;
    font-size: .64rem;
    font-weight: 650;
}

.el-dispatch-week-hint svg {
    width: .9rem;
    height: .9rem;
}

.el-dispatch-week-grid {
    align-items: stretch;
    border-top: 1px solid #e8eef3;
}

.el-dispatch-week-day {
    position: relative;
    display: flex;
    min-height: 31rem;
    flex-direction: column;
}

.el-dispatch-week-day.is-today {
    box-shadow: inset 0 3px 0 var(--el-dispatch-teal);
}

.el-dispatch-week-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.5rem;
    padding: .68rem .72rem;
    border: 0;
    border-bottom: 1px solid #e8eef3;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
}

.el-dispatch-week-day-header:hover {
    background: #f4fafb;
}

.el-dispatch-week-day-header > span {
    display: grid;
    gap: .05rem;
}

.el-dispatch-week-day-header small {
    color: #71849a;
    font-size: .64rem;
    font-weight: 750;
    text-transform: capitalize;
}

.el-dispatch-week-day-header strong {
    color: #173655;
    font-size: .86rem;
    font-weight: 850;
}

.el-dispatch-week-day-header em {
    display: grid;
    place-items: center;
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 0 .3rem;
    border-radius: 999px;
    color: #557087;
    background: #edf4f7;
    font-size: .62rem;
    font-style: normal;
    font-weight: 850;
}

.el-dispatch-week-day.is-today .el-dispatch-week-day-header em {
    color: #067078;
    background: #dbf5f4;
}

.el-dispatch-week-day-body {
    flex: 1 1 auto;
    min-height: 25rem;
    padding: .48rem;
}

.el-dispatch-week-card {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0;
    border-left-width: 3px;
    cursor: default;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.el-dispatch-week-card:hover {
    border-color: #cbdce5;
    box-shadow: 0 8px 20px rgb(8 36 72 / 8%);
    transform: translateY(-1px);
}

.el-dispatch-week-card.has-conflict {
    background: #fffafb;
}

.el-dispatch-week-card-main {
    display: grid;
    width: 100%;
    gap: .34rem;
    padding: .62rem .62rem .52rem;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.el-dispatch-week-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
}

.el-dispatch-week-card-topline > strong {
    color: #078d96;
    font-size: .65rem;
    font-weight: 850;
}

.el-dispatch-week-status {
    overflow: hidden;
    max-width: 6.7rem;
    padding: .18rem .34rem;
    border-radius: .36rem;
    color: #5d7185;
    background: #eef3f6;
    font-size: .52rem;
    font-style: normal;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-dispatch-week-status.tone-danger { color: #bd2940; background: #fff0f3; }
.el-dispatch-week-status.tone-teal { color: #06747c; background: #e4f8f8; }
.el-dispatch-week-status.tone-blue { color: #2869b8; background: #eaf3ff; }
.el-dispatch-week-status.tone-success { color: #087d54; background: #e8f8f0; }
.el-dispatch-week-status.tone-muted { color: #7b8795; background: #f0f2f4; }

.el-dispatch-week-order {
    overflow: hidden;
    color: #243d58;
    font-size: .68rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-dispatch-week-route {
    display: -webkit-box;
    overflow: hidden;
    margin: .02rem 0 .08rem;
    color: #5d7186;
    font-size: .62rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.el-dispatch-week-resource {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    color: #718296;
    font-size: .58rem;
    line-height: 1.25;
}

.el-dispatch-week-resource svg {
    flex: 0 0 auto;
    width: .78rem;
    height: .78rem;
}

.el-dispatch-week-resource.is-missing {
    color: #b46a16;
    font-weight: 750;
}

.el-dispatch-week-conflict {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .04rem;
    padding: .28rem .38rem;
    border-radius: .38rem;
    color: #b6263f;
    background: #fff0f3;
    font-size: .56rem;
    font-weight: 800;
}

.el-dispatch-week-conflict svg {
    width: .78rem;
    height: .78rem;
}

.el-dispatch-week-card .el-dispatch-week-stage {
    justify-self: start;
    margin-top: .08rem;
}

.el-dispatch-week-reschedule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    width: 100%;
    min-height: 1.9rem;
    border: 0;
    border-top: 1px solid #edf2f5;
    color: #64798d;
    background: #fafcfd;
    font-size: .56rem;
    font-weight: 780;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.el-dispatch-week-reschedule:hover {
    color: #05757d;
    background: #f1fafb;
}

.el-dispatch-week-reschedule svg {
    width: .78rem;
    height: .78rem;
}

.el-dispatch-week-day-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: .28rem;
    padding: .4rem .48rem .48rem;
    border-top: 1px solid #edf2f5;
    background: #fbfcfd;
}

.el-dispatch-week-day-alerts span {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    color: #a05e13;
    font-size: .52rem;
    font-weight: 760;
}

.el-dispatch-week-day-alerts span.danger {
    color: #bd2940;
}

.el-dispatch-week-day-alerts svg {
    width: .7rem;
    height: .7rem;
}

.el-dispatch-reschedule-overlay {
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.el-dispatch-reschedule-dialog {
    width: min(34rem, 100%);
    overflow: hidden;
    border: 1px solid #dce6ed;
    border-radius: 1rem;
    background: #f5f8fb;
    box-shadow: 0 28px 80px rgb(4 22 42 / 28%);
}

.el-dispatch-reschedule-dialog > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.05rem;
    border-bottom: 1px solid #dce6ed;
    background: #fff;
}

.el-dispatch-reschedule-dialog > header span {
    color: #008d96;
    font-size: .64rem;
    font-weight: 850;
}

.el-dispatch-reschedule-dialog > header h2 {
    margin: .14rem 0 0;
    color: #173652;
    font-size: 1.08rem;
    font-weight: 850;
}

.el-dispatch-reschedule-dialog > header p {
    margin: .25rem 0 0;
    color: #75879a;
    font-size: .68rem;
    line-height: 1.45;
}

.el-dispatch-reschedule-dialog > header > button {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid #dce5ed;
    border-radius: .62rem;
    color: #65788e;
    background: #f8fafc;
    cursor: pointer;
}

.el-dispatch-reschedule-dialog > header > button svg {
    width: .95rem;
    height: .95rem;
}

.el-dispatch-reschedule-body {
    padding: .9rem;
}

.el-dispatch-reschedule-shift {
    display: flex;
    justify-content: space-between;
    gap: .55rem;
    margin-bottom: .75rem;
}

.el-dispatch-reschedule-shift button {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .42rem .55rem;
    border: 1px solid #d7e3ea;
    border-radius: .55rem;
    color: #587087;
    background: #fff;
    font-size: .6rem;
    font-weight: 750;
    cursor: pointer;
}

.el-dispatch-reschedule-shift button:hover {
    color: #05757d;
    border-color: #b9dfe1;
    background: #f5fbfb;
}

.el-dispatch-reschedule-shift svg {
    width: .75rem;
    height: .75rem;
}

.el-dispatch-reschedule-note {
    display: grid;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    gap: .5rem;
    margin-top: .75rem;
    padding: .65rem .7rem;
    border: 1px solid #dce8ef;
    border-radius: .68rem;
    color: #63788c;
    background: #f8fbfd;
}

.el-dispatch-reschedule-note svg {
    width: 1rem;
    height: 1rem;
    color: #3f7897;
}

.el-dispatch-reschedule-note p {
    margin: 0;
    font-size: .62rem;
    line-height: 1.45;
}

.el-dispatch-reschedule-dialog > footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem .9rem;
    border-top: 1px solid #dce6ed;
    background: #fff;
}

@media (max-width: 700px) {
    .el-dispatch-week-hint { display: none; }
    .el-dispatch-reschedule-shift { flex-direction: column; }
    .el-dispatch-reschedule-shift button { justify-content: center; }
    .el-dispatch-reschedule-dialog > footer { flex-wrap: wrap; }
    .el-dispatch-reschedule-dialog > footer .el-dispatch-btn { flex: 1 1 11rem; justify-content: center; }
}