/* ==========================================================================
   Rozšíření design systému wopro.cz/acc/ pro tři nové stránky:
   Kalendář, Analytika, Účet. Žádné nové barvy ani radiusy — jen nové
   komponenty postavené na existujících proměnných a vzorech (.panel,
   .stat-card, .wg-*), aby stránky vypadaly jako součást stejného produktu.
   ========================================================================== */

/* ========== KALENDÁŘ ========== */

.calendar {
    max-width: 1600px;
    margin: 0 auto;
    padding: 32px 24px;
}

.kal-panel {
    padding: 0;
    overflow: hidden;
}

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

.kal-mesic {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.kal-mesic-select,
.kal-rok-select {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.kal-mesic-select {
    padding: 7px 32px 7px 10px;
    font-size: 18px;
    font-weight: 800;
}

.kal-rok-select {
    padding: 7px 28px 7px 9px;
    font-size: 14px;
    font-weight: 600;
}

.kal-mesic-select:hover,
.kal-rok-select:hover {
    border-color: var(--primary-border);
    background: var(--primary-light);
}

.kal-mesic-select:focus,
.kal-rok-select:focus {
    outline: none;
    border-color: var(--primary);
}

.kal-ovladani {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.kal-nav-btn:hover {
    border-color: var(--primary-border);
    color: var(--primary);
    background: var(--primary-light);
}

.kal-dnes-btn {
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.kal-dnes-btn:hover {
    border-color: var(--primary-border);
    background: var(--primary-light);
    color: var(--primary);
}

/* Dny v týdnu */
.kal-dny-tydne {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border);
}

.kal-den-tydne {
    padding: 12px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Mřížka dnů: počet řádků (4-6) vychází z toho, kolik jich měsíc reálně
   potřebuje (implicitní řádky, viz grid-auto-rows) - žádný napevno daný
   "repeat(6, ...)", co by dole nechával prázdný pás u kratších měsíců.
   Výška řádku je funkcí --kal-max-posts (Calendar.phtml nastaví jako
   inline custom property podle Calendar::$maxPostsCountInCell), aby byla
   stejná bez ohledu na to, kolik příspěvků daný den má - buňka je pak vždy
   .kal-den stejně vysoká přes CSS grid stretch, ne přes vlastní min-height,
   takže mezi prázdným a plným dnem není žádný skok. */
.kal-mrizka {
    overflow-x: auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 45px;
    grid-auto-rows: calc(22px + var(--kal-max-posts, 3) * 84px + var(--kal-extra, 0px));
}

.kal-den {
    position: relative;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    background: var(--bg-card);
    transition: background var(--transition-fast);
}

/* Celá buňka odkazuje na přehled dne (/prehled/prizpevky), viz Calendar.phtml -
   jen dny s příspěvky jsou <a>, prázdné zůstávají <div>. */
a.kal-den {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.kal-mrizka .kal-den:nth-child(7n) {
    border-right: none;
}

.kal-den:hover {
    background: var(--bg-hover);
}

.kal-den.mimo-mesic {
    background: var(--bg);
    color: var(--text-muted);
}

.kal-den.mimo-mesic .kal-den-cislo {
    color: var(--text-muted);
    opacity: .55;
}

.kal-den-btn {
    padding: 7px 12px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease, visibility 0s linear .2s;
}

.kal-den:hover .kal-den-btn {
    visibility: visible;
    opacity: 1;
    transition: opacity .2s ease, visibility 0s linear 0s;
}

.kal-den-cislo {
    position: absolute;
    top: 4px;
    left: 4px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    border-radius: 50%;
    flex-shrink: 0;
    background: #fff;
}

.kal-den.je-dnes .kal-den-cislo {
    background: var(--primary);
    color: #fff;
}

.kal-den.je-dnes {
    background: var(--primary-light);
}

.kal-udalosti {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.kal-udalost {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border-radius: 6px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    transition: filter var(--transition-fast);
}

.kal-udalost:hover {
    filter: brightness(0.96);
}

.kal-udalost-tecka {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.kal-udalost--warn {
    background: rgba(245, 158, 11, .12);
    color: #b45309;
}

.kal-udalost--ok {
    background: var(--success-bg);
    color: #047857;
}

.kal-udalost--error {
    background: var(--error-bg);
    color: #b91c1c;
}

/* První příspěvek dne se zobrazuje celý, včetně náhledu obrázku - viz
   Calendar.phtml. Další příspěvky téhož dne zůstávají jako kompaktní
   .kal-udalost řádky a případný přebytek shrne .kal-vic (více příspěvků
   v jednom dni je řídký jev, ne běžný stav). */
.kal-prispevek {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--primary-light);
    color: var(--primary);
    text-decoration: none;
    flex-shrink: 0;
    transition: filter var(--transition-fast);
}

.kal-prispevek-obrazek {
    width: 100%;
    height: 52px;
    object-fit: cover;
    display: block;
    background: var(--bg-hover);
}

.kal-prispevek-info {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Barvy podle Post::STATUS_* - dřív tu byly --warn/--ok/--error, které
   se nikdy nepotkaly s $post->status (scheduled/published/partial/failed),
   takže se příspěvky barvily jen výchozí --primary bez ohledu na stav. */
.kal-prispevek--scheduled {
    background: var(--info-bg);
    color: #1d4ed8;
}

.kal-prispevek--published {
    background: var(--success-bg);
    color: #047857;
}

.kal-prispevek--partial {
    background: var(--warning-bg);
    color: #b45309;
}

.kal-prispevek--failed {
    background: var(--error-bg);
    color: #b91c1c;
}

.kal-vic {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 2px 7px;
}

/* Legenda nad kalendářem (viz Calendar.phtml) */
.kal-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
}

.kal-legenda-polozka {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
    font-weight: 600;
}

.kal-legenda-tecka {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Tlačítko "Naplánovat příspěvek", když organizace nemá propojenou
   žádnou platformu - viz Calendar::hasAnyConnection(). */
.kal-tlacitko-zakazano {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.kal-tlacitko-napoveda {
    font-size: 12.5px;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .kal-den {
        min-height: 88px;
        padding: 6px;
    }

    .kal-udalost {
        font-size: 10.5px;
        padding: 3px 6px;
    }

    .kal-den-tydne {
        display: none;
    }
}

@media (max-width: 900px) {
    .kal-hlava {
        padding: 16px;
    }

    .kal-dny-tydne {
        display: none;
    }

    .kal-mrizka {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: auto;
    }

    .kal-den {
        min-height: unset;
        border-right: none;
        flex-direction: row;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .kal-den.mimo-mesic {
        display: none;
    }

    .kal-den-cislo {
        flex-shrink: 0;
    }

    .kal-udalosti {
        flex: 1;
    }

    .kal-prispevek {
        flex-direction: row;
        align-items: center;
        border-radius: 8px;
    }

    .kal-prispevek-obrazek {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    .kal-prispevek-info {
        white-space: normal;
    }

    .kal-legenda {
        padding: 14px 16px;
        gap: 12px;
    }
}

/* ========== ANALYTIKA ========== */

.stat-card-link {
    text-decoration: none;
    display: block;
}

.stat-card-hlava {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.stat-card-ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary);
    flex-shrink: 0;
}

.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.stat-trend--up {
    background: var(--success-bg);
    color: var(--success);
}

.stat-trend--down {
    background: var(--error-bg);
    color: var(--error);
}

.stat-trend--flat {
    background: var(--bg-hover);
    color: var(--text-muted);
}

/* "Připojené sociální sítě" bez propojení - viz Analytics::hasConnectedPlatforms(). */
.stat-hint--warn {
    color: #b45309;
    font-weight: 600;
}

/* Karta pro budoucí metriky, zatím prázdná */
.stat-card--brzy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    border-style: dashed;
    border-color: #cbd5e1;
    color: var(--text-muted);
    min-height: 148px;
}

.stat-card--brzy svg {
    opacity: .5;
}

.stat-card--brzy-nazev {
    font-size: 13px;
    font-weight: 700;
}

.stat-card--brzy-popis {
    font-size: 12px;
    max-width: 22ch;
}

/* ==========================================================================
   Panel se seznamem posledních příspěvků - CSS grid, ne <table>. Sloupce:
   příspěvek/platformy pružné (1fr), stav/termín pevné (viz Analytics.phtml).
   .prisp-radek je "display: contents" - jeho buňky se tak řadí přímo do
   mřížky rodiče (.prisp-tabulka), řádek sám žádný box nemá; role="row"/
   "cell"/"columnheader" dorovnávají sémantiku, co by jinak dal <table>.
   ========================================================================== */
.prisp-tabulka {
    display: grid;
    grid-template-columns: 1fr 1fr 170px 190px;
    align-items: center;
}

.prisp-radek {
    display: contents;
}

.prisp-bunka {
    width: 100%;
    height: 100%;
    padding: 13px 14px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
}

.prisp-hlavicka {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 10px 14px;
    border-bottom: 2px solid var(--border);
}

.prisp-radek:last-child .prisp-bunka {
    border-bottom: none;
}

/* Celý řádek vede na detail příspěvku (viz assets/js/analytics.js) - kurzor ukazuje, že je klikací. */
.prisp-radek[data-href] {
    cursor: pointer;
}

.prisp-radek[data-href]:hover .prisp-bunka {
    background: var(--bg-hover);
}

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

.prisp-post-odkaz {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
}

.prisp-nazev-obrazek {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-hover);
}

.prisp-nazev-obrazek--prazdny {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* Jeden příspěvek může mířit na víc platforem najednou (rb_post_publications) - viz Analytics.phtml. */
.prisp-platformy {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.prisp-kanal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.prisp-kanal-text {
    white-space: nowrap;
}

/* Prázdný stav "Poslední příspěvky" - viz Analytics::hasRecentPosts(). */
.prisp-prazdno {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    gap: 8px;
}

.prisp-prazdno-ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 19px;
    margin-bottom: 4px;
}

.prisp-prazdno-text {
    font-size: 13.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.prisp-stav {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
}

.prisp-stav-tecka {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.prisp-stav--ok .prisp-stav-tecka {
    background: var(--success);
}

.prisp-stav--ok {
    color: var(--success);
}

.prisp-stav--planovano .prisp-stav-tecka {
    background: var(--primary);
}

.prisp-stav--planovano {
    color: var(--primary);
}

.prisp-stav--chyba .prisp-stav-tecka {
    background: var(--error);
}

.prisp-stav--chyba {
    color: var(--error);
}

/* Mezistupeň 860-700px: pořád mřížka na šířku (ne stack jako pod 700px),
   ale sloupce se zúží a "Platformy" ukáže jen ikony bez textu popisku -
   méně informace na řádek, ne úplně jiné rozvržení. */
@media (max-width: 860px) {
    .prisp-tabulka {
        grid-template-columns: 1fr 96px 155px 150px;
    }

    .prisp-kanal-text {
        display: none;
    }

    .prisp-kanal {
        padding: 5px;
    }

    .prisp-nazev-obrazek {
        width: 30px;
        height: 30px;
    }
}

/* Pod 700px se 4 sloupce (1fr 1fr 170px 190px) už nevejdou - každý řádek
   se místo toho stane vlastní 2sloupcovou mřížkou (název nahoře přes celou
   šířku, platformy pod ním přes celou šířku, stav a termín vedle sebe). */
@media (max-width: 700px) {
    .prisp-radek--hlavicka {
        display: none !important;
    }

    .prisp-radek[data-href]:hover .prisp-bunka {
        background: unset !important;
    }

    .prisp-radek[data-href]:hover {
        background: var(--bg-hover);
    }

    .prisp-radek {
        background-color: #fff;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 6px 10px;
        padding: 12px;
        /* border-bottom: 1px solid var(--border);
        border-right: 1px solid var(--border); */
    }

    .prisp-tabulka {
        gap: 1px;
        background-color: var(--border);
    }

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

    .prisp-bunka {
        padding: 0;
        border-bottom: none;
        font-size: 12.5px;
    }

    .prisp-nazev,
    .prisp-bunka--platformy {
        grid-column: 1 / -1;
    }

    .prisp-bunka--datum {
        display: none;
    }

    /* Celá šířka obrazovky je tu na jeden řádek, ne na 96px sloupec jako
       v mezistupni výš - popisek platformy se tak vrátí zpátky. */
    .prisp-kanal-text {
        display: inline;
    }

    .prisp-nazev-obrazek {
        width: 36px;
        height: 36px;
    }

    .prisp-tabulka {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .prisp-tabulka > * {
        flex: 1 1 150px;
    }
}

/* ========== ÚČET / UŽIVATEL ========== */

.uc-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .uc-grid {
        grid-template-columns: 1fr;
    }
}

.uc-profil {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
}

.uc-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.uc-jmeno {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.2px;
}

.uc-uzivatelske-jmeno {
    font-size: 13.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.uc-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
}

.uc-profil-akce {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

/* Řádky s informacemi (email, telefon...) */
.uc-info-list {
    display: flex;
    flex-direction: column;
}

.uc-info-radek {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
}

.uc-info-radek + .uc-info-radek {
    border-top: 1px solid var(--border);
}

.uc-info-ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.uc-info-text {
    min-width: 0;
    flex: 1;
}

.uc-info-popis {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 2px;
}

.uc-info-hodnota {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uc-info-znacka {
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    background: var(--success-bg);
    color: var(--success);
    font-size: 11px;
    font-weight: 700;
}

/* Karta organizace */
.uc-org {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-section);
}

.uc-org + .uc-org {
    margin-top: 10px;
}

.uc-org-znak {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
}

.uc-org-text {
    min-width: 0;
    flex: 1;
}

.uc-org-nazev {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uc-org-meta {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.uc-org-role {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.uc-org-role--vlastnik {
    background: var(--primary-light);
    color: var(--primary);
}