/* ==========================================================
   BASIS
========================================================== */

html,
body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #f4f6f9;

    font-family: "Segoe UI", Arial, sans-serif;
}


/* ==========================================================
   TOPBAR
   Bestaande bovenbalk
========================================================== */

#topbar {
    width: 100%;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;

    padding: 0 10px 0 18px;

    background: #343a40;
    color: #fff;

    position: relative;
    z-index: 3000;
}


/* ----------------------------------------------------------
   Logo
---------------------------------------------------------- */

.topbar-left {
    height: 100%;

    display: flex;
    align-items: center;

    min-width: 0;
}

.site-logo {
    height: 100%;

    display: flex;
    align-items: center;

    gap: 7px;

    margin-right: 16px;

    color: #fff;
    text-decoration: none;

    font-size: 16px;
    font-weight: 500;

    white-space: nowrap;
}

.site-logo:hover {
    color: #fff;
}

.site-logo-icon {
    font-size: 21px;
    line-height: 1;
}


/* ----------------------------------------------------------
   Menu
---------------------------------------------------------- */

.top-menu {
    height: 100%;

    display: flex;
    align-items: center;
}

.top-menu-item {
    height: 100%;

    display: flex;
    align-items: center;

    gap: 5px;

    padding: 0 9px;

    color: #adb5bd;

    text-decoration: none;

    font-size: 14px;

    white-space: nowrap;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.top-menu-item:hover {
    color: #fff;

    background: rgba(255, 255, 255, 0.07);
}

.top-menu-item span {
    font-size: 10px;
    color: #868e96;
}


/* ----------------------------------------------------------
   Taal
---------------------------------------------------------- */

.language {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: 12px;

    font-size: 21px;

    line-height: 1;

    text-decoration: none;
}


/* ----------------------------------------------------------
   Zoekvelden
---------------------------------------------------------- */

.top-search {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-left: 12px;

    flex-shrink: 0;
}

.top-search input {
    height: 36px;

    box-sizing: border-box;

    padding: 0 11px;

    border: 1px solid #ced4da;
    border-radius: 4px;

    background: #fff;
    color: #212529;

    font-family: inherit;
    font-size: 14px;
}

.top-search input:focus {
    outline: none;

    border-color: #80bdff;

    box-shadow:
        0 0 0 2px
        rgba(0, 123, 255, 0.20);
}

#materialSearch {
    width: 235px;
}

#trainSearch {
    width: 100px;
}


/* ----------------------------------------------------------
   Zoekknop
---------------------------------------------------------- */

#searchButton {
    height: 36px;

    padding: 0 14px;

    box-sizing: border-box;

    border: 1px solid #198754;
    border-radius: 4px;

    background: transparent;

    color: #198754;

    font-family: inherit;
    font-size: 14px;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

#searchButton:hover {
    background: #198754;
    color: #fff;
}


/* ==========================================================
   APP
========================================================== */

#app {
    width: 100%;
    height: calc(100vh - 60px);

    display: flex;

    overflow: hidden;
}


/* ==========================================================
   KAART
========================================================== */

#mapContainer {
    position: relative;

    flex: 1;

    min-width: 0;

    height: 100%;

    order: 1;
}

#map {
    width: 100%;
    height: 100%;
}


/* ==========================================================
   RECHTERKOLOM
========================================================== */

#sidebar {
    order: 2;

    width: 390px;
    min-width: 390px;
    max-width: 390px;

    height: 100%;

    box-sizing: border-box;

    background: #fff;

    border-left: 1px solid #d9dde1;

    overflow-x: hidden;
    overflow-y: auto;

    box-shadow:
        -3px 0 12px
        rgba(0, 0, 0, 0.08);

    z-index: 1500;
}


/* ----------------------------------------------------------
   Scrollbar
---------------------------------------------------------- */

#sidebar::-webkit-scrollbar {
    width: 8px;
}

#sidebar::-webkit-scrollbar-track {
    background: #f5f6f7;
}

#sidebar::-webkit-scrollbar-thumb {
    background: #c9ced3;

    border-radius: 10px;
}

#sidebar::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}


/* ==========================================================
   ALGEMENE SIDEBAR SECTIES
========================================================== */

.sidebar-section {
    width: 100%;

    box-sizing: border-box;

    padding: 16px;

    background: #fff;

    border-bottom: 1px solid #e1e4e7;
}

.sidebar-section h5 {
    margin: 0 0 12px 0;

    color: #212529;

    font-size: 16px;
    font-weight: 700;
}


/* ==========================================================
   VERTREKTIJDEN
========================================================== */

#departuresPanel {
    padding: 0;
}


/* ----------------------------------------------------------
   Header
---------------------------------------------------------- */

.departures-header {
    height: 58px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    padding: 0 10px 0 16px;

    background: #fff;

    border-bottom: 1px solid #dfe3e6;
}

.departure-station-wrapper {
    min-width: 0;
}

.departures-header h5 {
    margin: 0;

    color: #0066cc;

    font-size: 17px;
    font-weight: 700;

    white-space: nowrap;
}

.station-star {
    margin-left: 2px;

    color: #f0ad00;

    font-size: 12px;

    vertical-align: 2px;
}


/* ----------------------------------------------------------
   Klok
---------------------------------------------------------- */

.departure-clock {
    margin-left: auto;

    color: #555;

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;
}


/* ----------------------------------------------------------
   Sluitknop
---------------------------------------------------------- */

.departures-close {
    width: 28px;
    height: 30px;

    margin-left: 5px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #777;

    font-size: 23px;
    line-height: 28px;

    cursor: pointer;
}

.departures-close:hover {
    color: #222;
}


/* ==========================================================
   VERTREKKENLIJST
========================================================== */

#departuresList {
    width: 100%;
}


/* ----------------------------------------------------------
   Laden
---------------------------------------------------------- */

.departure-loading {
    padding: 20px 16px;

    text-align: center;

    color: #777;

    font-size: 13px;
}


/* ----------------------------------------------------------
   Eén vertrek
---------------------------------------------------------- */

.departure {
    width: 100%;

    min-height: 56px;

    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        36px;

    column-gap: 8px;

    align-items: center;

    box-sizing: border-box;

    padding: 7px 12px 7px 16px;

    background: #fff;

    border-bottom: 1px solid #eeeeee;
}

.departure:hover {
    background: #f7f8f9;
}


/* ----------------------------------------------------------
   Tijd
---------------------------------------------------------- */

.departure-time {
    color: #212529;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
}


/* ----------------------------------------------------------
   Treininformatie
---------------------------------------------------------- */

.departure-info {
    min-width: 0;
}

.departure-train {
    color: #333;

    font-size: 12px;
    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.departure-destination {
    margin-top: 2px;

    color: #555;

    font-size: 12px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ----------------------------------------------------------
   Perron
---------------------------------------------------------- */

.departure-platform {
    min-width: 28px;

    padding: 3px 4px;

    box-sizing: border-box;

    border-radius: 3px;

    background: #064b91;

    color: #fff;

    text-align: center;

    font-size: 12px;
    font-weight: 700;
}


/* ==========================================================
   PUNCTUALITEIT
========================================================== */

#punctualityPanel {
    padding: 16px;
}

#punctuality {
    color: #198754;
}

.punctuality-value {
    font-size: 23px;

    font-weight: 700;
}


/* ==========================================================
   SPOORNIEUWS
========================================================== */

#newsPanel {
    padding: 16px;
}

.news-item {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    padding: 8px 0;

    color: #005eb8;

    border-bottom: 1px solid #f0f0f0;

    font-size: 12px;

    line-height: 1.4;
}

.news-item:last-child {
    border-bottom: 0;
}

.news-icon {
    flex-shrink: 0;

    font-size: 15px;
}


/* ==========================================================
   FOTO'S
========================================================== */

#photosPanel {
    padding: 16px;
}

.photo-placeholder {
    width: 100%;

    min-height: 120px;

    display: flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding: 15px;

    border-radius: 5px;

    background: #f1f3f5;

    color: #6c757d;

    text-align: center;

    font-size: 13px;
}


/* ==========================================================
   BESTAANDE TREINRADAR FUNCTIES
========================================================== */

#radarControls {
    padding: 16px;

    background: #f8f9fa;
}

#radarControls .card {
    margin-bottom: 14px;

    border: 0;

    border-radius: 10px;

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, 0.07);
}

#radarControls .card:last-child {
    margin-bottom: 0;
}

#radarControls .card-body {
    padding: 14px;
}

#radarControls .card h6 {
    margin-bottom: 10px;

    font-weight: 700;
}


/* ==========================================================
   ZOEKVELD TREINRADAR
========================================================== */

#search {
    width: 100%;

    box-sizing: border-box;

    border-radius: 6px;
}


/* ==========================================================
   STATUS
========================================================== */

#connectionStatus {
    font-weight: 700;
}

#liveInfo {
    color: #666;

    font-size: 14px;
}

.status-online {
    color: #198754;

    font-weight: 700;
}

.status-offline {
    color: #dc3545;

    font-weight: 700;
}

.status-warning {
    color: #ffc107;

    font-weight: 700;
}


/* ==========================================================
   STATUSBALK KAART
========================================================== */

#statusBar {
    position: absolute;

    left: 15px;
    right: 15px;

    bottom: 15px;

    min-height: 45px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;

    padding: 10px 16px;

    background: #fff;

    border-radius: 10px;

    box-shadow:
        0 6px 20px
        rgba(0, 0, 0, 0.18);

    z-index: 1200;

    font-size: 13px;
}


/* ==========================================================
   FORMULIEREN
========================================================== */

.form-control {
    border-radius: 6px;
}

.btn {
    border-radius: 6px;
}


/* ==========================================================
   LEAFLET POPUP
========================================================== */

.leaflet-popup-content {
    font-size: 14px;
}

.train-popup h5 {
    margin-bottom: 10px;
}


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

@media (max-width: 1250px) {

    .top-menu-item {
        padding-left: 6px;
        padding-right: 6px;
    }

    #materialSearch {
        width: 190px;
    }

}


@media (max-width: 1100px) {

    .top-menu {
        display: none;
    }

    .language {
        display: none;
    }

    .top-search {
        margin-left: auto;
    }

}


@media (max-width: 900px) {

    #sidebar {
        position: absolute;

        top: 0;
        right: 0;
        bottom: 0;

        width: 350px;
        min-width: 350px;
        max-width: 350px;

        z-index: 2500;
    }

    #mapContainer {
        width: 100%;
    }

    #statusBar {
        left: 8px;
        right: 8px;
        bottom: 8px;
    }

}


@media (max-width: 650px) {

    #materialSearch {
        display: none;
    }

    #trainSearch {
        width: 90px;
    }

    #sidebar {
        width: 320px;
        min-width: 320px;
        max-width: 320px;
    }

    #statusBar {
        flex-direction: column;

        align-items: flex-start;

        gap: 5px;
    }

}