/**************************************************************************
 * TreinBusMetro v3.0
 * storingen.css
 **************************************************************************/

:root{

    --tbm-blue:#1565c0;
    --tbm-dark-blue:#0d47a1;

    --tbm-red:#d32f2f;
    --tbm-orange:#f57c00;
    --tbm-green:#2e7d32;

    --tbm-bg:#f5f7fb;
    --tbm-card:#ffffff;
    --tbm-border:#e2e8f0;

    --tbm-text:#263238;
    --tbm-text-light:#607d8b;

    --tbm-radius:16px;

}

/**************************************************************************
 * Pagina
 **************************************************************************/

body{

    background:var(--tbm-bg);

    color:var(--tbm-text);

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

}

/**************************************************************************
 * Header
 **************************************************************************/

.tbm-detail-header{

    display:flex;

    align-items:center;

    gap:24px;

    background:#fff;

    border-radius:20px;

    padding:30px;

    margin-bottom:30px;

    box-shadow:

        0 8px 30px

        rgba(0,0,0,.08);

}

.tbm-header-icon{

    font-size:58px;

}

.tbm-header-content h1{

    margin:0;

    font-size:34px;

    font-weight:700;

}

.tbm-route{

    margin-top:10px;

    color:var(--tbm-text-light);

    font-size:18px;

}

/**************************************************************************
 * Dashboard kaarten
 **************************************************************************/

.tbm-info-grid{

    display:grid;

    grid-template-columns:

        repeat(

            auto-fit,

            minmax(220px,1fr)

        );

    gap:20px;

    margin-bottom:30px;

}

.tbm-card{

    background:#fff;

    border-radius:18px;

    padding:24px;

    display:flex;

    gap:18px;

    align-items:center;

    transition:.25s;

    box-shadow:

        0 5px 20px

        rgba(0,0,0,.06);

}

.tbm-card:hover{

    transform:

        translateY(-4px);

    box-shadow:

        0 15px 35px

        rgba(0,0,0,.12);

}

.tbm-card-icon{

    font-size:34px;

}

/**************************************************************************
 * Badges
 **************************************************************************/

.badge{

    border-radius:30px;

    padding:

        10px 18px;

    font-size:15px;

    font-weight:600;

}

/**************************************************************************
 * Secties
 **************************************************************************/

.tbm-section{

    background:#fff;

    border-radius:18px;

    padding:30px;

    margin-top:24px;

    box-shadow:

        0 5px 20px

        rgba(0,0,0,.06);

}

.tbm-section h2{

    margin-bottom:20px;

    color:var(--tbm-dark-blue);

}

/**************************************************************************
 * Mobiel
 **************************************************************************/

@media(max-width:768px){

.tbm-detail-header{

    flex-direction:column;

    text-align:center;

}

.tbm-header-content h1{

    font-size:28px;

}

.tbm-card{

    padding:18px;

}

}

/**************************************************************************
 * TreinBusMetro v3.0
 * storingen.css
 * Deel 2
 **************************************************************************/

/**************************************************************************
 * Knoppen
 **************************************************************************/

.btn{

    border-radius:12px;

    padding:10px 18px;

    font-weight:600;

    transition:all .25s ease;

}

.btn-primary{

    background:var(--tbm-blue);

    border:none;

}

.btn-primary:hover{

    background:var(--tbm-dark-blue);

    transform:translateY(-2px);

}

.btn-outline-primary{

    border:2px solid var(--tbm-blue);

    color:var(--tbm-blue);

}

.btn-outline-primary:hover{

    background:var(--tbm-blue);

    color:#fff;

}

/**************************************************************************
 * Zoekbalk
 **************************************************************************/

.search-bar{

    margin:25px 0;

}

.search-bar input{

    width:100%;

    padding:16px 20px;

    border:1px solid var(--tbm-border);

    border-radius:14px;

    font-size:16px;

    background:#fff;

    transition:.25s;

}

.search-bar input:focus{

    outline:none;

    border-color:var(--tbm-blue);

    box-shadow:0 0 0 4px rgba(21,101,192,.12);

}

/**************************************************************************
 * Filters
 **************************************************************************/

.filter-bar{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:30px;

}

.filter-bar button{

    border:none;

    background:#fff;

    border-radius:30px;

    padding:10px 18px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.filter-bar button:hover{

    background:var(--tbm-blue);

    color:#fff;

}

.filter-bar button.active{

    background:var(--tbm-blue);

    color:#fff;

}

/**************************************************************************
 * Footer
 **************************************************************************/

.tbm-footer{

    margin-top:40px;

    color:var(--tbm-text-light);

    font-size:14px;

}

.tbm-footer hr{

    margin-bottom:25px;

}

/**************************************************************************
 * Loading
 **************************************************************************/

.tbm-loading{

    text-align:center;

    padding:60px 20px;

}

.tbm-loading .spinner-border{

    width:3rem;

    height:3rem;

}

/**************************************************************************
 * TreinBusMetro v3.0
 * storingen.css
 * Deel 3
 **************************************************************************/

/**************************************************************************
 * Storingskaart
 **************************************************************************/

.storing-card{

    background:#fff;

    border-radius:20px;

    padding:24px;

    margin-bottom:24px;

    border-left:6px solid var(--tbm-blue);

    box-shadow:0 8px 24px rgba(0,0,0,.08);

    transition:.25s;

    cursor:pointer;

}

.storing-card:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(0,0,0,.14);

}

.storing-card.work{

    border-left-color:var(--tbm-orange);

}

.storing-card.calamity{

    border-left-color:var(--tbm-red);

}

/**************************************************************************
 * Titel
 **************************************************************************/

.storing-title{

    font-size:24px;

    font-weight:700;

    color:var(--tbm-dark-blue);

    margin-bottom:10px;

}

.storing-route{

    font-size:17px;

    color:var(--tbm-text-light);

    margin-bottom:18px;

}

.storing-text{

    line-height:1.7;

    margin-bottom:18px;

}

.storing-time{

    color:var(--tbm-text-light);

    font-size:15px;

}

/**************************************************************************
 * Dashboard
 **************************************************************************/

.tbm-dashboard{

    display:grid;

    grid-template-columns:

        repeat(

            auto-fit,

            minmax(180px,1fr)

        );

    gap:20px;

    margin-bottom:35px;

}

.tbm-box{

    background:#fff;

    border-radius:18px;

    padding:25px;

    text-align:center;

    box-shadow:0 6px 18px rgba(0,0,0,.06);

    transition:.25s;

}

.tbm-box:hover{

    transform:translateY(-4px);

}

.tbm-number{

    font-size:34px;

    font-weight:700;

    color:var(--tbm-blue);

}

/**************************************************************************
 * Alerts
 **************************************************************************/

.alert{

    border:none;

    border-radius:14px;

    padding:18px;

    margin-top:18px;

}

.alert-info{

    background:#e3f2fd;

}

.alert-success{

    background:#e8f5e9;

}

.alert-warning{

    background:#fff8e1;

}

.alert-danger{

    background:#ffebee;

}

/**************************************************************************
 * Reisadvies
 **************************************************************************/

.tbm-advice-list{

    margin:0;

    padding-left:22px;

}

.tbm-advice-list li{

    margin-bottom:8px;

}

/**************************************************************************
 * Animatie
 **************************************************************************/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.tbm-detail{

    animation:fadeUp .35s ease;

}

/**************************************************************************
 * TreinBusMetro v3.0
 * storingen.css
 * Deel 4 - Afwerking
 **************************************************************************/

/**************************************************************************
 * Donkere modus
 **************************************************************************/

@media (prefers-color-scheme: dark){

:root{

    --tbm-bg:#10151d;
    --tbm-card:#1b2430;
    --tbm-border:#2b3645;

    --tbm-text:#f1f5f9;
    --tbm-text-light:#b8c2cc;

}

body{

    background:var(--tbm-bg);
    color:var(--tbm-text);

}

.tbm-card,
.tbm-box,
.tbm-section,
.tbm-detail-header,
.storing-card{

    background:var(--tbm-card);

}

.search-bar input{

    background:var(--tbm-card);
    color:var(--tbm-text);
    border-color:var(--tbm-border);

}

.filter-bar button{

    background:var(--tbm-card);
    color:var(--tbm-text);

}

}

/**************************************************************************
 * Scrollbar
 **************************************************************************/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:#90a4ae;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#607d8b;

}

/**************************************************************************
 * Afbeeldingen
 **************************************************************************/

img{

    max-width:100%;

    border-radius:14px;

}

/**************************************************************************
 * Links
 **************************************************************************/

a{

    color:var(--tbm-blue);

    text-decoration:none;

}

a:hover{

    text-decoration:underline;

}

/**************************************************************************
 * Tabellen
 **************************************************************************/

table{

    width:100%;

    border-collapse:collapse;

}

table th{

    background:var(--tbm-blue);

    color:#fff;

    padding:14px;

}

table td{

    padding:14px;

    border-bottom:1px solid var(--tbm-border);

}

/**************************************************************************
 * Selectie
 **************************************************************************/

::selection{

    background:var(--tbm-blue);

    color:#fff;

}

/**************************************************************************
 * Focus
 **************************************************************************/

*:focus{

    outline:none;

    box-shadow:

        0 0 0 3px

        rgba(21,101,192,.20);

}

/**************************************************************************
 * Print
 **************************************************************************/

@media print{

body{

    background:#fff;

}

.btn,
.search-bar,
.filter-bar{

    display:none;

}

}

/**************************************************************************
 * Einde CSS
 **************************************************************************/

/**************************************************************************
 * Stations
 **************************************************************************/

.station-list{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.station-list a{

    min-width:170px;

    text-align:center;

    transition:.25s;

}

.station-list a:hover{

    transform:translateY(-3px);

}

/**************************************************************************
 * Beschrijving
 **************************************************************************/

.tbm-body{

    line-height:1.8;

    font-size:16px;

    color:var(--tbm-text);

}

.tbm-body p{

    margin-bottom:15px;

}

.tbm-body strong{

    color:var(--tbm-dark-blue);

}

.tbm-body ul{

    padding-left:22px;

}

.tbm-body li{

    margin-bottom:8px;

}

.disruption-card{

    border:none;
    border-radius:14px;

    transition:.2s;

}

.disruption-card:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.15);

}

.disruption-card .badge{

    font-size:.85rem;

}

.disruption-card h4{

    font-size:1.2rem;

    font-weight:600;

}

.tbm-dashboard{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:15px;

}

.tbm-box{

    background:#fff;

    border-radius:14px;

    padding:20px;

    text-align:center;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.tbm-number{

    font-size:34px;

    font-weight:bold;

    color:#0d6efd;

}