/* ========== PROPOJENÍ SOCIÁLNÍCH SÍTÍ (components/dashboard/Connections) ==========
   Jeden seznam účtů napříč platformami (.prop-seznam/.prop-radek) + dialog
   "Přidat síť" (.add-sit-*) s výběrem cesty připojení - ne karta na
   platformu jako dřív. Organizace teď může mít účtů libovolně, takže by
   karet přibývalo a ubývalo podle stavu; jeden seznam se s tím nemusí prát. */

.prop-ikona {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--prop-barva, var(--primary));
    background: color-mix(in srgb, var(--prop-barva, var(--primary)) 12%, transparent);
}

.prop-info {
    margin-bottom: 16px;
}

.prop-info-radek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.prop-info-radek:last-child {
    border-bottom: none;
}

.prop-info-popis {
    color: var(--text-muted);
}

.prop-info-hodnota {
    color: var(--text);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.prop-mono {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 500;
}

.prop-napoveda {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.prop-form .form-group {
    margin-bottom: 14px;
}

.prop-chyba {
    font-size: 13px;
    color: var(--error);
    margin-bottom: 12px;
}

/* Oddělovač mezi ručním formulářem a OAuth odkazem (nemusí být oba). */
.prop-oddelovac {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.prop-oddelovac::before,
.prop-oddelovac::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ========== VÝSLEDEK NÁVRATU Z META OAUTH ========== */

/* Hláška po propojení. Barva podle typu (viz rb_connect_flash) - jedna
   třída navíc místo tří kompletních pravidel. */
.prop-hlaska {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--info-border);
    background: var(--info-bg);
    color: var(--text);
    font-size: 14px;
}

.prop-hlaska--success {
    border-color: var(--success-border);
    background: var(--success-bg);
}

.prop-hlaska--error {
    border-color: var(--error-border);
    background: var(--error-bg);
}

.prop-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Ruční vložení tokenu je jen záloha, než Metu projde App Review - proto
   sbalené a potichu, ne vedle tlačítka jako rovnocenná volba. */
.prop-rucne {
    margin-top: 16px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.prop-rucne > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
}

.prop-rucne > summary:hover {
    color: var(--text);
}

.prop-rucne .prop-form {
    margin-top: 14px;
}

/* ========== VÝBĚR ÚČTU (components/dashboard/ConnectionPicker) ========== */

.vyber-panel,
.vyber-prazdno {
    padding: 20px;
    max-width: 520px;
}

.vyber-prazdno p {
    margin: 0 0 16px;
    color: var(--text-muted);
}

.vyber-seznam {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.vyber-polozka + .vyber-polozka {
    margin-top: 8px;
}

.vyber-ucet {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.vyber-ucet:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--primary);
}

.vyber-ucet:disabled {
    opacity: .6;
    cursor: default;
}

.vyber-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.vyber-avatar--prazdny {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--prop-barva, var(--primary));
    background: color-mix(in srgb, var(--prop-barva, var(--primary)) 12%, transparent);
}

.vyber-texty {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vyber-nazev {
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}

.vyber-id {
    font-size: 12px;
    color: var(--text-muted);
}

.vyber-sipka {
    margin-left: auto;
    color: var(--text-muted);
}

/* Zaškrtávátko vlastního tvaru schválně nemá - je to obyčejný checkbox
   uvnitř labelu, jen se schová za layout stejně jako dřív tlačítko. */
.vyber-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.vyber-ucet--pripojeno {
    opacity: .7;
}

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

/* ========== SEZNAM PŘIPOJENÝCH ÚČTŮ (Connections dashboard) ==========
   Jeden řádek na účet, napříč platformami - viz Connections::getAllConnections(). */

.prop-prazdno {
    padding: 24px;
    max-width: 480px;
}

.prop-prazdno p {
    margin: 0 0 16px;
    color: var(--text-muted);
}

.prop-seznam {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 640px;
}

.prop-radek {
    padding: 16px 18px;
}

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

.prop-radek-texty {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.prop-ucet-jmeno {
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}

.prop-radek-platforma {
    font-size: 12px;
    color: var(--text-muted);
}

.prop-ucet-odpojit {
    margin-left: auto;
    flex-shrink: 0;
}

/* Stav propojení, kterému přestal platit token (SocialConnection::isBroken).
   Musí být vidět na první pohled - proto vlastní značka a ne jen text. */
.prop-znacka-chyba {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--error);
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    flex-shrink: 0;
}

/* Hláška uvnitř řádku je užší než ta nad seznamem - menší odsazení. */
.prop-radek .prop-hlaska {
    margin: 12px 0 0;
    padding: 10px 12px;
    font-size: 13px;
}

/* ========== DIALOG "PŘIDAT SÍŤ" (Connections::getConnectOptions) ==========
   Stejný vzor modálního <dialog> jako dialog.wizard (wizard.css). */

dialog.add-sit-dialog {
    margin: auto;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0;
    width: min(560px, calc(100vw - 32px));
    box-shadow: var(--shadow-xl);
    color: var(--text);
}

dialog.add-sit-dialog::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

.add-sit-shell {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 64px);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
}

.add-sit-hlava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.add-sit-nadpis {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}

.add-sit-obsah {
    padding: 20px 24px;
    overflow-y: auto;
}

.add-sit-seznam {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-sit-polozka {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.add-sit-texty {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.add-sit-nazev {
    font-weight: 600;
    color: var(--text);
}

.add-sit-popis {
    font-size: 12px;
    color: var(--text-muted);
}

.add-sit-nedostupne {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.add-sit-navod {
    flex-shrink: 0;
}

.add-sit-rucni-platforma {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 600;
    color: var(--text);
}

.add-sit-rucni-form + .add-sit-rucni-form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* ==========================================================================
   CO NA ÚČTU PŮJDE (Connections::getCapabilities)
   ==========================================================================
   Publikovat umí každé propojení. Komentáře a zprávy visí na oprávněních,
   která Meta nemusela vydat - a chybějící oprávnění se jinak projeví až
   prázdnou schránkou nebo chybou při odesílání odpovědi.
   ========================================================================== */

.prop-funkce {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prop-funkce-radek {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.prop-funkce-radek .nf {
    color: var(--success, #16a34a);
}

.prop-funkce-radek--chybi {
    color: var(--text-muted);
}

.prop-funkce-radek--chybi .nf {
    color: var(--text-muted);
}

/* Název chybějícího oprávnění. Je to přesný řetězec, který se hledá na
   developers.facebook.com a píše do META_OPTIONAL_SCOPES - proto monospace
   a proto se nezkracuje. */
.prop-funkce-radek code {
    padding: 1px 6px;
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-hover);
    font-size: 11px;
}

/* ========== Přehled druhů napojení a sekce Weby a blogy ========== */

.prop-prehled {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}

.prop-prehled-dlazdice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card, #fff);
    color: var(--text);
    text-decoration: none;
}

.prop-prehled-dlazdice:hover {
    border-color: var(--primary, #f0385a);
}

.prop-prehled-dlazdice--chyba {
    border-color: var(--error, #dc2626);
}

.prop-prehled-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--primary-light, rgba(240, 56, 90, 0.08));
    color: var(--primary, #f0385a);
    font-size: 20px;
    flex-shrink: 0;
}

.prop-prehled-texty {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--text-secondary);
}

.prop-prehled-texty strong {
    font-size: 15px;
    color: var(--text);
}

.prop-prehled-chyba {
    color: var(--error, #dc2626);
    font-weight: 600;
}

.prop-sekce-popis {
    margin: 0 0 12px;
}