/* ==========================================================================
   IDENTITA ZNAČKY (components/dashboard/Studio)
   ==========================================================================
   Stejné stavební kameny jako zbytek přehledu; pole `.stu-pole` se sdílejí
   s editorem (creative.css), ať formuláře vypadají stejně.
   ========================================================================== */

.znacka-editor .row {
    padding: 6px 0;
}

.znacka {
    padding: 16px 20px;
    margin: 0 auto 24px auto;
    max-width: 900px;
}

.znacka-hlava {
    display: flex;
    align-items: center;
    gap: 12px;
}

.znacka-nadpis {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.znacka-stav {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.znacka-zdroj {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

.znacka-hlava .btn { margin-left: auto; }

/* Náhled identity. Barevná kolečka řeknou o značce na první pohled víc
   než jejich hex kódy. */
.znacka-nahled {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.znacka-barva {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    outline: 2px solid var(--border);
    border: 2px solid white;
}

.znacka-pisma {
    margin-left: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ---------- editor ---------- */

.znacka-zaklad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: end;
}

.znacka-editor {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Web + brand name */
.znacka-editor > .znacka-radek:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: end;
}

/* The HTML currently has another .znacka-radek inside it */
.znacka-editor > .znacka-radek:first-child > .znacka-radek {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.znacka-editor > .znacka-radek:first-child > .znacka-radek > .stu-pole {
    min-width: 0;
}

/* --------------------------------------------------------------
   Brand tokens
   -------------------------------------------------------------- */

.znacka-tokeny {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 18px;
}

.znacka-tokeny .stu-pole {
    width: auto;
    min-width: 90px;
}

.znacka-tokeny .stu-pole-popisek {
    margin-bottom: 5px;
}

.znacka-pismo {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Color inputs */
.znacka-barva-vstup {
    width: 52px;
    height: 30px;
    padding: 2px;
    opacity: 0;
}

.stu-pole-container {
    outline: 2px solid var(--border);
    border: 2px solid white;
    border-radius: 8px;
}

/* --------------------------------------------------------------
   Logo
   -------------------------------------------------------------- */

.znacka-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
}

.znacka-logo > .stu-pole {
    display: flex;
    align-items: center;
    gap: 10px;
}

.znacka-logo .stu-pole-popisek {
    margin: 0;
}

.znacka-logo-nahled {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.znacka-logo-prazdny {
    white-space: nowrap;
    font-size: 12px;
}

.znacka-logo-ma-text {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.znacka-logo-vyber {
    flex: 1;
}

.znacka-logo-dlazdice img {
    width: 160px;
    height: 160px;
    object-fit: contain;
}

/* --------------------------------------------------------------
   Actions
   -------------------------------------------------------------- */

.znacka-akce {
    display: flex;
    align-items: center;
    gap: 10px;
}

.znacka-hlaska {
    margin-left: 4px;
}

/* --------------------------------------------------------------
   Responsive
   -------------------------------------------------------------- */

@media (max-width: 800px) {
    .znacka-editor > .znacka-radek:first-child {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .znacka-editor > .stu-pole:last-of-type {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .znacka-logo {
        flex-wrap: wrap;
    }
}

@media (max-width: 550px) {
    .znacka-tokeny {
        gap: 12px;
    }

    .znacka-logo {
        align-items: flex-start;
        flex-direction: column;
    }

    .znacka-akce {
        flex-wrap: wrap;
    }
}

.znacka-editor[hidden] { display: none; }