/* Modern Digital: isolated to the client login and shipments screens. */
.client-login, .client-home { color: #2c384b; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.client-login a, .client-home a { color: #3568c4; }
.client-login button, .client-home button { transition: background-color .15s, border-color .15s; }
.client-login button:focus-visible, .client-login a:focus-visible, .client-login input:focus-visible, .client-home button:focus-visible, .client-home .table-scroll:focus-visible { outline: 3px solid #9dc5ff; outline-offset: 3px; }
.client-login { background: #fff; }
.client-login main { display: grid; grid-template-columns: 5fr 7fr; max-width: none; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0; }
.login-brand { position: relative; overflow: hidden; min-width: 0; background: linear-gradient(105deg, #edf3ff 0%, #dae7fd 55%, #c4d8f9 100%); }
.login-brand .brand-logo { position: absolute; left: 48px; top: 48px; width: 140px; height: 32px; }
.brand-art { position: absolute; width: 70%; height: auto; opacity: .22; }
.brand-art-first { left: 15%; top: 39.5%; }
.brand-art-second { left: 43%; top: 58%; width: 84%; opacity: .10; }
.login-content { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 48px; }
.login-form { width: 400px; max-width: 100%; }
.client-login h1 { font-size: 28px; line-height: 1.3; margin: 0 0 26px; font-weight: 600; letter-spacing: -.5px; }
.client-login label { margin: 20px 0 5px; color: #70809b; font-size: 14px; }
.client-login input:not([type=checkbox]) { height: 48px; border: 1px solid #c5d2e7; border-radius: 12px; background: white; color: #2c384b; }
.client-login .remember { display: flex; align-items: center; gap: 8px; margin: 24px 0; font-size: 13px; }
.client-login input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: #3568b7; }
.client-login button { display: block; width: 100%; height: 48px; margin: 0; background: #3568b7; border-radius: 12px; font-size: 13px; font-weight: 600; }
.client-login button:hover, .client-home .filter-actions > button:first-child:hover { background: #285799; }
.client-login .password-link { text-align: center; margin: 24px 0 0; font-size: 13px; }
.client-login .password-link a { text-decoration: none; font-weight: 600; }
.client-login .errors { margin-bottom: 16px; padding: 10px 12px; border-radius: 8px; background: #fff1f1; font-size: 14px; }
.client-home { background: #f0f4fa; }
.client-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 76px; padding: 18px 32px; background: #fff; border-bottom: 1px solid #dfe6f0; }
.client-brand { display: flex; align-items: center; gap: 24px; min-width: 0; }
.client-brand img { display: block; width: 140px; height: 32px; flex-shrink: 0; }
.client-brand span { font-size: 13px; color: #7889a2; }
.client-header .client-logout { display: inline-flex; align-items: center; justify-content: center; height: 36px; margin: 0; padding: 0 14px; border: 1px solid #dce4f0; border-radius: 8px; background: #fff; color: #3568b7; font-size: 13px; line-height: 1; }
.client-header .client-logout:hover { background: #edf3fc; border-color: #bdcee7; }
.client-header .client-logout:focus-visible { outline: 3px solid #9dc5ff; outline-offset: 3px; }
.client-account { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; }
.client-account form { margin: 0; flex-shrink: 0; }
.client-account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #2c384b; }
.client-header .client-brand { flex-shrink: 0; }
.client-home main { width: auto; min-width: 0; max-width: none; margin: 0; padding: 28px 32px 32px; border: 0; border-radius: 0; background: transparent; }
.client-home .shipments { min-width: 0; font-size: 14px; }
.client-home .shipment-heading { margin-bottom: 28px; gap: 16px; align-items: baseline; }
.client-home .shipment-heading h2, .client-home .client-name { font-size: 28px; line-height: 1.3; font-weight: 600; letter-spacing: -.4px; }
.client-home .shipment-heading h2 { flex: 0 0 auto; }
.client-home .client-name { font-size: 21px; min-width: 0; max-width: 100%; margin-left: auto; text-align: right; overflow-wrap: anywhere; }
.client-home .organization-buttons { gap: 8px; padding-bottom: 16px; }
.client-home .filter-card { padding: 20px; border: 1px solid #dce4f0; border-radius: 18px; background: #fff; box-shadow: 0 2px 4px #21395c03; }
.client-home .shipment-tabs { display: inline-flex; max-width: 100%; gap: 4px; margin: 0 0 24px; padding: 4px; border-radius: 12px; background: #e8efff; }
.client-home .shipment-tabs button { min-height: 40px; padding: 10px 16px; border: 0; border-radius: 8px; background: transparent; color: #6c7d98; font-size: 13px; }
.client-home .shipment-tabs .outline.active { background: #fff; color: #3568c4; font-weight: 600; box-shadow: 0 1px 4px #3568b710; }
.client-home .shipment-filters { padding: 0; border: 0; border-radius: 0; background: transparent; }
.client-home .filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.client-home .shipments label { min-width: 0; color: #7486a2; font-size: 12px; }
.client-home .shipments input, .client-home .shipments select { display: block; min-width: 0; width: 100%; max-width: 100%; height: 38px; margin-top: 5px; padding: 8px 10px; border: 1px solid #c9d6eb; border-radius: 11px; color: #2c384b; background-color: #fff; font-size: 13px; }
.client-home .extra-filters { margin-top: 16px; padding-top: 18px; border-top: 1px solid #dfe6f0; }
.client-home .filter-actions { margin-top: 16px; gap: 12px; }
.client-home .extra-filters:not([hidden]) + .filter-actions { padding-top: 8px; border-top: 1px solid #dfe6f0; }
.client-home .shipments button { border-radius: 10px; font-size: 13px; }
.client-home .filter-actions button { min-height: 38px; padding: 9px 20px; }
.client-home .filter-actions > button:first-child { background: #3568b7; }
.client-home .shipments .outline { border-color: #dce4f0; color: #71829c; }
.client-home .organization-buttons .active { color: #fff; background: #3568b7; }
.client-home #more-filters { border-color: transparent; color: #3568c4; background: transparent; padding-left: 8px; }
.client-home #more-filters::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 14px; border-right: 1.5px solid #8495ae; border-bottom: 1.5px solid #8495ae; transform: rotate(45deg); }
.client-home #more-filters[aria-expanded=true]::after { transform: rotate(225deg); margin-bottom: 0; }
.client-home .shipment-summary { margin: 28px 0 20px; font-size: 13px; color: #7889a2; flex-wrap: wrap; }
.client-home .table-scroll { width: 100%; max-width: 100%; overflow: auto; border: 1px solid #dce4f0; border-radius: 16px 16px 0 0; background: #fff; }
.client-home .shipment-table { width: 100%; font-size: 13px; color: #354158; }
.client-home .shipment-table th, .client-home .shipment-table td { min-width: 110px; padding: 14px 10px; border-bottom: 1px solid #dce4f0; line-height: 1.4; vertical-align: middle; }
.client-home .shipment-table th { background: #f1f5fa; color: #7486a2; font-size: 12px; font-weight: 600; }
.client-home .shipment-table td { background: #fff; }
.client-home .shipment-table tbody tr:nth-child(even) td { background: #f6f8fb; }
.client-home .shipment-table tbody tr:hover td { background: #edf3fc; }
.client-home .shipment-table th:first-child, .client-home .shipment-table td:first-child { min-width: 132px; max-width: 230px; }
.client-home .shipment-table td:nth-child(2), .client-home .shipment-table td:nth-child(3), .client-home .shipment-table td:nth-child(4) { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
.client-home .shipment-table .driver-cell { min-width: 300px; }
.client-home .shipment-table .point-cell { min-width: 150px; max-width: 240px; }
.client-home .shipment-table .numeric { min-width: 80px; }
.client-home .shipments .detail-trigger { color: #4276dc; border: 0; border-radius: 0; font-size: 13px; line-height: 1.35; }
.client-home .shipments .detail-trigger:hover { color: #2455b2; text-decoration: underline; }
.client-home .driver-wrap { grid-template-columns: 28px minmax(0, 1fr); align-items: center; }
.client-home .driver-wrap > :only-child { grid-column: 1 / -1; }
.client-home .driver-wrap .detail-trigger { white-space: normal; overflow-wrap: break-word; }
.client-home .driver-wrap .vehicle-line { margin-top: 2px; color: #7c8da6; text-decoration: underline; text-underline-offset: 2px; }
.client-home .shipments .copy-button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid #dce5f2; border-radius: 50%; color: #4276dc; background: #eaf0ff; font-size: 21px; line-height: 1; }
.client-home .pagination { margin: 0; padding: 16px; min-height: 66px; background: #fff; border: 1px solid #dce4f0; border-top: 0; border-radius: 0 0 16px 16px; font-size: 13px; }
.client-home .pagination button { background: #fff; min-height: 36px; }
.client-home .shipment-popover { border-color: #dce4f0; border-radius: 12px; }
.client-home .shipment-comment .detail-trigger { font-size: 12px; color: #7486a2; }
@media (min-width: 1600px) { .client-home main { padding-left: 40px; padding-right: 40px; } .client-header { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 850px) {
 .client-home main { padding: 24px 16px; }
 .client-header { padding: 16px; }
 .client-home .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .login-content { padding: 32px; }
 .login-brand .brand-logo { left: 24px; top: 32px; }
 .client-login h1 { font-size: 24px; }
}
@media (max-width: 600px) {
 .client-login main { display: flex; flex-direction: column; }
 .login-brand { flex: 0 0 112px; }
 .login-brand .brand-logo { top: 36px; }
 .brand-art-first { width: 150px; left: auto; right: 12px; top: 0; }
 .brand-art-second { display: none; }
 .login-content { flex: 1; padding: 40px 24px; }
 .client-brand { gap: 12px; }
 .client-brand img { width: 114px; height: auto; }
 .client-brand span { font-size: 11px; }
 .client-home .shipment-heading { align-items: flex-start; margin-bottom: 20px; }
 .client-home .shipment-heading h2, .client-home .client-name { font-size: 25px; }
 .client-home .client-name { font-size: 19px; flex-basis: 100%; text-align: left; }
 .client-home .filter-card { padding: 16px; border-radius: 14px; }
 .client-home .shipment-tabs { display: flex; flex-wrap: nowrap; gap: 2px; margin-bottom: 20px; }
 .client-home .shipment-tabs button { flex: 1; min-width: 0; padding: 9px 6px; font-size: 12px; }
 .client-home .filter-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
 .client-home .filter-actions { gap: 8px; }
 .client-home .filter-actions button { padding: 9px 13px; }
 .client-home #more-filters { padding-left: 4px; padding-right: 4px; }
 .client-home #more-filters::after { margin-left: 8px; }
 .client-home .shipment-summary { margin: 22px 0 14px; font-size: 12px; }
 .client-home .shipment-table th:first-child, .client-home .shipment-table td:first-child { min-width: 112px; max-width: 140px; }
 .client-home .pagination { justify-content: center; padding: 14px 8px; }
}

/* Display only: a missing actual unload date is always shown as in transit. */
.client-home .shipment-table .shipment-in-transit { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: #e8f2ff; color: #3568b7; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; vertical-align: middle; }

/* Shared city/intercity separators; keep native table geometry and sticky cells. */
.client-home .shipment-table th,
.client-home .shipment-table td { padding: 14px 10px; border-right: 1px solid #dce4f0; }
.client-home .shipment-table th:last-child,
.client-home .shipment-table td:last-child { border-right: 0; }
.client-home .shipment-table th:first-child,
.client-home .shipment-table td:first-child { box-shadow: none; }
.client-home .shipment-table-direct th:nth-child(n+8):nth-child(-n+9),
.client-home .shipment-table-direct td:nth-child(n+8):nth-child(-n+9) { text-align: right; font-variant-numeric: tabular-nums; }
.client-home .shipment-table-direct th:nth-child(n+10),
.client-home .shipment-table-direct td:nth-child(n+10) { min-width: 155px; text-align: left; font-variant-numeric: tabular-nums; }
.client-home .shipment-table-direct td:nth-child(n+10) { white-space: nowrap; }
.client-home .shipment-table-direct .point-cell,
.client-home .shipment-table-direct .point-cell .detail-trigger { word-break: normal; overflow-wrap: normal; hyphens: none; }

.client-home .shipment-table:not(.shipment-table-direct) th:nth-last-child(-n+2) { text-align: right; }

/* Match the first filter track without changing the filter grid itself. */
.client-home .filter-card { --filter-first-track: calc((100% - 48px) / 4); margin-bottom: 16px; }
.client-home .shipment-tabs { display: grid; grid-template-columns: .9fr 1.1fr; width: var(--filter-first-track); gap: 4px; }
.client-home .shipment-tabs button { min-width: 0; padding: 8px 4px; white-space: normal; word-break: normal; line-height: 1.35; }
.client-home .filter-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: var(--filter-first-track); gap: 8px; align-items: stretch; }
.client-home .filter-actions button { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 8px 6px; text-align: center; line-height: 1.35; white-space: normal; }
.client-home #more-filters { gap: 6px; padding: 8px 4px; white-space: normal; }
.client-home #more-filters::after { flex-shrink: 0; margin: 0; }
@media (min-width: 851px) and (max-width: 1100px) {
 .client-home .shipment-tabs button, .client-home .filter-actions button { font-size: 10px; }
 .client-home .filter-actions button { padding-left: 4px; padding-right: 4px; }
}
@media (max-width: 850px) { .client-home .filter-card { --filter-first-track: calc((100% - 16px) / 2); } }
@media (max-width: 600px) { .client-home .filter-card { --filter-first-track: 100%; } }

/* Compact short intercity columns; keep 13px data text and intrinsic city widths. */
.client-home .shipment-table-direct th, .client-home .shipment-table-direct td { padding: 12px 8px; }
.client-home .shipment-table-direct th:first-child, .client-home .shipment-table-direct td:first-child { width: 100px; min-width: 100px; max-width: none; }
.client-home .shipment-table-direct td:first-child strong { white-space: nowrap; }
.client-home .shipment-table-direct th:nth-child(2), .client-home .shipment-table-direct td:nth-child(2) { width: 100px; min-width: 100px; }
.client-home .shipment-table-direct .point-cell { min-width: 136px; }
.client-home .shipment-table-direct .driver-cell { min-width: 280px; }
.client-home .shipment-table-direct th:nth-child(8), .client-home .shipment-table-direct td:nth-child(8) { width: 64px; min-width: 64px; }
.client-home .shipment-table-direct th:nth-child(9), .client-home .shipment-table-direct td:nth-child(9) { width: 78px; min-width: 78px; }
.client-home .shipment-table-direct th:nth-child(n+10), .client-home .shipment-table-direct td:nth-child(n+10) { width: 112px; min-width: 112px; }
.client-home .shipment-table td:first-child strong { white-space: nowrap; }
.client-home .copy-status { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); z-index: 1200; width: max-content; max-width: calc(100vw - 32px); text-align: center; pointer-events: none; }

/* Compact controls retain the existing first filter track and four-column grid. */
.client-home .shipment-tabs { grid-template-columns: .44fr .56fr; padding: 1px; gap: 4px; }
.client-home .shipment-tabs button { height: 36px; min-height: 36px; padding: 2px; font-size: 12px; line-height: 15px; }
.client-home .filter-actions button { height: 38px; min-height: 38px; padding: 2px; font-size: 13px; line-height: 16px; }
.client-home #more-filters { padding: 2px; gap: 4px; }
@media (min-width: 1350px) {
 .client-home .shipment-tabs button { white-space: nowrap; }
 .client-home #more-filters[aria-expanded="false"] { white-space: nowrap; }
}

.client-home .control-label-short { display: none; }
.client-home .filter-actions button { white-space: nowrap; }
@media (min-width: 851px) and (max-width: 1349px) {
 .client-home .control-label-full { display: none; }
 .client-home .control-label-short { display: inline; }
}