/*
 * Ergaenzungen zu Bootstrap.
 *
 * Farben, Raster und Komponenten kommen aus dem Stylesheet des konfigurierten Themes
 * (tourenbuch.ui.theme, siehe configuration.Theme), der Farbmodus aus <html data-bs-theme>,
 * gesetzt in fragment/kopf.jspf. Hier steht nur, was Bootstrap nicht mitbringt - im
 * Wesentlichen das Hintergrundbild. Farben deshalb ueber die --bs-*-Variablen, damit sie in
 * jedem Theme und Farbmodus passen.
 */


/* Im Dark-Mode ist die Secondary-Farbe von Bootstrap auf dunklem Grund zu blass. */
[data-bs-theme=dark] .btn-outline-secondary {
    --bs-btn-color: #ececec;
}

/*
 * Ueber dem Bild brauchen Navigationsleiste und Inhaltsflaechen einen eigenen Grund, sonst
 * steht der Text direkt auf dem Foto. Leicht durchscheinend, damit das Bild nicht verschwindet.
 * Das !important ueberstimmt die bg-*-Hilfsklassen von Bootstrap, die selbst !important tragen.
 */
body.with-wallpaper .navbar {
    background-color: rgba(var(--bs-body-bg-rgb), 0.88) !important;
}

body.with-wallpaper .card {
    background-color: rgba(var(--bs-body-bg-rgb), 0.88);
}

/*
 * Sterne der Fuehrer-Bewertung. Bootstrap kennt keine Bewertungsskala; mehr als eine ruhige
 * Farbe und etwas Abstand braucht es dafuer auch nicht.
 */
.sterne {
    color: #ffc107;
    white-space: nowrap;
}

/* Kennzeichnet einen Weg, der im Fuehrer ein "!" traegt. */
.gefaehrlich {
    color: #ff6b6b;
    font-weight: bold;
}

/*
 * Karten auf den Felsdatenseiten. Die Hoehe muss aus dem CSS kommen: eine Kartenbibliothek
 * zeichnet in einen Container, der von sich aus leer und damit null hoch ist. Welche
 * Bibliothek das ist, entscheidet tourenbuch.karte.anbieter - hier steht nur der Rahmen,
 * den jede von ihnen fuellen kann.
 */
.karte {
    height: 20rem;
    max-height: 60vh;
    border-radius: var(--bs-border-radius);
    /* Die Kacheln sind hell; im Dark-Theme braucht die Karte sonst keinen Abschluss. */
    border: 1px solid var(--bs-border-color);
}

/*
 * Leaflet setzt seine Ebenen auf z-index 400 bis 800 und legt sie damit ueber die
 * Bootstrap-Dropdowns der Navigationsleiste (1000 erst ab dem geoeffneten Menue). Die Karte
 * bleibt im Inhaltsbereich, wo sie hingehoert.
 */
.karte.leaflet-container {
    z-index: 0;
}

/*
 * Die bisherige Position in der Redaktionsansicht: sie steht zum Vergleich da, nicht zur
 * Entscheidung. Gesetzt wird die Klasse vom Kartenadapter fuer Marken der Art "bisher".
 */
.karte-marke-bisher {
    filter: grayscale(1);
    opacity: 0.7;
}

/*
 * Die Nachbarn auf der Seite eines Felsens: sie sollen sich auf einen Blick von der Marke des
 * Felsens selbst unterscheiden, ohne dass die Karte bunt wird. Gesetzt wird die Klasse vom
 * Kartenadapter fuer Marken der Art "nachbar".
 */
.karte-marke-nachbar {
    filter: hue-rotate(140deg);
}

/*
 * Der eigene Standort (tags/karte.tag mit standort="true"): ein blauer Punkt mit hellem Rand,
 * darum blass die Genauigkeit - bewusst anders als die Marken der Felsen. Die Klassen setzt der
 * Kartenadapter; die SVG-Attribute der Bibliothek ueberschreibt CSS.
 */
.karte-standort {
    fill: #0d6efd;
    fill-opacity: 1;
    stroke: #fff;
    stroke-width: 3;
}

.karte-standort-genauigkeit {
    fill: #0d6efd;
    fill-opacity: 0.12;
    stroke: #0d6efd;
    stroke-opacity: 0.4;
    stroke-width: 1;
}

/*
 * Der Knopf dazu steht unter dem Zoom und sieht aus wie dessen Knoepfe - die Kacheln sind hell,
 * deshalb auch im Dark-Theme mit dunklem Symbol auf weissem Grund.
 */
.karte-standort-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
}

.karte-standort-knopf:hover {
    background-color: #f4f4f4;
}

/* Waehrend der Browser sucht, pulsiert das Symbol; misslingt es, wird es rot. */
.karte-standort-sucht .icon {
    animation: karte-standort-suchen 1s ease-in-out infinite alternate;
}

.karte-standort-fehler {
    color: #dc3545;
}

@keyframes karte-standort-suchen {
    from { opacity: 1; }
    to { opacity: 0.3; }
}

/*
 * Die Uebersichtskarte eines Gebiets neben der Liste seiner Felsen: hoeher als die Karte eines
 * einzelnen Felsens, und neben einer langen Liste laeuft sie beim Scrollen mit. Auf schmalen
 * Anzeigen steht sie ueber der Liste und bleibt dort.
 */
.uebersichtskarte .karte {
    height: 28rem;
    max-height: 70vh;
}

@media (min-width: 992px) {
    .uebersichtskarte {
        position: sticky;
        top: 1rem;
    }

    /*
     * Neben der Wegeliste steht unter der Karte noch der Kalender - liefe die Karte mit, schoebe
     * sie sich beim Scrollen ueber ihn. Dort bleibt sie deshalb stehen.
     */
    .seitenleiste .uebersichtskarte {
        position: static;
    }
}

/*
 * Gebuendelte Marken (Leaflet.markercluster): der Kreis mit der Anzahl nimmt die Farbe des
 * Themes statt der Ampelfarben der Bibliothek - die Groesse sagt schon die Zahl darin. Das
 * vorangestellte .karte ist noetig: die Stylesheets der Karte kommen nach diesem.
 */
.karte .marker-cluster-small,
.karte .marker-cluster-medium,
.karte .marker-cluster-large {
    background-color: rgba(var(--bs-primary-rgb), 0.35);
}

.karte .marker-cluster-small div,
.karte .marker-cluster-medium div,
.karte .marker-cluster-large div {
    background-color: rgba(var(--bs-primary-rgb), 0.85);
    color: #fff;
    font-weight: bold;
}

/*
 * Vorschlagslisten, die unter einem Eingabefeld aufklappen: das Fels-Suchfeld
 * (fragment/felssuche.jspf) und die Koordinatensuche im Fels-Formular (js/ortssuche.js). Sie
 * haengen unter dem Feld und duerfen den Inhalt darunter verdecken statt ihn zu verschieben -
 * der z-index haelt sie ueber den Karten und Listen der Seite, bleibt aber unter den Dropdowns
 * von Bootstrap (1000).
 */
.felssuche-vorschlaege,
.ortssuche-vorschlaege,
.seilpartner-vorschlaege {
    position: absolute;
    z-index: 900;
    width: 100%;
    max-height: 20rem;
    overflow-y: auto;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

/*
 * Die Seilpartner im Begehungsformular (js/seilpartnerauswahl.js): ein Kasten, der aussieht wie
 * ein Textfeld, mit einem Kaertchen je Partner und dem eigentlichen Eingabefeld dahinter.
 */
.seilpartner-kasten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    cursor: text;
}

.seilpartner-kasten:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.seilpartner-karten {
    display: contents;
}

.seilpartner-eingabe {
    flex: 1 1 8rem;
    min-width: 6rem;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: inherit;
}

.seilpartner-karte {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: normal;
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
}

.seilpartner-karte a {
    color: inherit;
}

.seilpartner-karte .btn-close {
    font-size: 0.6rem;
}

.seilpartner-neu {
    font-size: 0.7rem;
    color: var(--bs-success);
}

/*
 * Die Kartensuche im Fels-Formular (js/kartensuche.js) steht neben dem Standort-Knopf: sie nimmt
 * den restlichen Platz der Zeile, aber nicht mehr, als ein Ortsname braucht. Auf schmalen
 * Bildschirmen rutscht sie in eine eigene Zeile.
 */
.kartensuche {
    flex: 1 1 18rem;
    max-width: 30rem;
}

/*
 * Diagramme der Auswertung (/statistik, js/statistik.js).
 *
 * Die Hoehe muss aus dem CSS kommen: Chart.js zeichnet in ein <canvas>, das sich ohne feste
 * Hoehe des Containers endlos an seinen Inhalt anpasst. Das liegende Balkendiagramm setzt
 * seine Hoehe selbst - sie haengt an der Zahl der Balken.
 *
 * position und width sind ebenso wenig Geschmackssache: Chart.js misst den Platz an diesem
 * Element und passt das <canvas> nur dann an, wenn es positioniert ist. Ohne das waechst die
 * Zeichenflaeche auf schmalen Viewports ueber den Rand hinaus und die ganze Seite scrollt
 * waagerecht.
 */
.diagramm {
    position: relative;
    width: 100%;
    height: 18rem;
    max-height: 60vh;
}

/*
 * Die Farben der Diagramme.
 *
 * Eine geprueft unterscheidbare Reihe: die fuenf Toene liegen im Helligkeitsband des
 * Dark-Themes, halten gegen den Grund der Karten mindestens 3:1 und bleiben auch bei
 * Rot-Gruen- und Blau-Gelb-Schwaeche paarweise auseinanderzuhalten. Die Reihenfolge ist
 * Teil davon und deshalb nicht beliebig umzustellen.
 *
 * Slot 1 traegt allein die beiden Balkendiagramme - eine Reihe braucht keine zweite Farbe.
 * Die uebrigen gehoeren den Begehungsarten in der Torte, jede fest an ihre Art gebunden
 * (siehe artFarbe in js/statistik.js).
 */
:root {
    --tb-diagramm-1: #3987e5;
    --tb-diagramm-2: #d95926;
    --tb-diagramm-3: #199e70;
    --tb-diagramm-4: #c98500;
    --tb-diagramm-5: #d55181;
}

/*
 * Umsortieren einer Liste, eines Tages oder der Wege eines Felsens per Ziehen (siehe
 * js/umsortieren.js).
 *
 * Der Griff traegt den Zeiger, der sagt, dass hier etwas zu bewegen ist; beim Ziehen wird er
 * zur geschlossenen Hand. Die Zeile, die gerade unterwegs ist, bleibt als blasser Platzhalter
 * stehen, damit die Tabelle nicht unter dem Finger zusammenspringt.
 *
 * touch-action: none haelt die Seite still, waehrend am Griff gezogen wird - sonst scrollte
 * sie mit und die Zeile bliebe stehen.
 */
.liste-griff {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.liste-griff:active {
    cursor: grabbing;
}

.liste-zeile-platzhalter {
    opacity: .4;
}

/*
 * Bloecke, die aus Markdown entstanden sind - derzeit die Beschreibung einer Liste
 * (listen/detail.jsp, uebersetzt von de.highbyte_le.tourenbuch.common.Markdown).
 *
 * Das erzeugte HTML ist blank: reine Absaetze, Ueberschriften, Listen. Bootstrap formatiert
 * das alles schon, nur eben fuer eine ganze Seite. Hier steht, was ein solcher Block
 * innerhalb einer Karte braucht.
 *
 * Die Ueberschriften werden gedaempft: ein h1 aus der Beschreibung waere groesser als der
 * Name der Liste darueber und stellte die Seite auf den Kopf. Die Abstufung bleibt erhalten,
 * damit eine Gliederung noch als solche zu lesen ist.
 */
.markdown > :last-child {
    margin-bottom: 0;
}

.markdown h1 { font-size: 1.25rem; }
.markdown h2 { font-size: 1.15rem; }
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 { font-size: 1.05rem; }

/* Ein Bild aus dem Text darf die Karte nicht sprengen. */
.markdown img {
    max-width: 100%;
    height: auto;
}

/*
 * Laengere Adressen und Codeschnipsel haben im Fliesstext keine Trennstellen; ohne diese
 * Angabe schoeben sie die Karte auf schmalen Anzeigen ueber den Rand hinaus.
 */
.markdown {
    overflow-wrap: break-word;
}

/*
 * Derselbe Text als Anriss in einer Kachel - die Uebersicht der Listen (listen/uebersicht.jsp).
 *
 * Eine Kachel steht neben anderen und soll auf einen Blick lesbar sein; eine Gliederung
 * gehoert dort nicht in den Vordergrund. Die Ueberschriften laufen deshalb auf Fliesstext
 * zurueck und bleiben nur fett - die Stufen sind in der Kachel ohnehin nicht zu gebrauchen,
 * und wer die ganze Beschreibung sehen will, klickt auf die Liste.
 */
.markdown-anriss h1,
.markdown-anriss h2,
.markdown-anriss h3,
.markdown-anriss h4,
.markdown-anriss h5,
.markdown-anriss h6 {
    font-size: 1rem;
    margin-bottom: .25rem;
}

.markdown-anriss {
    margin-bottom: 1em;
}

/*
 * Der kleine Monatskalender neben der Wegeliste (WEB-INF/tags/monatskalender.tag).
 *
 * Er soll klein bleiben: die Tabelle hat feste, schmale Spalten und keine eigenen Abstaende,
 * jeder Tag ist ein runder Knopf gleicher Groesse. Verlinkt sind nur die Tage mit Begehungen -
 * sie tragen die Primaerfarbe, damit man die Klettertage auf einen Blick sieht. Der heutige
 * Tag bekommt nur einen Ring, damit er sich mit einem Klettertag vertraegt.
 */
.kalender {
    width: 18rem;
    max-width: 100%;
}

/*
 * Monat und Jahr ueber dem Kalender teilen sich die Zeile mit den Pfeilen: der Monat nimmt,
 * was uebrig ist, das Jahr nur so viel, wie vier Ziffern samt Pfeil des Auswahlfelds brauchen.
 */
.kalender [data-kalender-auswahl] .form-select {
    flex: 1 1 auto;
    min-width: 0;
}

.kalender .kalender-jahr {
    flex: 0 0 5.5rem;
}

.kalender[aria-busy="true"] table {
    opacity: .5;
}

.kalender table {
    table-layout: fixed;
    --bs-table-bg: transparent;
}

.kalender td,
.kalender th {
    padding: .1rem 0;
}

.kalender-tag {
    display: inline-block;
    width: 1.9rem;
    line-height: 1.9rem;
    border-radius: 50%;
    font-size: .875rem;
}

.kalender-tag-begangen {
    background-color: var(--bs-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.kalender-tag-begangen:hover,
.kalender-tag-begangen:focus {
    background-color: var(--bs-primary-text-emphasis);
    color: var(--bs-body-bg);
}

.kalender-heute {
    box-shadow: inset 0 0 0 2px var(--bs-warning);
}

/*
 * Symbole aus tags/icon.tag: so gross wie die Schrift und auf ihrer Grundlinie.
 */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/*
 * Etwas groesser als die Schrift, damit ein Knopf nur mit Symbol so hoch wird wie seine
 * Nachbarn mit Text - etwa "Auf Listen setzen" (tags/listen-aufnahme.tag).
 */
.icon-gross {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.2em;
}

/*
 * Ein gesetztes Filterkriterium ueber der Liste "Meine Wege" (begehungen/liste.jsp), mit
 * einem kleinen Kreuz, das nur dieses Kriterium aufhebt.
 */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35em;
}

.filter-chip .btn-close {
    font-size: .5rem;
}