/* ==========================================================================
   Editor kreativ: slupka ve stylu Figmy (components/dashboard/studio/StudioEditor.phtml, assets/js/creative-shell.js)
   ==========================================================================
   Nahoře lišta (název, nástroje, zpět a vpřed, export, nabídka Více, Do kalendáře), vlevo vrstvy a galerie, uprostřed
   plátno na neutrálním podkladu, vpravo vlastnosti, dokument a asistent. Panely jsou ploché a přes celou výšku, ne karty
   s mezerami. Načítá se po creative.css a studio-nastroje.css (abecedně), proto přebíjí jejich pravidla bez !important.
   ========================================================================== */

.studio-editor-main {
    padding: 0;
    background: var(--bg-card);
}

.stu {
    position: relative;
    gap: 0;
    background: var(--bg);
}

/* ---------- lišta ---------- */

.stu-listy {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 12px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg-card);
}

/* obal hamburgeru pro úzké obrazovky: na široké nesmí zabrat buňku mřížky lišty */
.stu-listy .mobile-top {
    display: none;
}

.stu-listy-levo {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.stu-nazev {
    width: min(280px, 100%);
    border-color: transparent;
    background: transparent;
    font-weight: 700;
}

.stu-nazev:hover {
    border-color: var(--border);
}

.stu-nazev:focus {
    border-color: var(--primary);
    background: var(--bg-card);
}

.stu-nastroje-hlavni-mobile,
.stu-nastroje-hlavni {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--bg-hover);
}

.stu-nastroje-hlavni-mobile {
    display: none;
}

@media (max-width: 700px) {
    .stu-listy {
        padding: 0;
    }

    .stu-nazev:not(.mobile),
    .stu-nastroje-hlavni {
        display: none;
    }

    .stu-nastroje-hlavni-mobile {
        display: flex;
        flex-direction: column;
    }
}

.stu-nastroj {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.stu-nastroj .nf {
    font-size: 18px;
}

.stu-nastroj:hover {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.stu-nastroj:active {
    transform: translateY(1px);
}

.stu-listy-vpravo {
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.stu-ikonove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 17px;
    cursor: pointer;
}

.stu-ikonove:hover:not(:disabled) {
    background: var(--bg-hover);
}

.stu-ikonove:disabled {
    opacity: 0.3;
    cursor: default;
}

.stu-listy-vpravo .rb-jobs {
    margin-right: 0;
}

.stu-listy-vpravo .rb-jobs-btn {
    height: 32px;
    padding: 0 12px;
}

.stu-stahnout {
    position: relative;
}

.stu-stahnout .save-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: 200;
    min-width: 230px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}

.stu-stahnout .save-dropdown.hidden {
    display: none;
}

.stu-stahnout .save-dropdown .btn {
    justify-content: flex-start;
    width: 100%;
    border-color: transparent;
}

.stu-stahnout .save-dropdown .btn:hover {
    background: var(--bg-hover);
}

.stu-menu-obal {
    position: relative;
}

.stu-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    min-width: 270px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}

.stu-menu[hidden] {
    display: none;
}

.stu-menu-polozka {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.stu-menu-polozka:hover {
    background: var(--bg-hover);
}

.stu-menu-polozka kbd {
    margin-left: auto;
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
}

.stu-menu-cara {
    height: 1px;
    margin: 4px 6px;
    background: var(--border);
}

/* Panely plánování, pozadí řady a šablony: plovoucí okno pod lištou (dřív se vkládaly mezi lištu a plátno a odsouvaly ho). */
.stu-vyskakovaci {
    position: absolute;
    top: 58px;
    right: 12px;
    z-index: 150;
    width: min(540px, calc(100% - 24px));
    max-height: calc(100% - 70px);
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.stu-vyskakovaci[hidden] {
    display: none;
}

.stu-chyba {
    margin: 0;
    padding: 8px 14px;
    border-bottom: 1px solid var(--error-border);
    background: var(--error-bg);
    border-radius: 0;
}

.stu-chyba[hidden] {
    display: none;
}

/* ---------- tři sloupce: vrstvy | plátno | vlastnosti ---------- */

.stu-telo {
    grid-template-columns: 260px minmax(0, 1fr) 320px;
    gap: 0;
    background: var(--bg);
}

.stu-vlevo,
.stu-vpravo {
    min-height: 0;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: var(--bg-card);
    box-shadow: none;
    overflow: hidden !important;
}

.stu-vlevo {
    border-right: 1px solid var(--border);
}

.stu-vpravo {
    border-left: 1px solid var(--border);
}

.stu-vlevo > [data-tab-target],
.stu-vpravo > [data-tab-target] {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    overflow-y: auto;
}

.stu-vlevo > [data-tab-target].hidden,
.stu-vpravo > [data-tab-target].hidden {
    display: none;
}

.stu-vlevo .stu-tabs,
.stu-vpravo .stu-tabs {
    flex: 0 0 auto;
    gap: 2px;
    padding: 0 8px;
    border-bottom: 1px solid var(--border);
}

.stu-vlevo .stu-tabs > *,
.stu-vpravo .stu-tabs > * {
    padding: 11px 10px 9px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.stu-vlevo .stu-tabs > *:hover,
.stu-vpravo .stu-tabs > *:hover {
    background: none;
    color: var(--text);
}

.stu-vlevo .stu-tabs > .active,
.stu-vpravo .stu-tabs > .active {
    background: none;
    border-bottom-color: var(--primary);
    color: var(--text);
}

/* vrstvy: úsporné řádky jako ve Figmě */

.stu-vrstva-radek {
    padding: 6px 12px;
    border-bottom: 0;
}

.stu-vrstva-radek.active {
    background: var(--primary-light);
    box-shadow: inset 2px 0 0 var(--primary);
}

/* ---------- plátno ---------- */

.stu-scena {
    border: 0;
    border-radius: 0;
    background: #e6e8ec;
}

.stu-scena .stu-platno-obal {
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 8px 30px rgba(15, 23, 42, 0.14);
}

.stu-scena--posun,
.stu-scena--posun * {
    cursor: grab !important;
}

.stu-scena--tahne,
.stu-scena--tahne * {
    cursor: grabbing !important;
    user-select: none;
}

.stu-scena .stu-scena-listy {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
}

/* ---------- zkratky ---------- */

dialog.stu-zkratky-dialog {
    width: min(560px, calc(100vw - 32px));
}

.stu-zkratky {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 18px;
    margin: 0;
    font-size: 14px;
}

.stu-zkratky dt {
    font-weight: 700;
}

.stu-zkratky dd {
    margin: 0;
    color: var(--text-secondary);
}

/* ---------- menší obrazovky ---------- */

@media (max-width: 1300px) {
    .stu-listy {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .stu-listy .mobile-top {
        display: block;
    }

    .stu-nastroje-hlavni .stu-nastroj span {
        display: none;
    }

    .stu-nastroje-hlavni .stu-nastroj {
        padding: 6px 10px;
    }

    /* pod 1200 px se pravá část lišty schová do nabídky pod hamburgerem (viz creative.css) */
    .stu-listy-vpravo {
        top: 52px;
        right: 12px;
    }
}

@media (max-width: 1100px) {
    .stu-telo {
        grid-template-columns: 220px minmax(0, 1fr) 280px;
    }
}

@media (max-width: 860px) {
    .stu-telo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 40vh 1fr 1fr;
        overflow-y: auto;
    }

    .stu-telo[data-highlight="left"] {
        grid-template-rows: 40vh 1fr 40px;
    }

    .stu-telo[data-highlight="right"] {
        grid-template-rows: 40vh 40px 1fr;
    }

    .stu-telo > .stu-panel:not(.last-interaction) > :not(.stu-tabs) {
        display: none;
    }

    .stu-scena {
        order: 1;
    }

    .stu-vlevo {
        order: 2;
        max-height: 40vh;
        border-right: 0;
        border-top: 1px solid var(--border);
    }

    .stu-vpravo {
        order: 3;
        max-height: 50vh;
        border-left: 0;
        border-top: 1px solid var(--border);
    }
}

/* tlačítko Zpět do studia: stejný vzhled a místo jako „Moje videa“ ve video editoru */
.stu-zpet-domu {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--ve-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.stu-zpet-domu .nf {
    font-size: 17px;
}

.stu-zpet-domu:hover {
    background: var(--ve-panel-3);
}

@media (max-width: 1300px) {
    .stu-zpet-domu span {
        display: none;
    }
}
/* ---------- Šablony a Prvky (creative-sablony.js) ---------- */

.stu-sablony-mrizka {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 12px 14px;
}

.stu-prvky-nadpis {
    margin: 6px 0 8px;
    padding: 0 12px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.stu-sablona-karta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 6px 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.stu-sablona-karta:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.stu-nahled {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
    pointer-events: none;
}

.stu-nahled-vrstva {
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
}

.stu-nahled-text {
    display: flex;
    white-space: pre-wrap;
    overflow: hidden;
}

/* ---------- Kontrola kvality (creative-kontrola.js) ---------- */

.stu-kontrola {
    padding: 14px;
}

.stu-kontrola-hlava {
    margin-bottom: 14px;
}

.stu-kontrola-radek {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.stu-kontrola-radek strong {
    color: var(--text);
    font-size: 32px;
    line-height: 1;
}

.stu-kontrola-pruh {
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--bg-hover);
}

.stu-kontrola-pruh span {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.stu-kontrola-pruh .dobre { background: var(--success); }
.stu-kontrola-pruh .stredni { background: var(--warning); }
.stu-kontrola-pruh .spatne { background: var(--error); }

.stu-kontrola-seznam {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stu-kontrola-polozka {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.45;
}

.stu-kontrola-polozka--chyba { border-left-color: var(--error); background: var(--error-bg); }
.stu-kontrola-polozka--varovani { border-left-color: var(--warning); background: var(--warning-bg); }
.stu-kontrola-polozka--tip { border-left-color: var(--info); background: var(--info-bg); }

.stu-kontrola-polozka > .nf {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 17px;
}

.stu-kontrola-polozka--chyba > .nf { color: var(--error); }
.stu-kontrola-polozka--varovani > .nf { color: var(--warning); }
.stu-kontrola-polozka--tip > .nf { color: var(--info); }

.stu-kontrola-text p {
    margin: 0;
}

.stu-kontrola-akce {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* odznak s počtem nálezů na záložce Kontrola */
.stu-tabs .tab[data-pocet]:not([data-pocet=""])::after {
    content: attr(data-pocet);
    display: inline-block;
    min-width: 17px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--warning);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
}

/* ---------- přepínač formátu v liště ---------- */

.stu-format-obal {
    position: relative;
}

.stu-format-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.stu-format-chip:hover {
    border-color: var(--primary);
}

.stu-format-chip small {
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 500;
}

.stu-format-menu {
    left: 0;
    right: auto;
    min-width: 350px;
    max-height: 70vh;
    overflow-y: auto;
}

.stu-format-skupina {
    margin: 6px 10px 2px;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.stu-format-polozka small {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11.5px;
    text-wrap: nowrap;
}

.stu-format-polozka--aktivni {
    background: var(--primary-light);
    color: var(--primary);
}

.stu-rozmer {
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1400px) {
    .stu-format-chip small {
        display: none;
    }
}

/* ---------- Vytvořit obrázek AI (creative-generovani.js) ---------- */

.stu-gen-telo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px 14px;
}

.stu-gen-radek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.stu-gen-radek select {
    width: auto;
}

.stu-gen-stav {
    padding: 0;
}
/* ---------- záložky panelů na užších obrazovkách: vejdou se všechny čtyři, jinak se dají posunout ---------- */

.stu-vlevo .stu-tabs,
.stu-vpravo .stu-tabs {
    overflow-x: auto;
    scrollbar-width: none;
}

.stu-vlevo .stu-tabs::-webkit-scrollbar,
.stu-vpravo .stu-tabs::-webkit-scrollbar {
    display: none;
}

.stu-vlevo .stu-tabs > *,
.stu-vpravo .stu-tabs > * {
    flex: 1 1 auto;
    white-space: nowrap;
    text-align: center;
}

@media (max-width: 1280px) {
    .stu-vlevo .stu-tabs,
    .stu-vpravo .stu-tabs {
        padding: 0 4px;
        gap: 0;
    }

    .stu-vlevo .stu-tabs > *,
    .stu-vpravo .stu-tabs > * {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 12px;
    }
}