/* Wann|Wie|Wo – eigenes Theme, angelehnt an pluralog.de / Wall of No */

/* Yrsa (self-hosted) */
@font-face {
    font-family: 'Yrsa';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: local('Yrsa'),
         url('../fonts/yrsa-v3-latin-regular.woff2') format('woff2'),
         url('../fonts/yrsa-v3-latin-regular.woff') format('woff');
}

:root {
    --won-blue:   #395765;
    --won-blue-d: #2e4651;
    --won-gold:   #fdbe21;
    --won-gold-d: #d4a328;
    --won-red:    #c1262d;
    --won-green:  #368433;
    --won-dark:   #343a40;

    --bs-primary: var(--won-blue);
    --bs-body-font-family: 'Yrsa', serif;
    --bs-body-font-size: 1.2rem;
}

body {
    font-family: 'Yrsa', serif;
    color: #1c2b33;
    font-size: 1.2rem;
    line-height: 1.5;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 { font-weight: 700; }
.lead { font-size: 1.3rem; }

/* ---- Navbar ---- */
.won-navbar { background-color: var(--won-dark); }
.won-navbar .navbar-brand {
    font-family: 'Yrsa', serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: inherit;
    padding-top: 0;
    padding-bottom: 0;
    color: #fff;
}
.won-pipe { color: var(--won-gold); font-weight: 400; }
.won-navbar .nav-item { font-size: 1.3rem; padding-right: .8rem; }
.won-navbar .nav-link { color: #fff !important; }
.won-navbar .nav-link:hover,
.won-navbar .nav-link:focus { color: var(--won-gold) !important; }

/* ---- Footer ---- */
.won-footer { background-color: var(--won-dark); color: rgba(255,255,255,.85); }
.won-footer-link { color: var(--won-gold); text-decoration: none; }
.won-footer-link:hover { color: #fff; text-decoration: underline; }

/* ---- Buttons ---- */
.won-btn-gold {
    background-color: var(--won-gold);
    border-color: var(--won-gold);
    color: var(--won-blue-d);
    font-weight: 700;
}
.won-btn-gold:hover,
.won-btn-gold:focus {
    background-color: var(--won-gold-d);
    border-color: var(--won-gold-d);
    color: var(--won-blue-d);
}
.btn-primary {
    --bs-btn-bg: var(--won-blue);
    --bs-btn-border-color: var(--won-blue);
    --bs-btn-hover-bg: var(--won-blue-d);
    --bs-btn-hover-border-color: var(--won-blue-d);
    --bs-btn-active-bg: var(--won-blue-d);
    --bs-btn-active-border-color: var(--won-blue-d);
}
a { color: var(--won-blue); }

/* ---- Hero-Sektion (schräg) ---- */
.won-skew {
    background-color: var(--won-blue);
    color: #fff;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -1.5rem;
    margin-bottom: 3.5rem;
    padding-top: 4rem;
    padding-bottom: calc(4rem + 3vw);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(20px, 3vw, 70px)), 0 100%);
}
.won-skew .btn-outline-light { border-color: #fff; color: #fff; }
.won-skew .btn-outline-light:hover { background-color: #fff; color: var(--won-blue-d); }

/* ---- Allgemein ---- */
.won-meta { font-size: .9rem; color: #5b6b73; }

/* ================================================================== */
/* Abstimmungs-Tabelle (Formular)                                       */
/* ================================================================== */

.ww-vote-table,
.ww-results-table {
    min-width: 600px;
    font-size: 1rem;
}

.ww-name-col {
    min-width: 140px;
    white-space: nowrap;
}

.ww-date-header {
    background-color: var(--won-blue);
    color: #fff;
    white-space: nowrap;
    font-weight: 700;
}

.ww-slot-header {
    background-color: #eef1f3;
    color: var(--won-blue-d);
    white-space: nowrap;
    font-size: .9rem;
}

/* ---- Abstimmungs-Optionen (Radio-Buttons als Chips) ---- */

.ww-vote-cell {
    padding: .4rem .5rem;
    vertical-align: middle;
}

.ww-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: .2rem .5rem;
    margin: .15rem auto;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
    width: 7rem;
    user-select: none;
}
.ww-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Ja */
.ww-opt-yes { border-color: #b7dfb8; color: var(--won-green); }
.ww-opt-yes:hover { background: #d4edda; border-color: var(--won-green); }
.ww-opt-yes:has(input:checked) { background: var(--won-green); color: #fff; border-color: var(--won-green); }

/* Vielleicht */
.ww-opt-maybe { border-color: #ffe6a0; color: #7a6200; }
.ww-opt-maybe:hover { background: #fff3cd; border-color: var(--won-gold-d); }
.ww-opt-maybe:has(input:checked) { background: var(--won-gold); color: var(--won-blue-d); border-color: var(--won-gold-d); }

/* Nein */
.ww-opt-no { border-color: #f1b4b7; color: var(--won-red); }
.ww-opt-no:hover { background: #f8d7da; border-color: var(--won-red); }
.ww-opt-no:has(input:checked) { background: var(--won-red); color: #fff; border-color: var(--won-red); }

/* ================================================================== */
/* Ergebnis-Tabelle                                                     */
/* ================================================================== */

.ww-answer-cell {
    font-size: 1.1rem;
    font-weight: 700;
    padding: .3rem .5rem;
}
.ww-yes   { background-color: #d4edda; color: var(--won-green); }
.ww-maybe { background-color: #fff3cd; color: #7a6200; }
.ww-no    { background-color: #f8d7da; color: var(--won-red); }
.ww-empty { background-color: #f1f3f5; color: #aaa; }

/* Eigene Zeile hervorheben */
.ww-my-row { outline: 2px solid var(--won-blue); outline-offset: -2px; }
.ww-my-row td:first-child { background-color: #eef4f7; }

/* Totals-Zeile */
.ww-totals-row { border-top: 2px solid var(--won-blue-d); }
.ww-totals-cell { padding: .3rem .4rem; }

/* Badges in Totals */
.ww-badge-yes   { background-color: var(--won-green); }
.ww-badge-maybe { background-color: var(--won-gold); color: var(--won-blue-d); }
.ww-badge-no    { background-color: var(--won-red); }

/* Slot-Badge im Edit-Bereich */
.ww-badge-slot {
    background-color: var(--won-blue);
    color: #fff;
    font-size: .9rem;
    font-weight: 400;
    padding: .3em .6em;
}

/* ================================================================== */
/* Sticky Name-Spalte                                                   */
/* ================================================================== */

.ww-results-table .ww-name-col,
.ww-vote-table .ww-name-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
}
/* Schatten rechts der Sticky-Spalte */
.ww-results-table .ww-name-col::after,
.ww-vote-table .ww-name-col::after {
    content: '';
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 5px;
    background: linear-gradient(to right, rgba(0,0,0,.08), transparent);
    pointer-events: none;
}

/* Kopfzeilen: höherer z-index damit sie über Body-Zellen liegen */
.ww-results-table thead .ww-name-col,
.ww-vote-table thead .ww-name-col {
    z-index: 3;
}

/* Hintergrundfarben je Zeilen-Typ */
.table-dark .ww-name-col             { background-color: #212529; color: #fff; }
.table-secondary .ww-name-col        { background-color: #e9ecef; }
.table-light .ww-name-col            { background-color: #f8f9fa; }
.ww-results-table tbody tr .ww-name-col { background-color: #fff; }
.ww-my-row .ww-name-col              { background-color: #eef4f7 !important; }
.ww-totals-row .ww-name-col          { background-color: #f8f9fa; }

/* ================================================================== */
/* Scroll-Indikator (Gradient rechts)                                   */
/* ================================================================== */

.ww-scroll-outer {
    position: relative;
}
.ww-scroll-outer::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3rem;
    background: linear-gradient(to left, rgba(255,255,255,.88) 0%, transparent 100%);
    pointer-events: none;
    transition: opacity .15s;
    z-index: 10;
}
.ww-scroll-outer.ww-scroll-at-end::after,
.ww-scroll-outer.ww-no-scroll::after  { opacity: 0; }

/* ================================================================== */
/* Beste Variante markieren                                             */
/* ================================================================== */

th.ww-slot-header.ww-best-slot {
    background-color: var(--won-gold) !important;
    color: var(--won-blue-d) !important;
}
td.ww-best-col {
    background-color: rgba(253, 190, 33, .12);
}
.ww-totals-cell.ww-best-col {
    background-color: rgba(253, 190, 33, .2);
}
.ww-best-indicator {
    color: var(--won-gold-d);
    font-size: .85em;
}

/* Fortschrittsbalken-Breite (via JS gesetzt, kein inline style nötig) */
.ww-progress-bar { width: 0; transition: width .4s ease; }