:root {
    --bg: #ffffff;
    --surface: #181c27;
    --surface-2: #1e2335;
    --border: #2a3050;
    --accent: #4f8ef7;
    --accent-soft: rgba(79,142,247,.12);
    --accent-glow: rgba(79,142,247,.35);
    --text-primary: #2800ff;
    --text-muted: #2800ff;
    --success:  #3dd68c;
    --warning: #f59e0b;
    --radius: 10px;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'DM Mono', monospace;
}

body {
    background: var(--bg);
    margin: 0;
}

.tr-page {
    font-family: var(--font-body);
    color: var(--text-primary);
/*    padding: 2.5rem clamp(1rem, 5vw, 3rem);
*/    padding: 2.0rem clamp(1rem, 5vw, 3rem);
    min-height: 100vh;
    background: var(--bg);
}

/* ── Header ── */
.tr-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

    .tr-header h1 {
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: 600;
        letter-spacing: -.03em;
        margin: 0;
    }

        .tr-header h1 span {
            color: var(--accent);
        }

.tr-subtitle {
    font-size: .83rem;
    color: var(--text-muted);
    margin: .3rem 0 0;
}

/* ── Toolbar ── */
.tr-toolbar {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.tr-search {
    flex: 1;
    min-width: 200px;
    max-width: 340px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: .88rem;
    padding: .55rem .9rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

    .tr-search:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(79,142,247,.15);
    }

    .tr-search::placeholder {
        color: var(--text-muted);
    }

/* Country filter pills */
.tr-filter-group {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.tr-pill {
    font-size: 1rem;
    font-weight: 600;
    padding: .4rem .75rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: #2800ff; /* var(--surface-2);*/
    color: #ffffff;/* var(--text-muted);*/
    cursor: pointer;
    transition: all .18s;
    font-family: var(--font-body);
}

    .tr-pill:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .tr-pill.active {
        background: var(--accent-soft);
        border-color: var(--accent-glow);
        color: var(--accent);
        font-weight: 600;
    }

/* ── Buttons ── */
.tr-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: .83rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all .18s;
    white-space: nowrap;
}

.tr-btn-primary {
    background: var(--accent);
    color: #fff;
}

    .tr-btn-primary:hover {
        background: #6fa3f9;
        box-shadow: 0 4px 14px var(--accent-glow);
        transform: translateY(-1px);
    }

.tr-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

    .tr-btn-ghost:hover {
        color: var(--text-primary);
        border-color: var(--text-muted);
    }

/* ── Grid Card ── */
.tr-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* ── AG Grid overrides ── */
.ag-theme-quartz-dark {
    --ag-background-color: var(--surface);
    --ag-odd-row-background-color: var(--surface-2);
    --ag-header-background-color: #141827;
    --ag-border-color: var(--border);
    --ag-row-hover-color: var(--accent-soft);
    --ag-selected-row-background-color: var(--accent-soft);
    --ag-foreground-color: var(--text-primary);
    --ag-header-foreground-color: var(--text-muted);
    --ag-font-family: var(--font-body);
    --ag-font-size: 13.5px;
    --ag-row-height: 48px;
    --ag-header-height: 46px;
    --ag-cell-horizontal-padding: 10px;
    --ag-checkbox-checked-color: var(--accent);
    --ag-input-focus-border-color: var(--accent);
    --ag-range-selection-border-color: var(--accent);
}

/* Route arrow cell */
.route-cell {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 100%;
}

    .route-cell .from {
        color: var(--text-primary);
        font-weight: 500;
    }

    .route-cell .arrow {
        color: var(--accent);
        font-size: .9rem;
    }

    .route-cell .to {
        color: var(--text-muted);
        font-weight: 500;
    }

/* Country badge */
.country-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #ffffff; /* var(--surface-2);*/
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 2px 8px;
    font-size: .78rem;
    font-weight: 500;
}

/* Distance — monospace */
.dist-cell {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--text-muted);
}

/* Travel time */
.time-cell {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 500;
    color: var(--success);
    font-size: .85rem;
}

/* CO2 bar */
.co2-cell {
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 100%;
    width: 100%;
}

.co2-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.co2-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #3dd68c, #f59e0b, #f87171);
    transition: width .4s ease;
}

.co2-val {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--text-muted);
    min-width: 48px;
    text-align: right;
}

/* ── Status bar ── */
.tr-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1rem;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    font-size: .78rem;
    color: var(--text-muted);
}

    .tr-status .pill {
        background: var(--accent-soft);
        color: var(--accent);
        border-radius: 20px;
        padding: .12rem .6rem;
        font-weight: 600;
        font-size: .75rem;
    }

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFFAFA; /* var(--success);*/
    display: inline-block;
    margin-right: 4px;
}
.tpsize
{
    height:16px;
    width: 16px;
    margin-left:4px;
    margin-right: 4px;
}
.book-link
{
    margin:0 auto;
}
.form-group
{
    color: #2800ff;
    font-family: 'Segoe UI';
    font-size: 16px;
}

/* ── Flatpickr overrides ── */
.flatpickr-calendar {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
    font-family: var(--font-body) !important;
}

.flatpickr-day {
    color: var(--text-primary) !important;
    border-radius: 6px !important;
}

    .flatpickr-day:hover,
    .flatpickr-day.inRange {
        background: var(--accent-soft) !important;
        border-color: transparent !important;
        color: var(--accent) !important;
    }

    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
        background: var(--accent) !important;
        border-color: var(--accent) !important;
        color: #fff !important;
    }

    .flatpickr-day.flatpickr-disabled {
        color: var(--text-muted) !important;
        opacity: .4;
    }

.flatpickr-months,
.flatpickr-weekdays {
    background: var(--surface) !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

.flatpickr-month,
span.flatpickr-weekday {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

.flatpickr-current-month select,
.flatpickr-current-month input {
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: var(--text-muted) !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: var(--accent) !important;
}

/* Date range input wrapper */
.tr-date-wrap {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

    .tr-date-wrap label {
        font-size: .75rem;
        font-weight: 500;
        color: var(--text-muted);
        letter-spacing: .04em;
        text-transform: uppercase;
    }

.tr-date-input-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tr-date-input {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: .88rem;
    padding: .55rem .9rem;
    width: 140px;
    outline: none;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}

    .tr-date-input:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
    }

    .tr-date-input::placeholder {
        color: var(--text-muted);
    }

.tr-date-sep {
    color: var(--text-muted);
    font-size: .8rem;
    flex-shrink: 0;
}

.tr-date-clear {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: .75rem;
    padding: .3rem .6rem;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all .18s;
    white-space: nowrap;
}

    .tr-date-clear:hover {
        color: #f87171;
        border-color: #f8717160;
        background: rgba(248,113,113,.08);
    }