:root {
    --relay-bg: #f1f3f5;
    --relay-card: #ffffff;
    --relay-text: #17232f;
    --relay-muted: #637788;
    --relay-border: #d8dfe5;
    --relay-brand: #003744;
    --relay-brand-2: #00697a;
    --relay-sidebar: #003744;
    --relay-sidebar-width: 220px;
    --relay-sidebar-soft: #0b5666;
    --relay-link: #0e7f92;
    --relay-accent: #13a8d6;
    --relay-success: #7bbf2a;
    --relay-warning: #f0b74f;
    --relay-danger: #d15858;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--relay-text);
    background: linear-gradient(
        to right,
        var(--relay-sidebar) 0 var(--relay-sidebar-width),
        var(--relay-bg) var(--relay-sidebar-width) 100%
    );
}

body {
    display: block;
}

.container {
    display: flex;
    height: 100vh;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.sidebar {
    flex: 0 0 var(--relay-sidebar-width);
    width: var(--relay-sidebar-width);
    min-width: var(--relay-sidebar-width);
    background: var(--relay-sidebar);
    color: #e7f4f7;
    padding: 12px 0 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    min-height: 0;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    align-self: stretch;
    z-index: 5;
    box-shadow: -16px 0 0 var(--relay-sidebar);
    transition: transform 0.24s ease;
}

.sidebar.hidden {
    transform: translateX(calc(-1 * var(--relay-sidebar-width)));
    position: fixed;
}

.logo {
    padding: 8px 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.optimus-relay-logo__image {
    width: min(156px, 100%);
    max-height: none;
    object-fit: contain;
    margin: 0 auto 10px;
    display: block;
}

.logo h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: 0.4px;
    color: #f3fbfd;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.nav ul li a,
.dropdown-toggle {
    display: block;
    padding: 9px 14px;
    margin: 0;
    font-size: 12px;
    color: #deedf1;
    text-decoration: none;
    border-left: 3px solid transparent;
}

.nav ul li a:hover,
.dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

.nav ul li a.active-page {
    background: rgba(19, 168, 214, 0.24);
    color: #ffffff;
    font-weight: 600;
    border-left-color: #6de2ff;
}

.dropdown {
    position: relative;
}

.dropdown-toggle .arrow {
    float: right;
    font-size: 11px;
}

.dropdown-menu {
    display: none;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.17);
}

.dropdown.active .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    font-size: 12px;
    padding-left: 24px;
}

footer {
    margin-top: auto;
    padding: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer a {
    display: block;
    font-size: 11px;
    color: #c7dce2;
    text-decoration: none;
    margin: 0 0 8px;
}

footer a:hover {
    color: #ffffff;
}

.main-content {
    flex: 1;
    min-width: 0;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    padding: 0;
    background: var(--relay-bg);
}

.top-bar-fullwidth {
    position: sticky;
    top: 0;
    z-index: 60;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    color: inherit;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--relay-brand);
    color: #e8f6f9;
    margin: 0;
    min-height: 34px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.breadcrumb-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hamburger-icon {
    color: #d8eef3;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.breadcrumb {
    font-size: 10px;
    color: #c7e4eb;
}

.top-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #d8eef3;
}

.top-icons .relay-header-icon,
.top-icons > span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #e5f7fb;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.top-icons .relay-header-icon:hover,
.top-icons > span:hover {
    color: #ffffff;
    opacity: 0.9;
}

.top-icons .icon-help {
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.top-icons .relay-bell-wrap {
    overflow: visible;
}

.top-icons .relay-bell-wrap .badge-number {
    position: absolute;
    top: -12px;
    right: -14px;
    min-width: 21px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: #d8edf4;
    color: #0a6882;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
}

.ai-teacher-header-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.ai-teacher-switch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #dff4f8;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.ai-teacher-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ai-teacher-switch i {
    position: relative;
    width: 30px;
    height: 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.ai-teacher-switch i::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: transform 0.18s ease;
}

.ai-teacher-switch input:checked + i {
    background: #14a3c7;
    border-color: #72d9ef;
}

.ai-teacher-switch input:checked + i::after {
    transform: translateX(14px);
}

.ai-teacher-root {
    position: fixed;
    right: 22px;
    bottom: 84px;
    z-index: 9600;
    display: none;
    pointer-events: none;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    transition: left 0.2s ease, right 0.2s ease, bottom 0.2s ease, transform 0.2s ease;
}

.ai-teacher-root.is-enabled {
    display: block;
}

.ai-teacher-root.is-modal-shielded {
    display: none;
    pointer-events: none;
}

.ai-teacher-bird-button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 78px;
    height: 78px;
    border: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.92), transparent 29%),
        linear-gradient(145deg, #fff4d6 0%, #d8fbff 48%, #77d5e8 100%);
    box-shadow: 0 18px 38px rgba(13, 44, 61, 0.3), inset 0 0 0 3px rgba(255, 255, 255, 0.75);
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ai-teacher-bird-button:hover {
    transform: translateY(-3px) rotate(-2deg);
    box-shadow: 0 22px 48px rgba(13, 44, 61, 0.36), inset 0 0 0 3px rgba(255, 255, 255, 0.9);
}

.ai-teacher-root.is-panel-closed .ai-teacher-bird-button::after {
    content: "Repeat";
    position: absolute;
    right: 2px;
    bottom: -18px;
    min-width: 50px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #003744;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 7px 16px rgba(0, 55, 68, 0.22);
}

.ai-teacher-root.is-panel-open .ai-teacher-bird-button {
    display: none;
}

.teacher-bird-image-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    animation: aiTeacherFloat 2.8s ease-in-out infinite;
}

.teacher-bird-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.teacher-bird-image-wrap:not(.is-fallback) .teacher-bird-svg {
    display: none;
}

.teacher-bird-image-wrap.is-fallback .teacher-bird-image {
    display: none;
}

.ai-teacher-bird-button .teacher-bird-image-wrap {
    width: 92px;
    height: 92px;
    margin-top: -8px;
    margin-left: -7px;
}

.ai-teacher-bird-button .teacher-bird-image {
    width: 92px;
    height: 92px;
    object-fit: cover;
    object-position: 50% 24%;
    border-radius: 50%;
}

.ai-teacher-bird-stage .teacher-bird-image-wrap {
    width: 260px;
    height: 260px;
}

.ai-teacher-bird-stage .teacher-bird-image {
    width: 260px;
    height: 260px;
    object-fit: contain;
    object-position: center;
    border-radius: 14px;
    filter: drop-shadow(0 12px 20px rgba(74, 43, 18, 0.2));
}

.teacher-bird-svg {
    width: 118px;
    height: 168px;
    overflow: visible;
}

.ai-teacher-bird-button .teacher-bird-svg {
    width: 94px;
    height: 104px;
    margin-top: -15px;
    margin-left: -8px;
}

.ai-teacher-bird-stage .teacher-bird-svg {
    width: 176px;
    height: 238px;
}

.teacher-bird-wing-left-svg {
    transform-origin: 62px 91px;
    animation: aiTeacherWingLeftSvg 2.1s ease-in-out infinite;
}

.teacher-bird-wing-right-svg {
    transform-origin: 94px 92px;
    animation: aiTeacherWingRightSvg 2.1s ease-in-out infinite;
}

.ai-teacher-root.is-waving .teacher-bird-wing-left-svg,
.ai-teacher-root.is-waving .teacher-bird-wing-right-svg {
    animation-duration: 0.36s;
}

.teacher-bird {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 58px;
    border-radius: 58% 58% 44% 44%;
    background:
        radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.92) 0 25%, transparent 26%),
        radial-gradient(circle at 24% 70%, rgba(247, 184, 176, 0.5) 0 8%, transparent 9%),
        radial-gradient(circle at 76% 70%, rgba(247, 184, 176, 0.42) 0 8%, transparent 9%),
        linear-gradient(155deg, #22c0d7 0%, #0b7e9c 54%, #064f66 100%);
    box-shadow: inset -8px -11px 0 rgba(0, 47, 62, 0.16), 0 6px 12px rgba(0, 55, 68, 0.18);
    animation: aiTeacherFloat 2.7s ease-in-out infinite;
}

.teacher-bird-plume {
    position: absolute;
    top: -12px;
    left: 28px;
    width: 18px;
    height: 22px;
    border-radius: 60% 40% 60% 40%;
    background: linear-gradient(160deg, #0b7e9c, #49d5e6);
    transform: rotate(27deg);
    box-shadow: -9px 5px 0 -4px #06627b;
}

.teacher-bird-cap {
    position: absolute;
    top: -12px;
    left: 11px;
    width: 34px;
    height: 9px;
    background: linear-gradient(180deg, #273341, #0f1720);
    border-radius: 2px;
    transform: rotate(-8deg);
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.12);
}

.teacher-bird-cap::before {
    content: "";
    position: absolute;
    left: -8px;
    top: -6px;
    width: 50px;
    height: 12px;
    background: linear-gradient(180deg, #293849, #111a24);
    clip-path: polygon(50% 0, 100% 45%, 50% 100%, 0 45%);
}

.teacher-bird-cap::after {
    content: "";
    position: absolute;
    right: -7px;
    top: 3px;
    width: 2px;
    height: 18px;
    background: #ffc857;
    box-shadow: 0 15px 0 -1px #ffc857;
}

.teacher-bird-wing {
    position: absolute;
    top: 21px;
    width: 21px;
    height: 28px;
    border-radius: 68% 42% 72% 42%;
    background: linear-gradient(165deg, #0e8eaa, #064f66);
    transform-origin: top center;
    box-shadow: inset -3px -3px 0 rgba(0, 30, 38, 0.18);
}

.teacher-bird-wing-left {
    left: -8px;
    transform: rotate(26deg);
    animation: aiTeacherWingLeft 1.15s ease-in-out infinite;
}

.teacher-bird-wing-right {
    right: -8px;
    transform: rotate(-26deg);
    animation: aiTeacherWingRight 1.15s ease-in-out infinite;
}

.teacher-bird-eye {
    position: absolute;
    top: 20px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #102333;
    box-shadow: 0 0 0 2px #ffffff;
}

.teacher-bird-eye-left {
    left: 19px;
}

.teacher-bird-eye-right {
    right: 19px;
}

.teacher-bird-glasses {
    position: absolute;
    top: 17px;
    left: 14px;
    width: 32px;
    height: 15px;
    border: 2px solid rgba(16, 35, 51, 0.58);
    border-radius: 999px;
    box-shadow: 17px 0 0 -2px rgba(16, 35, 51, 0.58);
    opacity: 0.88;
}

.teacher-bird-glasses::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 14px;
    width: 8px;
    height: 2px;
    background: rgba(16, 35, 51, 0.58);
}

.teacher-bird-lash {
    position: absolute;
    top: 15px;
    width: 8px;
    height: 5px;
    border-top: 2px solid #102333;
    border-radius: 50%;
}

.teacher-bird-lash-left {
    left: 15px;
    transform: rotate(-23deg);
}

.teacher-bird-lash-right {
    right: 15px;
    transform: rotate(23deg);
}

.teacher-bird-cheek {
    position: absolute;
    top: 31px;
    width: 9px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 158, 154, 0.72);
    filter: blur(0.2px);
}

.teacher-bird-cheek-left {
    left: 12px;
}

.teacher-bird-cheek-right {
    right: 12px;
}

.teacher-bird-beak {
    position: absolute;
    top: 29px;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 11px solid #ffb32c;
    transform: translateX(-3px);
    filter: drop-shadow(0 1px 0 rgba(112, 61, 0, 0.18));
}

.teacher-bird-necklace {
    position: absolute;
    left: 21px;
    bottom: 8px;
    width: 18px;
    height: 8px;
    border-bottom: 2px dotted rgba(255, 255, 255, 0.95);
    border-radius: 0 0 999px 999px;
}

.teacher-bird-pointer {
    position: absolute;
    right: -7px;
    bottom: 4px;
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: #ffc857;
    transform: rotate(-31deg);
    box-shadow: 7px -2px 0 -2px #1d2a36;
}

.teacher-bird-book {
    position: absolute;
    left: 15px;
    bottom: -8px;
    width: 30px;
    height: 12px;
    border-radius: 2px;
    background:
        linear-gradient(90deg, transparent 48%, #83b8c8 49% 51%, transparent 52%),
        linear-gradient(90deg, #ffffff 0 47%, #e8f5fa 48% 100%);
    border: 1px solid #64a8ba;
    box-shadow: 0 2px 0 rgba(0, 55, 68, 0.18);
}

.ai-teacher-root.is-waving .teacher-bird-wing-left,
.ai-teacher-root.is-waving .teacher-bird-wing-right {
    animation-duration: 0.34s;
}

.ai-teacher-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(360px, calc(100vw - 32px));
    background: #ffffff;
    border: 1px solid #a9c4d1;
    border-radius: 14px;
    box-shadow: 0 20px 54px rgba(14, 35, 48, 0.36);
    overflow: hidden;
    pointer-events: auto;
    transform-origin: bottom right;
    animation: aiTeacherPanelIn 0.22s ease-out;
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.ai-teacher-root.is-fading-away .ai-teacher-panel {
    opacity: 0.01;
    transform: translateY(10px) scale(0.98);
}

.ai-teacher-root:not(.is-panel-open) .ai-teacher-panel {
    display: none;
}

.ai-teacher-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #003744 0%, #005a69 100%);
    color: #ffffff;
}

.ai-teacher-panel-header strong {
    display: block;
    font-size: 14px;
}

.ai-teacher-panel-header span {
    display: block;
    color: #bee7f0;
    font-size: 11px;
}

.ai-teacher-panel-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-teacher-panel-actions button {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.ai-teacher-panel-body {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.ai-teacher-bird-stage {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 266px;
    padding: 10px 0 0;
    border-radius: 12px;
    background:
        radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.9) 0 8%, transparent 9%),
        radial-gradient(circle at 75% 28%, rgba(216, 114, 181, 0.26) 0 14%, transparent 15%),
        radial-gradient(circle at 38% 62%, rgba(216, 114, 181, 0.18) 0 18%, transparent 19%),
        linear-gradient(180deg, #fff7fb 0%, #f2fbfd 54%, #fff0d8 100%);
}

.ai-teacher-speech {
    position: relative;
    padding: 12px 13px;
    border: 1px solid #cae3eb;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f2fbfd 100%);
}

.ai-teacher-speech::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 14px;
    height: 14px;
    border-left: 1px solid #d7e4ea;
    border-top: 1px solid #d7e4ea;
    background: #f6fbfd;
    transform: translateX(-50%) rotate(45deg);
}

.ai-teacher-speech h3 {
    margin: 0 0 6px;
    color: #003744;
    font-size: 15px;
}

.ai-teacher-speech p {
    margin: 0;
    color: #334b5d;
    font-size: 12px;
    line-height: 1.45;
}

.ai-teacher-progress {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e7f6fb;
    color: #0a6882;
    font-size: 11px;
    font-weight: 800;
}

.ai-teacher-button-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.ai-teacher-tour-actions {
    display: none !important;
}

.ai-teacher-button-grid button {
    border: 1px solid #0b7892;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffffff 0%, #f4fbfd 100%);
    color: #00677f;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 9px;
    cursor: pointer;
}

.ai-teacher-button-grid button {
    display: none;
}

.ai-teacher-button-grid button[data-ai-teacher-action="repeat"] {
    display: block;
    grid-column: auto;
    background: linear-gradient(135deg, #00799a 0%, #009fbd 100%);
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(0, 103, 127, 0.18);
}

.ai-teacher-highlight {
    position: fixed;
    border: 3px solid #f5b849;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(7, 25, 37, 0.26), 0 0 18px rgba(245, 184, 73, 0.78);
    pointer-events: none;
    z-index: 9550;
    transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease;
}

@keyframes aiTeacherFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes aiTeacherWingLeft {
    0%,
    100% {
        transform: rotate(26deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

@keyframes aiTeacherWingRight {
    0%,
    100% {
        transform: rotate(-26deg);
    }

    50% {
        transform: rotate(-5deg);
    }
}

@keyframes aiTeacherWingLeftSvg {
    0%,
    100% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(-8deg);
    }
}

@keyframes aiTeacherWingRightSvg {
    0%,
    100% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(8deg);
    }
}

@keyframes aiTeacherPanelIn {
    from {
        opacity: 0.01;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.trips-header {
    background: var(--relay-brand);
    padding: 8px 12px 10px;
}

.trips-header h1 {
    margin: 0;
    color: #ffffff;
    font-size: 31px;
    font-weight: 600;
}

.page-shell {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    padding: 10px 16px 18px;
}

.card,
.panel,
.notification-box,
.results,
.filter-box,
.data-frame {
    background: var(--relay-card);
    border: 1px solid var(--relay-border);
    border-radius: 2px;
}

.card,
.panel,
.notification-box,
.filter-box {
    margin-bottom: 10px;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--relay-border);
}

.card-head h2,
.card-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.card-body {
    padding: 10px 12px;
}

.muted {
    color: var(--relay-muted);
}

.small {
    font-size: 12px;
}

.tiny {
    font-size: 11px;
}

.btn {
    border: 1px solid var(--relay-border);
    background: #f4f7f9;
    color: #1f3a4a;
    border-radius: 2px;
    font-size: 12px;
    line-height: 1;
    padding: 8px 11px;
    cursor: pointer;
}

.btn:hover {
    background: #eaf1f4;
}

.btn-primary {
    border-color: #0d8cab;
    background: #0b8fb2;
    color: #ffffff;
}

.btn-primary:hover {
    background: #097d9c;
}

.btn-ghost {
    background: #ffffff;
}

.layout-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.layout-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--relay-border);
    margin-bottom: 10px;
}

.tab {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 10px 12px;
    font-size: 12px;
    color: #3f5667;
    cursor: pointer;
    border-radius: 0;
}

.tab.active {
    color: #0e6d84;
    border-bottom-color: #0ea2cc;
    font-weight: 600;
    background: transparent;
}

.filters {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.filters input[type="text"],
.filters input[type="search"],
.filters input[type="date"],
.filters select,
.field input,
.field select,
.field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #c9d3db;
    background: #ffffff;
    border-radius: 2px;
    color: #223543;
    font-size: 12px;
    padding: 7px 9px;
    font-family: inherit;
}

.search-box {
    flex: 1 1 280px;
}

.filters .w-160 {
    width: 160px;
}

.filters .w-180 {
    width: 180px;
}

.filters .w-220 {
    width: 220px;
}

.results {
    padding: 18px;
    text-align: center;
}

.results p {
    margin: 6px 0;
}

.results img {
    max-width: 220px;
    width: 100%;
    height: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: #ffffff;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid #e1e7ec;
    padding: 8px 10px;
    vertical-align: top;
    text-align: left;
}

.data-table th {
    background: #f5f8fa;
    color: #3d5567;
    font-weight: 600;
    white-space: nowrap;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    font-size: 11px;
    padding: 2px 7px;
    border: 1px solid #cae8b2;
    color: #3f6c16;
    background: #f3fadf;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--relay-success);
}

.driver-roster-page .driver-roster-row.is-ineligible .status-pill,
.driver-roster-page .driver-roster-status-pill.is-ineligible {
    border-color: #f2a7a6;
    color: #c12626;
    background: #fff2f2;
}

.driver-roster-page .driver-roster-row.is-ineligible .status-dot,
.driver-roster-page .driver-roster-status-pill.is-ineligible .status-dot {
    background: #e53935;
}

.driver-roster-page .driver-roster-name {
    color: #0b6d8c;
    font-size: 14px;
    font-weight: 500;
}

.driver-roster-page .driver-roster-detail-link {
    border: 0;
    background: transparent;
    color: #2d618f;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.driver-roster-page .driver-roster-reason {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.driver-roster-page .driver-roster-reason-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    background: var(--relay-success);
}

.driver-roster-page .driver-roster-row.is-ineligible .driver-roster-reason-icon {
    background: #e53935;
}

.driver-roster-page .driver-roster-actions-cell {
    width: 56px;
    position: relative;
    text-align: right;
}

.driver-roster-page .driver-roster-actions {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.driver-roster-page .driver-roster-menu-button {
    border: 0;
    background: transparent;
    color: #1d3444;
    font-size: 20px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
}

.driver-roster-page .driver-roster-menu-button:hover {
    color: #0b6d8c;
}

.driver-roster-page .driver-roster-action-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 132px;
    border: 1px solid #c5d0d8;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(18, 44, 61, 0.16);
    overflow: hidden;
    z-index: 20;
}

.driver-roster-page .driver-roster-action-menu button {
    display: block;
    width: 100%;
    border: 0;
    background: #ffffff;
    color: #173346;
    font-size: 14px;
    text-align: left;
    padding: 10px 12px;
    cursor: pointer;
}

.driver-roster-page .driver-roster-action-menu button + button {
    border-top: 1px solid #e1e7ec;
}

.driver-roster-page .driver-roster-action-menu button:hover {
    background: #f5f8fa;
}

.driver-roster-page .driver-roster-action-menu button[data-driver-action="delete"] {
    color: #9f2020;
}

.driver-roster-page .driver-roster-empty td {
    padding: 28px 10px;
    color: #677b89;
    text-align: center;
}

.driver-roster-page .driver-roster-invite-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 12px 14px;
    background: #1f6c35;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.driver-roster-page .driver-roster-invite-banner.is-hidden {
    display: none;
}

.driver-roster-page .driver-roster-invite-close {
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.driver-roster-page .driver-roster-add-overlay {
    z-index: 80;
}

.driver-roster-page .driver-roster-add-modal {
    width: min(460px, 100%);
    border: 0;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 18px 38px rgba(10, 26, 40, 0.28);
}

.driver-roster-page .driver-roster-add-head {
    padding: 12px 14px;
    border-bottom: 0;
    background: #25292d;
    color: #ffffff;
}

.driver-roster-page .driver-roster-add-head h3 {
    color: inherit;
    font-size: 22px;
}

.driver-roster-page .driver-roster-add-head .close-x {
    color: #ffffff;
    font-size: 22px;
}

.driver-roster-page .driver-roster-add-body {
    padding: 16px 12px 12px;
}

.driver-roster-page .driver-roster-add-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 12px;
}

.driver-roster-page .driver-roster-add-field > span {
    color: #4d6779;
    font-size: 12px;
    font-weight: 600;
}

.driver-roster-page .driver-roster-add-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #85bbdc;
    border-radius: 2px;
    background: #ffffff;
    color: #223543;
    font: inherit;
}

.driver-roster-page .driver-roster-add-field textarea {
    min-height: 96px;
    padding: 10px;
    resize: vertical;
}

.driver-roster-page .driver-roster-domicile-picker {
    position: relative;
}

.driver-roster-page .driver-roster-domicile-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    border: 1px solid #2e95cf;
    border-radius: 2px;
    background: #ffffff;
    color: #223543;
    font: inherit;
    padding: 8px 10px;
    cursor: pointer;
}

.driver-roster-page .driver-roster-domicile-chevron {
    color: #465d6d;
    font-size: 12px;
}

.driver-roster-page .driver-roster-domicile-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    border: 1px solid #7ea9bf;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 36, 50, 0.18);
    overflow: hidden;
    z-index: 4;
}

.driver-roster-page .driver-roster-domicile-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    background: #1b7ea1;
    color: #ffffff;
    font: inherit;
    text-align: left;
    padding: 11px 12px;
    cursor: pointer;
}

.driver-roster-page .driver-roster-domicile-option + .driver-roster-domicile-option {
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.driver-roster-page .driver-roster-domicile-option:hover {
    background: #176d8c;
}

.driver-roster-page .driver-roster-domicile-check {
    font-size: 14px;
    opacity: 0;
}

.driver-roster-page .driver-roster-domicile-option[aria-selected="true"] .driver-roster-domicile-check {
    opacity: 1;
}

.driver-roster-page .driver-roster-add-copy {
    margin: 0 0 12px;
    color: #4f6577;
    font-size: 13px;
    line-height: 1.5;
}

.driver-roster-page .driver-roster-add-meta {
    margin-top: -4px;
    color: #7a8d9b;
    font-size: 12px;
}

.driver-roster-page .driver-roster-add-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.driver-roster-page .driver-roster-send-button:disabled {
    border-color: #bfd6e8;
    background: #f3faff;
    color: #9bb9d1;
    cursor: default;
}

.driver-roster-page .driver-roster-send-button:disabled:hover {
    background: #f3faff;
}

.driver-roster-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 12px 0 0;
}

.driver-roster-detail-grid div {
    min-width: 0;
}

.driver-roster-detail-grid dt {
    color: #657785;
    font-size: 11px;
    font-weight: 700;
}

.driver-roster-detail-grid dd {
    margin: 3px 0 0;
    color: #102533;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.kv {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px 12px;
    align-items: center;
    font-size: 12px;
}

.kv strong {
    color: #374e5f;
    font-weight: 600;
}

.field-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.field-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.field-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.field label {
    display: block;
    font-size: 11px;
    color: #516a7b;
    margin-bottom: 4px;
}

.inline-note {
    border: 1px solid #efd59f;
    background: #fff9ec;
    color: #6d5324;
    border-radius: 2px;
    padding: 8px 10px;
    font-size: 12px;
}

.faq-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.faq-list li {
    border-top: 1px solid #e3e9ee;
    padding: 11px 8px;
    font-size: 12px;
}

.badge-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    padding: 0 5px;
    background: #d7eff6;
    color: #0d7290;
    font-size: 11px;
    font-weight: 600;
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 30, 44, 0.46);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 40;
    padding: 16px;
}

.overlay.open {
    display: flex;
}

.modal {
    width: min(420px, 100%);
    background: #ffffff;
    border: 1px solid var(--relay-border);
    border-radius: 2px;
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--relay-border);
}

.modal-head h3 {
    margin: 0;
    font-size: 20px;
}

.modal-body {
    padding: 12px;
}

.close-x {
    border: 0;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    color: #61798a;
}

.right-widget {
    position: fixed;
    right: 12px;
    bottom: 12px;
    width: 300px;
    background: #ffffff;
    border: 1px solid var(--relay-border);
    z-index: 20;
}

/* Dashboard-specific blocks used by existing dashboard markup */
.release-notes {
    margin: 0 0 10px;
    border: 1px solid var(--relay-border);
    background: #f8fbfd;
    border-radius: 2px;
    padding: 10px 12px;
}

.release-notes h2 {
    margin: 0;
    font-size: 13px;
    color: #2f4a5e;
}

.release-notes button {
    margin-top: 8px;
}

.welcome-section {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--relay-border);
    background: #ffffff;
}

.welcome-section h3 {
    margin: 0 0 10px;
    font-size: 22px;
}

.welcome-left h2,
.welcome-right h2 {
    margin: 0 0 6px;
    font-size: 16px;
}

.welcome-left p,
.welcome-right p {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--relay-muted);
}

.add-driver-btn,
.add-user-btn {
    border: 1px solid #0b8fb2;
    background: #0b8fb2;
    color: #ffffff;
    border-radius: 2px;
    font-size: 12px;
    padding: 7px 10px;
    cursor: pointer;
}

.dashboard-grid {
    margin: 0 0 10px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

.trips-section,
.load-board,
.performance,
.payments {
    border: 1px solid var(--relay-border);
    background: #ffffff;
    padding: 10px;
}

.trips-section h2,
.load-board h2,
.performance h2,
.payments h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

.trip-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.trip-column {
    border-right: 1px solid #e2e8ed;
    padding-right: 8px;
}

.trip-column:last-child {
    border-right: 0;
}

.trip-column h3 {
    margin: 0 0 6px;
    font-size: 11px;
    color: var(--relay-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.trip-column p {
    margin: 0 0 8px;
    font-size: 42px;
    font-weight: 600;
    color: #8c9aa6;
}

.trip-column button {
    border: 1px solid #cad4dc;
    background: #f6f9fb;
    font-size: 11px;
    padding: 6px 12px;
}

.load-board .location {
    color: #0c6e87;
    font-weight: 600;
}

.load-board .count {
    font-size: 44px;
    font-weight: 700;
    color: #314656;
}

.performance-payments-section {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.performance h3 {
    margin: 0 0 8px;
    font-size: 30px;
}

.performance p button {
    width: 100%;
    text-align: left;
    border: 1px solid #e2e7ec;
    background: #f7fafc;
    padding: 7px 8px;
    font-size: 12px;
}

.payments .total {
    margin: 0 0 6px;
    font-size: 34px;
    font-weight: 700;
}

.payments .net-balance {
    margin: 0 0 8px;
    font-size: 20px;
    color: #385767;
}

/* Payments page disputes tab */
.payments-page .payments-pane.is-hidden {
    display: none;
}

.payments-page .payments-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #b9d4e5;
    background: #eaf5fd;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.payments-page .payments-preview-bar p {
    margin: 0;
    color: #29485a;
    font-size: 12px;
}

.payments-page .payments-estimated-row {
    background: #fff8e8;
}

.payments-page .payments-estimated-pill {
    border-color: #f7d89a;
    background: #fff1cc;
    color: #8a5a00;
}

.payments-page .payments-estimated-pill .status-dot {
    background: #f79009;
}

.payments-page .payments-empty-row td {
    text-align: center;
    color: #5d7484;
    padding: 18px 12px;
}

.payments-page .payments-dispute-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.payments-page .payments-dispute-kpi {
    border: 1px solid var(--relay-border);
    background: #ffffff;
    min-height: 70px;
    padding: 10px 12px;
    border-left: 4px solid #e5d54f;
}

.payments-page .payments-dispute-kpi small {
    display: block;
    font-size: 12px;
    color: #4e6475;
    margin-bottom: 6px;
}

.payments-page .payments-dispute-kpi strong {
    display: block;
    font-size: 38px;
    font-weight: 600;
    color: #20384a;
}

.payments-page .payments-dispute-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border: 1px solid var(--relay-border);
    background: #f4f7f9;
    padding: 6px;
    margin-bottom: 8px;
}

.payments-page .payments-dispute-toolbar select {
    min-width: 96px;
    border: 1px solid #c7d2db;
    border-radius: 2px;
    background: #ffffff;
    font-size: 12px;
    color: #243745;
    height: 36px;
    padding: 0 8px;
}

.payments-page .payments-dispute-toolbar select:disabled,
.payments-page .payments-dispute-pagination button:disabled,
.support-center-page .support-pagination button:disabled,
.support-center-page .support-closed-footer button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.payments-page .payments-dispute-table th {
    background: #ffffff;
    border-bottom: 1px solid #adbac4;
    color: #253f51;
}

.payments-page .payments-dispute-resolved {
    border-color: #cfd8df;
    color: #3f5564;
    background: #f3f6f8;
}

.payments-page .payments-dispute-resolved .status-dot {
    background: #9aacba;
}

.payments-page .payments-dispute-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.payments-page .payments-dispute-pagination button {
    border: 0;
    background: transparent;
    color: #6c8191;
    font-size: 15px;
    cursor: pointer;
}

.payments-page .payments-dispute-pagination span {
    font-size: 12px;
    font-weight: 600;
    color: #2a4355;
    border-bottom: 2px solid #2a6da1;
    padding: 0 3px 2px;
}

.payment-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 12px 0 0;
}

.payment-detail-grid div {
    min-width: 0;
}

.payment-detail-grid dt {
    color: #657785;
    font-size: 11px;
    font-weight: 700;
}

.payment-detail-grid dd {
    margin: 3px 0 0;
    color: #102533;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.search-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-container input {
    width: 100%;
}

/* Documents page */
.documents-page .documents-card {
    max-width: 980px;
}

.documents-page .docs-tabs a.tab {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.documents-page .docs-title {
    margin: 0 0 6px;
}

.documents-page .docs-table {
    margin-top: 10px;
}

.documents-page .docs-status-cell {
    text-align: right;
    color: #355266;
    font-size: 12px;
    font-weight: 600;
}

.documents-page .docs-actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.documents-page .docs-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #2e4757;
    padding: 9px 0;
    border-bottom: 1px solid #e1e8ed;
}

.documents-page .docs-link-row a {
    color: #0a7f97;
    text-decoration: none;
}

.documents-page .docs-link-row a:hover {
    text-decoration: underline;
}

/* Rewards page */
.rewards-page .rewards-shell {
    --rewards-tier-accent: #00a3d7;
    --rewards-tier-soft: #e2f4ff;
    border: 1px solid var(--relay-border);
    background: #ffffff;
    padding: 10px;
}

.rewards-page .rewards-shell.rewards-tier-basic {
    --rewards-tier-accent: #009edb;
    --rewards-tier-soft: #dff3ff;
}

.rewards-page .rewards-shell.rewards-tier-bronze {
    --rewards-tier-accent: #f59e2e;
    --rewards-tier-soft: #fff0d9;
}

.rewards-page .rewards-shell.rewards-tier-silver {
    --rewards-tier-accent: #8f98a3;
    --rewards-tier-soft: #eef1f5;
}

.rewards-page .rewards-shell.rewards-tier-gold {
    --rewards-tier-accent: #e2bd22;
    --rewards-tier-soft: #fff6be;
}

.rewards-page .rewards-shell.rewards-tier-platinum {
    --rewards-tier-accent: #9d78ff;
    --rewards-tier-soft: #eee6ff;
}

.rewards-page .rewards-page-title {
    margin: 0 0 10px;
    font-size: 31px;
    color: #203845;
}

.rewards-page .rewards-top-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.rewards-page .rewards-mid-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.rewards-page .rewards-panel {
    border: 1px solid #d9e1e8;
    background: #ffffff;
    padding: 10px;
}

.rewards-page .rewards-panel-head {
    margin-bottom: 8px;
}

.rewards-page .rewards-panel-head h3 {
    margin: 0 0 2px;
    font-size: 18px;
    color: #213a48;
}

.rewards-page .rewards-panel-head-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.rewards-page .rewards-panel-head-action .btn {
    padding: 7px 10px;
    font-size: 11px;
}

.rewards-page .rewards-status-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    align-items: start;
}

.rewards-page .rewards-status-icon,
.rewards-page .rewards-trend-ring {
    width: 40px;
    height: 56px;
    border: 1px solid #c9d5de;
    background: #eef5fa;
    color: #31566b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.rewards-page .rewards-status-icon[class*="tier-"],
.rewards-page .rewards-trend-ring[class*="tier-"] {
    border-color: var(--rewards-tier-accent);
    background: var(--rewards-tier-soft);
    color: #172b3a;
    box-shadow: inset 0 4px 0 var(--rewards-tier-accent);
    font-weight: 700;
}

.rewards-page .rewards-trend-ring {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-top: 4px;
}

.rewards-page .rewards-status-content h4,
.rewards-page .rewards-target-box h4 {
    margin: 0 0 4px;
    font-size: 16px;
    color: #213947;
}

.rewards-page .rewards-stat-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: #526b7b;
    margin-bottom: 2px;
}

.rewards-page .rewards-stat-line strong {
    color: #1f3746;
}

.rewards-page .rewards-target-box {
    border: 1px dashed #ccd7df;
    background: #f9fcfe;
    padding: 8px;
}

.rewards-page .rewards-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.rewards-page .rewards-mini-card {
    border: 1px solid #dce4ea;
    background: #ffffff;
    min-height: 78px;
    padding: 8px;
    text-align: center;
}

.rewards-page .rewards-mini-icon {
    font-size: 16px;
    margin-bottom: 4px;
}

.rewards-page .rewards-mini-card p {
    margin: 0;
    font-size: 11px;
    color: #304b5b;
}

.rewards-page .rewards-matrix {
    border: 1px solid #d9e1e8;
    background: #ffffff;
    padding: 10px;
}

.rewards-page .rewards-all-link {
    border: 0;
    background: transparent;
    color: #0a7f97;
    font-size: 12px;
    padding: 0;
    cursor: pointer;
    margin-bottom: 10px;
}

.rewards-page .rewards-table-wrap {
    overflow-x: auto;
}

.rewards-page .rewards-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
    font-size: 12px;
}

.rewards-page .rewards-table th,
.rewards-page .rewards-table td {
    border-top: 1px solid #e1e8ee;
    padding: 10px 8px;
    text-align: center;
}

.rewards-page .rewards-table th:first-child,
.rewards-page .rewards-table td:first-child {
    text-align: left;
    width: 38%;
}

.rewards-page .rewards-table thead th {
    border-top: 0;
    font-weight: 600;
    color: #243b4b;
}

.rewards-page .rewards-table th.is-current-tier {
    box-shadow: inset 0 4px 0 var(--rewards-tier-accent);
    outline: 1px solid rgba(31, 55, 70, 0.16);
}

.rewards-page .rewards-table td.is-current-tier {
    background: var(--rewards-tier-soft);
    box-shadow: inset 3px 0 0 var(--rewards-tier-accent);
    font-weight: 600;
}

.rewards-page .rewards-current-driver-row td {
    border-top: 2px solid #b7c5cf;
}

.rewards-page .rewards-current-driver-row td:first-child {
    border-left: 4px solid var(--rewards-tier-accent);
    font-weight: 700;
}

.rewards-page .tier-basic {
    background: #ccecff;
}

.rewards-page .tier-bronze {
    background: #f2d8a8;
}

.rewards-page .tier-silver {
    background: #e2e6ec;
}

.rewards-page .tier-gold {
    background: #f7ed8a;
}

.rewards-page .tier-platinum {
    background: #d7cbff;
}

.rewards-page .rewards-feedback {
    width: 292px;
}

.rewards-page .rewards-eligibility {
    margin-top: 10px;
}

.rewards-page .rewards-eligibility-table td,
.rewards-page .rewards-eligibility-table th {
    text-align: center;
}

.rewards-page .rewards-eligibility-table td:first-child,
.rewards-page .rewards-eligibility-table th:first-child {
    text-align: left;
    width: 25%;
}

.rewards-page .rewards-eligibility-table .rewards-subrow td {
    text-align: center;
    font-weight: 600;
    color: #2d4658;
    background: #f6f9fb;
}

/* Learning Center page */
.learning-center-page .learning-shell {
    background: #ffffff;
    border: 1px solid var(--relay-border);
}

.learning-center-page .learning-tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--relay-border);
    padding: 8px 10px 0;
}

.learning-center-page .learning-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.learning-center-page .learning-tab {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #475f70;
    font-size: 12px;
    padding: 10px 8px;
    cursor: pointer;
}

.learning-center-page .learning-tab.active {
    border-bottom-color: #0ea2cc;
    color: #1f4254;
    font-weight: 600;
}

.learning-center-page .learning-tab-alert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid #b30f2d;
    color: #b30f2d;
    font-size: 9px;
    line-height: 1;
    margin-left: 3px;
}

.learning-center-page .learning-pane.is-hidden {
    display: none;
}

.learning-center-page .learning-refresh {
    width: 24px;
    height: 24px;
    border: 1px solid #0d8cab;
    background: #0b8fb2;
    color: #ffffff;
    border-radius: 2px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.learning-center-page .learning-block {
    padding: 12px 10px;
}

.learning-center-page .learning-block + .learning-block {
    border-top: 1px solid #ecf1f5;
}

.learning-center-page .learning-section-title {
    margin: 0 0 10px;
    font-size: 30px;
    color: #1e3645;
}

.learning-center-page .learning-info-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e6eef3;
    color: #587080;
    font-size: 10px;
    vertical-align: middle;
}

.learning-center-page .learning-collections {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.learning-center-page .learning-collection-card {
    border: 1px solid #dce4ea;
    background: #ffffff;
    min-height: 72px;
    padding: 12px;
}

.learning-center-page .learning-collection-card h3 {
    margin: 0 0 4px;
    font-size: 13px;
    color: #253a49;
}

.learning-center-page .learning-collection-card p {
    margin: 0;
    font-size: 11px;
    color: #617788;
}

.learning-center-page .learning-filters {
    display: grid;
    grid-template-columns: 3fr repeat(4, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.learning-center-page .learning-search {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #c7d2db;
    border-radius: 2px;
    background: #ffffff;
    padding: 0 8px;
    height: 32px;
}

.learning-center-page .learning-search span {
    color: #5d7484;
    font-size: 12px;
}

.learning-center-page .learning-search input {
    width: 100%;
    border: 0;
    font-size: 11px;
    color: #243745;
    height: 100%;
}

.learning-center-page .learning-filters select {
    border: 1px solid #c7d2db;
    border-radius: 2px;
    background: #ffffff;
    font-size: 11px;
    color: #243745;
    height: 32px;
    padding: 0 8px;
}

.learning-center-page .learning-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.learning-center-page .learning-card {
    border: 1px solid #dce4ea;
    background: #ffffff;
    padding: 0;
}

.learning-center-page .learning-card h3 {
    margin: 8px 8px 4px;
    font-size: 12px;
    line-height: 1.2;
    color: #213845;
    min-height: 30px;
}

.learning-center-page .learning-card .tiny {
    margin: 0 8px 2px;
}

.learning-center-page .learning-thumb {
    height: 76px;
    border-bottom: 1px solid #dce4ea;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.learning-center-page .lc-thumb-1 {
    background: linear-gradient(135deg, #113e63 0%, #2e7ab0 100%);
    color: #d6f0ff;
}

.learning-center-page .lc-thumb-2 {
    background: linear-gradient(135deg, #5a38d6 0%, #0db3e0 100%);
    color: #f2f7ff;
}

.learning-center-page .lc-thumb-3 {
    background: linear-gradient(135deg, #2e4253 0%, #7897ab 100%);
    color: #e8f4ff;
}

.learning-center-page .lc-thumb-4 {
    background: linear-gradient(135deg, #272b33 0%, #8b3333 100%);
    color: #f8ecec;
}

.learning-center-page .lc-thumb-5 {
    background: linear-gradient(135deg, #1f435f 0%, #6ea0b6 100%);
    color: #eaf8ff;
}

.learning-center-page .lc-thumb-6 {
    background: linear-gradient(135deg, #102f46 0%, #275f80 100%);
    color: #def4ff;
}

.learning-center-page .lc-thumb-7 {
    background: linear-gradient(135deg, #5a4f40 0%, #92745d 100%);
    color: #fff2e4;
}

.learning-center-page .lc-thumb-8 {
    background: linear-gradient(135deg, #2b4e86 0%, #4baec0 100%);
    color: #e6fbff;
}

.learning-center-page .learning-courses-block {
    padding: 8px 10px 12px;
}

.learning-center-page .learning-counters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.learning-center-page .learning-counter-card {
    border: 1px solid #dce4ea;
    background: #ffffff;
    border-left: 4px solid #b5e043;
    min-height: 56px;
    padding: 8px 10px;
}

.learning-center-page .learning-counter-card small {
    display: block;
    font-size: 11px;
    color: #687f8f;
    margin-bottom: 3px;
}

.learning-center-page .learning-counter-card strong {
    font-size: 40px;
    line-height: 1;
    color: #173046;
}

.learning-center-page .learning-courses-toolbar {
    display: grid;
    grid-template-columns: 1fr 110px 100px;
    gap: 8px;
    margin-bottom: 8px;
}

.learning-center-page .learning-courses-toolbar-driver {
    grid-template-columns: 1fr;
}

.learning-center-page .learning-courses-toolbar .learning-search {
    height: 36px;
}

.learning-center-page .learning-courses-toolbar select {
    border: 1px solid #c7d2db;
    border-radius: 2px;
    background: #ffffff;
    font-size: 12px;
    color: #243745;
    height: 36px;
    padding: 0 8px;
}

.learning-center-page .learning-table-wrap {
    border: 1px solid #dce4ea;
}

.learning-center-page .learning-table th {
    background: #ffffff;
    border-bottom: 1px solid #adbac4;
    color: #253f51;
    font-size: 12px;
}

.learning-center-page .learning-table td {
    font-size: 12px;
    color: #234050;
}

.learning-center-page .learning-table td a {
    color: #2d6f9e;
    text-decoration: underline;
}

.learning-center-page .learning-group-row td {
    background: #f8fbfd;
    color: #314d61;
    font-weight: 600;
}

/* Trips page */
.trips-page .trips-console {
    border: 1px solid #d5dde4;
    background: #eceff3;
    padding: 10px;
}

.trips-page .trips-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #d3dce3;
    padding-bottom: 6px;
}

.trips-page .trip-tabs {
    display: flex;
    gap: 6px;
}

.trips-page .trip-tab {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #2f4453;
    font-size: 11px;
    line-height: 1;
    padding: 7px 10px;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.24s ease, border-color 0.24s ease;
}

.trips-page .trip-tab:hover {
    background: #f3f7fa;
}

.trips-page .trip-tab.active {
    border-bottom-color: #0ea2cc;
    color: #19485a;
    font-weight: 600;
}

.trips-page .trip-advanced-link {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #5a7384;
    font-size: 11px;
    cursor: pointer;
    padding: 7px 18px;
}

.trips-page .trip-advanced-link.is-active {
    border-bottom-color: #0ea2cc;
    color: #102f3f;
    font-weight: 600;
}

.trips-page .trip-advanced-state {
    min-height: calc(100vh - 205px);
    padding: 18px 26px 28px;
    background: #ffffff;
    border-top: 1px solid #d4dde5;
}

.trips-page .trip-advanced-state[hidden] {
    display: none;
}

.trips-page .trip-advanced-form {
    width: min(680px, 100%);
    display: grid;
    gap: 14px;
    color: #000000;
    font-size: 13px;
}

.trips-page .trip-advanced-form h2 {
    margin: 0 0 2px;
    color: #000000;
    font-size: 22px;
    font-weight: 700;
}

.trips-page .trip-advanced-keyword,
.trips-page .trip-advanced-date-grid label {
    display: grid;
    gap: 7px;
}

.trips-page .trip-advanced-keyword > span,
.trips-page .trip-advanced-fieldset legend {
    color: #000000;
    font-weight: 700;
}

.trips-page .trip-advanced-keyword textarea {
    width: 100%;
    min-height: 78px;
    resize: vertical;
    border: 1px solid #5b6d78;
    background: #ffffff;
    color: #000000;
    font-size: 13px;
    padding: 10px;
}

.trips-page .trip-advanced-fieldset {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.trips-page .trip-advanced-fieldset label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    color: #000000;
}

.trips-page .trip-advanced-fieldset input[type="checkbox"],
.trips-page .trip-advanced-fieldset input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.trips-page .trip-advanced-row {
    display: grid;
    width: min(180px, 100%);
}

.trips-page .trip-advanced-row-two {
    width: min(370px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.trips-page .trip-advanced-form select,
.trips-page .trip-advanced-form input[type="text"],
.trips-page .trip-advanced-form input[type="date"],
.trips-page .trip-advanced-form input[type="time"] {
    width: 100%;
    min-height: 50px;
    border: 1px solid #5b6d78;
    background: #ffffff;
    color: #000000;
    font-size: 13px;
    padding: 0 10px;
}

.trips-page .trip-advanced-date-fieldset {
    gap: 9px;
}

.trips-page .trip-advanced-date-grid {
    display: grid;
    grid-template-columns: 180px 180px 180px;
    gap: 12px;
}

.trips-page .trip-advanced-start-date {
    grid-column: 1;
    grid-row: 1;
}

.trips-page .trip-advanced-start-time {
    grid-column: 2;
    grid-row: 1;
}

.trips-page .trip-advanced-end-date {
    grid-column: 1;
    grid-row: 2;
}

.trips-page .trip-advanced-end-time {
    grid-column: 2;
    grid-row: 2;
}

.trips-page .trip-advanced-timezone {
    grid-column: 3;
    grid-row: 2;
}

.trips-page .trip-advanced-date-grid label span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.trips-page .trip-advanced-actions {
    display: grid;
    grid-template-columns: 180px 180px;
    gap: 12px;
    padding-top: 14px;
}

.trips-page .trip-advanced-actions button {
    min-height: 40px;
    border: 1px solid #0a7e97;
    font-size: 13px;
    cursor: pointer;
}

.trips-page .trip-advanced-search-button {
    background: #087d97;
    color: #ffffff;
    font-weight: 700;
}

.trips-page .trip-advanced-reset-button {
    background: #ffffff;
    color: #087d97;
}

.trips-page .trip-state {
    padding-top: 8px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.42s ease, transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.trips-page .trip-state:not(.active):not(.is-entering):not(.is-leaving) {
    display: none;
}

.trips-page .trip-state.active {
    opacity: 1;
    transform: translateY(0);
}

.trips-page .trip-state.is-advanced-result .trip-filter-grid,
.trips-page .trip-state.is-advanced-result .trip-row-utility,
.trips-page .trip-state.is-advanced-result > .trip-inline-link:not(.trip-search-again) {
    display: none;
}

.trips-page .trip-state.is-advanced-result .trip-search-again {
    display: inline-flex;
    align-items: center;
    margin: 4px 0 12px;
    font-weight: 700;
}

.trips-page .trip-state.is-entering {
    opacity: 0;
    transform: translateY(18px);
}

.trips-page .trip-state.is-leaving {
    opacity: 0;
    transform: translateY(-12px);
}

.trips-page .trip-inline-link {
    border: 0;
    background: transparent;
    color: #0a7e97;
    font-size: 11px;
    padding: 0;
    margin: 2px 0 8px;
    cursor: pointer;
}

.trips-page .trip-filter-grid {
    display: grid;
    gap: 6px;
    margin-bottom: 8px;
}

.trips-page .trip-filter-grid-upcoming {
    grid-template-columns: 2.1fr repeat(4, minmax(130px, 1fr));
}

.trips-page .trip-filter-grid-history {
    grid-template-columns: 2fr 1.7fr repeat(4, minmax(120px, 1fr));
}

.trips-page .trip-search-field {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #c7d2db;
    background: #ffffff;
    border-radius: 2px;
    padding: 0 8px;
}

.trips-page .trip-search-field span {
    color: #5c7383;
    font-size: 12px;
}

.trips-page .trip-search-field input,
.trips-page .trip-filter-grid select {
    border: 1px solid #c7d2db;
    background: #ffffff;
    border-radius: 2px;
    font-size: 11px;
    color: #243746;
    height: 32px;
    padding: 0 8px;
}

.trips-page .trip-search-field input {
    border: 0;
    width: 100%;
    padding: 0;
}

.trips-page .trip-date-range {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    border: 1px solid #c7d2db;
    border-radius: 2px;
    background: #ffffff;
    overflow: hidden;
    height: 32px;
}

.trips-page .trip-date-range button {
    border: 0;
    background: #edf2f6;
    color: #4d6474;
    font-size: 14px;
    cursor: pointer;
}

.trips-page .trip-date-range span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d4556;
    font-size: 11px;
    font-weight: 600;
}

.trips-page .trip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.trips-page .trip-row-utility {
    margin-bottom: 8px;
}

.trips-page .trip-row-meta {
    margin-bottom: 8px;
    color: #4f6575;
    font-size: 11px;
}

.trips-page .trip-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #32495a;
}

.trips-page .trip-results-meta button,
.trips-page .trip-results-actions button {
    border: 0;
    background: transparent;
    color: #0a7e97;
    font-size: 11px;
    cursor: pointer;
    padding: 0 2px;
}

.trips-page .trip-results-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.trips-page .trip-sort-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.trips-page .trip-results-actions .trip-sort-trigger {
    font-weight: 700;
}

.trips-page .trip-sort-trigger::before {
    content: "\2191";
    margin-right: 3px;
}

.trips-page .trip-sort-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 90;
    min-width: 150px;
    padding: 0 0 6px;
    border: 1px solid #c7d2db;
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.18);
}

.trips-page .trip-sort-menu button {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(74px, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 0;
    background: #ffffff;
    color: #111827;
    padding: 9px 12px;
    text-align: left;
    font-size: 11px;
}

.trips-page .trip-sort-menu button:hover,
.trips-page .trip-sort-menu button.is-active {
    background: #003f4b;
    color: #ffffff;
}

.trips-page .trip-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.trips-page .trip-view-toggle button {
    border: 1px solid #c2cfd9;
    background: #ffffff;
    color: #365365;
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
}

.trips-page .trip-view-toggle button.active {
    border-color: #0d8db0;
    background: #e5f5fb;
    color: #0a6f8a;
}

.trips-page .trip-table-frame {
    border: 1px solid #d3dce3;
    background: #ffffff;
}

.trips-page .trip-upcoming-list {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.trips-page .trip-upcoming-card {
    border: 1px solid #d7e0e7;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
    animation: tripCardSettle 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.trips-page .trip-upcoming-card.is-driver-required {
    border-color: #f79009;
    box-shadow: 0 0 0 2px rgba(247, 144, 9, 0.12), 0 10px 24px rgba(247, 144, 9, 0.08);
}

.trips-page .trip-upcoming-card.is-rejected-history {
    border-color: #f3b9b2;
    box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.12), 0 14px 28px rgba(217, 45, 32, 0.12);
}

.trips-page .trip-upcoming-card.is-canceled-history {
    border-color: #cfd8df;
}

@keyframes tripCardSettle {
    from {
        opacity: 0.01;
        transform: translateY(14px) scale(0.995);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.trips-page .trip-upcoming-summary {
    display: grid;
    grid-template-columns: 110px 90px minmax(0, 1.35fr) 24px minmax(0, 1.35fr) 88px 42px minmax(130px, 0.55fr) 82px 100px 160px 74px 42px;
    gap: 10px;
    align-items: start;
    padding: 14px 12px;
    border-bottom: 1px solid #e1e7ed;
    background: #f3f5f7;
    font-size: 11px;
    color: #243745;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.trips-page .trip-upcoming-summary:hover {
    background: #eef4f8;
}

.trips-page .trip-upcoming-summary[data-trip-expandable="false"] {
    cursor: default;
}

.trips-page .trip-upcoming-summary[data-trip-expandable="false"]:hover {
    background: #f3f5f7;
}

.trips-page .trip-upcoming-card.is-collapsed .trip-upcoming-summary {
    border-bottom: 0;
}

.trips-page .trip-upcoming-ref strong,
.trips-page .trip-upcoming-summary-stop strong,
.trips-page .trip-upcoming-summary-metric strong,
.trips-page .trip-upcoming-summary-price strong {
    display: block;
    font-size: 12px;
    color: #213645;
}

.trips-page .trip-upcoming-ref {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.trips-page .trip-history-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    border: 1px solid #c8d4dc;
    border-radius: 999px;
    padding: 4px 10px;
    background: #f7fafc;
    color: #395365;
    font-size: 11px;
    font-weight: 700;
}

.trips-page .trip-history-status-pill.is-in-transit {
    border-color: #b8d7e3;
    background: #eef8fc;
    color: #0a6f8a;
}

.trips-page .trip-history-status-pill.is-completed {
    border-color: #cfe3bb;
    background: #f5fbeb;
    color: #4c7a16;
}

.trips-page .trip-history-status-pill.is-rejected {
    border-color: #f1b3ad;
    background: #fff1f0;
    color: #b42318;
    box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.1);
}

.trips-page .trip-history-status-pill.is-canceled {
    border-color: transparent;
    background: transparent;
    color: #c51f1a;
    padding-inline: 0;
}

.trips-page .trip-cancel-icon {
    color: #d92d20;
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
}

.trips-page .trip-history-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.trips-page .trip-history-status-note {
    color: #8e1c12;
    line-height: 1.25;
}

.trips-page .trip-reject-icon {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #d92d20;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.12), 0 0 12px rgba(217, 45, 32, 0.16);
}

.trips-page .trip-reject-icon::before,
.trips-page .trip-reject-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 1.8px;
    border-radius: 999px;
    background: #d92d20;
}

.trips-page .trip-reject-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.trips-page .trip-reject-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.trips-page .trip-upcoming-starts {
    color: #5c7383;
}

.trips-page .trip-upcoming-start-note {
    display: inline-flex;
    width: fit-content;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #edf5fb;
    color: #3b5b6d;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.trips-page .trip-upcoming-starts strong {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #243745;
}

.trips-page .trip-upcoming-summary-stop {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
}

.trips-page .trip-upcoming-stop-badge {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0b6f8b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.trips-page .trip-upcoming-summary-metric,
.trips-page .trip-driver-type-cell,
.trips-page .trip-upcoming-summary-equip,
.trips-page .trip-upcoming-summary-type,
.trips-page .trip-upcoming-summary-price {
    white-space: nowrap;
}

.trips-page .trip-upcoming-summary-equip {
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
}

.trips-page .trip-upcoming-summary-type {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trips-page .trip-driver-type-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

.trips-page .trip-driver-type-icons {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 26px;
    color: #1f2933;
}

.trips-page .trip-driver-type-person {
    position: relative;
    display: inline-block;
    width: 13px;
    height: 16px;
    flex: 0 0 13px;
}

.trips-page .trip-driver-type-person::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 50%;
    width: 7px;
    height: 7px;
    border: 1.7px solid currentColor;
    border-radius: 50%;
    transform: translateX(-50%);
    background: transparent;
}

.trips-page .trip-driver-type-person::after {
    content: "";
    position: absolute;
    left: 1px;
    bottom: 0;
    width: 11px;
    height: 8px;
    border: 1.7px solid currentColor;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
}

.trips-page .trip-driver-type-person.is-secondary {
    color: #687783;
}

.trips-page .trip-upcoming-summary-price {
    text-align: right;
}

.trips-page .trip-upcoming-assignments {
    width: 100%;
    min-width: 0;
    cursor: default;
}

.trips-page .trip-assignment-static {
    display: grid;
    gap: 3px;
    padding: 6px 8px;
    border: 1px solid #f2c0bc;
    background: #fff6f5;
    color: #8e1c12;
    font-size: 11px;
    line-height: 1.3;
}

.trips-page .trip-assignment-static strong {
    color: #b42318;
}

.trips-page .trip-assignment-canceled {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    color: #c51f1a;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.trips-page .trip-assignment-canceled strong {
    color: #c51f1a;
}

.trips-page .trip-assignment-locked {
    display: grid;
    gap: 3px;
    padding: 6px 8px;
    border: 1px solid #d7e0e7;
    background: #f8fbfd;
    color: #365162;
    font-size: 11px;
    line-height: 1.3;
}

.trips-page .trip-assignment-locked strong {
    color: #1f3747;
}

.trips-page .trip-assignment-pending {
    border-style: dashed;
    background: #fbfdff;
    color: #536b7b;
}

.trips-page .trip-upcoming-assignments select,
.trips-page .trip-upcoming-assignments input {
    cursor: pointer;
}

.trips-page .trip-upcoming-assignments input {
    min-height: 26px;
    border: 1px solid #c8d3dc;
    background: #ffffff;
    color: #243745;
    font-size: 12px;
    cursor: text;
}

.trips-page .trip-upcoming-assignments select.is-invalid,
.trips-page .trip-upcoming-assignments input.is-invalid {
    border-color: #f79009;
    box-shadow: 0 0 0 2px rgba(247, 144, 9, 0.14);
}

.trips-page .trip-upcoming-load-slot {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    min-width: 0;
}

.trips-page .trip-upcoming-fold {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.trips-page .trip-upcoming-load-count,
.trips-page .trip-upcoming-toolbar-load-count {
    font-size: 12px;
    font-weight: 700;
    color: #305061;
    white-space: nowrap;
    text-align: right;
}

.trips-page .trip-upcoming-fold-button {
    position: relative;
    width: 28px;
    min-width: 28px;
    height: 48px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.trips-page .trip-upcoming-fold-track {
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 8px;
    width: 2px;
    transform: translateX(-50%);
    background: #0ea2cc;
    opacity: 0.55;
}

.trips-page .trip-upcoming-fold-dot {
    position: absolute;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 2px solid #27b4da;
}

.trips-page .trip-upcoming-fold-dot-top {
    top: 6px;
}

.trips-page .trip-upcoming-fold-dot-bottom {
    bottom: 6px;
}

.trips-page .trip-upcoming-fold-caret {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #0a83a6;
    font-size: 10px;
    line-height: 1;
    background: #ffffff;
    padding: 2px 0;
}

.trips-page .trip-upcoming-details-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 8px;
    background: #f3f5f7;
    border-top: 1px solid #e1e7ed;
    border-bottom: 1px solid #e1e7ed;
    color: #304958;
    font-size: 11px;
}

.trips-page .trip-upcoming-detail-code {
    color: #305061;
    font-size: 13px;
    font-weight: 700;
}

.trips-page .trip-upcoming-toolbar-route {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: #516979;
}

.trips-page .trip-upcoming-toolbar-distance {
    margin-left: 8px;
    font-weight: 600;
    color: #243745;
}

.trips-page .trip-upcoming-detail-grid {
    display: block;
}

.trips-page .trip-joined-segment-stack {
    display: grid;
    gap: 12px;
    padding: 0 0 12px;
}

.trips-page .trip-joined-segment {
    border-top: 1px solid #e7edf2;
}

.trips-page .trip-joined-segment-toolbar {
    display: grid;
    grid-template-columns: minmax(120px, 140px) minmax(0, 1fr) minmax(110px, 130px) minmax(120px, 160px) minmax(112px, 150px) 34px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px 8px;
    background: #f3f5f7;
    color: #304958;
    font-size: 11px;
}

.trips-page .trip-joined-segment-price {
    display: grid;
    justify-items: end;
    gap: 2px;
    text-align: right;
}

.trips-page .trip-joined-segment-price strong {
    font-size: 13px;
    color: #213645;
}

.trips-page .trip-joined-segment-driver,
.trips-page .trip-joined-segment-assignment {
    color: #395465;
    font-weight: 600;
}

.trips-page .trip-joined-segment-assignment {
    display: grid;
    gap: 3px;
}

.trips-page .trip-joined-segment-assignment strong {
    color: #213645;
    font-size: 11px;
}

.trips-page .trip-joined-segment-driver-select,
.trips-page .trip-joined-segment-assignment-select {
    display: grid;
    gap: 3px;
}

.trips-page .trip-joined-segment-driver-select span,
.trips-page .trip-joined-segment-assignment span,
.trips-page .trip-joined-segment-assignment-select span {
    color: #213645;
    font-size: 10px;
    font-weight: 700;
}

.trips-page .trip-joined-segment-driver-select select,
.trips-page .trip-joined-segment-assignment-select select,
.trips-page .trip-joined-segment-assignment-select input {
    width: 100%;
    min-width: 0;
    min-height: 24px;
    border: 1px solid #c8d3dc;
    background: #ffffff;
    color: #243745;
    font-size: 11px;
    cursor: pointer;
}

.trips-page .trip-joined-segment-driver-select select.is-invalid,
.trips-page .trip-joined-segment-assignment-select select.is-invalid,
.trips-page .trip-joined-segment-assignment-select input.is-invalid {
    border-color: #f79009;
    background: #fff8ec;
}

.trips-page .trip-joined-segment-status-wrap {
    display: flex;
    justify-content: flex-end;
}

.trips-page .trip-joined-segment-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #9fb6c7;
    color: #6c8291;
    background: #ffffff;
    font-size: 12px;
    line-height: 1;
}

.trips-page .trip-joined-segment-status.is-active {
    border-color: #0a6f8a;
    color: #0a6f8a;
    background: #eef8fc;
}

.trips-page .trip-joined-segment-status.is-complete {
    border-color: #9ec96b;
    color: #4c7a16;
    background: #f3fae8;
}

.trips-page .trip-upcoming-details {
    display: none;
    position: relative;
}

.trips-page .trip-upcoming-details.is-open {
    display: block;
}

.trips-page .trip-rejection-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 12px 10px;
    padding: 10px 12px;
    border: 1px solid #f2c0bc;
    background: linear-gradient(180deg, #fff5f4 0%, #fff1f0 100%);
    color: #8e1c12;
}

.trips-page .trip-rejection-banner strong {
    display: block;
    margin-bottom: 3px;
    color: #b42318;
}

.trips-page .trip-reject-icon-banner {
    margin-top: 2px;
}

.trips-page .trip-cancellation-watermark {
    position: absolute;
    left: 50%;
    top: 42%;
    z-index: 2;
    transform: translate(-50%, -50%) rotate(-38deg);
    color: rgba(112, 124, 136, 0.28);
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 0.04em;
    pointer-events: none;
    text-transform: uppercase;
}

.trips-page .trip-upcoming-detail-head,
.trips-page .trip-upcoming-detail-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.05fr) minmax(190px, 0.75fr) minmax(190px, 1.15fr) minmax(190px, 1.15fr);
    gap: 14px;
    padding: 0 12px;
}

.trips-page .trip-upcoming-detail-head {
    border-top: 1px solid #e7edf2;
    border-bottom: 1px solid #e7edf2;
    background: #f3f5f7;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #4b6272;
    font-size: 11px;
    font-weight: 700;
}

.trips-page .trip-upcoming-detail-row {
    padding-top: 14px;
    padding-bottom: 14px;
    color: #2b4455;
    font-size: 11px;
}

.trips-page .trip-upcoming-stop-cell,
.trips-page .trip-upcoming-equipment-cell,
.trips-page .trip-upcoming-time-cell {
    display: grid;
    gap: 4px;
}

.trips-page .trip-upcoming-stop-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.trips-page .trip-upcoming-equipment-cell strong {
    color: #213645;
}

.trips-page .trip-equipment-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.trips-page .trip-equipment-load-indicator {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border: 2px solid #111827;
    border-radius: 50%;
    background: #ffffff;
    vertical-align: middle;
}

.trips-page .trip-equipment-load-indicator.is-loaded {
    background: #111827;
}

.trips-page .trip-equipment-load-indicator:hover::before,
.trips-page .trip-equipment-load-indicator:hover::after {
    opacity: 1;
    visibility: visible;
}

.trips-page .trip-equipment-load-indicator::before {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    transform: translateX(-50%);
    white-space: nowrap;
    background: #111820;
    color: #ffffff;
    padding: 8px 10px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.2);
    opacity: 0;
    visibility: hidden;
    z-index: 45;
    pointer-events: none;
}

.trips-page .trip-equipment-load-indicator::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 3px);
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #111820;
    opacity: 0;
    visibility: hidden;
    z-index: 45;
    pointer-events: none;
}

.trips-page .trip-equipment-static-note {
    display: grid;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid #f2c0bc;
    background: #fff6f5;
    color: #8e1c12;
    line-height: 1.3;
}

.trips-page .trip-equipment-static-note strong {
    color: #b42318;
}

.trips-page .trip-equipment-select-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
}

.trips-page .trip-equipment-select-row span {
    color: #213645;
    font-weight: 700;
}

.trips-page .trip-equipment-select-row select,
.trips-page .trip-equipment-select-row input {
    width: auto;
    min-width: 112px;
    max-width: 128px;
    min-height: 24px;
    border: 1px solid #c8d3dc;
    background: #ffffff;
    color: #243745;
    font-size: 11px;
    cursor: pointer;
}

.trips-page .trip-equipment-select-row input.is-invalid {
    border-color: #f79009;
    background: #fff8ec;
}

.trips-page .trip-equipment-locked-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
}

.trips-page .trip-equipment-locked-row span {
    color: #213645;
    font-weight: 700;
}

.trips-page .trip-equipment-locked-row strong {
    color: #365162;
}

.trips-page .trip-time-edit-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 16px;
}

.trips-page .trip-time-edit-line.has-student-time {
    color: #07161d;
    font-weight: 600;
}

.trips-page .trip-student-check {
    min-width: 17px;
    height: 17px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0b6f8b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
}

.trips-page .trip-delay-clock {
    position: relative;
    width: 12px;
    height: 12px;
    border: 1.7px solid #1d303d;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.trips-page .trip-overdue-clock {
    position: relative;
    width: 12px;
    height: 12px;
    border: 1.7px solid #d97a00;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    background: rgba(245, 154, 35, 0.14);
    box-shadow: 0 0 0 2px rgba(245, 154, 35, 0.18), 0 0 8px rgba(245, 154, 35, 0.35);
}

.trips-page .trip-overdue-clock::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 2px;
    width: 1.5px;
    height: 4px;
    background: #d97a00;
    transform: translateX(-50%);
}

.trips-page .trip-overdue-clock::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 1.5px;
    background: #d97a00;
    transform: translateY(-50%);
}

.trips-page .trip-delay-clock::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 2px;
    width: 1.5px;
    height: 4px;
    background: #1d303d;
    transform: translateX(-50%);
}

.trips-page .trip-delay-clock::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 1.5px;
    background: #1d303d;
    transform: translateY(-50%);
}

.trips-page .trip-delay-clock:hover [data-delay-tooltip],
.trips-page .trip-delay-clock:hover::after {
    pointer-events: none;
}

.trips-page .trip-delay-clock[data-delay-tooltip]:hover::before {
    content: attr(data-delay-tooltip);
    position: absolute;
    left: 50%;
    top: -36px;
    width: max-content;
    max-width: 260px;
    height: auto;
    transform: translateX(-50%);
    background: #07161d;
    color: #ffffff;
    border-radius: 2px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    z-index: 3;
}

.trips-page .trip-time-edit-button {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #0a7e97;
    cursor: pointer;
    padding: 0;
}

.trips-page .trip-time-edit-button svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trips-page .trip-time-edit-button:hover {
    color: #005f78;
}

.trips-page .trip-time-edit-button:disabled,
.trips-page .trip-time-edit-button.is-disabled {
    color: #9baab5;
    cursor: not-allowed;
}

.trips-page .trip-upcoming-time-cell > button:not(.trip-time-edit-button) {
    border: 0;
    background: transparent;
    color: #0a7e97;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.trips-page .trip-time-late-flag {
    color: #b42318;
    font-size: 11px;
    font-weight: 700;
}

.trips-page .trip-upcoming-instruction {
    width: 100%;
    border: 0;
    border-top: 1px solid #edf2f6;
    background: transparent;
    text-align: left;
    padding: 10px 12px;
    color: #566d7d;
    font-size: 11px;
    cursor: pointer;
}

.trips-page .trip-upcoming-footer {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid #e7edf2;
    padding: 12px;
    color: #5b7383;
    font-size: 11px;
}

.trips-page .trip-upcoming-footer.is-open {
    display: flex;
}

.trips-page .trip-upcoming-footer-links,
.trips-page .trip-upcoming-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.trips-page .trip-upcoming-footer-links button,
.trips-page .trip-upcoming-footer-actions button {
    border: 1px solid #c7d2db;
    background: #ffffff;
    color: #39586a;
    font-size: 11px;
    line-height: 1;
    padding: 7px 10px;
    cursor: pointer;
}

.trips-page .trip-upcoming-footer-links button {
    border: 0;
    padding: 0;
    color: #39586a;
}

.trips-page .trip-footer-icon-button {
    min-width: 24px;
    min-height: 22px;
    color: #0a7e97 !important;
    font-size: 14px !important;
}

.trips-page .trip-upcoming-footer-actions .trip-reject-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-color: #f2c0bc;
    background: #fff5f4;
    color: #b42318;
    font-weight: 700;
}

.trips-page .trip-upcoming-footer-actions .trip-reject-trigger:hover {
    background: #ffe7e5;
}

.trips-page .trip-footer-status-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d3dce3;
    background: #f7fafc;
    color: #4f6777;
    font-size: 11px;
    line-height: 1.3;
    padding: 7px 10px;
}

.trips-page .trip-footer-status-note.is-rejected {
    border-color: #f2c0bc;
    background: #fff1f0;
    color: #8e1c12;
}

.trip-notes-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 120px 18px 24px;
    background: rgba(8, 24, 34, 0.38);
    z-index: 90;
}

.trip-notes-overlay.is-open {
    display: flex;
}

.trip-time-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 120px 18px 24px;
    background: rgba(8, 24, 34, 0.38);
    z-index: 92;
}

.trip-time-overlay.is-open {
    display: flex;
}

.trip-delay-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 120px 18px 24px;
    background: rgba(8, 24, 34, 0.38);
    z-index: 93;
}

.trip-delay-overlay.is-open {
    display: flex;
}

.trip-reject-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 120px 18px 24px;
    background: rgba(8, 24, 34, 0.44);
    z-index: 94;
}

.trip-reject-overlay.is-open {
    display: flex;
}

.trip-bulk-assign-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 90px 18px 24px;
    background: rgba(8, 24, 34, 0.42);
    z-index: 95;
}

.trip-bulk-assign-overlay.is-open {
    display: flex;
}

.trip-time-dialog {
    width: min(570px, 100%);
    background: #ffffff;
    border: 2px solid #006783;
    box-shadow: 0 18px 40px rgba(10, 22, 30, 0.22);
}

.trip-delay-dialog {
    width: min(570px, 100%);
    background: #ffffff;
    border: 2px solid #006783;
    box-shadow: 0 18px 40px rgba(10, 22, 30, 0.22);
}

.trip-reject-dialog {
    width: min(490px, 100%);
    background: #ffffff;
    border: 2px solid #07161d;
    box-shadow: 0 18px 40px rgba(10, 22, 30, 0.26);
}

.trip-bulk-assign-dialog {
    width: min(780px, 100%);
    background: #ffffff;
    border: 2px solid #006783;
    box-shadow: 0 18px 40px rgba(10, 22, 30, 0.24);
}

.trip-time-head {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 8px;
    background: #07161d;
    color: #ffffff;
    font-size: 13px;
}

.trip-delay-head {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 8px;
    background: #07161d;
    color: #ffffff;
    font-size: 13px;
}

.trip-reject-head {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 8px;
    background: #07161d;
    color: #ffffff;
    font-size: 13px;
}

.trip-bulk-assign-head {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 10px;
    background: #07161d;
    color: #ffffff;
    font-size: 13px;
}

.trip-time-close {
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.trip-delay-close {
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.trip-reject-close {
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.trip-bulk-assign-close {
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.trip-time-form {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.trip-delay-form {
    display: grid;
    gap: 9px;
    padding: 12px;
}

.trip-reject-form {
    display: grid;
    gap: 12px;
    padding: 16px 14px 14px;
}

.trip-bulk-assign-form {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.trip-bulk-assign-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.trip-bulk-assign-fields label {
    display: grid;
    gap: 6px;
    color: #111f2a;
    font-size: 12px;
    font-weight: 700;
}

.trip-bulk-assign-fields select {
    width: 100%;
    min-height: 36px;
    border: 1px solid #8ea0ab;
    background: #ffffff;
    color: #111f2a;
    font-size: 13px;
    padding: 0 8px;
}

.trip-bulk-assign-load-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    background: #f2f6fa;
    border: 1px solid #d3dce3;
    color: #243746;
    font-size: 12px;
}

.trip-bulk-assign-load-head label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.trip-bulk-assign-load-head small {
    color: #516979;
}

.trip-bulk-assign-loads {
    max-height: min(420px, 48vh);
    overflow: auto;
    border: 1px solid #d3dce3;
}

.trip-bulk-load-option {
    display: grid;
    grid-template-columns: 26px minmax(170px, 1.35fr) minmax(150px, 1fr) minmax(135px, 0.9fr);
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 10px;
    border-bottom: 1px solid #e7edf2;
    color: #111f2a;
    font-size: 12px;
}

.trip-bulk-load-option:last-child {
    border-bottom: 0;
}

.trip-bulk-load-option:hover {
    background: #f6fbfd;
}

.trip-bulk-load-option input {
    width: 16px;
    height: 16px;
}

.trip-bulk-load-option span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.trip-bulk-load-option strong,
.trip-bulk-load-option small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-bulk-load-option small {
    color: #516979;
    font-size: 11px;
}

.trip-bulk-assign-empty {
    padding: 22px 14px;
    color: #516979;
    font-size: 13px;
    text-align: center;
}

.trip-bulk-assign-alert {
    min-height: 20px;
    color: #0a5f76;
    font-size: 12px;
    font-weight: 700;
}

.trip-bulk-assign-alert.is-warning {
    color: #a15c00;
}

.trip-bulk-assign-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #e1e7ed;
    padding-top: 12px;
}

.trip-bulk-assign-cancel {
    border: 0;
    background: transparent;
    color: #111f2a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.trip-bulk-assign-confirm {
    border: 0;
    background: #00708d;
    color: #ffffff;
    min-height: 32px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.trip-bulk-assign-confirm:disabled {
    background: #c9d5de;
    color: #8ca0af;
    cursor: not-allowed;
}

.trip-reject-form h2 {
    margin: 0;
    color: #111f2a;
    font-size: 18px;
    line-height: 1.2;
}

.trip-reject-required {
    margin: 0;
    color: #516979;
    font-size: 12px;
}

.trip-reject-field {
    display: grid;
    gap: 6px;
}

.trip-reject-field span {
    color: #0f1f2a;
    font-size: 12px;
    font-weight: 700;
}

.trip-reject-field select {
    width: 100%;
    min-height: 40px;
    border: 1px solid #8ea0ab;
    background: #ffffff;
    color: #111f2a;
    font-size: 13px;
    padding: 0 10px;
}

.trip-reject-field select.is-invalid {
    border-color: #d92d20;
    box-shadow: 0 0 0 1px rgba(217, 45, 32, 0.16);
}

.trip-time-selector-row,
.trip-time-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.trip-delay-selector-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.trip-delay-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.trip-time-selector-row select,
.trip-time-input-row input {
    width: 100%;
    min-height: 34px;
    border: 1px solid #8ea0ab;
    background: #ffffff;
    color: #111f2a;
    font-size: 13px;
    padding: 0 8px;
}

.trip-delay-selector-row select,
.trip-delay-input-row input {
    width: 100%;
    min-height: 34px;
    border: 1px solid #8ea0ab;
    background: #ffffff;
    color: #111f2a;
    font-size: 13px;
    padding: 0 8px;
}

.trip-delay-selector-row select.is-invalid {
    border-color: #d92d20;
}

.trip-delay-info {
    border: 1px solid #b7c4ce;
    background: #f2f6fa;
    color: #111f2a;
    font-size: 12px;
    line-height: 1.25;
    padding: 8px 10px;
}

.trip-delay-info span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    background: #ffffff;
    border: 1px solid #a9b7c1;
    color: #4d6474;
    font-size: 10px;
    font-weight: 700;
}

.trip-delay-section-title,
.trip-delay-schedule-line,
.trip-delay-estimated-label {
    color: #111f2a;
    font-size: 13px;
}

.trip-delay-estimated-label,
.trip-delay-section-title {
    font-weight: 700;
}

.trip-delay-audit {
    width: fit-content;
    border: 0;
    background: transparent;
    color: #0a7e97;
    font-size: 12px;
    padding: 4px 0;
    cursor: pointer;
}

.trip-time-schedule-line,
.trip-time-estimated-label {
    color: #111f2a;
    font-size: 13px;
}

.trip-time-estimated-label {
    font-weight: 700;
}

.trip-time-alert {
    min-height: 20px;
    font-size: 12px;
    font-weight: 700;
}

.trip-delay-alert {
    min-height: 20px;
    font-size: 12px;
    font-weight: 700;
}

.trip-reject-alert {
    min-height: 20px;
    font-size: 12px;
    font-weight: 700;
}

.trip-delay-alert.is-warning {
    color: #a15c00;
}

.trip-reject-alert.is-warning {
    color: #b42318;
}

.trip-time-alert.is-late {
    color: #b42318;
}

.trip-time-alert.is-late::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 12px;
    margin-right: 6px;
    background:
        linear-gradient(#b42318, #b42318) left top / 2px 12px no-repeat,
        linear-gradient(135deg, #d92d20 0 68%, transparent 68%) left top / 10px 8px no-repeat;
    vertical-align: -2px;
}

.trip-time-alert.is-warning {
    color: #a15c00;
}

.trip-time-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.trip-delay-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #e1e7ed;
    padding-top: 12px;
}

.trip-reject-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #e1e7ed;
    padding-top: 12px;
}

.trip-time-save {
    border: 0;
    background: #00708d;
    color: #ffffff;
    min-height: 30px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.trip-time-save:disabled {
    background: #c9d5de;
    color: #8ca0af;
    cursor: not-allowed;
}

.trip-delay-confirm {
    border: 0;
    background: #00708d;
    color: #ffffff;
    min-height: 30px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.trip-reject-confirm {
    border: 0;
    background: #b42318;
    color: #ffffff;
    min-height: 32px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.trip-delay-confirm:disabled {
    background: #c9d5de;
    color: #8ca0af;
    cursor: not-allowed;
}

.trip-reject-confirm:disabled {
    background: #e1e7ed;
    color: #8ca0af;
    cursor: not-allowed;
}

.trip-time-cancel {
    border: 1px solid #c7d2db;
    background: #ffffff;
    color: #344d5d;
    min-height: 30px;
    padding: 0 14px;
    cursor: pointer;
}

.trip-delay-cancel {
    border: 1px solid #00708d;
    background: #ffffff;
    color: #00708d;
    min-height: 30px;
    padding: 0 14px;
    cursor: pointer;
}

.trip-reject-cancel {
    border: 1px solid #c7d2db;
    background: #ffffff;
    color: #344d5d;
    min-height: 32px;
    padding: 0 14px;
    cursor: pointer;
}

.trip-notes-dialog {
    width: min(560px, 100%);
    min-height: 306px;
    max-height: calc(100vh - 150px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 2px solid #006783;
    box-shadow: 0 18px 40px rgba(10, 22, 30, 0.22);
}

.trip-notes-head {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 8px;
    background: #07161d;
    color: #ffffff;
    font-size: 13px;
}

.trip-notes-close {
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.trip-notes-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.4fr;
    gap: 4px;
    padding: 10px 7px 0;
    border-bottom: 1px solid #c7d2db;
}

.trip-notes-tabs button {
    border: 0;
    border-bottom: 3px solid #c7d2db;
    background: transparent;
    color: #526a7a;
    font-size: 13px;
    text-align: left;
    padding: 8px 18px 8px;
    cursor: pointer;
}

.trip-notes-tabs button.is-active {
    border-bottom-color: #0a90b1;
    color: #1e3340;
}

.trip-notes-toolbar {
    padding: 12px 7px;
    border-bottom: 1px solid #c7d2db;
}

.trip-notes-toolbar.is-hidden {
    display: none;
}

.trip-add-note-button,
.trip-note-save {
    border: 0;
    background: #00708d;
    color: #ffffff;
    min-height: 30px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.trip-add-note-button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.trip-add-note-button span:first-child {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.trip-note-form {
    display: grid;
    gap: 8px;
    padding: 10px 7px;
    border-bottom: 1px solid #d7e0e7;
    background: #f8fbfd;
}

.trip-note-form textarea {
    width: 100%;
    min-height: 84px;
    resize: vertical;
    border: 1px solid #b8c7d1;
    color: #1d303d;
    font-size: 13px;
    padding: 8px;
}

.trip-note-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trip-note-cancel {
    border: 1px solid #c7d2db;
    background: #ffffff;
    color: #344d5d;
    min-height: 30px;
    padding: 0 14px;
    cursor: pointer;
}

.trip-notes-body {
    overflow: auto;
    padding: 12px 7px 18px;
    color: #1d303d;
    font-size: 13px;
}

.trip-notes-empty {
    margin: 0;
}

.trip-notes-list {
    display: grid;
    gap: 12px;
}

.trip-note-entry {
    display: grid;
    gap: 3px;
}

.trip-note-meta {
    color: #6c7f8b;
    font-size: 11px;
}

.trip-note-text {
    line-height: 1.35;
    white-space: pre-wrap;
}

.trip-note-text strong {
    margin-right: 10px;
    color: #1d303d;
}

.trip-payout-table-wrap {
    overflow-x: auto;
    padding: 0 5px;
}

.trip-payout-table {
    width: auto;
    min-width: 438px;
    border-collapse: collapse;
    color: #111f2a;
    font-size: 13px;
}

.trip-payout-table th,
.trip-payout-table td {
    border: 1px solid #c7d2db;
    padding: 8px 8px;
    text-align: right;
    white-space: nowrap;
}

.trip-payout-table th {
    color: #091a24;
    font-weight: 700;
}

.trip-payout-table th:first-child,
.trip-payout-table td:first-child {
    text-align: left;
}

.trip-payout-total-row td {
    font-weight: 700;
}

.trip-payout-total-row td:last-child {
    font-weight: 400;
}

.trip-shipment-details-panel {
    overflow-x: auto;
}

.trip-shipment-details-table {
    width: 100%;
    min-width: 540px;
    border-collapse: collapse;
    color: #111f2a;
    font-size: 13px;
}

.trip-shipment-details-table th,
.trip-shipment-details-table td {
    border-bottom: 1px solid #aebbc5;
    padding: 7px 6px;
    text-align: left;
    vertical-align: top;
}

.trip-shipment-details-table th {
    color: #091a24;
    font-weight: 700;
}

.trip-shipment-details-table th:first-child,
.trip-shipment-details-table td:first-child {
    width: 132px;
}

.trip-shipment-details-table th:nth-child(3),
.trip-shipment-details-table td:nth-child(3) {
    width: 140px;
}

.trip-shipment-details-table td div + div {
    margin-top: 3px;
}

.trip-shipment-view-row td {
    border-bottom: 0;
    color: #00708d;
    font-size: 12px;
    padding-top: 8px;
    padding-bottom: 4px;
}

.trip-shipment-view-row span {
    font-size: 14px;
    margin-right: 4px;
}

.trip-relay-assistant-panel {
    position: fixed;
    right: 18px;
    bottom: 0;
    z-index: 88;
    width: min(372px, calc(100vw - 36px));
    height: min(650px, calc(100vh - 96px));
    min-height: 480px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #8799a4;
    box-shadow: 0 8px 28px rgba(10, 23, 32, 0.28);
    color: #102533;
}

.trip-relay-assistant-header {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    background: #087d97;
    color: #ffffff;
    font-size: 15px;
}

.trip-relay-assistant-header button {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.trip-relay-assistant-messages {
    flex: 1;
    overflow-y: auto;
    display: grid;
    align-content: end;
    gap: 12px;
    padding: 16px 12px;
    background: #ffffff;
}

.trip-relay-assistant-message {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.trip-relay-assistant-message.is-user {
    justify-content: flex-end;
}

.trip-relay-assistant-avatar,
.trip-relay-assistant-user-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d8e0e6;
    color: #263f50;
    font-size: 11px;
    font-weight: 700;
}

.trip-relay-assistant-user-avatar {
    position: relative;
    background: #14a7d1;
}

.trip-relay-assistant-user-avatar::before,
.trip-relay-assistant-user-avatar::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
}

.trip-relay-assistant-user-avatar::before {
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.trip-relay-assistant-user-avatar::after {
    bottom: 5px;
    width: 15px;
    height: 8px;
    border-radius: 8px 8px 2px 2px;
}

.trip-relay-assistant-message-main {
    max-width: 280px;
    display: grid;
    gap: 4px;
}

.trip-relay-assistant-message-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #576d7b;
    font-size: 11px;
}

.trip-relay-assistant-message.is-user .trip-relay-assistant-message-meta {
    justify-content: flex-end;
}

.trip-relay-assistant-bubble {
    border: 1px solid #aebbc5;
    background: #eef3f6;
    color: #132b3a;
    padding: 9px 10px;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.trip-relay-assistant-message.is-user .trip-relay-assistant-bubble {
    border-color: #13a8d4;
    background: #ecfbff;
}

.trip-relay-assistant-message.is-success .trip-relay-assistant-bubble {
    border-color: #b9d0c4;
    background: #f3faf6;
}

.trip-relay-assistant-bubble a {
    color: #006783;
    font-weight: 700;
}

.trip-relay-assistant-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.trip-relay-assistant-actions button {
    min-height: 30px;
    min-width: 72px;
    border: 1px solid #087d97;
    background: #ffffff;
    color: #006783;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.trip-relay-assistant-actions button:first-child {
    background: #087d97;
    color: #ffffff;
}

.trip-relay-assistant-input-row {
    display: grid;
    grid-template-columns: 1fr 42px;
    gap: 6px;
    padding: 10px 8px;
    border-top: 1px solid #c7d2db;
    background: #f4f7f9;
}

.trip-relay-assistant-input-row input {
    width: 100%;
    min-height: 36px;
    border: 1px solid #9aa9b2;
    padding: 0 8px;
    color: #132b3a;
    font-size: 13px;
}

.trip-relay-assistant-input-row button {
    border: 0;
    background: #087d97;
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
}

.trip-relay-assistant-input-row input:disabled,
.trip-relay-assistant-input-row button:disabled {
    background: #e2e8ed;
    color: #7b8d99;
    cursor: not-allowed;
}

.trip-relay-case-form {
    display: grid;
    gap: 10px;
    border: 1px solid #c7d2db;
    background: #f8fbfd;
    padding: 12px;
}

.trip-relay-case-form label {
    display: grid;
    gap: 5px;
    color: #122b3a;
    font-size: 12px;
    font-weight: 700;
}

.trip-relay-case-form small {
    color: #687d89;
    font-weight: 400;
}

.trip-relay-case-form textarea,
.trip-relay-case-form input[type="tel"],
.trip-relay-case-form input[type="file"] {
    width: 100%;
    border: 1px solid #9aa9b2;
    background: #ffffff;
    color: #102533;
    font-size: 13px;
    padding: 8px;
}

.trip-relay-case-form textarea {
    resize: vertical;
    min-height: 110px;
}

.trip-relay-case-form .is-invalid {
    border-color: #d92d20;
    box-shadow: 0 0 0 1px rgba(217, 45, 32, 0.16);
}

.trip-relay-case-attachments {
    color: #536a78;
    font-size: 12px;
    line-height: 1.3;
}

.trip-relay-case-alert {
    min-height: 16px;
    color: #b42318;
    font-size: 12px;
    font-weight: 700;
}

.trip-relay-case-submit {
    justify-self: end;
    min-height: 32px;
    border: 0;
    background: #087d97;
    color: #ffffff;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.trip-relay-case-submit:disabled {
    background: #c8d2d8;
    color: #7f929f;
    cursor: not-allowed;
}

@media (max-width: 700px) {
    .trip-relay-assistant-panel {
        left: 8px;
        right: 8px;
        width: auto;
        min-height: 420px;
        height: min(640px, calc(100vh - 80px));
    }

    .trip-relay-assistant-message-main {
        max-width: calc(100vw - 96px);
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.trips-page .trip-upcoming-page-active {
    color: #0ea2cc !important;
    font-weight: 700;
    border-bottom: 2px solid #0ea2cc !important;
}

.trips-page .trip-state[data-trip-state="in-transit"] > .trip-pagination,
.trips-page .trip-state[data-trip-state="history"] > .trip-pagination {
    display: none;
}

.trips-page .trip-result-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    color: #243745;
}

.trips-page .trip-result-table td {
    border-bottom: 1px solid #e1e7ed;
    padding: 7px 8px;
    vertical-align: top;
    white-space: nowrap;
}

.trips-page .trip-result-table tr:last-child td {
    border-bottom: 0;
}

.trips-page .trip-arrow {
    width: 24px;
    text-align: center;
    color: #566f7f;
    font-size: 14px;
}

.trips-page .trip-cell-actions {
    width: 180px;
}

.trips-page .trip-cell-actions select {
    width: 100%;
    height: 24px;
    margin-bottom: 4px;
    font-size: 11px;
    border: 1px solid #c8d3dc;
}

.trips-page .trip-cell-actions button {
    border: 0;
    background: transparent;
    color: #0a7e97;
    font-size: 11px;
    padding: 0;
    cursor: pointer;
}

.trips-page .trip-cancel {
    color: #a33f3f;
    font-weight: 600;
}

.trips-page .trip-empty-card {
    border: 1px solid #d3dce3;
    background: #ffffff;
    min-height: 234px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.trips-page .trip-empty-card h3 {
    margin: 0;
    font-size: 38px;
    font-weight: 500;
    color: #2a3f50;
}

.trips-page .trip-empty-card img {
    width: min(300px, 75%);
    height: auto;
}

.trips-page .trip-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    color: #6e8190;
    font-size: 11px;
}

.trips-page .trip-pagination button {
    border: 0;
    background: transparent;
    color: #748895;
    font-size: 13px;
    cursor: pointer;
    padding: 0 2px;
}

.trips-page .trip-result-table-history td {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* If a legacy page places content inside top-bar-fullwidth, keep content aligned. */
.top-bar-fullwidth > :not(.top-bar):not(.trips-header) {
    margin-left: 16px;
    margin-right: 16px;
}

.main-content > :not(.top-bar-fullwidth):not(.page-shell) {
    margin-left: 16px;
    margin-right: 16px;
}

@media (max-width: 1200px) {
    .payments-page .payments-dispute-kpi-grid {
        grid-template-columns: 1fr;
    }

    .layout-3,
    .field-grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    .rewards-page .rewards-top-grid {
        grid-template-columns: 1fr 1fr;
    }

    .rewards-page .rewards-mid-grid {
        grid-template-columns: 1fr;
    }

    .learning-center-page .learning-collections {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .learning-center-page .learning-filters {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .learning-center-page .learning-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .learning-center-page .learning-counters {
        grid-template-columns: 1fr 1fr;
    }

    .trips-page .trip-filter-grid-upcoming,
    .trips-page .trip-filter-grid-history {
        grid-template-columns: 1fr 1fr;
    }

    .trips-page .trip-upcoming-summary,
    .trips-page .trip-upcoming-detail-head,
    .trips-page .trip-upcoming-detail-row {
        grid-template-columns: 1fr 1fr;
    }

    .trips-page .trip-joined-segment-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .trips-page .trip-upcoming-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .trips-page .trip-empty-card h3 {
        font-size: 30px;
    }
}

@media (max-width: 900px) {
    :root {
        --relay-sidebar-width: 180px;
    }

    .sidebar {
        width: var(--relay-sidebar-width);
        min-width: var(--relay-sidebar-width);
    }

    .layout-2,
    .layout-3,
    .field-grid-2,
    .field-grid-3,
    .field-grid-4 {
        grid-template-columns: 1fr;
    }

    .right-widget {
        position: static;
        width: 100%;
        margin-top: 12px;
    }

    .payments-page .payments-dispute-toolbar {
        justify-content: stretch;
        flex-direction: column;
    }

    .rewards-page .rewards-top-grid,
    .rewards-page .rewards-mini-grid {
        grid-template-columns: 1fr;
    }

    .rewards-page .rewards-page-title {
        font-size: 26px;
    }

    .learning-center-page .learning-collections,
    .learning-center-page .learning-grid,
    .learning-center-page .learning-filters {
        grid-template-columns: 1fr;
    }

    .learning-center-page .learning-tabs-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding-bottom: 8px;
    }

    .learning-center-page .learning-courses-toolbar {
        grid-template-columns: 1fr;
    }

    .trips-page .trip-filter-grid-upcoming,
    .trips-page .trip-filter-grid-history {
        grid-template-columns: 1fr;
    }

    .trips-page .trip-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .trips-page .trip-upcoming-summary,
    .trips-page .trip-upcoming-detail-head,
    .trips-page .trip-upcoming-detail-row {
        grid-template-columns: 1fr;
    }

    .trips-page .trip-upcoming-details-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .trips-page .trip-joined-segment-toolbar {
        grid-template-columns: 1fr;
    }

    .trips-page .trip-result-table {
        font-size: 10px;
    }
}

.documents-page .compliance-copy p {
    margin: 0 0 10px;
    color: #2e4757;
    font-size: 12px;
    line-height: 1.45;
}

.documents-page .compliance-options {
    display: grid;
    gap: 8px;
    margin: 12px 0;
}

.documents-page .compliance-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #2e4757;
    font-size: 12px;
    line-height: 1.4;
}

.documents-page .compliance-option input {
    margin-top: 2px;
}

.documents-page .compliance-subtitle {
    margin: 12px 0 8px;
    color: #243b4b;
    font-size: 13px;
}

.documents-page .compliance-list {
    margin: 0 0 10px 16px;
    padding: 0;
    color: #2e4757;
    font-size: 12px;
    line-height: 1.45;
}

.documents-page .compliance-list li {
    margin-bottom: 6px;
}

.documents-page .docs-upload-block {
    border: 1px solid #e1e8ed;
    background: #fbfdfe;
    padding: 10px;
}

.documents-page .docs-upload-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.documents-page .docs-upload-row input[type="file"] {
    font-size: 11px;
}

.documents-page .docs-attestation {
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #2e4757;
    font-size: 12px;
    line-height: 1.4;
}

/* Assets page */
.assets-page .top-icons {
    align-items: center;
}

.assets-bell-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.assets-bell-wrap .badge-number {
    position: absolute;
    right: -14px;
    top: -10px;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    font-size: 10px;
    border: 1px solid rgba(255, 255, 255, 0.36);
    background: #d8edf4;
    color: #0a6882;
}

.assets-page .assets-card {
    margin: 0;
}

.assets-page .assets-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.assets-page .assets-toolbar-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}

.assets-page .assets-faq-link {
    color: var(--relay-link);
    text-decoration: none;
    font-weight: 600;
}

.assets-page .assets-faq-link:hover {
    text-decoration: underline;
}

.assets-page .assets-meta-divider {
    color: #91a4b2;
}

.assets-page .assets-meta-text {
    color: #284354;
}

.assets-page .assets-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.assets-page .assets-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.assets-page .assets-search-field {
    display: flex;
    align-items: stretch;
}

.assets-page .assets-search-field input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.assets-page .assets-search-btn {
    border: 1px solid #c9d3db;
    border-left: 0;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    padding: 0 12px;
    font-size: 14px;
    background: #f7fafc;
    color: #2e495a;
    cursor: pointer;
}

.assets-page .assets-search-btn:hover {
    background: #edf3f6;
}

.assets-page .assets-results-count {
    margin: 0 0 10px;
    font-size: 12px;
    color: #213a4a;
    font-weight: 600;
}

.assets-page .assets-inline-note {
    position: relative;
    margin-bottom: 10px;
    padding-right: 28px;
}

.assets-page .assets-inline-note::after {
    content: '\00D7';
    position: absolute;
    right: 10px;
    top: 6px;
    color: #4b6373;
    font-weight: 700;
}

.assets-page .assets-table-wrap {
    border: 1px solid var(--relay-border);
    overflow-x: auto;
    overflow-y: visible;
    background: #ffffff;
    position: relative;
}

.assets-page .assets-table {
    min-width: 1030px;
}

.assets-page .assets-table th {
    background: #ffffff;
    border-bottom: 1px solid #b9c7d2;
    color: #253f51;
    font-size: 11px;
    text-transform: none;
}

.assets-page .assets-table td {
    font-size: 12px;
    color: #1f3747;
}

.assets-page .assets-table td:first-child {
    color: #2d6f8a;
    font-weight: 600;
}

.assets-page .assets-compliance-pill {
    background: #f8fce9;
}

.assets-page .assets-row-menu {
    border: 0;
    background: transparent;
    color: #3f5a6c;
    font-size: 20px;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
}

.assets-page .assets-row-menu:hover {
    color: #103e57;
}

.assets-page .assets-actions-cell {
    position: relative;
    width: 56px;
    overflow: visible;
}

.assets-page .assets-row-actions,
.asset-detail-page .asset-detail-actions {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.assets-page .assets-review-banner,
.asset-detail-page .assets-review-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 12px 14px;
    background: #1f6c35;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.assets-page .assets-review-banner.is-hidden,
.asset-detail-page .assets-review-banner.is-hidden {
    display: none;
}

.assets-page .assets-review-close,
.asset-detail-page .assets-review-close {
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.assets-page .assets-unit-link {
    color: #2d6f8a;
    text-decoration: none;
    font-weight: 600;
}

.assets-page .assets-unit-link:hover {
    text-decoration: underline;
}

.assets-action-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 188px;
    background: #ffffff;
    border: 1px solid #98abb7;
    box-shadow: 0 6px 16px rgba(18, 43, 58, 0.18);
    z-index: 12;
}

.assets-action-menu-item {
    width: 100%;
    border: 0;
    background: #ffffff;
    color: #203a4a;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    font-size: 12px;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.assets-action-menu-item:hover {
    background: #edf4f7;
}

.assets-action-menu-item.is-link {
    color: var(--relay-link);
}

.assets-action-menu-item.is-danger {
    color: var(--relay-danger);
}

.assets-action-icon {
    width: 14px;
    text-align: center;
    font-size: 14px;
}

.assets-page .assets-empty-row td {
    text-align: center;
    padding: 20px 10px;
    color: #5a7180;
}

.assets-temporary-modal {
    width: min(720px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: #ffffff;
    border: 1px solid #0b8fb2;
    box-shadow: 0 18px 44px rgba(12, 32, 47, 0.28);
}

.assets-import-modal {
    width: min(620px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: #ffffff;
    border: 1px solid #0b8fb2;
    box-shadow: 0 18px 44px rgba(12, 32, 47, 0.28);
}

.assets-temporary-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: #101b24;
    color: #ffffff;
}

.assets-temporary-modal-head h2 {
    margin: 0;
    font-size: 20px;
}

.assets-temporary-modal-head .close-x {
    color: #ffffff;
}

.assets-temporary-modal-body {
    padding: 14px;
}

.assets-temporary-modal-body h3,
.assets-temporary-modal-body h4 {
    margin: 0 0 10px;
}

.assets-temporary-modal-body p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    color: #223d4e;
}

.assets-import-body h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.assets-import-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #d4dee5;
}

.assets-import-section h4 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.35;
    color: #172d3b;
}

.assets-import-section select {
    width: 200px;
    max-width: 100%;
    margin-bottom: 10px;
}

.assets-import-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.assets-import-action:disabled {
    border-color: #bfd0dc;
    background: #f6f9fb;
    color: #92a6b4;
    cursor: not-allowed;
}

.assets-import-action:disabled:hover {
    background: #f6f9fb;
}

.assets-import-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid #d4dee5;
}

.assets-temporary-warning {
    border-color: #eba44c;
    background: #fff8ef;
    color: #65441a;
}

.assets-temporary-info {
    margin: 0 0 10px;
    border: 1px solid #9eb1bd;
    background: #f7fafc;
    padding: 12px 14px;
    font-size: 13px;
    color: #2b4455;
}

.assets-temporary-required-note {
    font-size: 12px;
    color: #607686;
}

.assets-temporary-field {
    margin-bottom: 12px;
}

.assets-temporary-field label {
    display: block;
    margin-bottom: 5px;
}

.assets-temporary-field label span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #254050;
}

.assets-temporary-form input,
.assets-temporary-form select {
    width: 100%;
}

.assets-temporary-field.is-invalid input,
.assets-temporary-field.is-invalid select {
    border-color: #d11f3e;
    color: #1f3747;
    box-shadow: none;
}

.assets-temporary-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: #be1531;
}

.assets-temporary-error[hidden] {
    display: none;
}

.assets-temporary-error::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    margin-top: 1px;
    border-radius: 999px;
    background: #be1531;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
}

.assets-temporary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.assets-temporary-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.asset-detail-page .top-icons {
    align-items: center;
}

.asset-detail-page .asset-detail-card {
    margin: 0;
}

.asset-detail-page .asset-detail-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.asset-detail-page .asset-detail-back-link {
    color: var(--relay-link);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.asset-detail-page .asset-detail-back-link:hover {
    text-decoration: underline;
}

.asset-detail-page .asset-detail-actions .btn {
    border-radius: 0;
}

.asset-detail-page .asset-detail-actions .btn:first-child {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.asset-detail-page .asset-detail-actions .btn:last-child {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.asset-detail-page .asset-detail-ellipsis {
    min-width: 42px;
    font-size: 20px;
    line-height: 1;
    padding-left: 10px;
    padding-right: 10px;
}

.asset-detail-page .asset-detail-action-menu {
    top: calc(100% + 6px);
    right: 0;
}

.asset-detail-page .asset-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.asset-detail-page .asset-detail-header h2 {
    margin: 0;
    font-size: 42px;
    line-height: 1;
    color: #111f29;
}

.asset-detail-page .asset-detail-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.asset-detail-page .asset-detail-summary h3 {
    margin: 0 0 10px;
    font-size: 16px;
}

.asset-detail-page .asset-detail-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 12px 20px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.asset-detail-page .asset-detail-section {
    border: 1px solid var(--relay-border);
    margin-top: 12px;
    background: #ffffff;
}

.asset-detail-page .asset-detail-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--relay-border);
}

.asset-detail-page .asset-detail-section-head h3 {
    margin: 0;
    flex: 1;
    font-size: 15px;
}

.asset-detail-page .asset-detail-section-arrow {
    color: #0d7b94;
    font-size: 12px;
}

.asset-detail-page .asset-detail-section-body {
    padding: 14px;
    font-size: 13px;
    color: #1f3949;
    line-height: 1.5;
}

.asset-detail-page .asset-detail-section-body p {
    margin: 0 0 12px;
}

.asset-detail-page .asset-detail-certificate-row {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: 18px;
    padding-top: 10px;
    border-top: 1px solid #dce5ea;
}

.asset-detail-page .asset-detail-empty {
    padding: 18px 0 6px;
}

.asset-detail-page .asset-detail-empty h2 {
    margin: 0 0 10px;
    font-size: 22px;
}

.asset-detail-page .asset-detail-empty p {
    margin: 0 0 16px;
    font-size: 13px;
    color: #566c7b;
}

@media (max-width: 1100px) {
    .assets-page .assets-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .assets-page .assets-search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .assets-page .assets-toolbar-actions {
        width: 100%;
    }

    .assets-page .assets-toolbar-actions .btn {
        flex: 1;
    }

    .assets-page .assets-filter-grid {
        grid-template-columns: 1fr;
    }

    .assets-page .assets-search-field {
        grid-column: auto;
    }

    .assets-temporary-grid,
    .asset-detail-page .asset-detail-summary-grid,
    .asset-detail-page .asset-detail-certificate-row {
        grid-template-columns: 1fr;
    }

    .asset-detail-page .asset-detail-topbar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Scorecard page */
.scorecard-page .top-icons {
    align-items: center;
}

.scorecard-bell-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.scorecard-bell-wrap .badge-number {
    position: absolute;
    right: -14px;
    top: -10px;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    font-size: 10px;
    border: 1px solid rgba(255, 255, 255, 0.36);
    background: #d8edf4;
    color: #0a6882;
}

.scorecard-page .scorecard-tabs {
    display: flex;
    gap: 18px;
    border-bottom: 1px solid var(--relay-border);
    margin: 0 0 12px;
    padding: 0 6px;
}

.scorecard-page .scorecard-tabs .tab {
    padding: 8px 10px;
    margin-bottom: -1px;
}

.scorecard-page .scorecard-tabs .tab.active {
    border-bottom: 3px solid #3f75ad;
    color: #16354f;
}

.scorecard-page .scorecard-pane.is-hidden {
    display: none;
}

.scorecard-page .scorecard-performance-head {
    margin-bottom: 8px;
}

.scorecard-page .scorecard-performance-head h2 {
    margin: 0 0 5px;
    font-size: 37px;
    color: #152f44;
}

.scorecard-page .scorecard-notice-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--relay-border);
    background: #f5f8fa;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #2f4a5e;
}

.scorecard-page .scorecard-notice-row p {
    margin: 0;
}

.scorecard-page .scorecard-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.scorecard-page .scorecard-switch input {
    width: 26px;
    height: 14px;
}

.scorecard-page .scorecard-summary-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.scorecard-page .scorecard-summary-grid .card {
    margin: 0;
}

.scorecard-page .scorecard-summary-grid h4 {
    margin: 0 0 3px;
    font-size: 14px;
    color: #273f54;
}

.scorecard-page .scorecard-grade {
    margin: 0 0 8px;
    font-size: 52px;
    font-weight: 700;
    color: #1b3247;
    line-height: 1;
}

.scorecard-page .scorecard-grade span {
    font-size: 48px;
    font-weight: 500;
}

.scorecard-page #scorecard-grade-letter {
    font-size: 52px;
    font-weight: 700;
}

.scorecard-page .scorecard-kpi {
    margin: 0 0 4px;
    font-size: 43px;
    font-weight: 700;
    color: #1a3348;
    line-height: 1;
}

.scorecard-page .scorecard-filter-row {
    display: grid;
    grid-template-columns: 1fr 160px 1fr 1fr;
    gap: 8px;
    border: 1px solid var(--relay-border);
    background: #f5f8fa;
    padding: 8px;
    margin: 0 0 10px;
}

.scorecard-page .scorecard-filter-row select {
    border: 1px solid #c9d3db;
    border-radius: 2px;
    padding: 7px 8px;
    font-size: 12px;
    color: #223543;
    background: #ffffff;
}

.scorecard-page .scorecard-week-nav {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    border: 1px solid #c9d3db;
    background: #ffffff;
    border-radius: 2px;
    overflow: hidden;
}

.scorecard-page .scorecard-week-nav span {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #314a5b;
}

.scorecard-page .scorecard-week-nav button {
    border: 0;
    background: #f1f5f8;
    color: #425b6c;
    height: 100%;
    cursor: pointer;
}

.scorecard-page .scorecard-week-nav button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.scorecard-page .scorecard-performance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.scorecard-page .scorecard-perf-card h3 {
    margin: 0 0 8px;
    font-size: 37px;
    color: #1f384b;
}

.scorecard-page .scorecard-perf-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.scorecard-page .scorecard-gauge {
    --scorecard-gauge-progress: 100;
    --scorecard-gauge-fill: #a6d2ef;
    width: 170px;
    height: 85px;
    border-radius: 170px 170px 0 0;
    position: relative;
    overflow: hidden;
    background: conic-gradient(
        from 180deg at 50% 100%,
        var(--scorecard-gauge-fill) 0deg calc(var(--scorecard-gauge-progress) * 1.8deg),
        #d9e5ee calc(var(--scorecard-gauge-progress) * 1.8deg) 180deg,
        transparent 180deg 360deg
    );
}

.scorecard-page .scorecard-gauge::before {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    top: 22px;
    bottom: -22px;
    border-radius: 120px 120px 0 0;
    background: #ffffff;
}

.scorecard-page .scorecard-gauge span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    font-size: 21px;
    font-weight: 700;
    color: #1a3347;
}

.scorecard-page .scorecard-gauge-navy {
    --scorecard-gauge-fill: #456f9f;
}

.scorecard-page .scorecard-gauge-teal {
    --scorecard-gauge-fill: #8ecdc4;
}

.scorecard-page .scorecard-gauge-deep {
    --scorecard-gauge-fill: #1f4262;
}

.scorecard-page .scorecard-perf-details p {
    margin: 0 0 6px;
    font-size: 12px;
    color: #325065;
}

.scorecard-page .scorecard-driver-section {
    margin-top: 12px;
}

.scorecard-page .scorecard-driver-head {
    margin-bottom: 8px;
}

.scorecard-page .scorecard-driver-head h3 {
    margin: 0 0 4px;
    font-size: 37px;
    color: #183249;
}

.scorecard-page .scorecard-driver-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--relay-border);
    background: #f5f8fa;
    padding: 6px;
    margin-bottom: 8px;
}

.scorecard-page .scorecard-driver-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: min(320px, 100%);
    border: 1px solid #c9d3db;
    background: #ffffff;
    border-radius: 2px;
    padding: 0 8px;
}

.scorecard-page .scorecard-driver-search span {
    color: #51697a;
    font-size: 14px;
}

.scorecard-page .scorecard-driver-search input {
    width: 100%;
    border: 0;
    outline: none;
    padding: 7px 0;
    font-size: 12px;
    background: transparent;
    color: #223543;
}

.scorecard-page .scorecard-driver-table-wrap {
    border: 1px solid var(--relay-border);
    background: #ffffff;
}

.scorecard-page .scorecard-driver-table th {
    background: #ffffff;
    color: #1f3a4f;
    border-bottom: 1px solid #adbcc8;
}

.scorecard-page .scorecard-driver-table td {
    color: #1f3a4b;
}

.scorecard-page .scorecard-driver-table td a,
.scorecard-page .scorecard-driver-link {
    border: 0;
    background: transparent;
    color: #2e6d9d;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
}

.scorecard-page .scorecard-driver-table td a:hover,
.scorecard-page .scorecard-driver-link:hover {
    color: #1f557c;
}

.scorecard-page .scorecard-driver-empty-row td {
    text-align: center;
    color: #5b7383;
    padding: 18px 12px;
}

.scorecard-driver-detail-modal {
    width: min(700px, 100%);
}

.scorecard-driver-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.scorecard-driver-detail-grid dt {
    color: #405a6c;
    font-size: 12px;
    font-weight: 700;
}

.scorecard-driver-detail-grid dd {
    margin: 4px 0 0;
    color: #23394c;
    font-size: 24px;
    font-weight: 400;
}

.scorecard-driver-detail-modal h4 {
    margin: 14px 0 8px;
    color: #23394c;
    font-size: 16px;
}

.scorecard-driver-issues {
    margin: 0;
    padding-left: 18px;
    color: #23394c;
}

.scorecard-driver-no-issues {
    margin: 0;
    color: #23394c;
    font-size: 20px;
}

.scorecard-page .scorecard-block {
    margin-bottom: 12px;
}

.scorecard-page .scorecard-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.scorecard-page .scorecard-section-head h2 {
    margin: 0;
    font-size: 37px;
    line-height: 1.15;
    color: #172f45;
}

.scorecard-page .scorecard-section-head h2 span {
    font-size: 12px;
    font-weight: 400;
    color: #62788a;
}

.scorecard-page .scorecard-faq-link {
    color: var(--relay-link);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}

.scorecard-page .scorecard-faq-link:hover {
    text-decoration: underline;
}

.scorecard-page .scorecard-yes-card {
    border: 1px solid var(--relay-border);
    border-radius: 2px;
    padding: 10px 12px;
    background: #fbfdfe;
}

.scorecard-page .scorecard-yes-card h3 {
    margin: 0 0 10px;
    font-size: 24px;
    color: #4e6578;
}

.scorecard-page .scorecard-yes-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    align-items: center;
}

.scorecard-page .scorecard-yes-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 48px;
    font-weight: 700;
    color: #1b3246;
}

.scorecard-page .scorecard-yes-value .status-dot,
.scorecard-page .scorecard-metric-value .status-dot,
.scorecard-page .scorecard-percent-value .status-dot {
    width: 18px;
    height: 18px;
    background: #a8d34a;
    border: 1px solid #83b52a;
}

.scorecard-page .scorecard-yes-row p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #334f63;
}

.scorecard-page .scorecard-section {
    margin-bottom: 12px;
}

.scorecard-page .scorecard-subhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.scorecard-page .scorecard-subhead h3 {
    margin: 0;
    font-size: 22px;
    color: #1d364a;
}

.scorecard-page .scorecard-violation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.scorecard-page .scorecard-metric-card h4 {
    margin: 0 0 10px;
    font-size: 32px;
    color: #556d7d;
}

.scorecard-page .scorecard-metric-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
}

.scorecard-page .scorecard-metric-main {
    border-right: 1px solid var(--relay-border);
    padding-right: 12px;
}

.scorecard-page .scorecard-metric-value {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 50px;
    font-weight: 700;
    color: #152f44;
    margin: 8px 0 10px;
}

.scorecard-page .scorecard-scale {
    height: 9px;
    background: #d7dbe0;
    border-radius: 999px;
    overflow: hidden;
}

.scorecard-page .scorecard-scale > span {
    display: block;
    height: 100%;
    background: #73b2e1;
}

.scorecard-page .scorecard-scale-labels {
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #1d3549;
    font-weight: 600;
}

.scorecard-page .scorecard-impact-list {
    display: grid;
    gap: 8px;
}

.scorecard-page .scorecard-impact-row {
    border-left: 4px solid #4f78ba;
    padding-left: 8px;
    font-size: 12px;
    color: #294458;
}

.scorecard-page .scorecard-impact-row strong {
    display: block;
    font-size: 31px;
    color: #1b3448;
    margin-bottom: 3px;
}

.scorecard-page .scorecard-total {
    margin: 8px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #1f3a50;
}

.scorecard-page .scorecard-percentile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.scorecard-page .scorecard-percentile-card h4 {
    margin: 0 0 8px;
    font-size: 31px;
    color: #596f80;
}

.scorecard-page .scorecard-percent-value {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 45px;
    font-weight: 700;
    color: #182f44;
    margin-bottom: 10px;
}

.scorecard-page .scorecard-threshold {
    position: relative;
    height: 14px;
    margin-top: 8px;
}

.scorecard-page .scorecard-threshold::before {
    content: '';
    position: absolute;
    inset: 6px 0 0;
    height: 8px;
    background: #7f858b;
    border-radius: 999px;
}

.scorecard-page .scorecard-threshold span {
    position: absolute;
    top: -1px;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    color: #1e374a;
}

.scorecard-page .scorecard-threshold span::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    width: 2px;
    height: 14px;
    transform: translateX(-50%);
    background: #394a58;
}

@media (max-width: 1200px) {
    .scorecard-page .scorecard-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .scorecard-page .scorecard-filter-row {
        grid-template-columns: 1fr 1fr;
    }

    .scorecard-page .scorecard-performance-grid {
        grid-template-columns: 1fr;
    }

    .scorecard-page .scorecard-violation-grid,
    .scorecard-page .scorecard-percentile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .scorecard-page .scorecard-notice-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .scorecard-page .scorecard-summary-grid,
    .scorecard-page .scorecard-filter-row {
        grid-template-columns: 1fr;
    }

    .scorecard-page .scorecard-perf-layout {
        grid-template-columns: 1fr;
    }

    .scorecard-page .scorecard-driver-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .scorecard-page .scorecard-driver-search {
        width: 100%;
    }

    .scorecard-page .scorecard-yes-row {
        grid-template-columns: 1fr;
    }

    .scorecard-page .scorecard-metric-layout {
        grid-template-columns: 1fr;
    }

    .scorecard-page .scorecard-metric-main {
        border-right: 0;
        padding-right: 0;
    }
}

.company-profile-page .page-shell {
    display: flex;
    justify-content: center;
}

.company-profile-page .company-profile-card {
    width: 100%;
    max-width: 980px;
}

.company-profile-page .company-profile-pane {
    min-height: 300px;
}

.company-profile-page .company-section-title {
    margin: 0 0 10px;
    font-size: 14px;
    color: #1e3342;
}

.company-profile-page .company-pane-grid {
    margin-bottom: 10px;
}

.company-profile-page .company-field-span-2 {
    grid-column: span 2;
}

.company-profile-page .company-pane-note {
    margin: 0 0 12px;
    font-size: 12px;
    color: #2b4354;
}

.company-profile-page .company-equipment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px 16px;
    align-items: center;
    margin-bottom: 10px;
}

.company-profile-page .company-equipment-head {
    border-bottom: 1px solid var(--relay-border);
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-weight: 600;
    color: #1e3342;
    font-size: 12px;
}

.company-profile-page .company-equipment-grid label {
    font-size: 12px;
    color: #2b4354;
}

.company-profile-page .company-equipment-grid input {
    width: 100%;
    border: 1px solid #b9c5cf;
    border-radius: 2px;
    font-size: 12px;
    padding: 7px 9px;
    color: #1a2f3f;
    font-family: inherit;
}

.company-profile-page .company-table-wrap {
    border: 1px solid var(--relay-border);
    border-radius: 2px;
    overflow: hidden;
}

.company-profile-page .company-domiciles-table th,
.company-profile-page .company-domiciles-table td {
    padding: 10px 14px;
}

.company-profile-page .company-domiciles-table th {
    background: #ffffff;
}

.company-profile-page .company-cert-list {
    display: grid;
    gap: 10px;
}

.company-profile-page .company-cert-item {
    border: 1px solid var(--relay-border);
    border-radius: 2px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.company-profile-page .company-cert-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.company-profile-page .company-chevron {
    font-size: 18px;
    color: #3f6788;
}

.company-profile-page .company-cert-item h4 {
    margin: 0 0 6px;
    font-size: 16px;
    color: #1a2f3f;
}

.company-profile-page .company-cert-item p {
    margin: 0;
    color: #385064;
    font-size: 12px;
}

.company-profile-page .company-cert-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2b4354;
    font-size: 12px;
    white-space: nowrap;
}

.company-profile-page .company-verification-head {
    border: 1px solid var(--relay-border);
    border-radius: 2px;
    padding: 13px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.company-profile-page .company-verification-head h3 {
    margin: 0;
    font-size: 16px;
    color: #1a2f3f;
}

.company-profile-page .company-chip-muted::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #aeb7c0;
    margin-right: 6px;
}

.company-profile-page .company-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid #c3cbd3;
    background: #f5f7f9;
    color: #53697a;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
}

.company-profile-page .company-verify-intro {
    margin: 0 0 12px;
    color: #2d4557;
    font-size: 12px;
    line-height: 1.45;
}

.company-profile-page .company-verify-intro a,
.company-profile-page .company-learning-section a,
.company-profile-page .company-links-section a {
    color: #2d5f92;
    text-decoration: none;
}

.company-profile-page .company-verify-intro a:hover,
.company-profile-page .company-learning-section a:hover,
.company-profile-page .company-links-section a:hover {
    text-decoration: underline;
}

.company-profile-page .company-ownership-card {
    border: 1px solid var(--relay-border);
    border-radius: 2px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.company-profile-page .company-ownership-card h4 {
    margin: 0 0 8px;
    font-size: 16px;
    color: #1b3344;
}

.company-profile-page .company-ownership-card p {
    margin: 0 0 12px;
    color: #324b5d;
    font-size: 12px;
    line-height: 1.45;
}

.company-profile-page .company-learning-section {
    border-top: 1px solid var(--relay-border);
    padding-top: 14px;
    margin-bottom: 10px;
}

.company-profile-page .company-learning-section h4,
.company-profile-page .company-links-section h4 {
    margin: 0 0 8px;
    font-size: 16px;
    color: #1b3445;
}

.company-profile-page .company-learning-section p {
    margin: 0;
    font-size: 12px;
}

.company-profile-page .company-links-section ul {
    margin: 0;
    padding-left: 18px;
    color: #2c4355;
}

.company-profile-page .company-links-section li {
    margin-bottom: 6px;
    font-size: 12px;
}

@media (max-width: 900px) {
    .company-profile-page .company-equipment-grid {
        grid-template-columns: 1fr 1fr;
    }

    .company-profile-page .company-field-span-2 {
        grid-column: span 1;
    }

    .company-profile-page .company-cert-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .company-profile-page .company-verification-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

.support-center-page .support-shell {
    padding-top: 0;
}

.support-center-page .support-tabs {
    display: flex;
    align-items: flex-end;
    gap: 0;
    border-bottom: 1px solid #3f6172;
    margin: 0 -16px 0;
    padding: 0 16px;
    background: #103b4a;
}

.support-center-page .support-tab {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 14px;
    cursor: pointer;
}

.support-center-page .support-tab.active {
    background: #ffffff;
    color: #163549;
    border-bottom-color: #ffffff;
}

.support-center-page .support-pane {
    background: transparent;
    padding-top: 10px;
}

.support-center-page .support-title {
    margin: 0 0 10px;
    font-size: 22px;
    color: #1e3446;
}

.support-center-page .support-help-search {
    margin-bottom: 10px;
}

.support-center-page .support-help-actions {
    margin-bottom: 16px;
}

.support-center-page .support-help-actions h3 {
    margin: 0 0 6px;
    font-size: 14px;
}

.support-center-page .support-faq-title {
    margin-bottom: 8px;
}

.support-center-page .support-faq-tabs {
    margin-bottom: 0;
}

.support-center-page .support-faq-link {
    padding: 10px 8px;
    font-size: 12px;
}

.support-center-page .support-learning-layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.support-center-page .support-learning-summary .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.support-center-page .support-learning-badge {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #cfe8f8;
    color: #2d6691;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}

.support-center-page .support-learning-score {
    font-size: 30px;
    color: #1a3042;
}

.support-center-page .support-learning-score strong {
    font-size: 50px;
}

.support-center-page .support-learning-link {
    color: #2d618f;
    text-decoration: none;
    font-size: 12px;
}

.support-center-page .support-learning-link:hover {
    text-decoration: underline;
}

.support-center-page .support-learning-assigned {
    width: 100%;
    background: #eef2f5;
    border-radius: 2px;
    text-align: left;
    padding: 9px 10px;
    font-size: 12px;
    color: #20384a;
}

.support-center-page .support-learning-assigned h2,
.support-center-page .support-learning-courses h2,
.support-center-page .support-closed-title {
    margin: 0 0 10px;
    font-size: 17px;
    color: #203648;
}

.support-center-page .support-assigned-item {
    border: 1px solid var(--relay-border);
    border-radius: 2px;
    padding: 8px;
    display: grid;
    grid-template-columns: 86px 1fr auto;
    gap: 12px;
    align-items: start;
}

.support-center-page .support-assigned-item img {
    width: 86px;
    height: 56px;
    object-fit: cover;
}

.support-center-page .support-assigned-copy h3 {
    margin: 0 0 3px;
    font-size: 15px;
}

.support-center-page .support-assigned-copy p {
    margin: 0 0 6px;
    font-size: 12px;
    color: #2f495c;
}

.support-center-page .support-course-cats {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    margin-bottom: 10px;
}

.support-center-page .support-chip {
    border: 1px solid #d4dce3;
    background: #f2f6f9;
    color: #31495b;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
}

.support-center-page .support-chip.active {
    border-color: #3f7099;
    background: #2f6d9c;
    color: #ffffff;
}

.support-center-page .support-course-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.support-center-page .support-course-card {
    border: 1px solid var(--relay-border);
    background: #ffffff;
}

.support-center-page .support-course-media {
    height: 122px;
    background-size: cover;
    background-position: center;
}

.support-center-page .support-course-media.media-one { background-image: linear-gradient(120deg, #344e6a, #8ca8c4); }
.support-center-page .support-course-media.media-two { background-image: linear-gradient(120deg, #1b3552, #3f79b6); }
.support-center-page .support-course-media.media-three { background-image: linear-gradient(120deg, #3c4044, #8b929b); }
.support-center-page .support-course-media.media-four { background-image: linear-gradient(120deg, #2b3d6b, #4f68c4); }
.support-center-page .support-course-media.media-five { background-image: linear-gradient(120deg, #4f74ce, #932deb); }
.support-center-page .support-course-media.media-six { background-image: linear-gradient(120deg, #2f4e6a, #74879a); }
.support-center-page .support-course-media.media-seven { background-image: linear-gradient(120deg, #1f2d49, #3f5f95); }
.support-center-page .support-course-media.media-eight { background-image: linear-gradient(120deg, #2f3e73, #4c6ad6); }
.support-center-page .support-course-media.media-nine { background-image: linear-gradient(120deg, #1d3353, #2a4a88); }
.support-center-page .support-course-media.media-ten { background-image: linear-gradient(120deg, #5c6f7f, #92a5b6); }

.support-center-page .support-course-body {
    padding: 10px;
}

.support-center-page .support-course-body h3 {
    margin: 0 0 6px;
    font-size: 16px;
    min-height: 44px;
    color: #1c3448;
}

.support-center-page .support-course-body p {
    margin: 0 0 10px;
    font-size: 12px;
    color: #3a5365;
}

.support-center-page .support-course-body .btn {
    border-color: #83a8c5;
    color: #2e618d;
    background: #ffffff;
}

.support-center-page .support-pagination {
    margin: 10px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.support-center-page .support-pagination button {
    border: 0;
    background: transparent;
    color: #3a5f7d;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 5px;
}

.support-center-page .support-pagination button.active {
    border-bottom: 2px solid #2b6a9a;
    font-weight: 700;
}

.support-center-page .support-cases-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 10px;
}

.support-center-page .support-cases-toolbar input {
    width: 140px;
    border: 1px solid #7f8f9a;
    background: #ffffff;
    border-radius: 0;
    padding: 7px 9px;
    font-size: 12px;
    color: #2c4354;
}

.support-center-page .support-cases-toolbar .btn {
    border-radius: 0;
    min-width: 74px;
    background: #c8d0d5;
    border-color: #b6c0c7;
    color: #36566f;
}

.support-center-page .support-cases-toolbar .btn-primary {
    background: #16445b;
    border-color: #16445b;
    color: #ffffff;
}

.support-center-page .support-empty {
    margin: 62px 0 0;
    text-align: center;
    color: #556f80;
    font-size: 16px;
}

.support-center-page .support-closed-table th:first-child,
.support-center-page .support-closed-table td:first-child {
    width: 180px;
    white-space: nowrap;
}

.support-center-page .support-closed-table th:nth-child(3),
.support-center-page .support-closed-table td:nth-child(3),
.support-center-page .support-closed-table th:nth-child(4),
.support-center-page .support-closed-table td:nth-child(4) {
    width: 90px;
    white-space: nowrap;
    text-align: right;
}

.support-center-page .support-closed-footer {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.support-center-page .support-closed-footer a {
    color: #2d5f92;
    text-decoration: none;
}

.support-center-page .support-closed-footer a:hover {
    text-decoration: underline;
}

.support-center-page .support-closed-footer button {
    border: 0;
    background: transparent;
    color: #3b6280;
    cursor: pointer;
    font-size: 12px;
}

.support-center-page .support-open-table tbody tr {
    cursor: pointer;
}

.support-center-page .support-open-table tbody tr:hover {
    background: #eef7fa;
}

.support-case-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 96px 18px 24px;
    background: rgba(0, 0, 0, 0.46);
}

.support-case-overlay.is-open {
    display: flex;
}

.support-case-dialog {
    width: min(540px, 100%);
    max-height: calc(100vh - 120px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
    color: #0e2735;
}

.support-case-create-dialog {
    width: min(430px, 100%);
}

.support-case-head {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    background: #ffffff;
    border-bottom: 1px solid #e1e7ed;
    color: #0a3c4d;
    font-size: 15px;
}

.support-case-head button {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #5b6f7c;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.support-case-body,
.support-case-form {
    overflow-y: auto;
    padding: 16px;
}

.support-case-form {
    display: grid;
    gap: 10px;
}

.support-case-form p {
    margin: 0 0 2px;
    color: #1d3948;
    font-size: 12px;
    line-height: 1.35;
}

.support-case-form label {
    display: grid;
    gap: 5px;
    color: #17313f;
    font-size: 12px;
    font-weight: 700;
}

.support-case-form select,
.support-case-form textarea,
.support-case-form input[type="tel"],
.support-case-form input[type="text"],
.support-case-form input[type="file"] {
    width: 100%;
    border: 1px solid #9ba9b2;
    border-radius: 0;
    background: #ffffff;
    color: #102533;
    font-size: 12px;
    padding: 7px 8px;
}

.support-case-form textarea {
    min-height: 116px;
    resize: vertical;
}

.support-case-form .is-invalid {
    border-color: #d92d20;
    box-shadow: 0 0 0 1px rgba(217, 45, 32, 0.16);
}

.support-case-selected-files,
.support-case-muted {
    color: #5e7280;
    font-size: 12px;
}

.support-case-form-alert {
    min-height: 16px;
    color: #b42318;
    font-size: 12px;
    font-weight: 700;
}

.support-case-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #e2e8ed;
}

.support-case-actions button {
    min-height: 34px;
    border: 0;
    background: transparent;
    color: #006783;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.support-case-actions button[type="submit"] {
    background: #8ba1aa;
    color: #ffffff;
}

.support-case-actions button[type="submit"]:not(:disabled) {
    background: #16445b;
}

.support-case-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.support-case-actions.support-case-actions-cancel-only {
    justify-content: flex-end;
    border-top: 0;
    padding-top: 4px;
}

.support-case-trip-redirect {
    display: grid;
    gap: 10px;
}

.support-case-trip-redirect[hidden] {
    display: none;
}

.support-case-trip-redirect p {
    color: #102533;
    font-size: 12px;
    line-height: 1.45;
}

.support-case-trip-redirect button {
    justify-self: start;
    border: 1px solid #8fa1ab;
    background: #ffffff;
    color: #102533;
    min-height: 28px;
    padding: 0 8px;
    font-size: 12px;
    cursor: pointer;
}

.support-case-trip-preview {
    width: 288px;
    max-width: 100%;
    min-height: 134px;
    border-radius: 4px;
    background: #f1f3f4;
    display: flex;
    align-items: center;
    padding: 18px 22px;
}

.support-case-trip-preview-card {
    width: 258px;
    height: 104px;
    border-radius: 3px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(20, 45, 60, 0.16);
    padding: 12px;
}

.support-case-trip-preview-dots {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}

.support-case-trip-preview-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d4d9dd;
}

.support-case-trip-preview-dots span:first-child {
    background: #aab2b8;
}

.support-case-trip-preview-line {
    height: 18px;
    margin-bottom: 6px;
    background: #f0f2f3;
}

.support-case-trip-preview-action {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    color: #0781a1;
    font-size: 12px;
}

.support-case-trip-preview-action strong {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 10px;
    background: #dce6e9;
    color: #365462;
    font-size: 9px;
}

.support-case-status-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.support-case-status-line span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    background: #dff3f7;
    color: #006783;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
}

.support-case-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin: 0 0 16px;
}

.support-case-detail-grid div {
    display: grid;
    gap: 3px;
}

.support-case-detail-grid dt {
    color: #607683;
    font-size: 11px;
    font-weight: 700;
}

.support-case-detail-grid dd {
    margin: 0;
    color: #102533;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.support-case-section {
    border-top: 1px solid #e2e8ed;
    padding-top: 12px;
    margin-top: 12px;
}

.support-case-section h3 {
    margin: 0 0 6px;
    color: #102533;
    font-size: 13px;
}

.support-case-section p {
    margin: 0;
    color: #1e3b4a;
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
}

.support-case-attachments {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.support-case-attachments li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #d8e1e7;
    padding: 7px 8px;
    font-size: 12px;
}

.support-case-attachments a {
    color: #006783;
    font-weight: 700;
}

.support-case-attachments button {
    border: 0;
    background: transparent;
    color: #006783;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 0;
}

.support-case-attachments small {
    color: #6a7e8a;
    white-space: nowrap;
}

.support-case-attachments .support-case-attachment-status {
    color: #b45309;
}

@media (max-width: 1400px) {
    .support-center-page .support-course-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .support-center-page .support-learning-layout {
        grid-template-columns: 1fr;
    }

    .support-center-page .support-course-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .support-center-page .support-tabs {
        overflow-x: auto;
        white-space: nowrap;
    }

    .support-center-page .support-course-grid {
        grid-template-columns: 1fr;
    }

    .support-center-page .support-assigned-item {
        grid-template-columns: 1fr;
    }

    .support-center-page .support-cases-toolbar {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .support-case-overlay {
        padding: 72px 10px 16px;
    }

    .support-case-detail-grid {
        grid-template-columns: 1fr;
    }
}

.user-profile-page .page-shell {
    display: flex;
    justify-content: center;
}

.user-profile-page .user-profile-card {
    width: 100%;
    max-width: 980px;
}

.user-profile-page .profile-pane {
    min-height: 300px;
}

.user-profile-page .profile-title {
    margin: 16px 0 12px;
    font-size: 16px;
    color: #1a3144;
}

.user-profile-page .profile-notification-list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    max-width: 520px;
}

.user-profile-page .profile-notification-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid transparent;
    color: #223a4d;
    font-size: 14px;
}

.user-profile-page .profile-chevron {
    color: #1e3345;
    font-size: 18px;
    line-height: 1;
}

.user-profile-page .profile-reset-row {
    margin-bottom: 8px;
}

.user-profile-page .profile-reset-btn {
    border-color: #7fa0ba;
    color: #315f86;
    background: #f8fbfd;
}

.user-profile-page .profile-note {
    margin: 0;
}

.user-profile-page .profile-role-heading {
    margin: 0 0 4px;
    font-size: 20px;
    color: #203547;
    font-weight: 700;
}

.user-profile-page .profile-role-field {
    max-width: 460px;
    margin: 10px 0;
}

.user-profile-page .profile-role-options {
    margin: 14px 0 16px;
    display: grid;
    gap: 12px;
}

.user-profile-page .profile-role-options label {
    display: block;
    font-size: 12px;
    color: #253f52;
}

.user-profile-page .profile-role-options input {
    margin-right: 6px;
}

.user-profile-page .profile-role-options strong {
    font-size: 16px;
    color: #203547;
}

.user-profile-page .profile-role-options span {
    display: block;
    margin-left: 20px;
    margin-top: 4px;
    color: #385165;
}

.user-profile-page .profile-notes-field {
    max-width: 460px;
    margin-bottom: 16px;
}

.user-profile-page .profile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-profile-page .profile-actions .btn-primary {
    background: #c6dfec;
    border-color: #c6dfec;
    color: #6f8c9e;
}

.user-profile-page .profile-actions .btn {
    min-width: 74px;
}

.user-profile-page .profile-permissions-empty {
    margin: 12px 0 22px;
    font-size: 14px;
    color: #2d4658;
}

@media (max-width: 900px) {
    .user-profile-page .profile-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 760px) {
    .trips-page .trip-advanced-state {
        padding: 16px 12px 24px;
    }

    .trips-page .trip-advanced-row,
    .trips-page .trip-advanced-row-two,
    .trips-page .trip-advanced-date-grid,
    .trips-page .trip-advanced-actions {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .trips-page .trip-advanced-start-date,
    .trips-page .trip-advanced-start-time,
    .trips-page .trip-advanced-end-date,
    .trips-page .trip-advanced-end-time,
    .trips-page .trip-advanced-timezone {
        grid-column: auto;
        grid-row: auto;
    }
}

footer a.academy-bug-report-link {
    color: #8ee9ff;
    font-weight: 600;
}

footer a.academy-bug-report-link:hover {
    color: #ffffff;
}

.academy-bug-report-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(9, 20, 31, 0.58);
}

.academy-bug-report-overlay.open {
    display: flex;
}

body.bug-report-modal-open {
    overflow: hidden;
}

.academy-bug-report-modal {
    width: min(520px, 100%);
    background: #ffffff;
    border: 1px solid #b8c8d3;
    border-radius: 6px;
    box-shadow: 0 24px 72px rgba(4, 14, 24, 0.34);
    color: #223746;
}

.academy-bug-report-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #dbe5ec;
}

.academy-bug-report-head h3 {
    margin: 0 0 6px;
    font-size: 22px;
    color: #123344;
}

.academy-bug-report-head p,
.academy-bug-report-rules,
.academy-bug-report-meta {
    margin: 0;
    color: #5f7483;
    font-size: 13px;
    line-height: 1.45;
}

.academy-bug-report-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #eef5f8;
    color: #29485a;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.academy-bug-report-close:hover,
.academy-bug-report-close:focus {
    background: #dcecf3;
    outline: 2px solid rgba(13, 140, 171, 0.28);
}

.academy-bug-report-form {
    display: grid;
    gap: 12px;
    padding: 18px 20px 20px;
}

.academy-bug-report-field {
    display: grid;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #29485a;
}

.academy-bug-report-field textarea,
.academy-bug-report-field input[type="file"] {
    width: 100%;
    border: 1px solid #b8c8d3;
    border-radius: 4px;
    background: #ffffff;
    color: #1f3444;
    font: inherit;
}

.academy-bug-report-field textarea {
    min-height: 144px;
    padding: 10px;
    resize: vertical;
}

.academy-bug-report-field input[type="file"] {
    padding: 9px;
}

.academy-bug-report-field textarea:focus,
.academy-bug-report-field input[type="file"]:focus {
    border-color: #0b8fb2;
    outline: 2px solid rgba(11, 143, 178, 0.16);
}

.academy-bug-report-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: -6px;
}

.academy-bug-report-alert {
    margin: 0;
    padding: 10px 12px;
    border-radius: 4px;
    background: #eef6f8;
    color: #234557;
    font-size: 13px;
    line-height: 1.4;
}

.academy-bug-report-alert[data-state="error"] {
    background: #fff1f1;
    color: #8b1d1d;
}

.academy-bug-report-alert[data-state="success"] {
    background: #edf9f0;
    color: #1f6a36;
}

.academy-bug-report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.academy-bug-report-actions .btn {
    min-width: 86px;
}

@media (max-width: 560px) {
    .academy-bug-report-overlay {
        align-items: flex-start;
        padding: 12px;
        overflow-y: auto;
    }

    .academy-bug-report-head,
    .academy-bug-report-form {
        padding-left: 14px;
        padding-right: 14px;
    }

    .academy-bug-report-actions {
        flex-direction: column-reverse;
    }

    .academy-bug-report-actions .btn {
        width: 100%;
    }
}