/* === Aardvark theming ===
   Tenant může přes ThemeCssJson přepsat CSS proměnné (--aav-*),
   výchozí hodnoty jsou zde. Pro totální redesign se vymění theme RCL. */
:root {
    --aav-primary: #1b6ec2;
    --aav-navbar-fg: #ffffff;
}

.aav-navbar {
    background-color: var(--aav-primary);
}

.aav-navbar .navbar-brand,
.aav-navbar .nav-link,
.aav-navbar .btn-link.nav-link {
    color: var(--aav-navbar-fg);
}

.btn-primary {
    --bs-btn-bg: var(--aav-primary);
    --bs-btn-border-color: var(--aav-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--aav-primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--aav-primary) 85%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--aav-primary) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--aav-primary) 75%, black);
}

a {
    color: var(--aav-primary);
}

/* === Články: covery a avatary (média servíruje /media) === */
.aav-article-cover {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 0.75rem;
}

.aav-article-thumb {
    width: 140px;
    height: 94px;
    object-fit: cover;
    border-radius: 0.5rem;
}

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

/* === Formulářová validace (Blazor) === */
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* === Blazor error UI === */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Došlo k chybě.";
}

/* Šablona Clean — „bílá stránka": úzký sloupec, drobnější text, žádný chrom. */
.aav-tpl-clean {
    max-width: 720px;
    font-size: .875rem;
    line-height: 1.6;
}
.aav-tpl-clean h1, .aav-tpl-clean h2 { font-size: 1.25rem; }
.aav-tpl-clean h3, .aav-tpl-clean h4 { font-size: 1rem; }

/* === Skin NewsPortal — editorial news portál ===
   Teplý papír + hluboký inkoust + signální akcent. Paleta jde přeladit z DB
   theme proměnnými --aav-np-* (tenant ThemeCssJson / per-page theme). */
.aav-np {
    --np-bg: var(--aav-np-bg, #f6f4ef);
    --np-surface: var(--aav-np-surface, #fffdf8);
    --np-ink: var(--aav-np-ink, #1d1f24);
    --np-muted: var(--aav-np-muted, #6e6a61);
    --np-accent: var(--aav-np-accent, #d3451c);
    --np-rule: var(--aav-np-rule, #e3ded2);

    /* Paleta news modulu (varianta "news") se ve skinu sladí automaticky. */
    --aav-news-ink: var(--np-ink);
    --aav-news-muted: var(--np-muted);
    --aav-news-accent: var(--np-accent);
    --aav-news-rule: var(--np-rule);

    background: var(--np-bg);
    color: var(--np-ink);
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.aav-np h1, .aav-np h2, .aav-np h3, .aav-np h4 {
    font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--np-ink);
}

/* --- Masthead --- */
.aav-np-masthead {
    background: var(--np-surface);
    border-bottom: 3px solid var(--np-ink);
}

.aav-np-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--np-rule);
    font-size: .78rem;
    color: var(--np-muted);
}

.aav-np-date {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

.aav-np-account {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.aav-np-account a,
.aav-np-account button {
    color: var(--np-muted);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
}

.aav-np-account a:hover,
.aav-np-account button:hover {
    color: var(--np-accent);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.aav-np-brand {
    display: inline-block;
    padding: 1.1rem 0 .6rem;
    font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3rem);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1;
    color: var(--np-ink);
    text-decoration: none;
}

.aav-np-brand:hover {
    color: var(--np-ink);
}

.aav-np-brand-dot {
    color: var(--np-accent);
}

/* Rubriky — na užších displejích horizontální scroll místo hamburgeru. */
.aav-np-nav {
    display: flex;
    gap: 1.35rem;
    overflow-x: auto;
    padding: .1rem 0;
    scrollbar-width: none;
}

.aav-np-nav::-webkit-scrollbar {
    display: none;
}

.aav-np-nav a {
    padding: .5rem 0 .65rem;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    white-space: nowrap;
    color: var(--np-ink);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px; /* linka aktivní položky sedí na hraně mastheadu */
}

.aav-np-nav a:hover,
.aav-np-nav a.active {
    color: var(--np-accent);
    border-bottom-color: var(--np-accent);
}

/* Druhá úroveň navigace — podstránky otevřené rubriky. */
.aav-np-subnav {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    padding: .45rem 0 .1rem;
    scrollbar-width: none;
    border-top: 1px solid var(--np-rule);
}

.aav-np-subnav::-webkit-scrollbar {
    display: none;
}

.aav-np-subnav a {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--np-muted);
    text-decoration: none;
}

.aav-np-subnav a:hover,
.aav-np-subnav a.active {
    color: var(--np-accent);
}

/* --- Obsah --- */
.aav-np-main {
    padding: 2rem 0 3rem;
}

.aav-np-title {
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--np-rule);
}

.aav-np-main a {
    color: var(--np-accent);
}

/* News modul i běžný obsah dědí inkoust; odkazy v článcích zůstávají akcentové. */
.aav-np-main .aav-news a {
    color: inherit;
}

.aav-np .text-muted {
    color: var(--np-muted) !important;
}

.aav-np .card {
    background: var(--np-surface);
    border-color: var(--np-rule);
}

/* --- Footer --- */
.aav-np-footer {
    background: var(--np-ink);
    color: color-mix(in srgb, var(--np-bg) 88%, transparent);
    padding: 1.75rem 0;
    margin-top: 3rem;
}

.aav-np-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.aav-np-footer-brand {
    font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: -.02em;
}

.aav-np-footer-note {
    font-size: .78rem;
    opacity: .65;
}

/* FAB — tužka pro editaci stránky (vpravo dole, jen pro uživatele s grantem Edit). */
.aav-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--aav-primary, #1b6ec2);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    transition: transform .1s ease;
}
.aav-fab:hover { color: #fff; transform: scale(1.08); }

/* Inline editor stránky */
.aav-editor-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--bs-body-bg);
    padding: .5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}
.aav-editor-settings summary { cursor: pointer; color: var(--bs-secondary-color); }
.aav-editor-row {
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
    padding: .5rem;
    margin: .75rem 0;
}
.aav-editor-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}
.aav-editor-cell {
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    padding: .5rem;
    min-height: 4.5rem;
    background: var(--bs-tertiary-bg);
}
.aav-editor-module {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    margin-bottom: .5rem;
}
.aav-editor-module-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .375rem .5rem;
    cursor: pointer;
}
.aav-editor-module-body { padding: .5rem; border-top: 1px solid var(--bs-border-color); }
.aav-editor-addrow {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    align-items: center;
    margin-top: 1rem;
}
.aav-editor-custom { max-width: 7rem; }

/* ---------- HTML editor (html-editor.js — inline i modal) ---------- */
.aav-html-surface {
    min-height: 20rem;
    outline: none;
}
.aav-html-surface img { max-width: 100%; height: auto; }
.aav-html-modal .modal-body { min-height: 55vh; }
.aav-html-modal .aav-html-surface {
    flex: 1 1 auto;
    overflow-y: auto;
}
.aav-html-modal .aav-html-source {
    flex: 1 1 auto;
    resize: none;
    outline: none;
    box-shadow: none;
}

/* Výběr obrázku ze Souborů portálu */
.aav-html-picker {
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}
.aav-html-picker-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .5rem;
}
.aav-html-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: .375rem;
    padding: 0 .5rem .5rem;
    max-height: 14rem;
    overflow-y: auto;
}
.aav-html-picker-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: var(--bs-body-bg);
    cursor: pointer;
    text-align: center;
}
.aav-html-picker-item:hover { border-color: var(--aav-primary, #1b6ec2); }
.aav-html-picker-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: .25rem;
    background: var(--bs-secondary-bg);
    font-size: 1.4rem;
}
.aav-html-picker-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.aav-html-picker-name {
    font-size: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Koš a historie verzí v editoru stránek */
.aav-editor-trash-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .375rem .5rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: .375rem;
    margin-bottom: .375rem;
    background: var(--bs-tertiary-bg);
}
.aav-editor-versions {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    font-size: .85rem;
}
.aav-editor-versions li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .15rem 0;
    border-bottom: 1px dotted var(--bs-border-color);
}

/* === Containery modulů (ModuleContainers) ===
   Obal instance modulu volitelný v editoru stránek: aav-mod--{key}.
   Staví na proměnných --aav-mod-*, které si skin přemapuje na svou paletu
   (viz .aav-np níž) — stejný princip jako --aav-news-*. */
.aav-mod--box,
.aav-mod--muted,
.aav-mod--accent {
    padding: 1.25rem;
    border-radius: var(--aav-mod-radius, .5rem);
}

.aav-mod--box {
    background: var(--aav-mod-surface, var(--bs-body-bg, #fff));
    border: 1px solid var(--aav-mod-rule, var(--bs-border-color, #dee2e6));
}

.aav-mod--muted {
    background: var(--aav-mod-muted-bg, var(--bs-tertiary-bg, #f8f9fa));
}

.aav-mod--accent {
    background: color-mix(in srgb, var(--aav-mod-accent, var(--aav-primary, #1b6ec2)) 7%, transparent);
    border-top: 3px solid var(--aav-mod-accent, var(--aav-primary, #1b6ec2));
    border-radius: 0 0 var(--aav-mod-radius, .5rem) var(--aav-mod-radius, .5rem);
}

/* Inverzní: teplá tmavě hnědá karta se světle hnedým písmem — má vlastní
   proměnné --aav-mod-invert-* (radius/padding si drží i ve skinech s ostrými
   hranami, je to záměrně "vystouplý" box). */
.aav-mod--invert {
    background: var(--aav-mod-invert-bg, #4a3a2b);
    color: var(--aav-mod-invert-fg, #e7d9c4);
    border: 1px solid var(--aav-mod-invert-border, #2b211a);
    border-radius: var(--aav-mod-invert-radius, .75rem);
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgb(0 0 0 / .12);
}

.aav-mod--invert :is(h1, h2, h3, h4, h5) {
    color: var(--aav-mod-invert-heading, #f3e8d5);
}

.aav-mod--invert a {
    color: color-mix(in srgb, var(--aav-mod-accent, var(--aav-primary, #1b6ec2)) 45%, #f3e8d5);
}

.aav-mod--invert .text-muted {
    color: color-mix(in srgb, var(--aav-mod-invert-fg, #e7d9c4) 65%, transparent) !important;
}

/* Skin NewsPortal: containery v paletě papír/inkoust, ostré hrany (editorial);
   invert si nechává hnědou kartu se zaoblením — kontrastní prvek na papíru. */
.aav-np {
    --aav-mod-surface: var(--np-surface);
    --aav-mod-rule: var(--np-rule);
    --aav-mod-muted-bg: color-mix(in srgb, var(--np-rule) 45%, var(--np-bg));
    --aav-mod-accent: var(--np-accent);
    --aav-mod-radius: 0;
}

.aav-np .aav-mod--invert :is(h1, h2, h3, h4, h5) {
    color: var(--aav-mod-invert-heading, #f3e8d5);
}