/*
 * HH Budget – mobil (kis képernyős) korrekciók
 *
 * A Filament/Tailwind alap stílusai után töltődik be (styles.end render hook),
 * így felül tudja írni azokat. Két fő dolgot csinál:
 *
 *   1. A táblázatokat 640px alatt "álló" kártyás elrendezésbe forgatja,
 *      hogy ne kelljen vízszintesen görgetni (illetve ne vágódjon le a tartalom).
 *      A cellák feliratát a hh-mobile.js teszi rá `data-hh-label` attribútumként.
 *   2. Kijavít néhány visszatérő tördelési hibát (pill/badge, szűk fejlécek,
 *      grafikonok magassága).
 */

/* ------------------------------------------------------------------ *
 * 1. Badge / pill – soha ne törjön ketté a lekerekített háttér
 * ------------------------------------------------------------------ */

/*
 * Az inline <span class="rounded-full px-2 ..."> elemek több sorba tördelve
 * két fél-pirulára esnek szét (a háttér és a lekerekítés elvágódik).
 * Az inline-block ezt megszünteti: a háttér egy dobozként viselkedik, a szöveg
 * pedig azon belül tördelődik.
 *
 * A :not(...) azért kell, hogy a már inline-flex-ként megírt badge-eket
 * (és a színes pöttyöket, amik <div>-ek) ne írjuk felül.
 */
span.rounded-full:not(.inline-flex):not(.flex):not(.block),
span.rounded:not(.inline-flex):not(.flex):not(.block) {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}

/* A pill belsejében a hosszú kategórianevek tördelődhessenek */
.hh-badge {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ *
 * 2. Táblázat -> kártya 640px alatt
 * ------------------------------------------------------------------ */

@media (max-width: 640px) {
    /* A Filament táblázat-konténer vízszintes görgetése kártyás módban felesleges */
    .filament-tables-table-container[data-hh-cards-container] {
        overflow-x: visible;
    }

    /*
     * Csak az ÜRES értékű attribútum számít: azt a hh-mobile.js teszi rá a
     * kártyásítható táblákra. A `data-hh-cards="skip"` a kimaradó táblák jelölése,
     * ezért a szelektor nem lehet a puszta [data-hh-cards] – az azt is eltalálná.
     */
    table[data-hh-cards=""] {
        display: block;
        width: 100%;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
        /* a Filament <table> divide-y-t használ, kártyás módban ez zavaró */
        border-top-width: 0;
    }

    table[data-hh-cards=""] > thead {
        display: none;
    }

    table[data-hh-cards=""] > tbody,
    table[data-hh-cards=""] > tfoot {
        display: block;
        width: 100%;
        /* a Filament tbody-n Tailwind whitespace-nowrap van */
        white-space: normal;
        border-top-width: 0;
    }

    table[data-hh-cards=""] > tbody > tr,
    table[data-hh-cards=""] > tfoot > tr {
        display: block;
        width: 100%;
        white-space: normal;
        padding: 0.25rem 0.75rem;
        margin-bottom: 0.625rem;
        border: 1px solid rgb(229 231 235);
        border-radius: 0.75rem;
        background-color: rgb(255 255 255);
    }

    .dark table[data-hh-cards=""] > tbody > tr,
    .dark table[data-hh-cards=""] > tfoot > tr {
        border-color: rgb(55 65 81);
        background-color: rgb(31 41 55);
    }

    /* a tfoot (összesítő sor) kapjon hangsúlyt */
    table[data-hh-cards=""] > tfoot > tr {
        border-width: 2px;
        border-color: rgb(209 213 219);
        background-color: rgb(249 250 251);
    }

    .dark table[data-hh-cards=""] > tfoot > tr {
        border-color: rgb(75 85 99);
        background-color: rgb(17 24 39);
    }

    /*
     * Csak azokat a cellákat formázzuk, amiket a JS megjelölt. Így a Tailwind
     * `hidden`-nel elrejtett segédcellák (betöltés-jelző, átrendezés-fogantyú)
     * rejtve maradnak – egy általános `td` szabály felülírná a .hidden-t.
     */
    table[data-hh-cards=""] td[data-hh-label],
    table[data-hh-cards=""] td[data-hh-nolabel],
    table[data-hh-cards=""] th[data-hh-label],
    table[data-hh-cards=""] th[data-hh-nolabel] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.125rem 0.75rem;
        width: auto;
        max-width: none;
        min-width: 0;
        white-space: normal;
        text-align: right;
        padding: 0.4375rem 0;
        border-bottom: 1px solid rgb(243 244 246);
    }

    .dark table[data-hh-cards=""] td[data-hh-label],
    .dark table[data-hh-cards=""] td[data-hh-nolabel],
    .dark table[data-hh-cards=""] th[data-hh-label],
    .dark table[data-hh-cards=""] th[data-hh-nolabel] {
        border-bottom-color: rgb(55 65 81);
    }

    table[data-hh-cards=""] > tbody > tr > *:last-child,
    table[data-hh-cards=""] > tfoot > tr > *:last-child {
        border-bottom: 0;
    }

    /* Az oszlopfelirat a cella bal oldalán */
    table[data-hh-cards=""] td[data-hh-label]::before,
    table[data-hh-cards=""] th[data-hh-label]::before {
        content: attr(data-hh-label);
        flex: 0 0 auto;
        max-width: 45%;
        text-align: left;
        font-size: 0.6875rem;
        font-weight: 600;
        line-height: 1.25rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: rgb(107 114 128);
        white-space: normal;
    }

    .dark table[data-hh-cards=""] td[data-hh-label]::before,
    .dark table[data-hh-cards=""] th[data-hh-label]::before {
        color: rgb(156 163 175);
    }

    /*
     * A cella tartalma a jobb oldalra kerül. Ha nem fér ki, új sorba törik és
     * ott a teljes szélességet megkapja.
     */
    table[data-hh-cards=""] td[data-hh-label] > *,
    table[data-hh-cards=""] td[data-hh-nolabel] > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Felirat nélküli cellák (checkbox, műveletek, colspan-es összesítők) */
    table[data-hh-cards=""] td[data-hh-nolabel] {
        justify-content: flex-end;
    }

    /* Üres cella mobilon csak zaj */
    table[data-hh-cards=""] td[data-hh-empty] {
        display: none;
    }

    /*
     * A Filament cellái Tailwind truncate-tel vágnak; kártyás módban van hely
     * a tördelésre, így inkább tördeljünk.
     */
    table[data-hh-cards=""] .truncate {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    /* A műveletek (szerkeszt/törlés) gombsora ne lógjon ki */
    table[data-hh-cards=""] .filament-tables-actions-cell > * {
        justify-content: flex-end;
    }

    /* ------------------------------------------------------------------ *
     * 3. Filament tábla fejléc / szűrők
     * ------------------------------------------------------------------ */

    /* A kereső + szűrő ikonok sora ne szoruljon össze */
    .filament-tables-header-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Tömegműveletek sávja */
    .filament-tables-header-toolbar .filament-tables-search-input {
        min-width: 0;
        flex: 1 1 100%;
    }

    /* ------------------------------------------------------------------ *
     * 4. Grafikonok
     * ------------------------------------------------------------------ */

    /* A fix 320px magas grafikon-konténerek mobilon aránytalanul magasak */
    .hh-chart-box {
        height: 240px !important;
    }

    /* ------------------------------------------------------------------ *
     * 5. Kártya-fejlécek: cím + jobb oldali vezérlők egymás alá
     * ------------------------------------------------------------------ */

    .hh-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    /* ------------------------------------------------------------------ *
     * 6. Vízszintesen görgethető szűrő-gombsorok
     * ------------------------------------------------------------------ */

    .hh-scroll-x {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.125rem;
    }

    .hh-scroll-x::-webkit-scrollbar {
        display: none;
    }

    .hh-scroll-x > * {
        flex: 0 0 auto;
    }

    /* ------------------------------------------------------------------ *
     * 7. Kategória-bontás sorai (havi riport)
     * ------------------------------------------------------------------ */

    /*
     * Desktopon egy sorban van: név (145px) + sáv + összeg (105px) + db (32px).
     * 375px-en ez kilóg, ezért két sorba tördeljük: fent a név, alatta a
     * sáv + összeg + darabszám. A width-eket inline style adja, ezért !important.
     */
    .hh-cat-row {
        flex-wrap: wrap;
        gap: 0.125rem 0.5rem;
    }

    .hh-cat-name {
        width: 100% !important;
    }

    .hh-cat-bar {
        height: 0.75rem;
        flex: 1 1 4rem;
    }

    .hh-cat-bar > * {
        height: 0.75rem;
    }

    .hh-cat-amount,
    .hh-cat-count {
        width: auto !important;
    }

    /* A drilldown behúzása a névoszlop szélességéhez igazodott */
    .hh-cat-drill {
        margin-left: 0;
    }
}