/* --- Proměnné a základní styly --- */
:root {
    --primary-bg-color: rgb(26,33,43);
    --secondary-bg-color: rgb(37,44,56);
    --border-color: rgb(49, 58, 74);
    --text-color: rgb(230, 233, 236);
    --icon-color: rgb(255, 255, 255);
}
/*
body {
    font-family: 'Rubik', sans-serif;
    background: var(--primary-bg-color);
    color: var(--text-color);
}
*/
/* výpočty - katex  */

/* Kontejner pro jeden výpočet */
.ri_formula_wrapper {
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--secondary-bg-color);
    transition: all 0.2s ease-in-out;
    font-size: 1.1em; /* Větší písmo pro vzorce */
}

/* Třída pro zvýraznění aktivního výpočtu */
.ri_formula_wrapper.highlighted {
    border-color: rgb(142,146,150); /* Světle šedý rámeček */
    background-color: rgb(37,44,56); /* Tmavší pozadí */
    box-shadow: 0 0 8px rgba(37,44,56, 0.3);
}

/* KaTeX potřebuje pro správné zobrazení vlastní styly, které si načte z CDN */
.katex-display {
    margin: 0 !important;
}
/* výpočty - katex konec */
/* styly pro komentáře karty */


        /* --- Styly karty --- */
        .cm-card {
            background-color: var(--secondary-bg-color);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(26,33,43, 0.4);
            padding: 20px;
            width: 500px;
            position: relative;
        }

        .cm-card-title {
            font-size: 1.5em;
            font-weight: bold;
            border-bottom: 2px solid var(--border-color);
            color: var(--text-color);
            padding-bottom: 10px;
            margin-bottom: 15px;
        }

        .cm-card-content {
            line-height: 1.6;
            color: var(--text-color);
        }

        .cm-card-content:focus {
            outline: none;
            border: 1px solid #007bff;
            border-radius: 4px;
            padding: 5px;
            margin: -6px; /* Kompenzace za padding a border */
        }
        
        /* --- Styly pro komentování --- */
        .cm-comment-highlight {
            background-color: rgba(142,146,150, 0.15);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .cm-comment-highlight.cm-highlighted {
            background-color: rgba(142,146,150, 0.35);
            font-weight: bold;
        }
        
        /* --- Styly pro kontejner s komentáři --- */
        .cm-comments-container {
    width: 350px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    position: absolute;
    right: 50px;

    /* místo fit-content nastavíme 100% výšku rodiče */
    height: 70%;
    background: var(--secondary-bg-color);
    /* povolíme jen vertikální scrollování */
    overflow-y: auto;
    overflow-x: hidden;
    
}

        .cm-add-independent-comment-btn {
            background-color: rgb(37,44,56);
            color: var(--text-color);
            border: none;
            border-radius: 4px;
            padding: 10px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.2s;
            text-align: center;
            width: 100%;
        }

        .cm-add-independent-comment-btn:hover {
            background-color: rgb(26,33,43);
        }
        
        /* --- Styly pro blok s komentářem --- */
        .cm-comment-block {
            background-color: var(--primary-bg-color);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            box-shadow: 0 1px 3px rgba(26,33,43,0.15);
            transition: box-shadow 0.2s, border-color 0.2s;
            cursor: grab;
        }
        .cm-comment-block:hover {
            border-color: rgb(142,146,150);
            box-shadow: 0 2px 6px rgba(37,44,56,0.2);
        }
        .cm-comment-block.cm-dragging {
            opacity: 0.5;
            background: rgb(37,44,56);
            cursor: grabbing;
        }

        .cm-comment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cm-comment-author {
            font-weight: bold;
            color: var(--text-color);
        }
        
        .cm-comment-timestamp {
            font-size: 0.8em;
            color: rgb(142,146,150);
        }

        .cm-comment-body {
            background-color: var(--secondary-bg-color);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 8px;
            min-height: 40px;
        }
        .cm-comment-body:focus {
            outline: none;
            border-color: rgb(142,146,150);
            background-color: var(--primary-bg-color);
        }

        .cm-comment-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8em;
            color: rgb(142,146,150);
            margin-top: 5px;
        }
        
        .cm-comment-resolve-btn {
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 4px 8px;
            cursor: pointer;
            font-size: 0.9em;
            transition: background-color 0.2s;
        }
        
        .cm-comment-resolve-btn:hover {
            background-color: #218838;
        }

/*styly pro komentáře karty konec */


/* styly pro generování struktury vpravo */


        /* --- Simulace drag-and-drop karty --- */
        .ri_card_simulation {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 25px;
            background-color: var(--secondary-bg-color);
            border-radius: 16px;
            box-shadow: 0 8px 25px rgba(26,33,43, 0.18);
            border: 1px solid var(--border-color);
        }

        .ri_left_panel, .ri_right_panel {
            padding: 10px;
        }

        .ri_left_panel {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* --- Styly pro ukázkové "prvky" vlevo --- */
        .ri_prvek_placeholder {
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background-color: var(--primary-bg-color);
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            box-shadow: 0 2px 4px rgba(26,33,43, 0.10);
        }

        .ri_prvek_placeholder:hover {
            border-color: rgb(142,146,150);
            background-color: rgb(37,44,56);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(37,44,56, 0.18);
        }

        /* --- Hlavní kontejner informačního panelu (sticky element) --- */
        .ri_right_info_container {
            width: 100%;
            background-color: var(--secondary-bg-color);
            border-radius: 12px;
            border: 1px solid var(--border-color);
            box-shadow: 0 4px 15px rgba(26,33,43, 0.13);
            position: sticky;
            top: 20px;
        }

        /* --- Horní menu / Navigace --- */
        .ri_menu_container {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            padding: 8px 15px;
            background-color: var(--primary-bg-color);
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

        .ri_menu_button {
            padding: 8px 16px; border: none; background-color: transparent; cursor: pointer;
            font-size: 15px; font-weight: 500; color: var(--text-color); border-radius: 6px;
            transition: all 0.2s; margin-right: 5px;
        }

        .ri_menu_button:hover { color: #343a40; background-color: #e9ecef; }
        .ri_menu_button:hover { color: rgb(142,146,150); background-color: rgb(37,44,56); }
        .ri_menu_button.active { color: rgb(142,146,150); background-color: rgb(26,33,43); font-weight: 600; }

        /* --- Kontejner s obsahem záložek --- */
        .ri_content_area { padding: 20px; min-height: 400px; }
        .ri_content_section { display: none; }
        .ri_content_section.visible { display: block; }
       
        /* --- Styly pro sekci "Informations" a její "details" --- */
        .ri_info_details_list { display: flex; flex-direction: column; gap: 15px; }

        .ri_detail_container {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background-color: var(--secondary-bg-color);
            overflow: hidden; /* Důležité pro animaci max-height */
        }
       
        .ri_detail_title {
            font-weight: 600; padding: 12px 15px; background-color: var(--primary-bg-color);
            color: var(--text-color);
            cursor: pointer; /* Změna kurzoru na klikatelný */
            transition: background-color 0.2s;
            display: flex; /* Pro zarovnání textu a ikony */
            justify-content: space-between;
            align-items: center;
        }
       
        .ri_detail_title:hover {
            background-color: rgb(37,44,56);
        }
       
        /* NOVÉ: Ikona pro rozbalení/sbalení */
        .ri_detail_toggle_icon {
            display: inline-block;
            border: solid #868e96;
            border-width: 0 2px 2px 0;
            padding: 3px;
            transform: rotate(45deg); /* Šipka dolů */
            transition: transform 0.3s ease;
        }
       
        .ri_detail_content {
            padding: 15px;
            width: 100%; box-sizing: border-box; word-wrap: break-word; font-size: 14px;
            color: var(--text-color); border-top: 1px solid var(--border-color);

            /* NOVÉ: Vlastnosti pro animaci */
            max-height: 500px; /* Dostatečně velká výška pro obsah */
            transition: max-height 0.4s ease-in-out, padding 0.3s ease, border 0.3s ease;
        }

        /* NOVÉ: Styly pro sbalený stav */
        .ri_detail_container.collapsed .ri_detail_content {
            max-height: 0;
            padding-top: 0;
            padding-bottom: 0;
            border-top: 1px solid transparent;
        }
       
        .ri_detail_container.collapsed .ri_detail_toggle_icon {
            transform: rotate(-45deg); /* Šipka nahoru */
        }

        .ri_detail_content ul { padding-left: 20px; margin: 0; }

/* styly pro generování struktury vpravo konec */



/* styly pro generování struktury vlevo */


        /* --- Hlavní kontejner pro obě sekce (nyní pod sebou) --- */
        .gs_main_container {
            display: flex;
            flex-direction: column; /* Sekce pod sebou */
            gap: 25px; /* Větší mezera mezi sekcemi */
            max-width: 900px; /* Omezení šířky pro lepší čitelnost */
            margin: 0 auto; /* Centrování kontejneru */
            background-color: var(--secondary-bg-color); /* Tmavý podklad pro hlavní obsah */
            border-radius: 12px; /* Více zaoblené rohy */
            box-shadow: 0 4px 12px rgba(26,33,43, 0.18); /* Jemný stín pro hloubku */
            padding: 5px;
        }

        /* --- Styly pro každou polovinu (Vstupní/Výstupní) --- */
        .gs_half_container {
            padding: 5px; /* Menší padding */
            background-color: var(--primary-bg-color); /* Velmi jemný podklad */
            border: 1px solid var(--border-color); /* Jemný okraj */
            border-radius: 8px; /* Zaoblené rohy */
            display: flex;
            flex-direction: column;
            gap: 15px; /* Mezera mezi odstavci/prvky */
            font-size: 10px;
        }
       
        .gs_half_container h3 { /* Změněno z h2 na h3 a styl */
            margin: 0 0 15px 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #e8e8e8; /* Jemná spodní linka */
            text-align: left;
            font-size: 1.4em; /* Trochu menší nadpis */
            color: var(--text-color); /* Tmavší, profesionální barva textu */
            font-weight: 600; /* Střední tučnost */
        }

        /* --- Styly pro odstavec --- */
        .gs_odstavec {
            border: 1px solid var(--border-color); /* Světlejší modrá */
            border-radius: 8px; /* Zaoblené rohy */
            padding: 5px; /* Menší padding */
            background-color: var(--secondary-bg-color); /* Velmi světle modrý podklad */
            box-shadow: 0 2px 5px rgba(26,33,43, 0.10); /* Jemný stín */
        }

        .gs_odstavec_nazev {
            font-weight: 600; /* Střední tučnost */
            color: var(--text-color); /* Modrá barva */
            font-size: 1.1em; /* Velikost názvu odstavce */
            margin-bottom: 10px; /* Mezera pod názvem */
            display: block; /* Aby zabral celý řádek */
        }
       
        /* Přejmenovávací input už není potřeba, ale nechávám zde zakomentované styly pro případné budoucí použití */
        /*
        .gs_odstavec_input {
            width: calc(100% - 10px);
            padding: 5px;
            border: 1px solid #007BFF;
            border-radius: 3px;
        }
        */
       
        .gs_odstavec_obsah {
            margin-top: 10px;
            padding-left: 5px;
            border-left: 2px solid var(--border-color); /* Světlejší modrý okraj */
            display: flex;
            flex-direction: column;
            gap: 10px; /* Mezera mezi prvky/vnořenými odstavci */
        }

        /* --- Styly pro prvek --- */
        .gs_prvek {
            border: 1px dashed var(--border-color); /* Jemná zelená přerušovaná čára */
            border-radius: 6px; /* Zaoblené rohy */
            padding: 8px; /* Menší padding */
            background-color: var(--primary-bg-color); /* Velmi světle zelený podklad */
            font-family: 'Consolas', 'Courier New', monospace; /* Monospace pro technické info */
            font-size: 0.85em; /* Menší písmo pro detaily */
            color: var(--text-color); /* Tmavší zelená barva textu */
        }
       
        .gs_prvek_title {
            font-weight: bold;
            color: #3d8c51; /* Výraznější zelená */
            margin-bottom: 8px; /* Mezera pod názvem prvku */
            font-size: 1em;
        }

        .gs_prvek p {
            margin: 3px 0; /* Menší mezera mezi řádky atributů */
            word-break: break-all; /* Zalomení dlouhých slov */
        }

/* konec stylů pro generování struktury vlevo */


.title-input {
    font-size: 1.2em;
    font-weight: bold;
    font-family: 'Rubik', sans-serif;
    border: 1px solid #007bff;
    border-radius: 4px;
    padding: 2px 5px;
    outline: none;
}

    /* Základní styl pro "pilulku" proměnné */
.variable-span {
    padding: 2px 20px 2px 6px; /* Více místa vpravo pro křížek */
    border-radius: 4px;
    position: relative; /* Nutné pro pozicování křížku */
    display: inline-block;
    margin: 0 1px;
    cursor: default;
    font-size: 0.9em;
    line-height: 1.2;
    vertical-align: middle;
}

/* Styl pro křížek na smazání */
.variable-span-close {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    padding: 0 2px;
    border-radius: 3px;
    color: inherit; /* Přebírá barvu od rodiče (spanu) */
    visibility: hidden; /* Skryto ve výchozím stavu */
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

/* Zobrazení křížku při najetí myší na span */
.variable-span:hover .variable-span-close {
    visibility: visible;
    opacity: 0.8;
}

/* Zvýraznění pozadí křížku při najetí myší přímo na něj */
.variable-span-close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.15);
}

/* Styl pro informační menu (tooltip) */
.variable-tooltip {
    position: fixed; /* Nebo absolute, pokud je editor v pozicovaném kontejneru */
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-family: sans-serif;
    font-size: 14px;
    z-index: 1000; /* Aby byl tooltip vždy navrchu */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    pointer-events: none; /* Tooltip nereaguje na myš */
}


/* --- Struktura wrapperu --- */
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 60px auto;
    grid-template-areas: 
        "upper upper"
        "left right";
    
    max-width: 1100px;
    min-height: 620px;
    
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 8px rgba(26,33,43,0.18);
    /* border-radius se přesune */
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    /* background-color může zůstat, pokud chcete barvu v mezerách (gap) */
    background-color: var(--primary-bg-color);
    /* overflow: hidden;  <-- TENTO ŘÁDEK ODEBERTE! */
    transition: min-height 0.3s ease;
}

/* --- Sekce pro horní lištu --- */
.upperPart {
    grid-area: upper;
    background-color: var(--primary-bg-color);
    display: flex;
    flex-direction: column;
    padding: 0;
    height: 60px; /* Pevná výška */
}

.upperPartTop, .upperPartBottom {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.upperPartTop {
    justify-content: space-between;
}

.upperPart-left, .upperPart-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.card-title {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-color);
}

.icon-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
    border-radius: 50%;
    transition: background-color 0.2s;
}
.icon-button:hover {
    color: var(--text-color);
    background-color: var(--secondary-bg-color);
}

.upperPart-right select {
    margin-right: 10px;
}

.upperPart-right hr {
    height: 24px;
    border-left: 1px solid var(--border-color);
    border-right: none;
    margin: 0 5px;
}

.description-input {
    width: 100%;
    border: none;
    background: none;
    padding: 5px;
    font-size: 1em;
    outline: none;
}

.description-input::placeholder {
    color: #6c757d;
}

.upperPartBottom {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 0;
}

.upperPartBottom hr {
    width: 100%;
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0;
}

/* --- Levá a pravá strana --- */
.leftSideWrapper {
    grid-area: left;
    background-color: var(--secondary-bg-color);
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    padding: 5px;
    min-height: 540px;
}

/* DOPORUČENÁ ÚPRAVA */
.rightSideWrapper {
    grid-area: right;
    background-color: var(--secondary-bg-color);
    border: 1px dashed var(--border-color); 
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 5px;
    min-height: 540px;
}

/* --- Pravidla pro responzivitu --- */
@media (max-width: 1120px) {
    .wrapper {
        min-width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: 60px auto auto;
        grid-template-areas: 
            "upper"
            "left"
            "right";
    }

    .leftSideWrapper, .rightSideWrapper {
        min-height: 200px;
    }
}




.io_container {
    display: flex;
    align-items: left;
    gap: 6px;
    padding: 3px 5px;
    background-color: var(--primary-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: 'Rubik', sans-serif;
    height: 64px;
    box-sizing: border-box;
}
.io_table_wrapper {
    flex-direction: column;
    gap: 10px;
    padding: 5px;
    height: auto;
    /*max-height: 900px;  Omezení výšky pro scrollování */
    /*overflow-y: auto;  Povolení vertikálního scrollování */
}
/* 1. Element pro zvýraznění */
.io_highlight_element {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--secondary-bg-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
    user-select: none;
}

.io_highlight_element:hover {
    background-color: var(--primary-bg-color);
    color: var(--text-color);
}

.io_highlight_element.io_highlight_active,
    .io_highlight_element.io_highlight_active,
    .io_highlight_element.io_highlight_active:hover {
        background-color: var(--primary-bg-color);
        color: var(--text-color);
}

.io_highlight_element .material-symbols-rounded {
    font-size: 20px;
    font-variation-settings: 'FILL' 1;
}

/* Wrapper pro input/select a jejich popisky */
.io_input_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.io_label {
    font-size: 11px;
    color: var(--text-color);
    margin-bottom: 3px;
    padding-left: 6px;
}

.io_input, .io_select {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Rubik', sans-serif;
    height: 36px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.io_input {
    background-color: var(--secondary-bg-color);
    line-height: 34px;
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
}


.io_input:focus-within, .io_select:focus {
    outline: none;
    border-color: rgb(142,146,150);
    box-shadow: 0 0 0 3px rgba(142,146,150,.15);
}



/* Specifické šířky */
.io_input_large { width: 75px; }
.io_input_small { width: 60px; }
.io_select { width: 80px; cursor: pointer; padding: 0 4px;}


/* Tlačítka (kopírovat, zamknout) */
.io_button {
    width: 38px;
    height: 38px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    flex-shrink: 0;
    align-self: center;
}

.io_button:hover {
    background-color: #e9e9e9;
}

.io_button .material-symbols-rounded {
    font-size: 24px;
    color: var(--icon-color);
    transition: color 0.2s;
}

.io_button:hover .material-symbols-rounded {
    color: #111;
}

.leftInputsContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /*max-height: 540px;   Omezení výšky pro scrollování */
    /*overflow-y: auto;   Povolení vertikálního scrollování */

}

.io_submain_container {
    margin-left: 20px;
}
.io_input_disabled {
    background-color: rgb(37,44,56);
    cursor: not-allowed;
    color: rgb(142,146,150);

}