/* ===============================
WEDSTRIJDBLAD HEADER
================================ */
.wedstrijdblad-title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 28px;
}

.match-header{
    background: linear-gradient(135deg, #2E4493, #359227) !important;
    color:#fff !important;
    padding:20px;
    border-radius:12px;
    margin-bottom:20px;
    text-align:center;
}

.match-title{
    font-size:26px;
    font-weight:800;
    margin-bottom:10px;
    color:#fff !important;
}

.match-title .vs{
    margin:0 10px;
    font-size:16px;
    opacity:0.8;
}

.match-info{
    display:flex;
    justify-content:center;
    gap:20px;
    font-size:14px;
    font-weight:600;
    color:#fff !important;
}

.info-item{
    background:rgba(255,255,255,0.15);
    padding:6px 12px;
    border-radius:20px;
}

#afsluiten-container{
    margin-top: 20px;
    margin-bottom: 40px;
}

#afsluiten-container button{
    margin-right: 10px;
}

#match-finalized{
    margin: 35px 0; /* boven + onder */
    padding: 12px;
    background: #d1e7dd;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
}


/* ===============================
STATUS badge basis
================================ */
#manches-table td.match-status{
display:flex;
align-items:center;
justify-content:center;
text-align:center;
min-height:40px;
width:130px;
border-radius:20px;
font-weight:600;
font-size:14px;
padding:6px 10px;
position:relative;
z-index:5;
}

/* ===============================
GELE ACTIEVE RIJ (zonder status)
================================ */
#manches-table tbody tr.active-manche td:not(.match-status){
background:#fff3cd !important;
}

/* ===============================
GEPLAND
================================ */
.match-status.status-planned{
background:#2196F3 !important;
color:#fff !important;
}

/* ===============================
ACTIEF
================================ */
.match-status.status-active{
background:#FFC107 !important;
color:#000 !important;
}

/* ===============================
BELLE
================================ */
.match-status.status-belle{
background:#FF9800 !important;
color:#fff !important;
border:2px solid #ff9800;
box-shadow:0 0 10px rgba(255,152,0,0.8);
animation:belleBlink 1s infinite;
}

/* ===============================
AFGELOPEN
================================ */
.match-status.status-done{
background:#28A745 !important;
color:#fff !important;
}

/* ===============================
BELLE animatie
================================ */
@keyframes belleBlink{
0%{ opacity:1; }
50%{ opacity:0.6; }
100%{ opacity:1; }
}

/* ===============================
BLL = RODE KNIPPER EFFECT (PRO)
================================ */
#manches-table select.belle-warning{
border:2px solid red !important;

/* 🔥 glow effect */
box-shadow: 0 0 8px red;

/* 🔥 animatie */
animation: bellePulse 0.8s infinite;
}

/* 🔥 animatie */
@keyframes bellePulse{
0%{
box-shadow: 0 0 8px red;
}
50%{
box-shadow: 0 0 2px transparent;
}
100%{
box-shadow: 0 0 8px red;
}
}

/* ===============================
TABEL
================================ */
#manches-table{
width:100%;
border-collapse:separate;
border-spacing:0 6px;
}

#manches-table tbody tr{
background:#f7f7f7;
border-radius:8px;
}

#manches-table tbody tr:hover td{
background:#f0f6ff;
}

/* ===============================
ACTIEVE MANCHE
================================ */
#manches-table tbody tr.active-manche{
position:relative;
z-index:2;
}

#manches-table tbody tr.active-manche::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-3px;
height:6px;
background:#ffc107;
border-radius:4px;
box-shadow:0 0 12px rgba(255,193,7,0.8);
}

/* ===============================
CELLEN
================================ */
#manches-table th,
#manches-table td{
text-align:center;
vertical-align:middle;
}

#manches-table td:nth-child(2),
#manches-table td:nth-child(3){
text-align:left;
padding-left:12px;
}

/* ===============================
SELECTS
================================ */
#manches-table select{
height:34px;
border-radius:6px;
border:1px solid #ccc;
font-weight:600;
text-align:center;
}

#manches-table .form-select{
height:34px;
padding:2px 30px 2px 8px;
font-weight:700;
font-size:14px;
line-height:26px;
text-align:center;
color:#000;
}

/* ===============================
Uitslag
================================ */
.manche-result{
font-weight:700;
font-size:16px;
letter-spacing:1px;
}

/* ===============================
Tussenstand
================================ */
.tussenstand{
text-align:right;
font-size:20px;
font-weight:800;
margin-top:20px;
margin-bottom:50px;
color:#222;
}

/* ===============================
KNOP
================================ */
.wissel-btn{
display:inline-block;
margin-right:5px;
margin-bottom:4px;
}

.wissel-container{
display:flex;
gap:5px;
}

/* standaard verbergen */
.wissel-container{
display:none;
}

/* enkel tonen bij actieve manche */
.manche-row.active-manche .wissel-container{
display:flex;
gap:5px;
}

/* manche met wissel */
.manche-row.has-wissel{
opacity:0.7;
}

#match-finalized {
    background: #e6f4ea;
    border: 1px solid #28a745;
    padding: 12px;
    border-radius: 6px;
    font-size: 16px;
}

select:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}

.status-planned {
    background:#2d8fdd;
    color:#fff;
    padding:6px 12px;
    border-radius:20px;
}

.status-active {
    background:#f0ad00;
    color:#000;
    padding:6px 12px;
    border-radius:20px;
}

.status-finished {
    background:#28a745;
    color:#fff;
    padding:6px 12px;
    border-radius:20px;
}

/* alles blokkeren na afsluiten */
.lock-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(255,255,255,0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:bold;
}

/* Reserve Live */
#reserves-block {
    margin-bottom: 40px;
}

.status-belle {
    background: orange;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: bold;
}