:root{
    --svph-header-height:138px;
    --navy:#103b67;
    --navy2:#205d98;
    --gold:#f0b313;
    --bg:#f3f5f7;
    --white:#ffffff;
    --text:#152943;
    --border:#dce2e8;
    --muted:#66758a;
    --red:#c81e1e;
    --green:#2e7d4f;
    --grey:#e4e8ed;
}
*{box-sizing:border-box}
html,body{
    margin:0;
    min-height:100%;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--text);
}

/* HEADER */
body .site-header{
    background:#103b67 !important;
    color:#ffffff !important;
    border-bottom:5px solid #f0b313 !important;
    min-height:155px;
    padding:18px 26px;
    display:flex;
    align-items:flex-start;
    gap:24px;

    position:sticky;
    top:0;
    z-index:1000;
}
.site-header img{
    width:105px;
    height:105px;
    object-fit:contain;
}
.site-title h1{
    margin:8px 0 6px;
    font-size:34px;
    color:#ffffff !important;
}
.site-title div{
    font-size:22px;
    font-weight:bold;
    color:#f0b313 !important;
}

/* LAYOUT + MENU */
.app{
    display:flex;
    min-height:calc(100vh - 160px);
}
body .sidebar{
    width:270px;
    background:#103b67 !important;
    color:#ffffff !important;
    padding:27px 16px;
    flex:0 0 auto;

    /* V55: linkermenu blijft zichtbaar terwijl de inhoud rechts scrollt */
    position:sticky;
    top:var(--svph-header-height, 138px);
    align-self:flex-start;
    height:calc(100vh - var(--svph-header-height, 138px));
    overflow-y:auto;
    overscroll-behavior:contain;
}
.sidebar-user{
    color:#d9e5f1 !important;
    padding:0 16px 20px;
    line-height:1.45;
}
body .sidebar a{
    display:block;
    color:#ffffff !important;
    background:transparent !important;
    font-weight:bold;
    text-decoration:none;
    padding:14px 16px;
    margin-bottom:5px;
    border-radius:9px;
    font-size:17px;
}
body .sidebar a:hover,
body .sidebar a.active{
    background:#205d98 !important;
    color:#f0b313 !important;
}

/* CONTENT */
.content{
    flex:1;
    padding:38px 28px 60px;
    min-width:0;
}
.page-title{font-size:30px;margin:0 0 24px}
.card{
    background:#ffffff;
    border-radius:13px;
    padding:22px;
    box-shadow:0 3px 14px rgba(0,0,0,.06);
    margin-bottom:24px;
}
.member-grid{
    display:grid;
    grid-template-columns:minmax(320px,.9fr) minmax(620px,1.6fr);
    gap:16px;
    align-items:start;
}
h2,h3{margin-top:0}
label{display:block;font-weight:bold;margin-bottom:14px}
input,select{
    width:100%;
    padding:11px 12px;
    border:1px solid #cbd5e0;
    border-radius:7px;
    margin-top:5px;
    font:inherit;
    background:#ffffff;
    color:#152943;
}
.checkbox-line{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin:10px 0 18px;
}
.checkbox-line label{
    font-weight:normal;
    margin:0;
    display:flex;
    align-items:center;
    gap:7px;
}
.checkbox-line input{width:auto;margin:0}

/* BUTTONS - explicit backgrounds so buttons can never become invisible */
body button,
body .btn{
    border:0 !important;
    border-radius:8px;
    padding:10px 15px;
    font:inherit;
    font-weight:bold;
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
    background:#e4e8ed !important;
    color:#152943 !important;
}
body button.primary,
body .btn.primary{
    background:#103b67 !important;
    color:#ffffff !important;
}
body button.warning,
body .btn.warning{
    background:#e4e8ed !important;
    color:#152943 !important;
}
body button.danger,
body .btn.danger{
    background:#c81e1e !important;
    color:#ffffff !important;
}
body button.success-btn,
body .btn.success-btn{
    background:#2e7d4f !important;
    color:#ffffff !important;
}
body button:hover,
body .btn:hover{filter:brightness(.94)}

.notice{
    padding:12px 14px;
    border-radius:8px;
    margin-bottom:18px;
    background:#fff6cf;
}
.notice.success{background:#e8f5ed}
.notice.error{background:#fde8e8}

table{
    width:100%;
    border-collapse:collapse;
    background:#ffffff;
}
th,td{
    padding:12px 11px;
    border-bottom:1px solid #e2e7ec;
    text-align:left;
    vertical-align:middle;
}
th{background:#eef1f4}
.actions{display:flex;gap:7px;flex-wrap:wrap}
.status-active{color:#2e7d4f;font-weight:bold}
.status-inactive{color:#c81e1e;font-weight:bold}
.username{font-size:13px;color:#66758a;margin-top:2px}
.rights{font-size:13px;color:#66758a;line-height:1.35}
.inline{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sessions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.lane{border:1px solid #dce2e8;border-radius:8px;padding:11px;background:#fafbfc}
.lane strong{display:block;margin-bottom:6px}
.free{color:#2e7d4f;font-weight:bold}
.busy{color:#6b7280;font-weight:bold}
.small{font-size:14px;color:#66758a}
.login-body{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:25px;
}
.login-card{
    width:100%;
    max-width:520px;
    background:#ffffff;
    border-radius:14px;
    padding:28px;
    box-shadow:0 6px 22px rgba(0,0,0,.10);
    border-top:6px solid #f0b313;
}
.login-card h1{color:#103b67}
.secondary{margin-left:8px}
.edit-panel{border:2px solid #f0b313}

/* FOOTER */
body .site-footer{
    background:#103b67 !important;
    color:#f0b313 !important;
    border-top:5px solid #f0b313 !important;
    padding:16px 20px;
    text-align:center;
    font-size:14px;
    clear:both;
}

@media(max-width:1100px){
    .member-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
    .site-header{min-height:auto;padding:16px}
    .site-header img{width:78px;height:78px}
    .site-title h1{font-size:25px}
    .site-title div{font-size:18px}
    .app{display:block}
    body .sidebar{
        width:100%;
        display:flex;
        flex-wrap:wrap;
        gap:4px;
        padding:12px;

        /* Op mobiel geen vast zijmenu */
        position:static;
        top:auto;
        height:auto;
        overflow:visible;
    }
    .sidebar-user{width:100%;padding:4px 8px 8px}
    .sidebar a{margin:0;padding:10px 12px}
    .content{padding:24px 16px}
    .sessions{grid-template-columns:1fr}
    .inline{grid-template-columns:1fr}
}


/* ===== DUEL INSCHRIJVEN V9: horizontale sessies ===== */
.shooter-select-card{max-width:720px}
.training-block{margin-bottom:32px}
.duel-session{
    background:#ffffff;
    border:1px solid #d7e0e9;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 3px 14px rgba(0,0,0,.06);
    margin-bottom:20px;
}
.duel-session-header{
    background:#103b67 !important;
    color:#ffffff !important;
    border-bottom:5px solid #f0b313 !important;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.duel-session-title{
    color:#ffffff !important;
    font-size:20px;
    font-weight:700;
}
.duel-session-time{
    color:#f0b313 !important;
    font-size:20px;
    font-weight:700;
    white-space:nowrap;
}
.duel-lanes-scroll{
    overflow-x:auto;
    padding:16px;
    -webkit-overflow-scrolling:touch;
}
.duel-lanes-row{
    display:grid;
    grid-template-columns:repeat(7,minmax(125px,1fr));
    gap:10px;
    min-width:930px;
}
.duel-lane{
    min-height:135px;
    border:1px solid #dce2e8;
    border-radius:9px;
    background:#f9fbfd;
    padding:12px 10px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:stretch;
}
.duel-lane-title{
    font-size:17px;
    font-weight:700;
    color:#103b67;
    margin-bottom:10px;
}
.duel-lane-free{
    color:#2e7d4f;
    font-weight:700;
    margin:5px 0 12px;
}
.duel-lane-busy{
    color:#152943;
    font-weight:700;
    background:#eef1f4;
    border-radius:7px;
    padding:10px 6px;
    line-height:1.3;
    word-break:break-word;
}
.registration-form{margin-top:auto}
.duel-register-button{
    width:100%;
    padding:9px 6px !important;
    font-size:14px !important;
}
@media(max-width:820px){
    .duel-session-header{
        align-items:flex-start;
        flex-direction:column;
        gap:3px;
    }
    .duel-session-title,.duel-session-time{font-size:18px}
    .duel-lanes-scroll{padding:12px}
}


/* ===== DUEL V10: beheer van bestaande inschrijvingen ===== */
.registration-manage{
    margin-top:10px;
    text-align:left;
    border-top:1px solid #d8e0e8;
    padding-top:8px;
}
.registration-manage summary{
    cursor:pointer;
    color:#103b67;
    font-weight:700;
    text-align:center;
    font-size:14px;
}
.manage-form{
    margin-top:10px;
}
.manage-form label{
    font-size:12px;
    margin-bottom:8px;
}
.manage-form select{
    padding:7px 6px;
    font-size:12px;
}
.small-action{
    width:100%;
    padding:8px 6px !important;
    font-size:12px !important;
    margin-top:4px;
}
.delete-registration-form{
    margin-top:7px;
}


/* ===== DUEL V15: historie ===== */
.history-intro{
    margin:0 0 20px;
    color:#475569;
}
.history-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.history-training{
    border:1px solid #d7e0e9;
    border-radius:12px;
    background:#ffffff;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.history-date-header{
    list-style:none;
    cursor:pointer;
    background:#103b67;
    border-bottom:4px solid #f0b313;
    color:#ffffff;
    padding:15px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
}
.history-date-header::-webkit-details-marker{
    display:none;
}
.history-date-header::after{
    content:"+";
    color:#f0b313;
    font-size:26px;
    font-weight:700;
    line-height:1;
}
.history-training[open] > .history-date-header::after{
    content:"−";
}
.history-date{
    font-size:19px;
    font-weight:700;
}
.history-count{
    margin-left:auto;
    color:#f0b313;
    font-size:14px;
    font-weight:700;
}
.history-training-content{
    padding:16px;
}
.history-session{
    margin-bottom:16px;
}
.history-session:last-child{
    margin-bottom:0;
}
.history-lane{
    min-height:95px;
}
.history-empty{
    color:#7b8794;
    font-size:14px;
    font-style:italic;
    padding:8px 4px;
}
@media(max-width:640px){
    .history-date-header{
        padding:13px 14px;
    }
    .history-date{
        font-size:17px;
    }
    .history-count{
        font-size:12px;
    }
    .history-training-content{
        padding:10px;
    }
}


/* ===== DUEL V27: rustigere en duidelijkere sessieblokken ===== */
.training-block{
    margin-bottom:38px;
}

.duel-session{
    position:relative;
    background:#ffffff;
    border:2px solid #103b67;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(16,59,103,.08);
    margin-bottom:28px;
}

.duel-session::before{
    content:"";
    display:block;
    height:8px;
    background:#103b67;
}

.duel-session-header{
    background:#eef3f8 !important;
    color:#103b67 !important;
    border-bottom:2px solid #d7e0e9 !important;
    padding:16px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.duel-session-title{
    color:#103b67 !important;
    font-size:21px;
    font-weight:800;
    letter-spacing:.2px;
}

.duel-session-time{
    color:#103b67 !important;
    background:#ffffff;
    border:1px solid #cfd8e3;
    border-radius:999px;
    padding:7px 14px;
    font-size:16px;
    font-weight:800;
    white-space:nowrap;
}

.duel-lanes-scroll{
    overflow-x:auto;
    padding:20px;
    background:#f8fafc;
    -webkit-overflow-scrolling:touch;
}

.duel-lanes-row{
    display:grid;
    grid-template-columns:repeat(7,minmax(128px,1fr));
    gap:12px;
    min-width:945px;
}

.duel-lane{
    min-height:145px;
    border:1px solid #dce2e8;
    border-radius:10px;
    background:#ffffff;
    padding:14px 11px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    box-shadow:0 2px 5px rgba(0,0,0,.03);
}

.duel-lane-title{
    font-size:17px;
    font-weight:800;
    color:#103b67;
    margin-bottom:10px;
    padding-bottom:8px;
    border-bottom:1px solid #e4eaf0;
}

.duel-lane-free{
    color:#2e7d4f;
    font-weight:800;
    margin:8px 0 12px;
}

.duel-lane-busy{
    color:#152943;
    font-weight:700;
    background:#eef3f8;
    border:1px solid #d8e2ec;
    border-radius:8px;
    padding:10px 7px;
    line-height:1.35;
    word-break:break-word;
}

.history-empty{
    color:#7b8794;
    font-size:14px;
    font-style:italic;
    background:#f3f5f7;
    border-radius:7px;
    padding:9px 5px;
    margin-top:5px;
}

.registration-manage{
    margin-top:10px;
    text-align:left;
    border-top:1px solid #d8e0e8;
    padding-top:9px;
}

.duel-register-button,
.small-action{
    margin-top:auto;
}

@media(max-width:820px){
    .duel-session{
        margin-bottom:22px;
    }
    .duel-session-header{
        align-items:flex-start;
        flex-direction:column;
        gap:6px;
        padding:14px 16px;
    }
    .duel-session-title{
        font-size:19px;
    }
    .duel-session-time{
        font-size:15px;
        padding:6px 12px;
    }
    .duel-lanes-scroll{
        padding:14px;
    }
}


/* ===== DUEL V39: sponsors per baan ===== */
.duel-lane{
    position:relative;
}

.duel-lane-sponsor{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    border:1px solid #d7e0e9;
    border-radius:8px;
    padding:6px;
    margin:0 0 10px;
    min-height:62px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}

.duel-lane-sponsor img{
    display:block;
    width:100%;
    max-width:100%;
    height:50px;
    object-fit:contain;
}

.duel-lane-busy,
.duel-lane-free{
    position:relative;
    z-index:1;
}

@media(max-width:820px){
    .duel-lane-sponsor{
        min-height:56px;
        margin-bottom:8px;
    }
    .duel-lane-sponsor img{
        height:44px;
    }
}


/* ===== DUEL V39A: sponsorlogo's compact houden ===== */
.duel-lane .duel-lane-sponsor{
    width:100% !important;
    min-height:0 !important;
    height:68px !important;
    max-height:68px !important;
    padding:5px 6px !important;
    margin:0 0 10px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.duel-lane .duel-lane-sponsor img{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:56px !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:0 auto !important;
}

@media(max-width:820px){
    .duel-lane .duel-lane-sponsor{
        height:62px !important;
        max-height:62px !important;
    }

    .duel-lane .duel-lane-sponsor img{
        max-height:50px !important;
    }
}


/* V55A: vaste header + vast menu */
body > header,
body .site-header,
body .header {
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

@media(max-width:820px){
    :root{--svph-header-height:0px;}
    body .sidebar{
        position:static !important;
        height:auto !important;
        overflow:visible !important;
    }
}