/* ==========================================================
   MÜPHIK RAIDPLANER (raidplaner.php)
   ========================================================== */

.raidplan-page{
    max-width:1100px;
    margin:0 auto;
    padding:120px 24px 80px;
}

.raidplan-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:24px;
}

.raidplan-header h1{
    font-size:26px;
    letter-spacing:.6px;
    color:var(--text);
}

.raidplan-header p{
    margin-top:6px;
    color:#9a9a9a;
    font-size:13px;
}

.secondary-roster-button{
    padding:8px 14px;
    border-radius:8px;

    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    color:var(--text);

    font-family:inherit;
    font-size:12px;
    letter-spacing:.4px;
    cursor:pointer;

    transition:border-color .2s, color .2s;
}

.secondary-roster-button:hover{
    border-color:var(--gold);
    color:var(--gold);
}

/* ==========================================================
   CONTROLS
   ========================================================== */

.raidplan-controls{
    display:flex;
    align-items:flex-end;
    gap:16px;
    flex-wrap:wrap;

    padding:16px 18px;
    margin-bottom:20px;

    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:12px;
}

.raidplan-controls label{
    display:flex;
    flex-direction:column;
    gap:4px;

    color:#9a9a9a;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.raidplan-controls select,
.raidplan-modal-content input,
.raidplan-modal-content select,
.raidplan-modal-content textarea{
    padding:8px 10px;

    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    border-radius:6px;

    color:var(--text);
    font-family:inherit;
    font-size:13px;
}

/* Kontrast-Fix: native Dropdown-Popups (Browser-eigenes Rendering, nicht per
   CSS voll gestaltbar) haben ohne explizite option-Farben teils fast weißen
   Text auf hellem Grund. color-scheme + explizite option-Farben erzwingen ein
   lesbares dunkles Popup, unabhängig vom OS-Farbschema. */
.raidplan-controls select,
.raidplan-modal-content select{
    color-scheme:dark;
}

.raidplan-controls select option,
.raidplan-modal-content select option{
    background:#161616;
    color:#eaeaea;
}

.timeline-source-label{
    color:#8a8a8a;
    font-size:12px;
    margin-left:auto;
}

.raidplan-admin-controls{
    display:flex;
    gap:10px;
}

.raidplan-empty{
    text-align:center;
    padding:40px 0;
    color:#9a9a9a;
}

.raidplan-empty p{
    margin-bottom:12px;
}

/* ==========================================================
   PANELS
   ========================================================== */

.raidplan-panel{
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:12px;

    padding:18px 20px;
    margin-bottom:20px;
}

.raidplan-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
    flex-wrap:wrap;
}

.raidplan-panel-header h2{
    color:var(--gold);
    font-size:15px;
    letter-spacing:.8px;
    text-transform:uppercase;
}

/* ==========================================================
   ZEITACHSE (Boss-Zeile oben + Spieler-Zeilen darunter,
   gemeinsam scrollbar, Namen/"Boss" links)
   ========================================================== */

.boss-timeline-hint{
    margin-bottom:0;
    flex-basis:100%;
}

.timeline-main-row{
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.timeline-scroll-wrap{
    position:relative;
    flex:1;
    min-width:0;
    max-height:520px;
    overflow:auto;
}

/* Legende links von der Zeitachse: zeigt jede im Zeitplan vorkommende
   Boss-Fähigkeit mit ihrer Farbe, anklickbar zum Ein-/Ausblenden. */
.boss-event-legend{
    display:flex;
    flex-direction:column;
    gap:2px;
    width:160px;
    flex-shrink:0;
    max-height:520px;
    overflow-y:auto;

    padding:8px;
    border-radius:8px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
}

.boss-event-legend h4{
    color:var(--gold);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:4px;
}

.legend-item{
    display:flex;
    align-items:center;
    gap:6px;

    padding:4px 6px;
    border-radius:5px;
    border:1px solid transparent;
    background:transparent;

    font-family:inherit;
    font-size:11px;
    color:var(--text);
    text-align:left;
    cursor:pointer;
}

.legend-item:hover{
    border-color:var(--border);
    background:rgba(255,255,255,.05);
}

.legend-item.hidden-item{
    opacity:.35;
}

.legend-item.cat-add{
    border-color:#ffa64d;
}

.legend-swatch{
    width:10px;
    height:10px;
    border-radius:3px;
    flex-shrink:0;
}

.legend-name{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.boss-ability-sidebar{
    display:flex;
    gap:10px;
    flex-shrink:0;
    position:sticky;
    top:0;
}

.boss-class-list{
    display:flex;
    flex-direction:column;
    gap:4px;
    width:118px;
    flex-shrink:0;
}

.boss-class-btn{
    padding:6px 10px;
    border-radius:6px;
    text-align:left;

    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    color:var(--text);

    font-family:inherit;
    font-size:11px;
    font-weight:600;
    cursor:pointer;

    transition:border-color .2s, background .2s;
}

.boss-class-btn:hover{
    border-color:currentColor;
}

.boss-class-btn.active{
    background:rgba(255,255,255,.1);
    box-shadow:inset 0 0 0 1px currentColor;
}

.boss-ability-flyout.picker-flyout{
    width:100%;
    max-height:360px;
    margin-top:10px;
}

.boss-ability-flyout{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;

    width:170px;
    flex-shrink:0;
    max-height:400px;
    overflow-y:auto;

    padding:8px;
    border-radius:8px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
}

/* Gruppierung der Klassen-Fähigkeiten in der Seitenleiste: Raid-CDs
   (kuratierte Kernliste) oben, aktive Talentbaum-Fähigkeiten in der
   Mitte, passive Talente unten - siehe renderAbilityFlyoutGroups(). */
.ability-flyout-group{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    width:100%;
}

.ability-flyout-group + .ability-flyout-group{
    padding-top:8px;
    border-top:1px solid var(--border);
}

.ability-flyout-heading{
    width:100%;
    font-size:10px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:#8a8a8a;
}

.boss-timeline.drop-target-active,
.player-timeline-track.drop-target-active{
    box-shadow:inset 0 0 0 1px var(--gold);
}

.timeline-ruler{
    position:relative;
    height:20px;
    min-width:900px;
    margin-left:121px;

    border-bottom:1px solid var(--border);
    margin-bottom:8px;
}

.timeline-ruler.scrubbable{
    cursor:pointer;
}

.timeline-playhead{
    position:absolute;
    top:0;
    width:2px;
    background:var(--gold);
    box-shadow:0 0 4px rgba(212,175,55,.6);
    pointer-events:none;
    z-index:4;
}

.timeline-ruler-tick{
    position:absolute;
    top:0;
    font-size:11px;
    color:#7a7a7a;
    transform:translateX(-50%);
}

.timeline-row{
    display:flex;
    align-items:flex-start;
    gap:0;
}

.timeline-row-boss{
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:1px solid var(--border);
}

.timeline-row-label,
.player-timeline-name{
    width:110px;
    flex-shrink:0;

    display:flex;
    align-items:center;
    gap:6px;

    font-size:12px;
    color:var(--text);
    border-left:3px solid var(--class-color, var(--gold));
    padding:4px 0 4px 8px;

    /* Bleibt beim horizontalen Scrollen der Zeitachse links sichtbar
       fixiert - der Sticky-Kontext ist .timeline-scroll-wrap. */
    position:sticky;
    left:0;
    z-index:6;
    background:#0c0c0c;
}

.timeline-row-label-boss{
    color:var(--gold);
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    font-size:11px;
    border-left-color:var(--gold);
    z-index:7;
}

.boss-timeline{
    position:relative;
    /* flex:0 0 auto (NICHT flex:1!) - mit flex-grow>0 und der impliziten
       flex-basis:0% aus "flex:1" ignoriert der Flexbox-Algorithmus die
       per JS gesetzte inline width komplett und zieht das Element nur
       auf die im Row verfügbare (sichtbare) Breite - das war der Grund,
       warum die Zeitachse trotz 10-Minuten-Ruler optisch bei ~900px
       (= min-width, ca. 1:50 bei 8px/Sekunde) abgeschnitten wirkte. Mit
       flex-basis:auto zählt die inline width wieder als tatsächliche
       Boxgröße, wodurch .timeline-scroll-wrap korrekt bis zum echten
       Ende horizontal scrollt. */
    flex:0 0 auto;
    height:74px;
    min-width:900px;

    background:rgba(0,0,0,.25);
    border-radius:6px;
}

/* Kleiner farbcodierter Balken statt beschrifteter Box - Farbe kommt
   pro Fähigkeit über einen Inline-Style (siehe colorForAbilityKey() in
   raidplaner.js), Name/Zeit stehen im Tooltip. So passen bei dicht
   getakteten Bossfights deutlich mehr Ereignisse nebeneinander, und die
   Legende links kann pro Fähigkeit ein-/ausblenden. */
.timeline-event{
    position:absolute;
    height:12px;
    border-radius:4px;

    cursor:grab;
    box-shadow:0 1px 4px rgba(0,0,0,.4);
    transition:transform .12s ease, box-shadow .12s ease;
}

.timeline-event:hover{
    z-index:5;
    transform:scaleY(1.5);
    box-shadow:0 0 0 2px var(--gold), 0 2px 6px rgba(0,0,0,.4);
}

.timeline-event:active{
    cursor:grabbing;
}

/* Add-Spawns sollen unabhängig von der (pro Fähigkeit zufälligen) Füllfarbe
   immer als solche erkennbar sein - daher ein fester, auffälliger Rahmen
   statt einer eigenen Füllfarbe (die kommt weiterhin von colorForAbilityKey(),
   damit gleichzeitig gespawnte, unterschiedliche Adds unterscheidbar bleiben). */
.timeline-event.cat-add{
    border:2px solid #ffa64d;
    box-shadow:0 0 4px rgba(255,166,77,.7);
}

/* ==========================================================
   POSITIONS-KARTE
   ========================================================== */

.map-controls{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.map-time-hint{
    color:#8a8a8a;
    font-size:11px;
}

.map-icon-palette{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding:8px 0 14px;
}

.map-icon-palette-hint{
    color:#8a8a8a;
    font-size:11px;
    margin-right:4px;
}

.map-icon-btn{
    width:34px;
    height:34px;
    padding:5px;
    border-radius:8px;
    border:2px solid var(--border);
    background:rgba(255,255,255,.03);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:16px;
    color:#e4e4e4;
}

.map-icon-btn img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.map-icon-btn:hover{
    border-color:rgba(255,255,255,.4);
}

.map-icon-btn.armed{
    border-color:var(--gold);
    box-shadow:0 0 6px rgba(212,175,55,.5);
}

#paletteSkillSelect{
    max-width:220px;
}

#mapTimeLabel{
    font-size:12px;
    color:#9a9a9a;
    min-width:42px;
}

.arena-map{
    position:relative;
    width:100%;
    height:340px;

    background:rgba(0,0,0,.35) center/cover no-repeat;
    border-radius:8px;
    border:1px solid var(--border);

    overflow:hidden;
}

.arena-map-hint{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

    color:#6a6a6a;
    font-size:13px;
}

.arena-markers{
    position:absolute;
    inset:0;
}

.arena-marker{
    position:absolute;
    transform:translate(-50%,-50%);

    width:16px;
    height:16px;
    border-radius:50%;

    background:var(--gold);
    border:2px solid #0a0a0a;
    box-shadow:0 0 6px rgba(0,0,0,.5);

    cursor:grab;
}

.arena-marker.type-zone{
    border-radius:50%;
    background:rgba(201,162,39,.25);
    border:2px solid var(--gold);
}

.arena-marker.type-arrow{
    border-radius:3px;
    width:20px;
    height:8px;
}

.arena-marker.selected{
    outline:2px solid #ffffff;
    outline-offset:2px;
}

.arena-marker.has-icon{
    width:30px;
    height:30px;
    background:rgba(10,10,10,.55);
    border:2px solid rgba(255,255,255,.35);
    box-shadow:0 0 6px rgba(0,0,0,.6);
    display:flex;
    align-items:center;
    justify-content:center;
}

.arena-marker-icon{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:inherit;
    pointer-events:none;
}

.marker-keyframe-list{
    max-height:160px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:8px;
}

.marker-keyframe-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:4px 6px;
    border-radius:6px;
    background:rgba(255,255,255,.03);
}

.marker-keyframe-time{
    width:70px;
    flex-shrink:0;
}

.marker-keyframe-pos{
    flex:1;
    color:#9a9a9a;
    font-size:11px;
}

.marker-keyframe-delete{
    flex-shrink:0;
    width:22px;
    height:22px;
    border-radius:5px;
    border:1px solid var(--border);
    background:rgba(224,106,106,.1);
    color:#e06a6a;
    cursor:pointer;
    font-size:14px;
    line-height:1;
}

.marker-icon-preview{
    display:block;
    width:48px;
    height:48px;
    margin-bottom:8px;
    border-radius:6px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.04);
}

.arena-marker-label{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);

    font-size:10px;
    color:#e4e4e4;
    white-space:nowrap;
    margin-top:2px;

    text-shadow:0 1px 2px rgba(0,0,0,.8);
}

/* ==========================================================
   SPIELER-TIMELINES
   (teilt sich .timeline-row/.timeline-row-label mit der
   Boss-Zeile weiter oben, damit alles auf einer Zeitachse
   und gemeinsam scrollbar bleibt)
   ========================================================== */

.player-timelines-scroll{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.drop-target-active{
    box-shadow:inset 0 0 0 1px var(--gold);
}

.player-timeline-track{
    position:relative;
    /* siehe Kommentar bei .boss-timeline - dasselbe flex:1-Problem
       verhinderte hier, dass die per JS gesetzte width tatsächlich
       zur sichtbaren/scrollbaren Boxgröße wurde. */
    flex:0 0 auto;
    min-width:900px;
    height:34px;

    background:rgba(0,0,0,.25);
    border-radius:6px;
}

.player-timeline-entry{
    position:absolute;
    top:6px;

    width:22px;
    height:22px;
    padding:2px;
    border-radius:5px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#d67ab0;
    color:#1a0a12;
    font-size:9px;
    font-weight:700;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;

    cursor:grab;
}

.player-timeline-entry img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:3px;
    pointer-events:none;
}

.player-timeline-entry.off-gcd{
    background:#7ad6c1;
    color:#0a1a16;
}

/* Feine vertikale Linie von jedem Spieler-Zeitstrahl-Eintrag hoch
   zur Boss-Zeitachse, um die zeitliche Ausrichtung visuell zu
   zeigen (welcher Boss-Moment fällt mit welcher Spieler-Aktion
   zusammen). Wird per JS (renderEntryConnectorLines) positioniert -
   #timelineScrollWrap braucht dafür position:relative als Anker. */
.entry-connector-overlay{
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
    z-index:3;
}

.entry-connector-line{
    position:absolute;
    width:1px;
    background:rgba(255,255,255,.18);
}

.ability-palette{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}

.ability-chip{
    display:flex;
    align-items:center;
    gap:6px;

    width:100%;
    box-sizing:border-box;
    padding:5px 10px;
    border-radius:20px;

    background:rgba(255,255,255,.06);
    border:1px solid var(--border);

    font-size:11px;
    color:var(--text);
    cursor:grab;
}

.ability-chip-icon{
    width:18px;
    height:18px;
    border-radius:4px;
    flex-shrink:0;
    object-fit:cover;
}

.ability-chip-label{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.ability-chip.off-gcd{
    border-color:#7ad6c1;
    color:#7ad6c1;
}

/* ==========================================================
   MODALS
   ========================================================== */

.raidplan-modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:2000;

    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.7);
}

.raidplan-modal.active{
    display:flex;
}

.raidplan-modal-content{
    width:420px;
    max-width:92vw;
    max-height:86vh;
    overflow-y:auto;

    padding:24px;
    border-radius:12px;

    background:#0f0f0f;
    border:1px solid var(--border);
}

.raidplan-modal-content h2{
    color:var(--gold);
    font-size:16px;
    margin-bottom:16px;
}

.raidplan-modal-content label{
    display:block;
    margin-top:12px;
    margin-bottom:4px;

    color:#9a9a9a;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.raidplan-modal-content input,
.raidplan-modal-content select,
.raidplan-modal-content textarea{
    width:100%;
}

.raidplan-modal-content select[multiple]{
    height:110px;
}

.boss-arena-image-preview{
    display:block;
    width:100%;
    max-height:160px;
    object-fit:cover;
    border-radius:8px;
    border:1px solid var(--border);
    margin-bottom:8px;
}

.raidplan-modal-buttons{
    display:flex;
    gap:10px;
    margin-top:20px;
}

.raidplan-modal-buttons button{
    padding:9px 16px;
    border-radius:8px;

    font-family:inherit;
    font-size:12px;
    cursor:pointer;

    border:1px solid var(--border);
    background:var(--gold);
    color:#0a0a0a;
}

.raidplan-modal-buttons button.secondary{
    background:transparent;
    color:var(--text);
}

.raidplan-modal-buttons button.danger{
    background:transparent;
    color:#e06a6a;
    border-color:rgba(224,106,106,.4);
    margin-left:auto;
}

/* ==========================================================
   FÄHIGKEITEN VERWALTEN (Blizzard-Sync)
   ========================================================== */

.abilities-modal-content{
    width:680px;
}

.modal-hint{
    color:#9a9a9a;
    font-size:12px;
    line-height:1.5;
    margin-bottom:10px;
}

.abilities-sync-row{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:6px;
}

.abilities-sync-row select{
    flex:1;
    min-width:140px;
}

.abilities-fullsync-checkbox{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-bottom:10px;

    font-size:11px;
    color:#9a9a9a;
    line-height:1.4;
}

.abilities-fullsync-checkbox input{
    margin-top:2px;
    flex-shrink:0;
}

.abilities-sync-progress{
    min-height:16px;
    color:var(--gold);
    font-size:12px;
    margin-bottom:12px;
}

.abilities-admin-list{
    max-height:320px;
    overflow-y:auto;
    border:1px solid var(--border);
    border-radius:8px;
    padding:8px 10px;
    margin-bottom:18px;
}

.ability-admin-group h4{
    color:var(--gold);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin:10px 0 6px;
}

.ability-admin-group:first-child h4{
    margin-top:2px;
}

.ability-admin-count{
    color:#7a7a7a;
    font-weight:400;
    text-transform:none;
    letter-spacing:0;
}

.ability-admin-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
    flex-wrap:wrap;
}

.ability-admin-icon{
    width:24px;
    height:24px;
    border-radius:4px;
    flex-shrink:0;
    object-fit:cover;
}

.ability-admin-icon-empty{
    width:24px;
    height:24px;
    border-radius:4px;
    flex-shrink:0;
    background:rgba(255,255,255,.06);
}

.ability-admin-name{
    flex:1;
    min-width:120px;
    font-size:12px;
    color:var(--text);
}

.ability-admin-category{
    width:110px;
}

.ability-admin-cooldown{
    width:64px;
}

.ability-admin-gcd{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:11px;
    color:#9a9a9a;
    white-space:nowrap;
}

.ability-admin-row button{
    padding:5px 10px;
    font-size:11px;
}

.abilities-quickadd-title{
    color:var(--gold);
    font-size:13px;
    letter-spacing:.5px;
    margin-bottom:4px;
}

.abilities-quickadd-lookup-row{
    display:flex;
    gap:8px;
}

.abilities-quickadd-lookup-row input{
    flex:1;
}

.abilities-quickadd-result{
    font-size:12px;
    color:#9a9a9a;
    margin-top:6px;
    min-height:16px;
}

/* ==========================================================
   BOSS-KOMPENDIUM (echte Timeline-Fähigkeiten)
   ========================================================== */

.compendium-filter{
    width:100%;
    margin-bottom:10px;
}

.compendium-ability-list{
    max-height:360px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.compendium-ability-card{
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:rgba(255,255,255,.03);
}

.compendium-ability-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:4px;
}

.compendium-ability-icon{
    width:22px;
    height:22px;
    border-radius:4px;
    flex-shrink:0;
}

.compendium-ability-title strong{
    color:var(--gold);
    font-size:13px;
    flex:1;
}

.compendium-ability-title button{
    flex-shrink:0;
    padding:4px 10px;
    font-size:11px;
}

.compendium-ability-description{
    color:#c9c9c9;
    font-size:12px;
    line-height:1.5;
    white-space:pre-line;
}

@media (max-width:720px){
    .raidplan-page{
        padding:100px 16px 60px;
    }

    .raidplan-header{
        flex-direction:column;
    }

    .abilities-modal-content{
        width:92vw;
    }

    .ability-admin-name{
        min-width:100%;
        order:-1;
    }
}