/* INFIGHT DARTS MASTER - Phase 7.13 Professional Design */
:root {
    --bg:#080a0d; --panel:rgba(15,19,26,.96); --panel2:#0d1117;
    --border:#1f293d; --border2:#2b3548; --red:#ff073a; --green:#39ff14;
    --blue:#00bfff; --gold:#facc15; --text:#e2e8f0; --muted:#94a3b8;
    --cream:#f5efe6;
}
*{box-sizing:border-box}
body{
    margin:0; font-family:'Rajdhani',Arial,sans-serif; color:var(--text);
    background-color:var(--bg);
    background-image:radial-gradient(circle at 50% 30%,rgba(18,24,32,.96) 0%,rgba(5,6,8,.99) 100%),url("assets/header_logo.jpg");
    background-repeat:no-repeat; background-position:center; background-size:cover;
    user-select:none; min-height:100vh; overflow-x:hidden;
}
.digital-font{font-family:'Orbitron',sans-serif}.graffiti-font{font-family:'Permanent Marker',cursive}
.hidden{display:none!important}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#090b0e}::-webkit-scrollbar-thumb{background:#2b3548;border-radius:3px}

/* Header aus der Turnier-HTML */
#header{
    position:fixed; top:0; left:0; right:0; height:60px; z-index:1000; overflow:hidden;
    background:var(--cream); border-bottom:1px solid var(--red);
    box-shadow:0 5px 15px rgba(255,7,58,.22);
}
.headerLogoFull{width:100%;height:100%;object-fit:contain;padding:4px 0;display:block;position:relative;z-index:20}
#headerFallback{position:absolute;inset:0;display:none;align-items:center;justify-content:space-between;padding:0 40px;background:linear-gradient(90deg,#0c1017,#141d26,#0c1017);z-index:10;border-bottom:2px solid var(--red)}
#headerFallback .graffiti-font{color:var(--red);font-size:22px} #headerFallback .digital-font{color:var(--green);font-size:18px;font-weight:900;letter-spacing:2px}
.headerFadeLeft,.headerFadeRight{position:absolute;top:0;bottom:0;width:130px;pointer-events:none;z-index:30}
.headerFadeLeft{left:0;background:linear-gradient(90deg,var(--bg),transparent)} .headerFadeRight{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
#headerUser{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:40;color:#0d1117;background:rgba(245,239,230,.82);border:1px solid rgba(255,7,58,.4);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:900}

/* Grundelemente */
.bg{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:80px 20px 20px;background-image:radial-gradient(circle at 50% 30%,rgba(18,24,32,.96) 0%,rgba(5,6,8,.99) 100%),url("assets/header_logo.jpg");background-size:cover;background-position:center}
.card{width:380px;padding:30px;background:rgba(15,19,26,.95);border:2px solid var(--border);border-radius:12px;text-align:center;box-shadow:0 0 28px rgba(57,255,20,.12),0 0 28px rgba(255,7,58,.18)}
.logo{width:180px;margin-bottom:12px;filter:drop-shadow(0 0 10px rgba(255,7,58,.18))}
h1,h2{font-family:'Orbitron',sans-serif;letter-spacing:1.5px;font-weight:900} h3{letter-spacing:1.2px;font-weight:900;color:var(--green)}
.sub{color:var(--muted);margin-bottom:20px;text-transform:uppercase;font-weight:700}
input,select,textarea{width:90%;padding:11px 12px;margin:8px 0;border:1px solid var(--border2);border-radius:6px;background:rgba(0,0,0,.58);color:white;outline:none;font-family:'Rajdhani',sans-serif;font-weight:700}
input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 12px rgba(57,255,20,.18)}
button{padding:9px 14px;margin-top:10px;background:var(--green);border:1px solid rgba(57,255,20,.55);border-radius:6px;color:black;font-weight:900;cursor:pointer;font-family:'Rajdhani',sans-serif;letter-spacing:.7px;text-transform:uppercase;transition:all .15s ease;box-shadow:0 0 10px rgba(57,255,20,.22)}
button:hover{transform:translateY(-1px);opacity:.92;box-shadow:0 0 16px rgba(57,255,20,.38)}
button.secondary{background:#161d26;color:var(--text);border-color:var(--border2);box-shadow:none}
button.danger{background:rgba(255,7,58,.86);color:white;border-color:rgba(255,7,58,.65);box-shadow:0 0 12px rgba(255,7,58,.22)}
button.done,button:disabled{background:#334155;color:#94a3b8;cursor:not-allowed;opacity:.7;border-color:#475569;box-shadow:none}
#error{color:var(--red);margin-top:10px;font-weight:800}

/* Layout */
.screen{padding:78px 18px 20px;min-height:100vh}.dashboard{max-width:1100px;margin:0 auto;text-align:center}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.tile{background:rgba(15,19,26,.95);padding:32px;border-radius:10px;cursor:pointer;border:2px solid var(--border);font-size:24px;font-weight:900;letter-spacing:1px;text-transform:uppercase;box-shadow:0 0 16px rgba(0,0,0,.35)}
.tile:hover{border-color:var(--green);box-shadow:0 0 15px rgba(57,255,20,.38),inset 0 0 10px rgba(57,255,20,.16);color:var(--green)}
.tile.disabled{opacity:.35;cursor:not-allowed}
.infoBox,.panel{margin-top:20px;padding:18px;background:rgba(15,19,26,.95);border:2px solid var(--border);border-radius:10px;box-shadow:0 0 20px rgba(57,255,20,.07)}
.pageTitle{display:flex;align-items:center;justify-content:space-between;gap:10px}.pageTitle h2{color:var(--green);text-shadow:0 0 5px rgba(57,255,20,.4)}
.layoutTwo{display:grid;grid-template-columns:1fr 1fr;gap:20px}.singlePanel{max-width:900px;margin-left:auto;margin-right:auto}
label{display:block;margin-top:10px;color:#cbd5e1;font-weight:900;text-transform:uppercase;font-size:13px}

/* Listen/Karten */
.playerRow{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:10px;background:rgba(0,0,0,.35);border:1px solid var(--border2);border-radius:8px}
.playerRuleRow{align-items:flex-start}.playerButtons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.leftText{text-align:left}
.legend{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-bottom:15px;color:#bbb}.dot{display:inline-block;width:14px;height:14px;border-radius:50%}
.dot.open{background:#777}.dot.appointment{background:#facc15}.dot.confirmed{background:#38bdf8}.dot.running{background:#fb923c}.dot.resultpending{background:#a855f7}.dot.completed{background:#22c55e}
.matchCard{margin:10px 0;padding:14px;border-radius:10px;border:2px solid var(--border);background:rgba(13,17,23,.96)}
.status-OPEN{border-color:#777}.status-APPOINTMENT_PENDING{border-color:#facc15;box-shadow:0 0 14px rgba(250,204,21,.26)}.status-APPOINTMENT_CONFIRMED{border-color:var(--blue);box-shadow:0 0 15px rgba(0,191,255,.32)}.status-IN_PROGRESS{border-color:#fb923c;box-shadow:0 0 14px rgba(251,146,60,.28)}.status-RESULT_PENDING{border-color:#a855f7;box-shadow:0 0 14px rgba(168,85,247,.28)}.status-COMPLETED{border-color:var(--green);box-shadow:0 0 15px rgba(57,255,20,.30)}
.matchMain{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;text-align:center;font-size:20px}.playerName{font-weight:900}.playerName.right{text-align:right}.playerName.left{text-align:left}
.scoreRight,.scoreLeft{display:inline-block;min-width:34px;color:var(--green);font-size:26px;font-family:'Orbitron',sans-serif;text-shadow:0 0 5px rgba(57,255,20,.4)}
.scoreRight{margin-left:14px}.scoreLeft{margin-right:14px}.vsText{color:#64748b;font-weight:900;font-family:'Orbitron',sans-serif}
.small{margin-top:6px;color:#aab3c2;font-size:13px;text-align:center;font-weight:700}.warn{color:var(--gold)}
.actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}.actions button{font-size:12px;padding:7px 10px}

/* Modals */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.80);z-index:2000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modalBox{background:var(--panel);border:2px solid var(--red);border-radius:12px;padding:24px;width:380px;box-shadow:0 0 30px rgba(255,7,58,.28)}
.modalBox.wide{width:720px;max-height:90vh;overflow-y:auto}.modalActions{display:flex;gap:10px;justify-content:center}
.resultTitle{text-align:center;font-weight:900;margin:15px 0}.resultInputs{display:flex;align-items:center;justify-content:center;gap:12px}.resultInputs input{width:80px;text-align:center;font-size:24px;font-weight:900}

/* Kalender */
.seasonCalendar{margin-top:12px}.calendarHint{color:#94a3b8;font-size:13px;margin:8px 0}.errorText{color:var(--red)}
.halfTimeBanner{margin:10px 0;padding:12px;border-radius:8px;background:var(--gold);color:black;font-weight:900;text-align:center;font-size:18px;box-shadow:0 0 18px rgba(250,204,21,.35)}
.calendarMonths{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}.calendarMonth{min-width:230px;background:#090b0e;border:1px solid var(--border2);border-radius:10px;padding:10px}.calendarMonthTitle{text-align:center;font-weight:900;color:var(--green);margin-bottom:8px}
.calendarGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.headerCells span{color:#94a3b8;font-size:11px;font-weight:900}
.calendarDay{padding:6px 0;border-radius:6px;font-size:12px;background:#111827;color:white}.calendarDay.empty{background:transparent}.calendarDay.outsideSeason{opacity:.25}.calendarDay.insideSeason{border:1px solid var(--border)}
.calendarDay.halftimeDay{background:var(--gold);color:black;font-weight:900;transform:scale(1.12);box-shadow:0 0 12px rgba(250,204,21,.8)}.calendarDay.selectedDay{background:var(--green);color:black;font-weight:900}

/* Tabellen & Meldungen */
.dataTable{width:100%;border-collapse:collapse;margin-top:10px}.dataTable th,.dataTable td{padding:10px;border-bottom:1px solid var(--border);text-align:center}.dataTable th{color:var(--green);background:#090b0e;text-transform:uppercase;letter-spacing:.8px}
.notificationCard{margin:10px 0;padding:14px;border-radius:10px;border:1px solid var(--border2);background:rgba(13,17,23,.95)}.notificationCard.read{opacity:.45}

/* Match-Center */
.matchCenter{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:20px}.matchCenterV2{grid-template-columns:1fr 1.6fr 1fr}
.mcPlayer,.mcMiddle{background:rgba(13,17,23,.95);border:2px solid var(--border);border-radius:12px;padding:18px;text-align:center}
.mcPlayer.active{border-color:var(--green);box-shadow:0 0 15px rgba(57,255,20,.38),inset 0 0 10px rgba(57,255,20,.16)}
.mcScore{font-size:72px;font-weight:900;color:var(--green);margin:12px 0;font-family:'Orbitron',sans-serif;line-height:1;text-shadow:0 0 5px rgba(57,255,20,.4)}
.lastTurnBox{margin:10px auto;padding:8px 10px;border:1px solid var(--border2);border-radius:8px;background:#090b0e;color:var(--gold);font-weight:900;max-width:190px}.lastTurnBox strong{color:var(--green);font-size:24px;font-family:'Orbitron',sans-serif}
.turnDisplay{margin-bottom:14px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#090b0e}.dartSlots{display:flex;justify-content:center;gap:10px;margin:10px 0}
.dartSlot{width:58px;height:42px;display:flex;align-items:center;justify-content:center;border:2px solid var(--border2);border-radius:50%;background:#111827;color:#94a3b8;font-weight:900;font-family:'Orbitron',sans-serif}
.dartSlot.filled{color:var(--green);border-color:var(--green);box-shadow:0 0 10px rgba(57,255,20,.25)}.dartSlot.bust{color:var(--red);border-color:var(--red)}
.turnTotal{color:var(--gold);font-weight:900;font-size:20px;background:rgba(250,204,21,.08);border-radius:8px;padding:8px;font-family:'Orbitron',sans-serif}
.dartKeypad{max-width:640px;margin:0 auto}.keypadNumbers{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.keypadBottom{display:grid;grid-template-columns:1fr 2fr 2fr 2fr;gap:5px;margin-top:5px}
.numKey{min-height:58px;margin:0;border-radius:3px;background:#f5efe6;color:#111827;font-size:24px;font-weight:900;border:1px solid #cbd5e1;box-shadow:none}
.numKey.double{background:#f97316;color:white;font-size:16px}.numKey.triple{background:#ea580c;color:white;font-size:16px}.numKey.undo{background:var(--red);color:white;font-size:16px}
.numKey.double.armed,.numKey.triple.armed{background:#2563eb!important;color:white;box-shadow:0 0 14px rgba(0,191,255,.75);border:2px solid #93c5fd}
.mcActions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.historyRow{padding:10px;border-bottom:1px solid var(--border)}
.shareTextArea{width:100%;min-height:160px;margin:12px 0;padding:12px;border:1px solid var(--border2);border-radius:10px;background:#090b0e;color:#e2e8f0;font-family:'Rajdhani',sans-serif;resize:vertical}

@media(max-width:900px){
    .grid,.layoutTwo,.matchCenter,.matchCenterV2{grid-template-columns:1fr}.screen{padding-left:10px;padding-right:10px}.tile{padding:22px;font-size:20px}.mcScore{font-size:54px}.keypadNumbers{grid-template-columns:repeat(5,1fr)}.keypadBottom{grid-template-columns:1fr 1fr}#headerUser{display:none}
}


.permCheckbox {
    width: 22px;
    height: 22px;
    accent-color: var(--green);
    cursor: pointer;
}

#permissionsList {
    overflow-x: auto;
}

#permissionsList select {
    width: 100px;
    margin: 0;
    padding: 6px;
}


.topNav {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 999;
    min-height: 38px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 5px 10px;
    background: rgba(13, 17, 23, 0.96);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

.topNav button {
    margin: 0;
    padding: 6px 11px;
    font-size: 12px;
    background: #161d26;
    color: #cbd5e1;
    border: 1px solid var(--border2);
    box-shadow: none;
}

.topNav button:hover {
    color: black;
    background: var(--green);
    box-shadow: 0 0 10px rgba(57,255,20,0.3);
}

.screen {
    padding-top: 118px;
}

.bg {
    padding-top: 118px;
}

@media(max-width:900px) {
    .topNav {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .topNav button {
        white-space: nowrap;
    }
}

.selectList{max-height:280px;overflow-y:auto;border:1px solid var(--border2);border-radius:10px;background:rgba(0,0,0,.35);padding:10px;margin-top:8px}.checkRow{display:flex;align-items:center;gap:10px;padding:7px;border-bottom:1px solid rgba(255,255,255,.05);margin:0}.checkRow input{width:20px;height:20px;margin:0;accent-color:var(--green)}.tournamentCard{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px;margin:10px 0;border:2px solid var(--border);border-radius:10px;background:rgba(13,17,23,.96)}.bracket{display:flex;gap:18px;overflow-x:auto;padding-bottom:12px}.bracketRound{min-width:300px;border:1px solid var(--border2);border-radius:12px;background:rgba(0,0,0,.22);padding:12px}.tournamentMatch{min-height:120px}


.tournamentWinner {
    margin-bottom: 14px;
    padding: 14px;
    border: 2px solid var(--gold);
    border-radius: 10px;
    background: rgba(250,204,21,0.12);
    color: var(--gold);
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 0 18px rgba(250,204,21,0.25);
}

.winnerName {
    color: var(--green);
    text-shadow: 0 0 6px rgba(57,255,20,0.55);
}


.eventInfo {
    margin: 10px 0 14px 0;
}

.eventChooser {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    border: 1px solid var(--border2);
    border-radius: 10px;
    background: rgba(0,0,0,0.25);
}

.eventChooser button {
    margin: 0;
}


.groupsGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.groupBox {
    border: 1px solid var(--border2);
    border-radius: 12px;
    background: rgba(0,0,0,0.22);
    padding: 12px;
}

.smallTable {
    font-size: 12px;
    margin-bottom: 12px;
}

@media(max-width:900px) {
    .groupsGrid {
        grid-template-columns: 1fr;
    }
}


.syncStatus {
    position: absolute;
    right: 170px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .8px;
    border: 1px solid var(--border2);
}

.syncStatus.online {
    color: #000;
    background: var(--green);
    border-color: var(--green);
}

.syncStatus.offline {
    color: #000;
    background: var(--gold);
    border-color: var(--gold);
}

.syncStatus.local {
    color: #fff;
    background: #334155;
    border-color: #475569;
}

@media(max-width:900px) {
    .syncStatus {
        right: 12px;
        top: 72px;
        transform: none;
        font-size: 10px;
    }
}


.licenseStatus {
    position: absolute;
    right: 245px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid var(--border2);
    background: #334155;
    color: white;
}

.licenseStatus.ok { background: var(--green); color: black; border-color: var(--green); }
.licenseStatus.bad { background: var(--red); color: white; border-color: var(--red); }
.licenseStatus.offline { background: var(--gold); color: black; border-color: var(--gold); }

@media(max-width:900px) {
    .licenseStatus { display:none; }
}