/* ==========================================
   Header
   ========================================== */

.site-header{

    background:#003b6f;

    color:#fff;

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

.header-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:15px 20px;
}

.header-brand h1{

    margin:0;

    font-size:1.7rem;

    color:#fff;
}

.header-user{

    margin-left:auto;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:2px;

    font-size:.9rem;
}

.header-name{

    font-weight:600;

    white-space:nowrap;
}

.header-station{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:6px;

    white-space:nowrap;
}

.station-triangle{

    width:0;

    height:0;

    border-left:7px solid transparent;

    border-right:7px solid transparent;

    border-bottom:14px solid var(--station-color);
}

.station-offline{

    color:#ddd;
}

.main-nav{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

    padding:12px 20px;

    background:#f5f5f5;

    border-top:1px solid rgba(255,255,255,.15);
}

.main-nav a{

    text-decoration:none;

    color:#333;

    padding:8px 14px;

    border-radius:6px;

    transition:.2s;
}

.main-nav a:hover{

    background:#e4e4e4;
}

.logout-link{

    margin-left:auto;

    color:#b00020 !important;

    font-weight:600;
}

.menu-toggle{

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:1.8rem;

    cursor:pointer;
}

@media (max-width:768px){

    .header-top{

        display:grid;
        grid-template-columns:1fr auto;
        grid-template-areas:
            "brand menu"
            "user user";
        gap:10px;
    }

    .header-brand{
        grid-area:brand;
    }

    .header-user{
        grid-area:user;
        text-align:left;
        margin-left:0;
    }

    .menu-toggle{
        grid-area:menu;
        display:block;
        align-self:start;
    }

    .main-nav{

        display:none;

        flex-direction:column;

        padding:10px 20px;
    }

    .main-nav.open{

        display:flex;
    }

    .logout-link{

        margin-left:0;
    }

}

.nav-spacer{

    flex:1;
}

.account-menu{

    position:relative;
}

.account-button{

    background:none;

    border:none;

    cursor:pointer;

    font:inherit;

    color:#333;

    padding:8px 12px;

    border-radius:6px;
}

.account-button:hover{

    background:#e4e4e4;
}

.account-dropdown{

    position:absolute;

    left:50%;
    top:calc(100% + 8px);

    min-width:220px;

    background:white;

    border:1px solid #ddd;

    border-radius:8px;

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

    overflow:hidden;

    z-index:1000;

    color:#333;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translate(-50%, -8px);

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility 0s linear .18s;
}

.account-dropdown.open{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translate(-50%, 0);

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility 0s;

}

.account-dropdown a{

    display:block;

    padding:12px 15px;

    text-decoration:none;

    color:#333;
}

.account-dropdown a:hover{
    background:#f3f3f3;
}

.account-dropdown a,
.account-dropdown p,
.account-dropdown span {
    color: inherit;
} 

.account-station{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 15px;

    border-bottom:1px solid #eee;

    font-weight:600;
}

.account-button.open{

    background:#dfe5eb;
}

.user-icon{
    display:inline-flex;
    align-items:center;
    vertical-align:middle;
    margin-right:4px;
}

.user-icon svg{
    width:18px;
    height:18px;
    fill:var(--user-color);
    filter:drop-shadow(1px 1px 1px rgba(0,0,0,.7));
}

.main-nav a.active{

    background:#0b63b6;

    color:#fff;

    font-weight:600;
}

.modal-overlay{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    justify-content:center;

    align-items:center;

    z-index:9999;
}

.modal-overlay.open{

    display:flex;
}

.modal{

    background:#fff;

    border-radius:10px;

    padding:25px;

    max-width:420px;

    width:90%;

    box-shadow:0 15px 40px rgba(0,0,0,.3);
}

.modal h2{

    margin-top:0;
}

.modal-station{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:bold;
}

.modal-buttons{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:20px;
}

.modal-buttons button,
.button-danger{

    padding:10px 18px;

    border-radius:6px;

    border:none;

    text-decoration:none;

    cursor:pointer;
}

.button-danger{

    background:#c62828;

    color:fff;
}
.modal {
    background: #fff;
    color: #333;
}

.modal a.button-danger{

    color:#fff;

}
.modal h2,
.modal p {
    color: inherit;
}