/* Your Custom CSS Goes here */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

.shake-animation {
    animation: shake 0.5s;
}

@keyframes rollUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.roll-up-animation {
    animation: rollUp 0.5s forwards;
}

@keyframes rollUpDisappear {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-100%); opacity: 0; }
}

.roll-up-disappear-animation {
    animation: rollUpDisappear 0.5s forwards;
}

/* Zanoření kategorií v administraci */
.category-indent-0 {
    padding-left: 0;
}
.category-indent-1 {
    padding-left: 5% !important;
}
.category-indent-2 {
    padding-left: 10% !important;
}
.category-indent-3 {
    padding-left: 15% !important;
}

.category-indent-4 {
    padding-left: 20% !important;
}

.category-indent-5 {
    padding-left: 22% !important;
}

.category-indent-6 {
    padding-left: 29% !important;
}

/* označení prvků s ohldem na potřebu vyplnění */
.required-label {
    font-weight: bold;
}
.valid-field {
    border-bottom: 2px solid green;
}
.invalid-field {
    border-bottom: 2px solid red;
}

/* MiniWeb Content Block Styles */
.mw_content-block {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
    border: 2px solid #dc3545;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 6px rgba(220, 53, 69, 0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
}

.mw_content-block .mw_block-label {
    position: absolute;
    top: -8px;
    left: 15px;
    background-color: #dc3545;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 1;
}

/* Hide BLOK label on frontend (when not in admin pages) */
body:not(.admin-page) .mw_content-block .mw_block-label,
body:not([class*="admin"]) .mw_content-block .mw_block-label,
.mw_content-block .mw_block-label:not(.admin-only) {
    display: none !important;
}

/* Alternative: Hide BLOK label everywhere except when specifically shown in admin */
.mw_content-block .mw_block-label {
    display: none !important;
}

/* Show BLOK label only in admin context (override above rule) */
.admin-context .mw_content-block .mw_block-label,
.admin-page .mw_content-block .mw_block-label,
body.admin .mw_content-block .mw_block-label {
    display: block !important;
}

.mw_content-block .mw_block-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mw_content-block .mw_block-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #dee2e6;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.mw_content-block .mw_block-image:hover {
    transform: scale(1.05);
}

.mw_content-block .mw_block-text {
    flex-grow: 1;
}

.mw_content-block .mw_block-title {
    color: #dc3545;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 5px 0;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.mw_content-block .mw_block-title:hover {
    color: #c82333;
    text-decoration: underline;
}

/* Kontext blok – výběr obrázku: cca 2 řádky + scrollbar */
#contextImageGrid {
    max-height: 210px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px !important;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;

    /* Bootstrap .row dělá z dětí „sloupce“ a může rozbíjet fixní tile layout.
       Tady to přepneme na vlastní grid, aby byl scroll uvnitř a výška se opravdu omezila. */
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    align-content: start;
}

#contextImageGrid .mw-context-image-option {
    width: 90px !important;
    height: 90px;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Když button má Bootstrap w-100, nechceme aby roztahoval tile do výšky/šířky mimo grid cell */
#contextImageGrid .mw-context-image-option.btn {
    padding: 0;
}

#contextImageGrid .mw-context-image-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#contextImageGrid .mw-context-image-option.is-selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.mw_content-block .mw_block-description {
    color: #6c757d;
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
}

.mw_content-block .mw_block-button {
    background-color: #dc3545;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-block;
    margin-top: 8px;
}

.mw_content-block .mw_block-button:hover {
    background-color: #c82333;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
}

/* Remove button for content blocks (only visible in editor) */
.mw_content-block .mw_remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.mw_content-block .mw_remove-btn:hover {
    background-color: #c82333;
}

/* Hide remove button on frontend (when not in admin) */
body:not(.admin-page) .mw_content-block .mw_remove-btn {
    display: none !important;
}

/* Kontext varianta (odlišení barvou) */
.mw_content-block.mw_content-block--context {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
    border-color: #0d6efd;
    box-shadow: 0 4px 6px rgba(13, 110, 253, 0.1);
}

.mw_content-block.mw_content-block--context .mw_block-label {
    display: none !important;
}

.mw_content-block.mw_content-block--context .mw_block-title {
    color: #0d6efd;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.mw_content-block.mw_content-block--context .mw_block-title:hover {
    color: #0b5ed7;
}

.mw_content-block.mw_content-block--context .mw_block-button {
    background-color: #0d6efd;
}

.mw_content-block.mw_content-block--context .mw_block-button:hover {
    background-color: #0b5ed7;
}

/* Table of Contents Styles - matching FAQ blocks */
.mw_table-container {
    background: linear-gradient(135deg, #f0fff0 0%, #e6ffe6 100%);
    border: 2px solid #28a745;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 6px rgba(40, 167, 69, 0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
}

.mw_table-container h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #28a745;
    font-size: 18px;
    font-weight: 600;
}

.mw_table-container ol {
    padding-left: 20px;
    margin-bottom: 0;
}

.mw_table-container li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.mw_table-container a {
    color: #28a745;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mw_table-container a:hover {
    color: #1e7e34;
    text-decoration: underline;
}

.mw_table-container ol ol {
    margin-top: 8px;
    padding-left: 15px;
}

/* FAQ Styles - matching other blocks */
.mw_faq-container, .mw_faq-block, .faq-block {
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    border: 2px solid #007bff;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
}

/* FAQ label */
.mw_faq-block:before, .faq-block:before {
    content: 'FAQ';
    position: absolute;
    top: -8px;
    left: 15px;
    background-color: #007bff;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 1;
}

.mw_faq-container h2,
.mw_faq-container h3,
.mw_faq-container h4,
.mw_faq-container h5,
.mw_faq-container h6,
.mw_faq-block h2,
.mw_faq-block h3,
.mw_faq-block h4,
.mw_faq-block h5,
.mw_faq-block h6,
.faq-block h2,
.faq-block h3,
.faq-block h4,
.faq-block h5,
.faq-block h6 {
    font-weight: 600;
    color: #007bff;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 16px;
}

.mw_faq-container h2,
.mw_faq-block h2,
.faq-block h2 {
    font-size: 18px;
    margin-top: 0;
}

.mw_faq-container h3,
.mw_faq-block h3,
.faq-block h3 {
    margin-top: 0;
}

.mw_faq-container p,
.mw_faq-block p,
.faq-block p {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 15px;
}

.mw_faq-container p:last-child,
.mw_faq-block p:last-child,
.faq-block p:last-child {
    margin-bottom: 0;
}
/* Administrace bez levé navigace (uvítání, pozvánky, výběr webů).
   Rozložení řeší třída `sidebar-hidden` z admin-shell.css — tady zbývá jen
   schovat ovládání sidebaru, které by nemělo co sbalovat. */
.mw-app--no-nav .hide-sidebar-toggle-button,
.mw-app--no-nav .sidebar-toggle-button { display: none !important; }

/* Výběr obrázku role — mřížka emoji tlačítek (inc/roleIcons.twig) */
.role-icon-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.role-icon-option {
    width: 44px; height: 44px; font-size: 22px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #e3e8ee; border-radius: 10px; background: #fff;
    cursor: pointer; padding: 0; transition: border-color .15s, transform .1s;
}
.role-icon-option:hover { border-color: #9db4ff; transform: scale(1.08); }
.role-icon-option.active { border-color: #2f6bff; background: #eef3ff; box-shadow: 0 0 0 2px rgba(47,107,255,.15); }
.role-icon-option .no-icon { font-size: 14px; color: #8a94a6; }

/* ── Indikátory a nástroje admin výpisů (inc/listingTools.twig) ──────────────
   Ikonky jsou Material Icons (Font Awesome se v administraci nenačítá).
   Barevná ikonka = stav „ano", šedá = „ne". */
.listing-indicators { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.listing-ind { display: inline-flex; align-items: center; position: relative; line-height: 1; cursor: help; }
.listing-ind .material-icons { font-size: 20px; line-height: 1; }
.listing-ind-off { color: #c2c8d2; }
.listing-ind-count {
    position: absolute; top: -4px; right: -7px;
    min-width: 15px; padding: 0 3px;
    font-size: 10px; font-weight: 600; line-height: 15px; text-align: center;
    color: #fff; background: #2f6bff; border-radius: 8px;
}
.listing-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.listing-legend .material-icons { font-size: 16px; vertical-align: -3px; color: #8a94a6; }

/* Panel pokročilého filtru */
.listing-filter-toggle { white-space: nowrap; }
.listing-filter-badge { font-size: 11px; }
.listing-filter-advanced { border-top: 1px dashed #d7dce5; margin-top: 12px; padding-top: 12px; }
.listing-filter-advanced .form-label { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #7b8798; margin-bottom: 4px; }

/* ── Obsahové bloky v editoru: Kód a Markdown ───────────────────────────────
   Stejný princip jako .mw_faq-container: oblast má rámeček a štítek, ať je
   v editoru i v náhledu jasně vidět, kam blok sahá. Veřejný web si bloky
   stejně nastyluje po svém (základní vzhled dodá CMS do hlavičky stránky). */

.mw_code {
    position: relative;
    display: block;
    margin: 24px 0;
    padding: 18px 18px 16px;
    background: #0f172a;
    color: #e2e8f0;
    border: 2px solid #334155;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(15, 23, 42, 0.12);
    overflow-x: auto;
}

.mw_code > code {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    line-height: 1.55;
    background: none;
    color: inherit;
    padding: 0;
}

/* Štítek s jazykem — čte se z data-lang, do obsahu se nic nevkládá. */
.mw_code::before {
    content: 'KÓD · ' attr(data-lang);
    position: absolute;
    top: -9px;
    left: 15px;
    background-color: #334155;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 1;
}

.mw_md {
    position: relative;
    margin: 24px 0;
    padding: 20px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 2px solid #7c3aed;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(124, 58, 237, 0.1);
}

.mw_md::before {
    content: 'MARKDOWN';
    position: absolute;
    top: -8px;
    left: 15px;
    background-color: #7c3aed;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 1;
}

.mw_md > :first-child { margin-top: 0; }
.mw_md > :last-child { margin-bottom: 0; }

.mw_md h1, .mw_md h2, .mw_md h3, .mw_md h4, .mw_md h5, .mw_md h6 {
    color: #5b21b6;
    font-weight: 600;
    margin-bottom: 10px;
}

.mw_md pre,
.mw_md code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
}

.mw_md pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 12px 14px;
    border-radius: 8px;
    overflow-x: auto;
}

.mw_md table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.mw_md th,
.mw_md td {
    border: 1px solid #c4b5fd;
    padding: 6px 10px;
    text-align: left;
}