/* ===============================
   GARDEN — kert-nézet (F9b, KÍSÉRLETI)
   Izolált stíluslap: a kert elvetésekor ez a fájl (+ garden.js)
   nyomtalanul törölhető. A téma-követést a style.css :root /
   body[data-theme="light"] változói adják.
   =============================== */

/* --- Dashboard-kártya --- */

.garden-card {
    background: linear-gradient(145deg, var(--card-bg), var(--bg-lighter));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px 20px;
    margin: 0 0 18px;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.garden-card:active {
    transform: scale(0.99);
}

.garden-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.garden-card-head h2 {
    font-size: 1.1rem;
    margin: 0;
    flex: 1;
}

.garden-card-icon {
    font-size: 1.4rem;
}

.garden-open-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.garden-card-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 8px;
}

.garden-count {
    font-size: 0.95rem;
    white-space: nowrap;
}

.garden-count.zero {
    opacity: 0.35;
}

.garden-card-due {
    font-size: 0.9rem;
    color: var(--warning);
}

.garden-card-due.fresh {
    color: var(--success);
}

/* --- Teljes kert-nézet --- */

/* Felépítés a badges-nézet MINTÁJÁRA (index.php): a címsor a közös
   .badges-head-del a kártyán KÍVÜL áll, a tartalom a style.css közös
   .section kártyájában (#garden.section.active) — itt nincs saját
   konténer/címsor stílus. */

/* A nézet-konténer explicit szélességgel: a body középre igazító flexében
   e nélkül shrink-to-fit (intrinsic) szélességet kap, amit a nem törhető
   sorok (nowrap ágyás-cím, jelmagyarázat-elemek) mobil böngészőben pár
   px-lel a viewport fölé tolhatnak — ebből jött a zavaró minimális
   vízszintes görgetés (2026-08-26). A 800px plafon a közös .section-é. */
#gardenSection {
    width: 100%;
    max-width: 800px;
}

/* A kert szekció-háttere: meleg föld-szín átmenet a közös kék .section
   helyett — a zöld ágyások „talaja". Saját színű, ezért light témában is
   így néz ki (az ID-szelektor felülüti a téma-szabályokat). */
#garden.section {
    background: linear-gradient(135deg, #2b2318, #1d1710);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Felső összefoglaló — az ORW kártya-dizájnnyelven (zöld: a kert színe);
   gyűrű = beérett/összes, dísz-polc egyforma pirulákkal */
.garden-summary {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #1b5e41, #2e8b62);
    border-radius: 18px;
    padding: 16px;
    margin: 0 0 18px;
    box-shadow: 0 10px 28px rgba(25, 85, 60, 0.35);
    color: #fff;
    text-align: left;
}
.garden-summary::before {
    content: '';
    position: absolute;
    top: -60px; right: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 65%);
    pointer-events: none;
    z-index: -1;
}
.garden-summary::after {
    content: '🌸';
    position: absolute;
    right: -16px; bottom: -24px;
    font-size: 100px;
    opacity: 0.08;
    transform: rotate(-12deg);
    pointer-events: none;
    z-index: -1;
}

.garden-hero { display: flex; align-items: center; gap: 14px; }
.garden-ring {
    --pct: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(var(--gold) calc(var(--pct) * 1%), rgba(255, 255, 255, 0.15) 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.25));
}
.garden-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #12452f;
}
.garden-ring-value { position: relative; font-size: 1.3em; font-weight: 700; line-height: 1; }
.garden-ring-target { position: relative; font-size: 0.62em; color: rgba(255, 255, 255, 0.6); margin-top: 1px; }

.garden-hero-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* Locsolás-gomb a hős-blokk jobb szélén: nagy érintőfelület, ikon +
   felirat, visszafogott sötét pirula-háttér (a dizájnnyelv .decor /
   .bed-pill családja) — nem nyomja el a gyűrűt és a szöveget */
.garden-water-btn {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 64px;
    min-height: 64px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s;
}

.garden-water-btn:active {
    transform: scale(0.94);
    background: rgba(0, 0, 0, 0.32);
}

.garden-water-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.garden-water-label {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

/* Mobil: a 3 oszlop (gyűrű | szöveg | gomb) szűk kijelzőn összenyomná
   a középső szöveget — a gomb teljes szélességű sávként a gyűrű+szöveg
   ALÁ törik (nagy érintőfelület, a sávban az ikon+felirat egy sorban).
   A töréspont a közös .section mobil-szabályáé (600px). */
@media (max-width: 600px) {
    .garden-hero { flex-wrap: wrap; }
    .garden-water-btn {
        flex-direction: row;
        width: 100%;
        min-height: 48px;
        gap: 8px;
        padding: 8px 12px;
    }
    .garden-water-icon { font-size: 1.25rem; }
    .garden-water-label { font-size: 0.72rem; }
}
.garden-title {
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.garden-status { font-size: 1.08em; font-weight: 700; line-height: 1.2; }
.garden-hype { font-size: 0.78em; color: rgba(255, 255, 255, 0.65); }

/* Dísz-polc: minden feloldott dísz egyforma pirulában; a következő
   halványítva, arany szint-érmével a sarkán */
.garden-decor {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.garden-decor .decor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.35em;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 10px;
}
.garden-decor .decor.next { position: relative; }
.garden-decor .decor.next .decor-icon {
    filter: grayscale(1);
    opacity: 0.45;
}
.garden-decor .decor-level {
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--gold);
    color: #5b4300;
    font-size: 0.55rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

/* Növény-modal — a style.css badge-modal osztályaira épül (overlay,
   kártya, gomb, pop-in/float animáció), itt csak a kert-specifikus sorok */
.garden-modal-content {
    min-width: 260px;
    max-width: min(360px, 86vw);
}

.garden-modal-icon {
    position: relative;
    display: inline-block;
    font-size: 8rem;
    line-height: 1;
    animation: badgeFloat 3s ease-in-out infinite;
}

/* Szomjas-csepp a jobb felső sarokban — vizuálisan azonos a kerti rács
   .plant.due::after jelzésével, a nagy ikonhoz méretezve */
.garden-modal-icon.due::after {
    content: '💧';
    position: absolute;
    top: -0.1em;
    right: -0.18em;
    font-size: 1.8rem;
}

.garden-modal-content .badge-modal-name {
    font-size: 2.1em;
    margin-top: 18px;
}

.garden-modal-meaning {
    font-size: 1.1em;
    font-style: italic;
    color: var(--text);
    opacity: 0.85;
}

/* Gomb egységes el-tartással fent/lent, alatta a magyarázó sor */
.garden-modal-content .badge-modal-btn {
    margin-top: 18px;
}

.garden-modal-note {
    margin-top: 18px;
    font-size: 0.95em;
    color: var(--text-muted);
}

/* Ágyások — a zöld kert-család sötétebb paneljei (az összefoglaló marad
   a hős); saját színűek, ezért light témában is így néznek ki */
.garden-bed {
    background: linear-gradient(135deg, #17382a, #1e4a36);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
    box-shadow: 0 4px 14px rgba(15, 50, 35, 0.25);
    color: #fff;
}

/* A dashboard-kártya (kikommentezett belépő) keret-színe light témában */
body[data-theme="light"] .garden-card {
    border-color: #e0e0e0;
}

.garden-bed-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.garden-bed-name {
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ágyás-statok pirulában (a dizájnnyelv pirula-eleme) */
.garden-bed-pills {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.bed-pill {
    font-size: 0.72em;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

.bed-pill-due {
    background: rgba(70, 140, 220, 0.3);
    color: #cfe6ff;
}

.bed-pill-star {
    color: var(--gold);
}

.garden-bed-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Növények — érintőbarát csempék: sötét „talaj-fészek" a zöld panelen */
.plant {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.plant:active {
    transform: scale(0.92);
}

/* Szomjas: csepp-jelvény + halvány vizes derengés */
.plant.due {
    box-shadow: 0 0 0 1.5px rgba(120, 190, 255, 0.45);
}

.plant.due::after {
    content: '💧';
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.7rem;
}

/* Beérett: arany derengés — ez a polc dísze */
.plant.stage-beerett {
    background: rgba(255, 215, 0, 0.14);
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* Jelmagyarázat */
.garden-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 16px;
    padding: 10px 4px 30px;
    /* A föld-színű háttéren fix világos árnyalat (a --text-muted light
       témában túl sötét lenne hozzá) */
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
}

/* Ikon + felirat egy sorban, közös függőleges középvonalon */
.garden-legend span {
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
    white-space: nowrap;
}