/* ==========================================================================
   GRAFY NA PLOCHE
   ==========================================================================
   Stĺpcové grafy po mesiacoch z návrhu (Fotky/image.png a image (2).png).

   Kreslia sa bežnými značkami, nie knižnicou - dôvody sú v triede stránky
   App\Filament\Clusters\Plocha\Pages\UvodneStatistiky. Značky pripravuje
   resources/views/filament/partials/graf-po-mesiacoch.blade.php.

   Farby sú ODMERANÉ z návrhu (System.Drawing nad image (2).png), nie
   odhadnuté - preto sú pri nich uvedené presné kódy.
   ========================================================================== */

:root {
    --be-graf-stlpec:      #32373D;   /* (M) bežný mesiac */
    --be-graf-teraz:       #CCF738;   /* (M) aktuálny mesiac */
    --be-graf-os:          #E6E6E6;   /* (M) čiara pod stĺpcami */

    --be-graf-vyska-plochy:  210px;   /* (M) výška samotných stĺpcov */
}

/* --------------------------------------------------------------------------
   1. KARTA S GRAFOM
   -------------------------------------------------------------------------- */
.be-graf-karta {
    padding: 20px 22px 16px;

    border: 1px solid var(--be-divider);
    border-radius: 10px;
    background: var(--be-surface);
}

.be-graf-nadpis {
    margin: 0 0 14px;

    color: var(--be-active);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

/* --------------------------------------------------------------------------
   2. VÝBER NAD GRAFOM
   --------------------------------------------------------------------------
   Vzhľadovo je to to isté pole ako vo formulároch (45 px, zaoblenie 8 px,
   sivý okraj), len bez plávajúceho názvu - v návrhu nad ním žiadny nie je.
   Preto sa nepoužíva .be-pole, ale samostatné pravidlo; miešať to by
   znamenalo vypínať polovicu vlastností .be-pole.
   -------------------------------------------------------------------------- */
.be-graf-vyber {
    display: block;
    margin-bottom: 18px;
}

.be-graf-vyber select {
    width: 100%;
    height: 45px;                 /* (M) rovnako ako polia formulárov */
    padding: 0 40px 0 13px;       /* vpravo miesto pre šípku */

    border: 1px solid var(--be-divider);
    border-radius: 8px;
    background: var(--be-surface);

    color: var(--be-active);
    font-family: inherit;
    font-size: 15px;

    /* Vlastná šípka namiesto systémovej - systémová vyzerá v každom
       prehliadači inak a v návrhu je jedna konkrétna. */
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000000' stroke-width='2'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;

    cursor: pointer;
}

.be-graf-vyber select:focus {
    border-color: var(--be-active);
    outline: none;
}

/* --------------------------------------------------------------------------
   3. SAMOTNÝ GRAF
   --------------------------------------------------------------------------
   Mriežka s dvanástimi rovnakými stĺpcami. Mriežka, nie pružné rozloženie:
   stĺpce aj skratky mesiacov pod nimi tak lícujú samy od seba a nie je
   potrebné nikde dopočítavať šírky.
   -------------------------------------------------------------------------- */
.be-graf {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.be-graf-polozka {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

/*
   Plocha jedného mesiaca.
   --------------------------------------------------------------------------
   MUSÍ byť samostatný prvok s PEVNOU výškou. Percentuálna výška stĺpca sa
   počíta z výšky jeho rodiča - keby bol rodičom celý stĺpček aj so skratkou
   mesiaca pod ním, stĺpec so 100 % by bol vyšší než plocha grafu a prečnieval
   by cez susedov.

   Zároveň je na nej čiara osi, takže tá pokračuje aj pod mesiacmi, ktoré sú
   nulové a stĺpec vôbec nemajú.
*/
.be-graf-plocha {
    display: flex;
    align-items: flex-end;      /* stĺpec stojí na osi, nie visí zhora */
    justify-content: center;    /* úzky stĺpec je v strede svojho miesta */

    width: 100%;
    height: var(--be-graf-vyska-plochy);

    border-bottom: 1px solid var(--be-graf-os);
}

/*
   Výšku dáva premenná --be-graf-vyska zo šablóny - percento z najvyššej
   hodnoty v grafe.

   Šírka je zámerne menšia než miesto, ktoré stĺpec má: v návrhu sú stĺpce
   výrazne užšie než medzery medzi nimi (odmerané 13 px stĺpec, 25 px medzera).
   Strop v pixeloch zabráni tomu, aby na širokej obrazovke vznikli z dvanástich
   mesiacov dvanásť širokých blokov.
*/
.be-graf-stlpec {
    position: relative;

    width: 55%;
    max-width: 18px;   /* (M) */
    height: var(--be-graf-vyska, 0%);

    background: var(--be-graf-stlpec);
}

/* Aktuálny mesiac - v návrhu jediný svetlozelený stĺpec. */
.be-graf-teraz .be-graf-stlpec {
    background: var(--be-graf-teraz);
}

.be-graf-mesiac {
    margin-top: 8px;

    color: var(--be-muted);
    font-size: 10px;           /* (M) v návrhu drobné popisy pod stĺpcami */
    line-height: 1;
    white-space: nowrap;
}

/*
   Hodnota nad stĺpcom.
   --------------------------------------------------------------------------
   V návrhu vidieť nie je, ale bez nej sa z grafu nedá prečítať konkrétne
   číslo - a to je pri prehľade to najčastejšie, čo človek chce. Preto je
   v značke vždy (odčítavač obrazovky ju číta), a zobrazí sa až pri prejdení
   myšou. Vzhľad návrhu to nemení.
*/
.be-graf-hodnota {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    z-index: 2;

    padding: 3px 7px;
    border-radius: 5px;

    background: var(--be-graf-stlpec);
    color: #FFFFFF;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;

    opacity: 0;
    transition: opacity 0.12s ease;
    pointer-events: none;
}

.be-graf-polozka:hover .be-graf-hodnota,
.be-graf-polozka:focus-within .be-graf-hodnota {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   4. PRÁZDNY GRAF
   --------------------------------------------------------------------------
   Rok bez jediného záznamu. Prázdna plocha by vyzerala ako chyba, preto sa
   priznáva slovom - a zaberá rovnakú výšku, takže sa stránka pri prepnutí
   roka nepreskupí.
   -------------------------------------------------------------------------- */
.be-graf-prazdny {
    display: flex;
    align-items: center;
    justify-content: center;

    height: calc(var(--be-graf-vyska-plochy) + 26px);
    margin: 0;

    color: var(--be-muted);
    font-size: 14px;
    text-align: center;
}

/* Hodnota nad najvyšším stĺpcom by inak vytŕčala nad kartu. */
.be-graf {
    padding-top: 22px;
}

/* --------------------------------------------------------------------------
   5. VÝBER ROKA NAD OBOMA GRAFMI
   --------------------------------------------------------------------------
   V návrhu stojí vpravo na úrovni nadpisu stránky ("funkcie modulu",
   backend definicia prostredia/image1.png a image6.png: rámček
   1190-1348 x 89-133, teda 159 x 45 px, 24 px pod hornou hranou karty
   a vpravo zarovnaný s obsahom).

   Nadpis vykresľuje Filament vo vlastnom bloku nad obsahom, takže sa tam
   výber nedá vložiť priamo. V značke je prvým prvkom obsahu a do riadku
   nadpisu ho položí absolútne umiestnenie voči obalu hlavičky a obsahu
   (.fi-page-header-main-ctn má position: relative - backend.css).
   Na mobile sa vracia do toku, viď ResponzivitaService.
   -------------------------------------------------------------------------- */
.fi-main .fi-page-header-main-ctn:has(.be-plocha-rok) {
    position: relative;
}

.be-plocha-rok {
    position: absolute;
    top: 24px;         /* (M) */
    right: 32px;       /* (M) = pravé odsadenie obsahu */
    z-index: 2;
    display: flex;
    justify-content: flex-end;
}

.be-plocha-rok .be-graf-vyber {
    width: 159px;      /* (M) */
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6. SÚHRNNÉ ČÍSLA POD GRAFMI
   -------------------------------------------------------------------------- */
.be-graf-karta + .be-stat-grid,
.be-columns + .be-stat-grid {
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   7. TEXT LEN PRE ODČÍTAVAČE OBRAZOVKY
   --------------------------------------------------------------------------
   Roletky nad grafmi v návrhu popis nemajú - ale pole bez popisu prečíta
   odčítavač obrazovky len ako "zoznam". Popis je preto v značke a skrytý
   takto, nie cez display: none - to by ho odstránilo aj z čítania.
   -------------------------------------------------------------------------- */
.be-skryte-vizualne {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   8. MOBIL
   --------------------------------------------------------------------------
   Návrh (image (2).png) ukazuje grafy pod sebou cez celú šírku a výber roka
   tiež cez celú šírku. Skladanie stĺpcov pod seba rieši .be-columns
   v backend.css, tu zostáva len roletka roka a nižšie stĺpce.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   RESPONZÍVNE PRAVIDLÁ TU NIE SÚ
   ==========================================================================
   Hľadáš, kedy sa toto preskladá na tablete alebo mobile? Je to v

       Core/app/Services/ResponzivitaService.php

   Nie je to rozmar: šesť hraničných bodov sa zadáva v Nastaveniach → Identita
   a pravidlo @media hodnotu z premennej prečítať nevie. Jediný spôsob, ako tie
   hodnoty naozaj riadiť z Nastavení, je pravidlá vygenerovať. Kým boli tu
   napevno, nastavenia sa síce uložili, ale nerobili nič.

   V tom súbore sú pohromade pravidlá pre administráciu aj pre verejnú časť,
   usporiadané od najširšej obrazovky po najužšiu.
   ========================================================================== */