:root {
    --ksrtc-red: #ce1818;
    --ksrtc-dark: #222;
    --bg-light: #f0f2f5;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 12px;
    background: var(--bg-light);
    overscroll-behavior-y: none;
}

.grid-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 780px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.grid-layout > * {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Passenger panel (second child in HTML) rendered first */
.grid-layout > :first-child {
    order: 2;
}

.grid-layout > :last-child {
    order: 1;
}

.card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    height: fit-content;
    margin-bottom: 20px;
}

h2 {
    color: #0b5ed7;
    border-bottom: 2px solid #ddd;
    padding-bottom: 8px;
    margin-top: 0;
}

.collapsible-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.card-collapse-btn {
    width: auto;
    margin: 0;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #d5deea;
    background: #f8fbff;
    color: #1f3b57;
    font-size: 0.78em;
    font-weight: 700;
    cursor: pointer;
}

.card-collapse-btn:hover {
    background: #edf4ff;
}

.create-route-card .panel-intro {
    margin: 2px 0 12px;
    color: #4b5f78;
    font-size: 0.88em;
    line-height: 1.35;
}

.create-route-form {
    display: grid;
    gap: 10px;
}

.create-route-form .form-section {
    border: 1px solid #e6edf6;
    border-radius: 8px;
    padding: 10px;
    background: #fbfdff;
}

.create-route-form .form-section-title {
    font-size: 0.8em;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #375a7f;
    margin-bottom: 6px;
}

.form-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}

.form-actions-note {
    font-size: 0.8em;
    color: #5f7188;
}

.primary-action-btn {
    width: auto;
    padding: 10px 14px;
    border-radius: 6px;
}

.create-state-chip-row {
    margin-top: 4px;
    margin-bottom: 4px;
}

.create-state-chip-row .state-chip {
    font-size: 0.8em;
    padding: 6px 10px;
}

.auto-route-id-input {
    background: #f2f5f9;
    border-color: #d5dde8;
    color: #5a6c83;
    cursor: not-allowed;
    font-weight: 700;
}

@media (max-width: 900px) {
    .form-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .primary-action-btn {
        width: 100%;
    }
}

@media (max-width: 600px) {
    body {
        padding: 8px;
    }

    h1 {
        font-size: 1.3em;
        margin: 8px 0 12px;
    }

    .card {
        padding: 14px 12px;
    }

    .flex-row {
        flex-direction: column;
        gap: 6px;
    }

    .flex-row > * {
        min-width: 0;
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    select, input, button {
        font-size: 1em;
        padding: 12px 10px;
    }

    .time-chip {
        padding: 8px 10px !important;
        font-size: 0.85em !important;
    }

    .state-chip {
        padding: 8px 12px;
        font-size: 0.85em;
    }

    .stop-inline-name {
        min-width: 0;
        width: 100%;
    }

    .stop-inline-lat,
    .stop-inline-lng {
        width: 100%;
    }

    #adminMap {
        height: 260px !important;
    }
}

label {
    font-weight: bold;
    display: block;
    margin: 12px 0 6px;
    font-size: 0.9em;
}

select, input, button {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    background: var(--ksrtc-red);
    color: white;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

/* Only admin-style plain buttons get the KSRTC red hover.
   All named UI components (chips, refresh, swap, search, voice, locale, pagination)
   have their own explicit hover rules below — adding new buttons here prevents
   the red-hover problem from recurring on future UI additions. */
button:hover:not(:disabled):not(.transit-chip):not(.time-chip):not(.state-chip):not(.refresh-btn):not(.voice-input-btn):not(.passenger-search-btn):not(.passenger-swap-btn):not(.passenger-swap-full):not(.card-collapse-btn):not(.pagination-btn):not(.passenger-results-toggle):not(#localeSwitchBtn):not(#routeSearchClearBtn):not(#routeToSearchClearBtn):not(.admin-chip) {
    background: #901010;
}

.badge {
    background: #fff3cd;
    color: #856404;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    display: inline-block;
}

.stop-row {
    background: #f9f9f9;
    padding: 10px;
    margin: 5px 0;
    border-left: 4px solid var(--ksrtc-red);
    display: flex;
    justify-content: space-between;
}

.stop-inline-edit-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 280px;
}

.stop-inline-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stop-inline-edit-wrap input {
    margin: 0;
    padding: 6px 8px;
    border: 1px solid #ccd2da;
    border-radius: 4px;
}

.stop-inline-name {
    min-width: 240px;
}

.stop-inline-lat,
.stop-inline-lng {
    width: 140px;
}

.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    margin: 15px 0;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap;
}

th {
    background: #f4f4f4;
    font-size: 0.82em;
}

.geo-btn {
    background: #28a745;
}

.geo-btn:hover {
    background: #1e7e34;
}

.flex-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.flex-row > * {
    min-width: 140px;
}

.progress-bar {
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 4px;
}
.progress-dot {
    width:14px;
    height:14px;
    border-radius:50%;
    display:inline-block;
    border:2px solid #ccc;
}
.progress-dot.done { background: #ce1818; border-color:#ce1818; }
.progress-dot.upcoming { background: #2b9cff; border-color:#2b9cff; }

.state-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.state-chip {
    width: auto;
    margin-bottom: 0;
    padding: 7px 12px;
    border-radius: 999px;
    background: #edf2f7;
    color: #243447;
    border: 1px solid #c7d1db;
    font-weight: 700;
}

.state-chip:hover {
    background: #dfe8f1;
}

.state-chip.active {
    background: #0b5ed7;
    border-color: #0a58ca;
    color: #fff;
}

.admin-filter-clear-btn {
    width: auto;
    margin-bottom: 0;
    padding: 6px 12px;
    border-radius: 6px;
    background: #f5f5f5;
    border: 1px solid #cfcfcf;
    color: #333;
    font-weight: 600;
}

.admin-filter-clear-btn:hover {
    background: #e9e9e9;
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.refresh-btn {
    width:26px;
    height:26px;
    border-radius:50%;
    background:#2b9cff;
    border:none;
    display:inline-block;
    margin-left:4px;
    cursor:pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="white" d="M12 6V3L8 7l4 4V8c2.76 0 5 2.24 5 5a5 5 0 0 1-5 5 5 5 0 0 1-4.9-4H5a7 7 0 0 0 7 7 7 7 0 0 0 0-14z"/></svg>');
    background-repeat:no-repeat;
    background-position:center;
}
.refresh-btn.spinning {
    animation: spin 0.8s linear infinite;
    cursor: not-allowed;
    opacity: 0.75;
}
.refresh-btn:hover:not(:disabled) {
    background: #1a7fd4;
    box-shadow: 0 0 0 3px rgba(43,156,255,0.3);
}
.refresh-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(43,156,255,0.15); }

/* Greyed-out state for configurable header buttons */
#voiceSearchBtn:disabled,
#localeSwitchBtn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(60%);
}

/* Time chip styles - ensure visible text for both selected and unselected states */
/* Add this to your style block or css/styles.css to fix the chip wrapping */
.time-chip-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Forces all chips to stay on the exact same line */
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    width: max-content !important; /* Prevents container from stretching to full block width */
}

.time-chip {
    width: auto !important; /* Overrides global 100% button width */
    display: inline-block !important;
    white-space: nowrap !important;
    padding: 6px 12px !important; /* Compact, balanced spacing */
    font-size: 0.85em !important;
    border-radius: 16px !important; /* Round, compact chip look */
    margin: 0 !important; /* Clears block form margins */
}

.time-chip:hover {
    background: #f1f6fb !important;
}
.time-chip-selected:hover {
    background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%) !important;
    color: #fff !important;
    border-color: #084298 !important;
}
.time-chip:focus { outline: none; box-shadow: 0 0 0 3px rgba(34,136,255,0.12); }
.time-chip-selected {
    background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%) !important;
    color:#fff !important;
    border-color: #084298 !important;
    box-shadow: 0 4px 10px rgba(10, 88, 202, 0.28);
}

/* Search clear button alignment */
.passenger-routes-label {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.passenger-swap-btn {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    border: 1px solid #c9d7ea;
    background: #ffffff;
    color: #0b5ed7;
    font-size: 1.1em;
    line-height: 1;
    font-weight: 700;
}

.passenger-swap-btn:hover:not(:disabled) {
    background: #f3f8ff;
}

.passenger-swap-btn:disabled {
    cursor: not-allowed;
    color: #95a4ba;
    border-color: #dbe5f1;
    background: #f8fbff;
}

/* Search block: vertical stack — From / Swap / To / Search */
.passenger-search-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.passenger-search-block .search-input-wrapper {
    width: 100%;
}

/* Swap button — full width, compact, centred */
.passenger-swap-full {
    width: 100% !important;
    max-width: 100% !important;
    height: 24px !important;
    border-radius: 6px !important;
    font-size: 1em !important;
    letter-spacing: 0;
    border: 1px dashed #b0c4de !important;
    background: #f4f8ff !important;
    color: #0b5ed7 !important;
}

.passenger-swap-full:hover:not(:disabled) {
    background: #e8f0fe !important;
}

.passenger-swap-full:disabled {
    color: #9aacbf !important;
    border-color: #dde8f5 !important;
    background: #fafcff !important;
    cursor: not-allowed !important;
}

/* Admin stat-bar chips — exact match to passenger transit chips */
.admin-chip {
    width: auto !important;
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    border: 2px solid #d0d7e1 !important;
    background: #fff !important;
    color: #444 !important;
    font-size: 0.78em !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    margin-bottom: 0 !important;
}
/* Fixed width per group: content area = N chars; calc adds the 20px horizontal padding */
.admin-chip.route-type-chip { width: calc(8ch + 20px) !important; text-align: center; }
.admin-chip.boarding-chip   { width: calc(6ch + 20px) !important; text-align: center; }
.admin-chip.speed-chip      { width: calc(4ch + 20px) !important; text-align: center; }
/* Speed custom input — same outer width as speed chips, smaller padding for typing comfort */
#workAvgSpeed {
    width: calc(4.4ch + 22px) !important;
    padding: 3px 5px !important;
    border: 1px solid #ccc !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-size: 0.78em !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* Unselected hover */
.admin-chip:hover { border-color: #007bff !important; background: #f0f6ff !important; color: #007bff !important; }

/* Speed / Boarding selected */
.admin-chip.speed-chip-selected,
.admin-chip.boarding-chip-selected {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}
/* Speed / Boarding selected hover — no change */
.admin-chip.speed-chip-selected:hover,
.admin-chip.boarding-chip-selected:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

/* Route-type selected colours */
.admin-chip.route-type-chip[data-type="rural"].route-type-selected    { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
.admin-chip.route-type-chip[data-type="express"].route-type-selected  { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; }
.admin-chip.route-type-chip[data-type="urban"].route-type-selected    { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }
/* Route-type selected hover — no change */
.admin-chip.route-type-chip[data-type="rural"].route-type-selected:hover   { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
.admin-chip.route-type-chip[data-type="express"].route-type-selected:hover { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; }
.admin-chip.route-type-chip[data-type="urban"].route-type-selected:hover   { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }

/* Search button — full width */
.passenger-search-full {
    width: 100% !important;
    height: 44px !important;
    font-size: 1em !important;
    border-radius: 6px !important;
    margin: 2px 0 0 !important;
}

.passenger-search-btn {
    background: #007bff;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}

.passenger-search-btn:disabled {
    background: #b0c8e8;
    color: #fff;
    cursor: not-allowed;
    opacity: 0.8;
}

.passenger-search-btn:hover:not(:disabled) {
    background: #0062cc;
}

@keyframes mic-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
.voice-input-btn.listening {
    animation: mic-pulse 0.9s ease-in-out infinite;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="%23e53935" d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.49 6-3.31 6-6.72h-1.7z"/></svg>');
}

/* Legacy row helper kept for any residual references */
.passenger-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
/* Stop autocomplete dropdown (From / To) */
.stop-autocomplete-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid #c8d6e8;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(30,50,80,0.10);
    z-index: 50;
    max-height: 220px;
    overflow-y: auto;
    display: none;
}
.stop-autocomplete-dropdown .ac-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f4fa;
    font-size: 0.92em;
}
.stop-autocomplete-dropdown .ac-item:last-child { border-bottom: none; }
.stop-autocomplete-dropdown .ac-item:hover,
.stop-autocomplete-dropdown .ac-item.ac-active { background: #eef4ff; }
.stop-autocomplete-dropdown .ac-item .ac-route { font-size: 0.78em; color: #7a90b0; margin-top: 2px; }
.stop-autocomplete-dropdown .ac-freetext {
    padding: 8px 12px;
    font-size: 0.88em;
    color: #0b5ed7;
    cursor: pointer;
    font-style: italic;
    border-top: 1px dashed #dde4ee;
}
.stop-autocomplete-dropdown .ac-freetext:hover { background: #f0f6ff; }

/* Inline search results under the search box */
.route-search-results {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #e1e7ef;
    box-shadow: 0 4px 10px rgba(40,50,60,0.06);
    z-index: 1;
    max-height: none;
    overflow: visible;
    border-radius: 6px;
}
.route-search-results .item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #f1f5fa; }
.route-search-results .item:last-child { border-bottom: none; }
.route-search-results .item:hover { background:#f7fbff; }
.route-search-results .item .meta { font-size: 0.85em; color:#666; }

.passenger-summary-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #eef2f7;
    background: #f8fbff;
}

.passenger-summary-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 700;
    color: #1f3b57;
    background: #e9f2ff;
    border: 1px solid #cddff7;
}

.passenger-results-toggle {
    width: calc(100% - 16px);
    margin: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #c9d7ea;
    background: #ffffff;
    color: #0b5ed7;
    font-weight: 700;
    cursor: pointer;
}

.passenger-results-toggle:hover {
    background: #f3f8ff;
}

.passenger-results-stack {
    padding: 6px 8px 10px;
}

.passenger-route-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #ebeff5;
}

.passenger-route-header .route-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--route-accent, #0b5ed7);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--route-accent, #0b5ed7) 25%, white);
}

.passenger-route-header .route-title {
    font-weight: 700;
    font-size: 0.88em;
    color: #1f2937;
    letter-spacing: 0.01em;
}

.passenger-bus-line {
    border-left: 4px solid var(--route-accent, #0b5ed7);
    padding-left: 10px;
    margin-bottom: 6px;
    background: color-mix(in srgb, var(--route-accent, #0b5ed7) 10%, white);
    border-radius: 6px;
    line-height: 1.22;
    font-size: 0.80em;
    padding-top: 6px;
    padding-bottom: 6px;
}

.passenger-bus-line:hover {
    background: color-mix(in srgb, var(--route-accent, #0b5ed7) 14%, white);
}

.passenger-trip-item {
    cursor: pointer;
    border: 1px solid #dfe7f2;
    background: #ffffff;
}

.passenger-trip-item:hover {
    border-color: #bfd2ee;
}

.passenger-results-col-header {
    display: flex;
    align-items: center;
    padding: 5px 10px 5px 14px;
    font-size: 0.76em;
    font-weight: 700;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.col-trip-eta {
    min-width: 140px;
    flex: 0 0 140px;
}

.col-trip-route {
    flex: 1;
}

.passenger-trip-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 700;
    margin-bottom: 4px;
    padding-left: 4px;
    border-left: 3px solid var(--route-accent, #0b5ed7);
}

.trip-eta-col {
    min-width: 140px;
    flex: 0 0 140px;
    font-size: 1.1em;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.trip-route-col {
    flex: 1;
    font-size: 0.9em;
    font-weight: 600;
    color: #334155;
}

.passenger-trip-subline {
    font-size: 0.85em;
    color: #475569;
    margin-left: 10px;
}

.passenger-trip-details {
    margin-top: 8px;
}

.bus-trip-expanded-view {
    border: 1px solid #d9e4f4;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
    padding: 10px;
}

.bus-trip-banner {
    font-weight: 800;
    color: #0f2f54;
    margin-bottom: 8px;
    font-size: 0.9em;
}

.bus-trip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.84em;
    color: #233a53;
    margin-bottom: 8px;
}

.bus-trip-track-vertical {
    max-height: none;
    overflow: visible;
    padding: 4px 2px 2px;
    margin-bottom: 8px;
}

.tracker-stop {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding-bottom: 6px;
}
.tracker-stop::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 9px;
    bottom: -2px;
    border-left: 2px dotted #c3cfdd;
}

.tracker-stop:last-child::after {
    display: none;
}

.tracker-stop.segment-pre::after {
    border-left-style: dotted;
    border-left-width: 2px;
    border-left-color: #9ab0ca;
}

.tracker-stop.segment-journey::after {
    border-left-style: double;
    border-left-width: 6px;
    border-left-color: #f59e0b;
}

.tracker-stop.segment-post::after {
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: #b8c2ce;
}

.tracker-stop-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-top: 2px;
    border: 2px solid #9fb4cc;
    background: #fff;
    z-index: 1;
}

.tracker-stop.done .tracker-stop-dot {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.tracker-stop.current .tracker-stop-dot {
    background: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
    width: 22px;
    height: 22px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.tracker-stop.journey-start .tracker-stop-dot,
.tracker-stop.journey-end .tracker-stop-dot {
    background: #f59e0b;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}

.tracker-stop.post-journey .tracker-stop-dot {
    background: #d1d5db;
    border-color: #b7bec8;
    box-shadow: none;
}

.tracker-stop-content {
    min-width: 0;
}

.tracker-stop-name {
    font-size: 0.82em;
    font-weight: 700;
    color: #16324f;
    line-height: 1.25;
}

.tracker-stop-km {
    font-size: 0.72em;
    color: #5b718a;
    margin-top: 1px;
}

.tracker-stop-meta {
    font-size: 0.72em;
    color: #50657e;
    margin-top: 1px;
    white-space: nowrap;
}

.tracker-stop.journey-start .tracker-stop-dot,
.tracker-stop.journey-end .tracker-stop-dot {
    width: 16px;
    height: 16px;
    border-width: 3px;
}

.tracker-stop.your-stop .tracker-stop-name {
    color: #b45309;
}

.tracker-stop.post-journey .tracker-stop-name,
.tracker-stop.post-journey .tracker-stop-km,
.tracker-stop.post-journey .tracker-stop-meta {
    color: #8a98a9;
}

.bus-trip-foot {
    display: grid;
    gap: 4px;
    font-size: 0.82em;
    color: #1f3349;
}

.bus-trip-empty {
    font-size: 0.84em;
    color: #60748a;
    padding: 6px 4px;
}

.passenger-route-summary-wrap {
    margin: 8px 8px 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.passenger-route-summary-row {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--route-accent, #0b5ed7) 55%, #8ea1b8);
    background: color-mix(in srgb, var(--route-accent, #0b5ed7) 18%, white);
    color: #10233d;
    font-size: 0.76em;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.passenger-route-summary-row:hover {
    background: color-mix(in srgb, var(--route-accent, #0b5ed7) 24%, white);
    transform: translateY(-1px);
}

.passenger-route-summary-row.active {
    border-color: color-mix(in srgb, var(--route-accent, #0b5ed7) 82%, #1d4ed8);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--route-accent, #0b5ed7) 25%, white);
    background: color-mix(in srgb, var(--route-accent, #0b5ed7) 30%, white);
}

.passenger-results-stack {
    margin-top: 6px;
    border-top: 1px dashed #e5ebf3;
    padding-top: 8px;
}

/* Numeric pagination buttons for route cards */
.pagination-btn {
    padding:6px 10px;
    border-radius:4px;
    border:1px solid #d0d7e1;
    background:#fff;
    cursor:pointer;
    margin-right:6px;
    font-weight:600;
}
.pagination-btn:hover { background:#f1f6fb; }
.pagination-btn-selected {
    background:#007bff !important;
    color:#fff !important;
    border-color:#0062cc !important;
}

/* Small chip-like pagination for compact UI */
.pagination-btn { padding:6px 8px; min-width:34px; border-radius:16px; }

/* Selected route card styling */
.route-card { transition: box-shadow 0.18s, border 0.18s; }
.route-card.selected-card { border: 2px solid #000 !important; box-shadow: 0 6px 20px rgba(0,0,0,0.12); }

/* Table styling improvements for readability */
table#publicRouteTable th { background:#f7f9fb; color: #222; }
table#publicRouteTable td { background: #ffffff; color: #222; }
table#publicRouteTable tbody tr:nth-child(odd) td { background:#fcfdfe; }

/* Small font for meta badges inside cards */
.card-meta { font-size: 0.9em; color: #333; }

/* ==========================================================================
   Operations Team Verification Specific Layout Rules
   ========================================================================== */

/* Container context to override default grid block flow */
.ops-verification-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    white-space: nowrap;
    margin: 4px 0 16px 0;
    padding: 0;
}

/* Overrides generic form input width: 100% rule */
.ops-verification-row input[type="checkbox"].inline-checkbox {
    width: auto;
    margin: 0 6px 0 0;
    padding: 0;
    cursor: pointer;
}

/* Overrides generic label display: block rule */
.ops-verification-row label.inline-label {
    display: inline;
    margin: 0 28px 0 0;
    padding: 0;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
}

/* Adjust button spacing to strip out downstream margins */
.ops-verification-row .admin-filter-clear-btn {
    margin: 0;
}

/* Real-time Tracking Context Layout Overrides */
.search-input-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

/* Ensure placeholder styling preserves standard optional context readability */
.search-input-wrapper input[type="text"] {
    width: 100%;
    padding: 10px 36px 10px 12px; /* Extra right padding so text never overlaps clear symbol */
    box-sizing: border-box;
}

/* Pixel-perfect centering mechanics for embedded cross (x) buttons */
#routeSearchClearBtn, 
#routeToSearchClearBtn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%); /* Forload precision vertical track adjustment alignment */
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' width='14' height='14' viewBox='0 0 24 24'><path fill='%23666' d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z'/></svg>") no-repeat center;
    border: none;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: none; /* Injected and manipulated natively down-stream via programmatic logic strings */
    padding: 0;
    margin: 0;
}

#routeSearchClearBtn:hover,
#routeToSearchClearBtn:hover {
    background-color: rgba(229, 57, 53, 0.08) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%23e53935' d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 50%;
    filter: none;
}