/* Pending Status – ein Chip in der Meta-Leiste der Trefferliste
   (siehe .pending-suggestion-meta in suggestions.css) */
.pending-status-list {
    margin: var(--space-4) 0 var(--space-6) 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.pending-status {
    font-size: var(--text-11);
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: var(--space-2) 7px;
    border-radius: 10px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    /* Kein nowrap: In der Meta-Leiste muss der Chip auf schmalen Displays umbrechen
       duerfen, statt die Zeile ueber den Bildschirmrand zu schieben. */
    max-width: 100%;
}
.pending-status-info {
    color: var(--text-muted);
}
.pending-status-success {
    color: var(--success-text);
    font-weight: 500;
}
.pending-status-error {
    color: var(--danger-text);
    font-weight: 500;
}
.pending-status-waiting {
    color: var(--accent);
}
/* Component Styles - Cards, Forms, Buttons, Tables, Badges */

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-24);
}

/* Forms */
input,
textarea,
select {
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text);
}

input::placeholder {
    color: var(--text-muted);
}

button {
    /* --accent-contrast ist die fuer Weiss-auf-Flaeche gedachte Tonstufe
       (siehe base.css) und wird an anderen Stellen (z.B. header.css,
       login.css) ebenso verwendet - mit dem Waldgruen-Akzent schafft bereits
       --accent selbst genug Kontrast, --accent-contrast bleibt als eigener
       Token trotzdem bestehen (kein Umbau der Verbraucher in dieser Phase). */
    background: var(--accent-contrast);
    color: #fff;
    border: 0;
    padding: var(--space-8) var(--space-12);
    border-radius: var(--radius-md);
    cursor: pointer;
}

button:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

button.secondary {
    background: var(--muted);
}

button.danger {
    background: var(--danger);
}

fieldset {
    border: 1px solid var(--border);
    padding: var(--space-12);
    border-radius: var(--radius-md);
}

fieldset.fieldset-reset {
    border: none;
    padding: 0;
    margin: 0;
}

/* Table */
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: var(--space-10);
    border-bottom: 1px solid var(--border);
    text-align: left;
    color: var(--text);
}

th {
    background: transparent;
    font-weight: 600;
    color: var(--text-muted);
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.muted-small {
    font-size: var(--text-13);
    color: var(--text-muted);
}

.muted-italic {
    color: var(--text-muted);
    font-style: italic;
}

.value-display-small {
    font-size: var(--text-14);
    color: var(--accent);
    text-align: right;
    font-weight: 600;
}

/* Progress Bar */
.progress-bar {
    width: 0%;
    height: 8px;
    background: linear-gradient(90deg, var(--accent), #06b6d4);
    border-radius: var(--radius-md);
    transition: width 0.3s;
}

/* Spinner Animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.wkf-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-top-color: var(--accent);
    animation: spin 800ms linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--space-8);
}

/* Responsive helpers */
@media (max-width: 640px) {
    .input-row {
        flex-direction: column;
        gap: var(--space-12);
    }

    .input-row label {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    table {
        font-size: var(--text-14);
    }
}

/* ── Geolocation Notification ──────────────────────────────────────── */
.geo-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--success);
    color: white;
    padding: var(--space-16) var(--space-24);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

/* ── Weights Bar Summary ───────────────────────────────────────────── */
.weights-bar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
}
.weights-bar-heading {
    color: var(--text);
}
.weights-bar-adjust-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: var(--space-6) var(--space-10);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.weights-bar-container {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}
.weights-bar-seg {
    height: 10px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.weights-bar-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-8);
    color: var(--text-muted);
    font-size: var(--text-13);
}
.weights-bar-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}
.weights-bar-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Location Suggestion Box ───────────────────────────────────────── */
/* Bewusst immer dunkel (unabhängig vom Theme): schwebt frei über der Seite und
   .location-suggestion-item:hover nutzt einen weißen Overlay-Hover, der nur auf
   dunklem Grund funktioniert. --card-bg ist deshalb lokal fixiert, nicht --card. */
.location-suggestions {
    position: absolute;
    --card-bg: #111827;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    z-index: 1100;
    overflow: hidden;
}

.location-suggestion-item {
    padding: var(--space-10) var(--space-12);
    cursor: pointer;
    color: var(--text);
    background: var(--card-bg);
}

/* Die per Pfeiltasten aktive Option wird identisch zum Hover hervorgehoben. Der
   Selektor hängt bewusst an aria-selected, damit die sichtbare und die
   angesagte Auswahl nicht auseinanderlaufen können. */
.location-suggestion-item[aria-selected="true"] {
    background: rgba(255, 255, 255, 0.06);
}

/* ── Metric product card layout ─────────────────────────────────────── */
.metric-product-card {
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.metric-product-info {
    flex: 1;
    min-width: 0;
}
.metric-product-meta {
    font-size: var(--text-12);
    color: var(--text-muted);
    margin-top: var(--space-2);
}
.metric-product-image-fallback {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-22);
    flex-shrink: 0;
}

/* ── Chart Tooltip Host ─────────────────────────────────────────────── */
.chart-tooltip-host {
    position: relative;
}

/* Hover-Effekte nur für echte Zeigegeräte: auf Touch bleibt der
   Hover-Zustand nach dem Tap kleben, bis woanders hingetippt wird. */
@media (hover: hover) and (pointer: fine) {
    .metric-product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* Gleiche Hervorhebung wie die per Pfeiltasten aktive Option
       (.location-suggestion-item[aria-selected="true"]) – die bleibt
       bewusst ungekapselt, damit sichtbare und angesagte Auswahl
       nicht auseinanderlaufen. */
    .location-suggestion-item:hover {
        background: rgba(255, 255, 255, 0.06);
    }
}