/*
 * com_training -- Kalender als Grid
 *
 * Alles haengt an der ID #training-calendar. Damit gilt hier nichts fuer
 * UIkit auf der uebrigen Website, und die Regeln sind staerker als die des
 * Templates -- genau daran ist die Tabellenfassung gescheitert.
 *
 * Farben und Flaechen kommen aus den UIkit-Kartenstilen:
 *   uk-card-primary    Wochentage und Kalenderwochen
 *   uk-card-default    alle Kalendertage
 * Dadurch wandert der Kalender mit, wenn du im YOOtheme-Customizer etwas
 * aenderst. Hier steht bewusst keine einzige feste Farbe.
 *
 * Die Tage unterscheiden sich ausschliesslich ueber die Deckkraft. Das haelt
 * die Abstufung berechenbar: ein Wochenende im Nachbarmonat ist beides
 * zugleich und tritt entsprechend am weitesten zurueck.
 *
 * Grundhaltung: dunkel und zurueckhaltend. Auf schwarzem Grund wirkt
 * Fettschrift grob, weil helle Schrift dort ohnehin optisch zunimmt.
 * Abstufungen laufen deshalb ueber Deckkraft und Groesse, nicht ueber
 * Schriftstaerke. Hier steht bewusst kein einziges font-weight.
 */

/* ---------- Kopfzeile ---------- */

#training-calendar .tc-kopf {
    gap: .5rem;
    margin-bottom: .75rem;
}

#training-calendar .tc-kopf-links {
    gap: .5rem;
}

/* ---------- Raster ---------- */

#training-calendar .tc-grid {
    display: grid;
    grid-template-columns: 4.5rem repeat(7, 1fr);
    gap: .4rem;
}

/*
 * uk-card bringt Hintergrund und Rahmen mit, aber keine Innenabstaende --
 * die kommen sonst von uk-card-body und waeren fuer Kalenderzellen viel zu
 * gross. Deshalb hier eigene, knappe Werte.
 */
#training-calendar .tc-zelle {
    padding: .4rem .5rem;
    min-width: 0;
}

/* Wochentage und Kalenderwochen: mittig, kein Hover */
#training-calendar .tc-kopfzelle,
#training-calendar .tc-kw {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .85rem;
}

/*
 * Tageszellen
 *
 * Alle Tage tragen denselben Kartenstil. Der Unterschied liegt allein in der
 * Deckkraft, gesteuert ueber --tc-deckkraft. Der Schatten ist ausdruecklich
 * abgeschaltet: beim Ueberfahren soll sich nur die Deckkraft aendern.
 */
#training-calendar .tc-tag {
    --tc-deckkraft: .9;

    display: flex;
    flex-direction: column;
    min-height: 8.5rem;
    opacity: var(--tc-deckkraft);
    box-shadow: none;
    transition: opacity .15s ease-in-out;
}

/* Wochenende */
#training-calendar .tc-we {
    --tc-deckkraft: .68;
}

/* Vor- und Nachmonat */
#training-calendar .tc-fremd {
    --tc-deckkraft: .38;
}

/* Beides zugleich: Wochenendtage des Vor- und Nachmonats */
#training-calendar .tc-fremd.tc-we {
    --tc-deckkraft: .24;
}

#training-calendar .tc-tag:hover {
    opacity: 1;
    box-shadow: none;
}

#training-calendar .tc-zahl {
    font-size: .85rem;
    margin-bottom: .2rem;
}

/* Heutiger Tag: rundes Abzeichen um die Zahl */
#training-calendar .tc-heute-zahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    padding: 0 .3em;
}

/* ---------- Termine ---------- */

#training-calendar .tc-termin,
#training-calendar .tc-mehr {
    display: block;
    margin-top: 3px;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: .78rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .15s ease-in-out;
}

/* Der Farbbalken links -- die Farbe selbst setzt die Vorlage je Kategorie */
#training-calendar .tc-termin {
    border-left: 3px solid transparent;
}

#training-calendar .tc-termin:hover,
#training-calendar .tc-mehr:hover {
    background-color: rgba(128, 128, 128, .25);
}

#training-calendar .tc-mehr {
    cursor: pointer;
    opacity: .75;
}

#training-calendar .tc-abgesagt {
    text-decoration: line-through;
    opacity: .6;
}

/* ---------- Kategorien-Legende ---------- */

/*
 * Ein Hauptzweig steht in einer Zeile, die Zweige untereinander. Damit
 * bleibt jeder Zweig beisammen -- das konnte die fruehere Zweispaltigkeit
 * ueber "columns" nicht, sie brach rein nach Hoehe um.
 */
#training-calendar .tc-agenda {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

#training-calendar .tc-zweig {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.5rem;
}

#training-calendar .tc-kat {
    display: inline-flex;
    align-items: center;
    gap: .45em;
}

/* Farbe und Rahmenfarbe setzt die Vorlage je Kategorie */
#training-calendar .tc-farbe {
    flex: 0 0 auto;
    width: .75em;
    height: .75em;
    border: 2px solid transparent;
    border-radius: 2px;
}

/* ---------- Schmale Displays ---------- */

@media (max-width: 639px) {
    #training-calendar .tc-grid {
        grid-template-columns: 1.9rem repeat(7, 1fr);
        gap: .2rem;
    }

    #training-calendar .tc-zelle {
        padding: .2rem .25rem;
    }

    #training-calendar .tc-kopfzelle,
    #training-calendar .tc-kw {
        font-size: .68rem;
    }

    #training-calendar .tc-tag {
        min-height: 4.2rem;
    }

    #training-calendar .tc-zahl {
        font-size: .7rem;
    }

    #training-calendar .tc-termin,
    #training-calendar .tc-mehr {
        font-size: .6rem;
        padding: 1px 3px;
        border-left-width: 2px;
    }

    /*
     * Auf dem Handy steht auch innerhalb eines Zweiges jeder Eintrag in
     * einer eigenen Zeile. Erst dort ergibt die Einrueckung Sinn -- in der
     * waagerechten Zeile wuerde sie nur ungleiche Luecken erzeugen.
     */
    #training-calendar .tc-zweig {
        flex-direction: column;
        align-items: start;
        gap: .25rem;
    }

    #training-calendar .tc-e1 { padding-left: 1.1rem; }
    #training-calendar .tc-e2 { padding-left: 2.2rem; }
    #training-calendar .tc-e3 { padding-left: 3.3rem; }
}