/* _content/Gardener/Components/Plants/PlantVariantConditionsPanel.razor.rz.scp.css */
/* ============================================================
 * \file    PlantVariantConditionsPanel.razor.css
 * \project Gardener – Plant Library Module
 * \version 1.4.0
 * \date    2026-03-22
 * \author  Emil
 * \copyright (c) 2026 AgriPlace. All rights reserved.
 * \brief   Scoped styles for the Plant Variant condition badge panel.
 * \details Defines the 2×2 grid layout, per-category colour theming,
 *          badge anatomy (label + sub-label), skeleton loading bars,
 *          and empty-state presentation.
 *          All colours use CSS custom properties so they inherit the
 *          Gardener theme tokens (--rz-primary, --rz-text-color, etc.).
 * ============================================================ */

/* ── Panel shell ───────────────────────────────────────────── */
.pvc-panel[b-2hmb6fw7hw] {
    margin-top: 1.25rem;
    padding: 0;
}

/* ── 2×2 responsive grid ───────────────────────────────────── */
.pvc-grid[b-2hmb6fw7hw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
}

/* ── Group card ─────────────────────────────────────────────── */
.pvc-group[b-2hmb6fw7hw] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.pvc-group-header[b-2hmb6fw7hw] {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .15rem;
}

.pvc-group-icon[b-2hmb6fw7hw] {
    font-size: 1rem;
    line-height: 1;
}

.pvc-group-title[b-2hmb6fw7hw] {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rz-text-disabled-color, #888);
}

/* ── Badge row ──────────────────────────────────────────────── */
.pvc-badge-row[b-2hmb6fw7hw] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

/* ── Badge base ─────────────────────────────────────────────── */
.pvc-badge[b-2hmb6fw7hw] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: .25rem .6rem;
    border-radius: 1rem;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.3;
    cursor: default;
    transition: opacity .15s ease, transform .15s ease;
    border: 1px solid transparent;
}

.pvc-badge:hover[b-2hmb6fw7hw] {
    opacity: .85;
    transform: translateY(-1px);
}

/* ── Badge sub-label ────────────────────────────────────────── */
.pvc-badge-sub[b-2hmb6fw7hw] {
    font-size: .65rem;
    font-weight: 400;
    opacity: .75;
    margin-top: .05rem;
    white-space: nowrap;
}

/* ── Per-category colour theming ────────────────────────────── */

/* Light – amber/yellow tones */
.pvc-badge--light[b-2hmb6fw7hw] {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

/* Weather – sky-blue tones */
.pvc-badge--weather[b-2hmb6fw7hw] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a5f;
}

/* Media – earthy green tones */
.pvc-badge--media[b-2hmb6fw7hw] {
    background: #f0fdf4;
    border-color: #86efac;
    color: #14532d;
}

/* Tolerancy – muted purple/violet tones */
.pvc-badge--tolerancy[b-2hmb6fw7hw] {
    background: #f5f3ff;
    border-color: #c4b5fd;
    color: #3b0764;
}

/* ── Empty state ────────────────────────────────────────────── */
.pvc-panel--empty[b-2hmb6fw7hw] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem 1rem;
    border-radius: .5rem;
    background: var(--rz-base-background-color, #f9fafb);
    border: 1px dashed var(--rz-border-color, #d1d5db);
}

.pvc-empty-icon[b-2hmb6fw7hw] {
    font-size: 1.3rem;
    opacity: .5;
}

.pvc-empty-label[b-2hmb6fw7hw] {
    font-size: .8rem;
    color: var(--rz-text-disabled-color, #9ca3af);
    font-style: italic;
}

/* ── Skeleton loading ───────────────────────────────────────── */
.pvc-panel--skeleton[b-2hmb6fw7hw] {
    padding: .5rem 0;
}

.pvc-skeleton-bar[b-2hmb6fw7hw],
.pvc-skeleton-badge[b-2hmb6fw7hw] {
    background: linear-gradient(
        90deg,
        var(--rz-base-background-color, #f3f4f6) 25%,
        #e5e7eb 50%,
        var(--rz-base-background-color, #f3f4f6) 75%
    );
    background-size: 200% 100%;
    animation: pvc-shimmer-b-2hmb6fw7hw 1.4s infinite;
    border-radius: .5rem;
}

.pvc-skeleton-bar[b-2hmb6fw7hw] {
    height: .75rem;
    margin-bottom: .6rem;
}

.pvc-skeleton-row[b-2hmb6fw7hw] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.pvc-skeleton-badge[b-2hmb6fw7hw] {
    height: 1.6rem;
    width: 5rem;
    border-radius: 1rem;
}

@keyframes pvc-shimmer-b-2hmb6fw7hw {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Dark-mode overrides ────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .pvc-badge--light[b-2hmb6fw7hw]    { background: #451a03; border-color: #92400e; color: #fde68a; }
    .pvc-badge--weather[b-2hmb6fw7hw]  { background: #0c1a2e; border-color: #1e40af; color: #bfdbfe; }
    .pvc-badge--media[b-2hmb6fw7hw]    { background: #052e16; border-color: #166534; color: #86efac; }
    .pvc-badge--tolerancy[b-2hmb6fw7hw]{ background: #2e1065; border-color: #5b21b6; color: #c4b5fd; }
}