/* ═══════════════════════════════════════════════════════════════════
   WEATHERHUNTERS — Kante der Marke

   Wird als LETZTES geladen, nach dashboard.css und shop.css. Diese
   beiden bringen noch runde Formen aus ihrer Entstehungszeit mit; hier
   werden alle Bedienelemente auf die Kante der Registrierung gezogen:
   Knopf 3 px, Feld 4 px. Rund bleibt nur, was man nicht bedient —
   Abzeichen, Zähler, Avatar, Kartenmarker.
   ═══════════════════════════════════════════════════════════════════ */

.btn, .sbtn, .wh-btn, button.wh-btn,
.acc-summary, .shop-tab, .shop-chip,
.wh-nav-link, .wh-menu-panel a, .wh-menu-panel button,
.wrap button, .act button, form.act button {
    border-radius: var(--wh-r-btn, 3px);
}

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="tel"], select, textarea,
.shop-search input, .shop-filters select, .shop-filters input,
.shop-line-opts select, .cart-license select, .acc-form input, .acc-form select,
.acc-form textarea, .shop-field select, .shop-licence select {
    border-radius: var(--wh-r-input, 4px);
}

.shop-tabs { border-radius: 6px; padding: 3px; }

.wh-card, .settings-card, .shop-card, .shop-tile, .sc-tool, .sc-stat,
.sc-status, .ccard, .shop-line-media img, .shop-detail-media {
    border-radius: var(--wh-r, 12px);
}

/* Diese bleiben rund */
.wh-badge, .wh-nav-count, .wh-tab-count, .wh-avatar, .arch-cluster,
.shop-badge, .as-status, .shop-state, .flag, .notif-badge {
    border-radius: 999px;
}

/* Das Logo trägt die Markenfarbe als Datei, nicht als Filter —
   ein Filter kostet bei jedem Neuzeichnen Rechenzeit. */
.wh-nav-logo img { filter: none; }


/* ─────────── Kopfleiste sitzt oben am Bildschirmrand ───────────
   dashboard.css setzt fuer body.has-navbar ein Polster von 72 px —
   das war fuer die alte, fest positionierte Leiste noetig. Die neue
   Leiste klebt (position: sticky) und braucht kein Polster; sonst
   klafft oben eine Luecke. */

body.has-navbar { padding-top: 0; }

/* Das untere Polster fuer die Fussleiste bleibt davon unberuehrt */
@media (max-width: 780px) {
    body.has-navbar { padding-bottom: var(--wh-tabbar); }
}


/* ═══════════════ Zwei Fehler aus dem Umbau ═══════════════ */

/* 1. Ein Element mit eigener display-Angabe ignoriert das
      hidden-Attribut. Dialog und Schublade lagen dadurch unsichtbar
      ueber der ganzen Seite und haben jeden Klick geschluckt. */

.wh-modal[hidden],
.wh-drawer[hidden] { display: none !important; }

/* Guertel und Hosentraeger: solange nicht geoeffnet, faengt nichts
   Klicks ab — auch wenn irgendwo doch wieder display gesetzt wird. */
.wh-modal:not(.is-open),
.wh-drawer:not(.is-open) { pointer-events: none; }
.wh-modal.is-open, .wh-drawer.is-open { pointer-events: auto; }


/* 2. Leaflet legt seine Ebenen auf z-index 400 bis 700 und die
      Bedienelemente auf 1000. Die Navigation lag mit 100 darunter und
      wurde beim Scrollen von der Karte ueberdeckt. */

.wh-nav    { z-index: 1200; }
.wh-tabbar { z-index: 1200; }
.wh-drawer { z-index: 1300; }
.wh-modal  { z-index: 1400; }

/* Die Karte bekommt einen eigenen Stapelkontext, damit ihre inneren
   Ebenen nicht mehr gegen die Seite konkurrieren. */
.shop-map-wrap, .wh-map-stage, #archMap { position: relative; z-index: 0; isolation: isolate; }

/* ─── Auswahlfelder ───
   Mehrere Stylesheets setzen `background:` als Kurzform und löschen
   damit den Pfeil. Diese Regel steht am Ende der Ladekette und holt
   ihn zurück — für jede Auswahl, auch für die, die es noch nicht
   gibt. Die aufgeklappte Liste selbst zeichnet der Browser; dass sie
   dunkel bleibt, regelt color-scheme im Designsystem. */

select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff88' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 15px;
    padding-right: 2.1rem;
    -webkit-appearance: none;
    appearance: none;
}


/* ─────────── Der Mittelpunkt der Fußleiste ───────────
   Betreiber-Anweisung vom 25.08.2026: "Start" soll sich vom Rest der
   Fußleiste abheben, wie der Mittelknopf einer App.

   Die Hervorhebung darf das Raster nicht anfassen — die fünf Spalten
   bleiben flex:1, die Bedienfläche bleibt die volle Spalte (bei 390 px
   sind das 78 × 58 px, weit über den 44 px Mindestmaß). Deshalb wächst
   allein das Symbol, und der Schein dahinter liegt absolut über der
   Spalte, ohne im Fluss Platz zu belegen. Die Nachbarn rücken um
   keinen Pixel.

   Dass die Symbolreihe trotzdem auf einer Linie bleibt, ist kein
   Zufall: Der Tab zentriert seinen Inhalt senkrecht, also liegt die
   Mitte des Symbols bei 21 px und 26 px Größe an derselben Stelle.

   Der Akzent ist ein weicher Goldschein, kein Ring. Ein harter Kreis
   um ein 26-px-Symbol bräuchte in einer 58 px hohen Leiste mehr Höhe,
   als zwischen Oberkante und Beschriftung übrig ist — und die Marke
   hält runde FLÄCHEN ohnehin denen vor, die man nicht bedient
   (Abzeichen, Zähler, Avatar). Der Farbwert ist das Gold des
   Designsystems (--wh-gold: #E8C96B), hier als Verlauf ausgeschrieben,
   weil ein Verlauf zwei Deckkraft-Stufen derselben Farbe braucht. */

@media (max-width: 780px) {

    .wh-tab-mid svg { width: 26px; height: 26px; }

    .wh-tab-mid { color: var(--wh-text-dim); font-weight: 600; }

    .wh-tab-mid::before {
        content: "";
        position: absolute;
        top: 50%; left: 50%;
        width: 44px; height: 44px;
        margin: -30px 0 0 -22px;
        border-radius: 999px;
        background: radial-gradient(circle,
                    rgba(232, 201, 107, .20) 0%,
                    rgba(232, 201, 107, .10) 42%,
                    rgba(232, 201, 107, 0) 72%);
        pointer-events: none;
    }

    /* Steht man auf dem Dashboard, trägt der Punkt ohnehin das Gold der
       Schrift — dann darf der Schein etwas kräftiger werden. */
    .wh-tab-mid.is-active::before {
        background: radial-gradient(circle,
                    rgba(232, 201, 107, .30) 0%,
                    rgba(232, 201, 107, .15) 42%,
                    rgba(232, 201, 107, 0) 72%);
    }

}