/* ==========================================================================
   IMPORT PRODUKTOV (karta Trello uiT0arho, komentáre 27. 9. 2026)
   ==========================================================================
   Návrhy produkty_import_produktov_zoznam.jpg, _csv.jpg, _xml.jpg,
   _parovanie_poli.jpg a _proces_importu.jpg. Rozmery označené (M) sú
   odmerané z návrhov.

   Značky kreslia šablóny Frontend/resources/views/filament/import-csv/*
   a tabuľka ImportyProduktovResource.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ZOZNAM IMPORTOV - stĺpec Stav a červený krížik
   -------------------------------------------------------------------------- */
.be-import-stav {
    display: block;
    font-size: 16px;
    line-height: 1.3;
}

.be-import-stav-prebieha  { color: #6AA532; }   /* (M) zelená „Prebieha“ */
.be-import-stav-ukonceny  { color: #CC334A; }   /* (M) červená „Ukončený“ */
.be-import-stav-planovany { color: #2AA7D8; }   /* (M) modrá „Plánovaný“ */
.be-import-stav-caka      { color: var(--be-inactive); }

.be-import-stav-detail {
    display: block;
    font-size: 11px;          /* (M) */
    color: var(--be-active);
}

.fi-body .be-import-krizik .fi-icon {
    width: 24px !important;
    height: 24px !important;
}

/* Menu Funkcie: dlhšie položky („Informácia o priebehu“) sa zalomia na
   dva riadky ako v návrhu, nie skrátia. */
.fi-body .be-import-menu .fi-dropdown-list-item-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.3;
}

/* Okno Informácia o priebehu: sivé „i“, nadpis, veľké sivé číslo a jediné
   tlačidlo Zrušiť v strede (návrh image.png). */
.fi-body .be-import-info .fi-modal-description {
    font-size: 28px !important;    /* (M) */
    color: #7F7F7F !important;
    line-height: 1.2;
}

.fi-body .be-import-info .fi-modal-icon-ctn svg path,
.fi-body .be-import-info .fi-modal-icon-bg svg path {
    fill: #BDBDBD;    /* sivé „i“ ako v návrhu - súbor ikony je čierny */
}

.fi-body .be-import-info .fi-modal-footer-actions {
    grid-template-columns: auto !important;
    justify-content: center;
}

.fi-body .be-import-info .fi-modal-footer-actions .fi-btn {
    width: auto !important;
    padding-inline: 18px !important;
}

/* --------------------------------------------------------------------------
   2. KARTA (nový import, párovanie, priebeh)
   -------------------------------------------------------------------------- */
.be-import-karta {
    position: relative;
    padding: 60px 30px 50px;             /* (M) */
    background: var(--be-surface);
    border: 1px solid var(--be-frame-okraj, #F2F2F2);
    border-radius: 10px;                 /* (M) */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Červený krížik v pravom hornom rohu - späť na zoznam importov. */
.be-import-karta-zavriet {
    position: absolute;
    top: -12px;
    right: -12px;
    display: inline-flex;
}

.be-import-karta-zavriet .fi-icon {
    width: 24px !important;
    height: 24px !important;
}

.be-import-karta-zavriet:hover { filter: brightness(0.85); }

.be-import-hlava {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 620px;
    margin: 0 auto 30px;
    text-align: center;
}

.fi-body .be-import-hlava-ikona {
    width: 56px !important;              /* (M) */
    height: 56px !important;
    margin-bottom: 14px;
    color: #BDBDBD !important;
}

.be-import-hlava h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--be-active);
}

.be-import-hlava p {
    font-size: 14px;
    line-height: 1.45;
    color: var(--be-inactive);
}

/* Úzky stĺpec v strede - výber typu, upload, priebehy (šírka 350 px (M)). */
.be-import-uzky {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 350px;
    margin: 0 auto;
}

.be-import-uzky > form {
    width: 100%;
}

.be-import-uzky > form .fi-sc {
    gap: 20px;
}

/* --------------------------------------------------------------------------
   3. UPLOAD CSV - rovnaká sivá plocha ako pole Médiá
   -------------------------------------------------------------------------- */
.be-import-upload-obal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.be-import-upload {
    position: relative;
    width: 184px;                         /* (M) */
    min-height: 180px;                    /* (M) */
    padding: 22px 16px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    background: var(--be-panel, #F2F2F2);
    border: 1px dashed #BDBDBD;   /* štandard prvkov (fGaWyseJ, 28. 9. 2026) */
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    outline: 2px dashed transparent;
    outline-offset: -6px;
    transition: background 0.12s ease, outline-color 0.12s ease;
}

.be-import-upload:hover,
.be-import-upload.je-tahane {
    background: #E6E6E6;
    outline-color: #BDBDBD;
}

.be-import-upload.je-neaktivne {
    cursor: default;
    opacity: 0.6;
}

.be-import-upload .be-media-sipka {
    width: 32px;
    height: 32px;
    color: #000000;
}

/* Názov poľa na hornom okraji plochy (štandard prvkov). */
.be-import-upload-popis {
    position: absolute;
    top: -8px;
    left: 10px;
    padding: 0 5px;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 300;
    line-height: 16px;
    color: #000000;
}

.be-import-upload-vstup {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.be-import-povinne {
    margin-left: 3px;
    color: #CC334A;
    font-size: 14px;
    top: 0;
}

/* --------------------------------------------------------------------------
   4. KROKY S PRIEBEHOM (Súbor sa nahráva, Spracovávam obsah ...)
   -------------------------------------------------------------------------- */
.be-import-krok {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: center;
}

.be-import-krok h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--be-active);
}

.be-import-riadok-pruhu {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.be-import-pruh {
    position: relative;
    flex: 1;
    height: 20px;                        /* (M) */
    padding: 7px 10px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 0 0 1px #F0F0F0, 0 1px 4px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 3px;
    overflow: hidden;
}

.be-import-pruh-vypln {
    height: 4px;                         /* (M) tenká zelená čiara */
    max-width: calc(100% - 38px);
    background: var(--be-ta-pridat, #92C32B);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.be-import-pruh-text {
    font-size: 11px;
    color: var(--be-inactive);
    white-space: nowrap;
}

.be-import-zrusit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-size: 14px;
    color: var(--be-inactive);
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.be-import-zrusit .fi-icon {
    width: 20px !important;
    height: 20px !important;
}

.be-import-subor,
.be-import-poznamka {
    font-size: 14px;
    line-height: 1.4;
    color: var(--be-inactive);
    word-break: break-all;
}

.be-import-poznamka { word-break: normal; }

.be-import-chyba {
    font-size: 14px;
    color: #CC334A;
    text-align: center;
}

/* Zelené tlačidlá v strede karty (Spustiť nahrávanie, Prejsť na párovanie,
   Spustiť prvotný import) - ikona fajky čierna ako v návrhu. */
.be-import-tlacidla {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.fi-body .be-import-tlacidlo.fi-btn {
    min-height: 45px;
    padding-inline: 16px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.fi-body .be-import-tlacidlo .fi-icon {
    width: 24px !important;
    height: 24px !important;
    color: #000 !important;
}

/* --------------------------------------------------------------------------
   5. PÁROVANIE
   -------------------------------------------------------------------------- */
.be-parovanie {
    max-width: 944px;
    margin: 0 auto;
}

.be-parovanie > .fi-sc {
    gap: 20px;
}

.fi-body .be-parovanie .be-parovanie-nazov {
    max-width: 350px;
    width: 100%;
    margin: 0 auto 30px;
}

.fi-body .be-parovanie .be-parovanie-nadpis {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: var(--be-active) !important;
    margin-bottom: 4px;
}

/* Riadok párovania: dva výbery rovnako široké a tlačidlo 200 px (M).
   Trieda je na obale, samotná mriežka Filamentu (.fi-grid) je vnútri. */
.fi-body .be-parovanie-riadok > .fi-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 200px !important;
    align-items: center;
    gap: 20px !important;
}

.fi-body .be-parovanie-riadok > .fi-grid > * {
    grid-column: auto !important;
}

.be-parovanie-tlacidlo {
    display: flex;
    align-items: center;
    padding-top: 0;
}

.be-parovanie-tlacidlo .fi-btn {
    width: 100%;
}

.fi-body .be-parovanie-riadok .fi-btn {
    min-height: 45px;
    width: 100%;
    justify-content: center;
    font-size: 16px !important;
    white-space: nowrap;
}

.fi-body .be-parovanie-pridat.fi-btn {
    font-weight: 700 !important;
}

.fi-body .be-parovanie-riadok .fi-btn .fi-icon {
    width: 24px !important;
    height: 24px !important;
}

/* --------------------------------------------------------------------------
   6. PRIEBEH IMPORTU
   -------------------------------------------------------------------------- */
.be-import-pocty {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;                           /* (M) */
    margin-bottom: 50px;
}

.be-import-pocet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    background: var(--be-panel, #F2F2F2);
    border-radius: 10px;
    text-align: center;
}

.be-import-pocet-nazov {
    font-size: 16px;
    font-weight: 700;
    color: var(--be-active);
}

.be-import-pocet-cislo {
    font-size: 28px;                     /* (M) */
    line-height: 1.2;
    color: var(--be-inactive);
}

.be-import-pocet-cislo small {
    font-size: 15px;
    margin-right: 6px;
}

.be-import-casti {
    display: flex;
    flex-direction: column;
    gap: 22px;                           /* (M) */
    margin-bottom: 40px;
}

.be-import-cast {
    display: grid;
    grid-template-columns: 196px 1fr;    /* (M) */
    align-items: center;
    gap: 12px;
}

.be-import-cast-nazov {
    font-size: 16px;
    font-weight: 700;
    color: var(--be-active);
}

.fi-body .be-import-zastavit.fi-btn {
    min-height: 45px;
    font-size: 16px !important;
    font-weight: 400 !important;
}

.be-import-vysledok {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    text-align: center;
    font-size: 15px;
}

.be-import-vysledok-ok   { color: #6AA532; font-weight: 700; }
.be-import-vysledok-info { color: var(--be-active); font-weight: 700; }

.be-import-suhrn { color: var(--be-inactive); }

.be-import-chyby-obal {
    width: 100%;
    max-width: 700px;
    text-align: left;
    color: var(--be-inactive);
}

.be-import-chyby-obal summary { cursor: pointer; text-align: center; }

.be-import-chyby {
    margin-top: 8px;
    padding-left: 18px;
    list-style: disc;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   7. MOBIL
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .be-import-karta { padding: 40px 16px 30px; }
    .fi-body .be-parovanie-riadok > .fi-grid { grid-template-columns: 1fr !important; }
    .be-import-pocty { grid-template-columns: 1fr; gap: 12px; margin-bottom: 30px; }
    .be-import-cast  { grid-template-columns: 1fr; gap: 6px; }
}

/* --------------------------------------------------------------------------
   KATALÓG Z PDF (Obsah → Katalógy, Trello 8W1VSGXV, 6. 10. 2026)
   Pole Súbor (rovnaká plocha ako upload CSV), zelené tlačidlo Načítať strany,
   priebeh po úlohách, mriežka miniatúr strán po 10 v riadku.
   -------------------------------------------------------------------------- */
/* 20 px medzi poľom Súbor a prepínačom Párovať (Trello 8W1VSGXV, 15:19) -
   22 px, lebo riadok prepínača začína 2 px nad samotným prepínačom. */
.be-katalog-subor {
    margin-bottom: 22px;
}

.be-katalog-subor .be-import-upload.je-vybrane {
    background: #FFFFFF;
    border-style: solid;
}

.be-katalog-subor-nazov {
    max-width: 100%;
    word-break: break-all;
}

.be-katalog-spracovanie {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.be-katalog-priebeh {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 725px;
}

.be-katalog-uloha {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.be-katalog-uloha h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--be-active, #000000);
}

.be-katalog-uloha h3 span {
    font-weight: 300;
}

.be-katalog-hotovo {
    font-size: 14px;
    font-weight: 700;
    color: #80BA3A;
}

.be-katalog-spracovanie .be-import-chyba .be-odkaz {
    margin-left: 10px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.be-katalog-prehlad p {
    margin: 0 0 6px;
    font-size: 15px;
}

.be-katalog-napoveda,
.be-katalog-prazdne {
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 300;
    color: var(--be-inactive, #7F7F7F);
}

.be-katalog-stav {
    margin-left: 10px;
    font-weight: 400;
}

.be-katalog-stav.je-ok { color: #80BA3A; }
.be-katalog-stav.je-chyba { color: #EA001C; }

.be-katalog-mriezka {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 20px 15px;
}

.be-katalog-strana {
    position: relative;
    aspect-ratio: 1060 / 1500;
    background: #F2F2F2;
    border: 1px solid #E5E5E5;
    cursor: grab;
    user-select: none;
}

.be-katalog-strana img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #FFFFFF;
}

.be-katalog-strana[hidden] {
    display: none;
}

.be-katalog-viac {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.be-katalog-strana.je-tahane {
    opacity: 0.35;
}

.be-katalog-strana-cislo {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 6px;
    background: #222222;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
}

@media (max-width: 1279px) {
    .be-katalog-mriezka { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .be-katalog-mriezka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}