/* ==========================================================
   MARKER NORTH - TRIPS PAGE
   ========================================================== */

.trips-main {
    flex: 1;
    min-width: 0;
    padding: 28px 24px 42px;
    background: var(--page-bg);
}

/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

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

/* ==========================================================
   PAGE HEADER
   ========================================================== */

.trips-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

    .trips-page-header h1 {
        margin: 0;
        color: var(--text);
        font-size: 34px;
        font-weight: 700;
        line-height: 1;
    }

    .trips-page-header p {
        margin: 10px 0 0;
        color: var(--muted);
        font-size: 16px;
        font-style: italic;
    }

.trips-export-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    background: linear-gradient( 135deg, #ffbd19, #e89b00 );
    border: 1px solid #ffbd19;
    border-radius: 8px;
    color: #101010;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255,189,25,.14);
    transition: transform .2s ease, filter .2s ease;
}

.trips-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.trips-import-button,
.trucksbook-import-confirm {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid rgba(70, 183, 255, .52);
    border-radius: 8px;
    background: rgba(20, 103, 163, .18);
    color: #d4edff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.trucksbook-import-confirm[hidden] {
    display: none;
}

    .trips-import-button:hover,
    .trucksbook-import-confirm:hover {
        border-color: #67c9ff;
        background: rgba(27, 135, 204, .30);
    }

    .trips-export-button:not(:disabled):hover {
        transform: translateY(-1px);
        filter: brightness(1.06);
    }

    .trips-export-button:disabled {
        background: #475569;
        border-color: #64748b;
        color: #d7e1ea;
        cursor: not-allowed;
        box-shadow: none;
        opacity: .78;
    }

.trucksbook-import-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin: -8px 0 16px;
    padding: 16px 18px;
    border: 1px solid rgba(77, 182, 255, .36);
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(9, 46, 75, .72), rgba(7, 27, 43, .84));
}

    .trucksbook-import-panel span {
        display: block;
        color: #67c9ff;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .12em;
    }

    .trucksbook-import-panel strong {
        display: block;
        margin-top: 4px;
        color: var(--text);
        font-size: 16px;
    }

    .trucksbook-import-panel p {
        max-width: 740px;
        margin: 6px 0 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.5;
    }

.trip-classification.imported-history {
    color: #76d5ff;
    border: 1px solid rgba(92, 199, 255, .35);
    background: rgba(36, 144, 203, .13);
}

/* ==========================================================
   SUMMARY CARDS
   ========================================================== */

.trips-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.trip-summary-card {
    min-width: 0;
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    transition: transform .2s ease, border-color .2s ease;
}

    .trip-summary-card:hover {
        transform: translateY(-2px);
        border-color: rgba(59,141,240,.55);
    }

.trip-summary-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
    font-size: 22px;
}

    .trip-summary-icon.trips {
        background: rgba(59,141,240,.18);
        color: #62aaff;
    }

    .trip-summary-icon.miles {
        background: rgba(85,204,99,.17);
        color: #62da70;
    }

    .trip-summary-icon.revenue {
        background: rgba(166,93,247,.18);
        color: #bc83ff;
    }

    .trip-summary-icon.fuel {
        background: rgba(59,141,240,.18);
        color: #62aaff;
    }

.trip-summary-card > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.trip-summary-card span {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.trip-summary-card strong {
    margin-top: 5px;
    color: var(--text);
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
}

    .trip-summary-card strong small {
        color: var(--muted);
        font-size: 15px;
        font-weight: 500;
    }

.trip-summary-card > div:last-child > small {
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
}

/* ==========================================================
   MAIN TRIPS LAYOUT
   ========================================================== */

.trips-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: start;
    gap: 16px;
}

.trips-history-panel {
    min-width: 0;
}

/* ==========================================================
   FILTERS
   ========================================================== */

.trips-filters {
    display: grid;
    grid-template-columns: minmax(270px, 1.7fr) minmax(160px, .85fr) minmax(140px, .7fr) minmax(140px, .7fr) minmax(150px, .8fr) minmax(140px, .7fr);
    gap: 9px;
    padding: 10px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 13px;
}

.trips-search,
.trip-filter-control {
    position: relative;
    min-width: 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    background: rgba(4,13,23,.85);
    border: 1px solid #293d50;
    border-radius: 8px;
    color: var(--muted);
}

    .trips-search:focus-within,
    .trip-filter-control:focus-within {
        border-color: rgba(255,189,25,.55);
        box-shadow: 0 0 0 2px rgba(255,189,25,.08);
    }

    .trips-search > i,
    .trip-filter-control > i {
        position: absolute;
        left: 13px;
        z-index: 1;
        color: #b3c0cb;
        font-size: 13px;
        pointer-events: none;
    }

    .trips-search input,
    .trip-filter-control select {
        width: 100%;
        min-width: 0;
        height: 40px;
        padding: 0 12px 0 38px;
        background: transparent;
        border: 0;
        outline: 0;
        color: var(--text);
        font-family: inherit;
        font-size: 13px;
    }

        .trips-search input::placeholder {
            color: #8f9eab;
        }

    .trip-filter-control select {
        padding-right: 28px;
        cursor: pointer;
    }

        .trip-filter-control select option {
            background: #081421;
            color: var(--text);
        }

/* ==========================================================
   TRIP HISTORY LIST
   ========================================================== */

.trips-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 9px;
}

.trip-history-card {
    min-width: 0;
    min-height: 126px;
    display: grid;
    grid-template-columns: 180px minmax(210px, 1fr) minmax(142px, 154px) minmax(310px, .95fr) 80px 18px;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 10px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 13px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

    .trip-history-card:hover {
        transform: translateY(-2px);
        border-color: rgba(59,141,240,.55);
        box-shadow: 0 12px 28px rgba(0,0,0,.22);
    }

/* ==========================================================
   ROUTE THUMBNAIL
   ========================================================== */

.trip-route-thumbnail {
    position: relative;
    width: 180px;
    height: 104px;
    overflow: hidden;
    background: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ), radial-gradient( circle at 25% 70%, rgba(59,141,240,.10), transparent 35% ), #0a1725;
    background-size: 20px 20px, 20px 20px, auto, auto;
    border: 1px solid #24394c;
    border-radius: 9px;
}

    .trip-route-thumbnail::before,
    .trip-route-thumbnail::after {
        position: absolute;
        background: rgba(112,137,158,.18);
        content: "";
        pointer-events: none;
    }

    .trip-route-thumbnail::before {
        width: 150%;
        height: 1px;
        left: -25%;
        top: 54%;
        transform: rotate(-17deg);
    }

    .trip-route-thumbnail::after {
        width: 1px;
        height: 160%;
        left: 61%;
        top: -30%;
        transform: rotate(24deg);
    }

    .trip-route-thumbnail svg {
        position: absolute;
        z-index: 2;
        inset: 0;
        width: 100%;
        height: 100%;
    }

.trip-route-path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(255,189,25,.25));
}

.trip-route-start {
    fill: var(--green);
    stroke: #d9ffe0;
    stroke-width: 2;
}

.trip-route-end {
    fill: #f4f6f8;
    stroke: #121a22;
    stroke-width: 3;
}

.trip-map-label {
    position: absolute;
    z-index: 1;
    color: rgba(208,219,228,.48);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .trip-map-label.label-one {
        left: 12px;
        top: 12px;
    }

    .trip-map-label.label-two {
        right: 10px;
        bottom: 10px;
    }

/* ==========================================================
   PRIMARY TRIP INFORMATION
   ========================================================== */

.trip-primary-information {
    min-width: 0;
}

    .trip-primary-information h2 {
        margin: 0 0 12px;
        overflow: hidden;
        color: var(--text);
        font-size: 16px;
        font-weight: 650;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .trip-primary-information h2 i {
            margin: 0 7px;
            color: var(--accent);
            font-size: 11px;
        }

.trip-detail-line {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 7px;
    color: #b8c5d0;
    font-size: 12px;
}

    .trip-detail-line i {
        width: 15px;
        flex-shrink: 0;
        color: #7f96aa;
        text-align: center;
    }

    .trip-detail-line span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ==========================================================
   COMPLETION DATE
   ========================================================== */

.trip-completion-date {
    min-width: 142px;
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 4px 7px;
    color: #c5d0da;
    font-size: 12px;
}

    .trip-completion-date i {
        grid-row: 1 / span 2;
        margin-top: 2px;
        color: #8fa5b8;
    }

    .trip-completion-date span,
    .trip-completion-date small {
        white-space: nowrap;
    }

    .trip-completion-date small {
        color: var(--muted);
        font-size: 11px;
    }

/* ==========================================================
   TRIP RESULTS
   ========================================================== */

.trip-result-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

    .trip-result-grid > div {
        min-width: 0;
        padding: 0 10px;
        border-left: 1px solid rgba(255,255,255,.09);
    }

    .trip-result-grid dt {
        overflow: hidden;
        color: var(--muted);
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .trip-result-grid dd {
        margin: 8px 0 0;
        overflow: hidden;
        color: var(--text);
        font-size: 14px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ==========================================================
   STATUS AND GRADE
   ========================================================== */

.trip-card-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
}

.trip-status {
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}

    .trip-status.delivered {
        background: rgba(85,204,99,.10);
        border: 1px solid rgba(85,204,99,.22);
        color: #5ee06d;
    }

    .trip-status.cancelled {
        background: rgba(235,91,91,.10);
        border: 1px solid rgba(235,91,91,.24);
        color: #ff8d8d;
    }

    .trip-status.in-progress {
        background: rgba(255,189,25,.10);
        border: 1px solid rgba(255,189,25,.24);
        color: #ffd56a;
    }

.trip-details-pending {
    cursor: default;
    opacity: .45;
    pointer-events: none;
}

.trips-empty-state {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px;
    background: var(--panel-bg);
    border: 1px dashed #30485e;
    border-radius: 13px;
    color: var(--muted);
    text-align: center;
}

    .trips-empty-state i {
        color: var(--accent);
        font-size: 24px;
    }

    .trips-empty-state strong {
        color: var(--text);
        font-size: 14px;
    }

    .trips-empty-state span {
        max-width: 310px;
        font-size: 12px;
        line-height: 1.5;
    }

.trip-classification {
    padding: 4px 7px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

    .trip-classification.race-miles {
        color: #ffbd52;
        background: rgba(255, 150, 32, .12);
        border: 1px solid rgba(255, 150, 32, .36);
    }

.trip-grade {
    width: 48px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,19,29,.90);
    clip-path: polygon( 50% 0, 90% 23%, 90% 73%, 50% 100%, 10% 73%, 10% 23% );
    font-size: 16px;
    font-weight: 700;
}

    .trip-grade.excellent,
    .trip-grade.good {
        color: #61df77;
        outline: 1px solid #55cc63;
    }

    .trip-grade.average {
        color: var(--accent);
    }

.trip-details-link {
    color: #b9c5d0;
    font-size: 15px;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.trip-details-unavailable {
    color: #7891a5;
    cursor: help;
    font-size: 14px;
}

    .trip-details-link:hover {
        color: var(--accent);
        transform: translateX(2px);
    }

/* ==========================================================
   TRIP LIST FOOTER
   ========================================================== */

.trips-list-footer {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--muted);
    font-size: 12px;
}

.trips-pagination {
    display: flex;
    align-items: center;
    gap: 7px;
}

    .trips-pagination button {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--panel-bg);
        border: 1px solid var(--panel-border);
        border-radius: 7px;
        color: var(--muted);
        font-family: inherit;
        cursor: pointer;
    }

        .trips-pagination button:hover:not(:disabled),
        .trips-pagination button.active {
            border-color: rgba(255,189,25,.65);
            color: var(--accent);
        }

        .trips-pagination button:disabled {
            cursor: not-allowed;
            opacity: .45;
        }

/* ==========================================================
   TRIP HIGHLIGHTS
   ========================================================== */

.trip-highlights-panel {
    min-width: 0;
    padding: 14px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 13px;
}

    .trip-highlights-panel > h2 {
        margin: 2px 2px 14px;
        color: var(--text);
        font-size: 16px;
        font-weight: 700;
    }

.trip-highlight-card {
    padding: 15px;
    background: rgba(7,20,32,.82);
    border: 1px solid #263c50;
    border-radius: 10px;
}

    .trip-highlight-card + .trip-highlight-card {
        margin-top: 10px;
    }

.trip-highlight-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

    .trip-highlight-heading strong {
        color: var(--text);
        font-size: 13px;
    }

.trip-highlight-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
}

    .trip-highlight-icon.personal-best {
        background: rgba(59,141,240,.18);
        color: #62aaff;
    }

    .trip-highlight-icon.clean {
        background: rgba(85,204,99,.17);
        color: #62da70;
    }

    .trip-highlight-icon.longest {
        background: rgba(166,93,247,.18);
        color: #bc83ff;
    }

    .trip-highlight-icon.achievement {
        background: rgba(255,189,25,.16);
        color: var(--accent);
    }

.trip-highlight-card > span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.trip-highlight-value {
    margin-top: 8px;
    color: var(--text);
    font-size: 26px;
    font-weight: 700;
}

    .trip-highlight-value small {
        color: var(--muted);
        font-size: 13px;
        font-weight: 500;
    }

.trip-highlight-card p {
    margin: 12px 0 0;
    color: #bcc8d2;
    font-size: 11px;
    line-height: 1.5;
}

.trip-highlight-card time {
    display: block;
    margin-top: 6px;
    color: #7f909f;
    font-size: 10px;
}

.trip-highlights-link {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 10px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

    .trip-highlights-link:hover {
        color: #ffd56a;
    }

/* ==========================================================
   RESPONSIVE LAYOUT
   ========================================================== */

@media (max-width: 1650px) {

    .trips-content-grid {
        grid-template-columns: 1fr;
    }

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

        .trip-highlights-panel > h2,
        .trip-highlights-link {
            grid-column: 1 / -1;
        }

    .trip-highlight-card + .trip-highlight-card {
        margin-top: 0;
    }
}

@media (max-width: 1400px) {

    .trips-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trips-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trips-search {
        grid-column: 1 / -1;
    }

    .trip-history-card {
        grid-template-columns: 170px minmax(220px, 1fr) minmax(142px, 150px) 80px 18px;
    }

    .trip-result-grid {
        grid-column: 2 / span 3;
        grid-row: 2;
        padding-top: 10px;
    }
}

@media (max-width: 1100px) {

    .dashboard-sidebar {
        display: none;
    }

    .trip-history-card {
        grid-template-columns: 160px minmax(0, 1fr) 80px 18px;
    }

    .trip-completion-date {
        display: none;
    }

    .trip-result-grid {
        grid-column: 2 / span 2;
    }

    .trip-highlights-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {

    .trips-main {
        padding: 20px 14px 32px;
    }

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

    .trips-summary-grid,
    .trips-filters,
    .trip-highlights-panel {
        grid-template-columns: 1fr;
    }

        .trips-search,
        .trip-highlights-panel > h2,
        .trip-highlights-link {
            grid-column: auto;
        }

    .trip-history-card {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .trip-route-thumbnail {
        width: 100%;
        height: 140px;
    }

    .trip-result-grid {
        grid-column: auto;
        grid-row: auto;
    }

    .trip-card-result {
        align-items: center;
        flex-direction: row;
    }

    .trip-details-link {
        position: absolute;
        right: 22px;
    }
}

/* Keep the driver card near the Trips navigation. */

.dashboard-sidebar .sidebar-driver-card {
    margin-top: 32px;
}

/* Prevent the Trips title from inheriting the old global header style. */

.trips-page-header {
    padding: 0;
    background: transparent;
    border: 0;
}

/* ==========================================================
   CAPS FOOTER
   ========================================================== */

.trips-caps-signature {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 24px;
    padding: 18px 12px 4px;
    border-top: 1px solid rgba(45, 73, 93, 0.5);
}

.trips-caps-icon {
    color: #ffb000;
    font-size: 19px;
    line-height: 1;
}

.trips-caps-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

    .trips-caps-text strong {
        color: var(--text);
        font-size: 14px;
        line-height: 1.2;
    }

        .trips-caps-text strong span {
            color: #ffb000;
        }

    .trips-caps-text small {
        color: var(--muted);
        font-size: 11px;
        font-style: italic;
        line-height: 1.2;
    }