/* ==========================================================================
   VÝBĚR TYPU VÝSTUPU (components/dashboard/studio/OutputPicker)
   ==========================================================================
   Dlaždice přebírají vzhled výběru formátu ve Studiu (.studio-format* v creative.css), tady je jen to, co výběr
   přidává: skupiny podle režimu, karusel jako sada karet, krokovač slidů, poznámka k síti a menší varianta do oken.
   ========================================================================== */

.output-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    min-width: 0;
}

.output-picker-nadpis {
    margin-bottom: 0;
}

.output-picker-skupiny {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
}

.output-picker-skupina {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.output-picker-skupina-nazev {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.output-picker-skupina-napoveda {
    font-weight: 400;
    color: var(--text-muted);
}

.output-picker .studio-formaty {
    margin-bottom: 0;
}

/* Uvnitř tlačítka jsou jen řádkové prvky (span), náhled poměru stran proto potřebuje blokové zobrazení. */
.output-picker .studio-format-tvar {
    display: block;
}

.output-picker-dlazdice:focus-visible {
    outline-width: 2px;
    outline-color: var(--border-focus);
}

/* Karusel: za kartou vykukují další karty sady. */
.output-picker-dlazdice--karusel .studio-format-tvar {
    box-shadow:
        6px -6px 0 -1px var(--bg-card), 6px -6px 0 1px var(--border),
        12px -12px 0 -1px var(--bg-card), 12px -12px 0 1px var(--border);
}

.output-picker-dlazdice--karusel.active .studio-format-tvar {
    box-shadow:
        6px -6px 0 -1px var(--bg-card), 6px -6px 0 1px var(--primary-border),
        12px -12px 0 -1px var(--bg-card), 12px -12px 0 1px var(--primary-border);
}

.output-picker-poznamka {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--info-border);
    border-radius: var(--radius-sm);
    background: var(--info-bg);
    font-size: 13px;
    color: var(--text-secondary);
}

/* Skryté prvky schová globální [hidden] v acc.css, prázdný odhad (stránka bez historie se ještě nevyplnila) taky. */
.output-picker-odhad:empty {
    display: none;
}

.output-picker-poznamka .nf {
    color: var(--info);
    line-height: 1.4;
}

.output-picker-slidy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.output-picker-krokovac {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Číslo mezi tlačítky: úzké pole bez šipek prohlížeče, přičítá se tlačítky vedle. Selektor je schválně silnější
   než obecná pravidla pro .form-input v oknech (třeba .eshop-picker-ovladani .form-input). */
.output-picker .output-picker-krokovac .output-picker-pocet {
    width: 56px;
    min-width: 0;
    flex: 0 0 auto;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.output-picker-pocet::-webkit-outer-spin-button,
.output-picker-pocet::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.output-picker-krok {
    min-width: 32px;
    justify-content: center;
}

.output-picker-napoveda {
    flex-basis: 100%;
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.output-picker-odhad {
    margin: 0;
    padding: 0;
}

/* ---------- menší varianta do oken (dialog výběru produktu, automatizace) ---------- */

.output-picker--kompaktni {
    gap: 8px;
    margin-bottom: 0;
}

.output-picker--kompaktni .output-picker-skupiny {
    gap: 10px 24px;
}

.output-picker--kompaktni .studio-formaty {
    gap: 8px;
}

.output-picker--kompaktni .studio-format {
    width: 92px;
    padding: 6px;
    gap: 4px;
}

.output-picker--kompaktni .studio-format-container {
    width: 56px;
    height: 56px;
    padding: 6px;
}

.output-picker--kompaktni .studio-format-nazev {
    font-size: 11px;
    line-height: 1.25;
}

.output-picker--kompaktni .studio-format-rozmer {
    font-size: 10px;
    text-align: center;
}

.output-picker--kompaktni .output-picker-dlazdice--karusel .studio-format-tvar {
    box-shadow:
        4px -4px 0 -1px var(--bg-card), 4px -4px 0 1px var(--border),
        8px -8px 0 -1px var(--bg-card), 8px -8px 0 1px var(--border);
}

.output-picker--kompaktni .output-picker-dlazdice--karusel.active .studio-format-tvar {
    box-shadow:
        4px -4px 0 -1px var(--bg-card), 4px -4px 0 1px var(--primary-border),
        8px -8px 0 -1px var(--bg-card), 8px -8px 0 1px var(--primary-border);
}

@media (max-width: 480px) {
    .output-picker .studio-formaty {
        gap: 8px;
    }

    .output-picker:not(.output-picker--kompaktni) .studio-format-container {
        width: 96px;
        height: 96px;
        padding: 10px;
    }

    .output-picker--kompaktni .studio-format {
        width: 84px;
    }
}