.live-stats{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;

}

.live-card{

    background:#fff;

    border:1px solid #ddd;

    border-radius:8px;

    padding:20px;

    text-align:center;

}

.live-value{

    font-size:34px;

    font-weight:bold;

}

.live-label{

    margin-top:8px;

    color:#666;

}

#live-map{

    height:650px;

    border:1px solid #ccc;

    border-radius:8px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

    background:#fafafa;

}

#live-log{

    border:1px solid #ccc;

    border-radius:8px;

    min-height:200px;

    padding:15px;

}

#live-map{

    width:100%;

    height:650px;

    border-radius:10px;

    overflow:hidden;

    margin:25px 0;

    border:1px solid #ddd;

}

.qso-label{

    background:white;

    border:1px solid #999;

    border-radius:4px;

    padding:2px 5px;

    font-size:11px;

    font-weight:600;

    color:#000;

    white-space:nowrap;

    box-shadow:0 1px 3px rgba(0,0,0,.35);

}

.home-label{

    background:#b00000;

    color:#fff;

    border-radius:5px;

    padding:3px 8px;

    font-weight:bold;

    font-size:13px;

    white-space:nowrap;

    box-shadow:0 2px 6px rgba(0,0,0,.35);

}

.live-toolbar{

    display:flex;

    flex-wrap:wrap;

    gap:10px 16px;

    margin-bottom:12px;

}

.live-toolbar label{

    display:inline-flex;

    align-items:center;

    gap:5px;

    white-space:nowrap;

    cursor:pointer;

}

.live-toolbar input[type="checkbox"]{

    margin:0;

    flex-shrink:0;

}

/*
|--------------------------------------------------------------------------
| Onderste gedeelte live pagina
|--------------------------------------------------------------------------
*/

.live-bottom {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 20px;

    margin-top: 30px;

}

.live-column-left {

    min-width: 0;

}

.live-column-right {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.live-column-right .live-card {

    text-align: left;

}

.live-column-right h2 {

    margin-top: 0;

    margin-bottom: 15px;

}

/*
|--------------------------------------------------------------------------
| Mobiel
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .live-bottom {

        grid-template-columns: 1fr;

    }

}

/*
|--------------------------------------------------------------------------
| Laatste verbindingen
|--------------------------------------------------------------------------
*/

.live-qso {

    display: grid;

    grid-template-columns:
        60px
        170px
        70px
        70px
        1fr
        120px;

    gap: 10px;

    align-items: center;

    padding: 6px 0;

    border-bottom: 1px solid #eee;

}

.live-qso:last-child {

    border-bottom: none;

}

.live-time {

    font-weight: bold;

}

.live-call {

    font-weight: bold;

}

.live-band,
.live-mode {

    text-align: center;

}

.live-distance {

    text-align: right;

    white-space: nowrap;

}

/*
|--------------------------------------------------------------------------
| Mobiel
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .live-qso {

        grid-template-columns:
            70px
            1fr;

        gap: 4px 10px;

    }

    .live-band,
    .live-mode,
    .live-country,
    .live-distance {

        grid-column: 2;

    }

}

/*
|--------------------------------------------------------------------------
| Operator ↔ Werkstation
|--------------------------------------------------------------------------
*/

.live-station {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 6px 0;

}

.live-station-marker {

    width: 0;

    height: 0;

    border-left: 7px solid transparent;

    border-right: 7px solid transparent;

    border-bottom: 14px solid #999;

    flex-shrink: 0;

}

.live-station-name {

    font-weight: bold;

}

.live-station-operator {

    color: #444;

}

/* ==========================================================
   Live pagina: fullscreen
   ========================================================== */

.live-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.live-titlebar h1 {
    margin: 0;
}

.live-fullscreen:fullscreen {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    overflow: auto;
    padding: 15px;
    background: #fff;
}

.live-fullscreen:fullscreen .page-content {
    max-width: none;
    margin: 0;
}

.live-fullscreen:fullscreen #live-map {
    height: calc(100vh - 430px);
    min-height: 400px;
}

@media (max-width: 900px) {
    .live-titlebar {
        align-items: flex-start;
    }
}


/* Alleen tijdens fullscreen */

#liveFullscreen:fullscreen {
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
}

#liveFullscreen:fullscreen .page-content {
    height: calc(100% - 70px);
    display: flex;
    flex-direction: column;
}

#liveFullscreen:fullscreen .live-bottom {
    display: none;
}

#liveFullscreen:fullscreen #live-map {
    flex: 1;
    min-height: 0;
    height: auto;
    margin: 5px 0 0 0;
}

/* Compacte statistieken in fullscreen */
#liveFullscreen:fullscreen .live-stats {
    gap: 12px;
    margin-bottom: 15px;
}

#liveFullscreen:fullscreen .live-card {
    padding: 10px 15px;
}

/* Blauwe header alleen in fullscreen */
.live-fullscreen-header {
    display: none;
}

#liveFullscreen:fullscreen .live-fullscreen-header {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 8px 15px;
    box-sizing: border-box;
/*    background: #003b6f; */
    background: #084f91;
    color: #fff;
}

#liveFullscreen:fullscreen .live-fullscreen-header img {
    width: auto;
    height: 50px;
    max-width: none;
}

#fullscreenToggle {
    background: #084f91;
    color: #fff;
    border-color: #084f91;
}

#fullscreenToggle:hover {
    background: #0b63b6;
    color: #fff;
    border-color: #0b63b6;
}