/* FormTemplater - Sdilene styly pro editor formularu */
/* Vsechny tridy maji prefix "frm-" pro zajisteni jedinecnosti */

/* =================================
   Prepisy Radzen layoutu (platne jen v editoru)
   ================================= */

.sub-layout {
    --rz-layout-body-padding: 0;
    --rz-accordion-content-padding-inline: 0.1rem;
    --frm-group-header-bg: #f0f0f0;
    --frm-group-header-border: 1px solid #ddd;
}

.sub-layout .rz-accordion-header {
    min-height: 0;
    border-radius: 3px !important;
}

.sub-layout .rz-accordion .rz-accordion-header > a,
.sub-layout .rz-accordion .rz-accordion-header > button {
    width: 100%;
}

body:has(.sub-layout) .rz-footer,
body:has(.sub-layout) .rz-header {
    display: none !important;
}

body:has(.sub-layout) .rz-layout .rz-body {
    grid-area: rz-body;
    overflow: clip;
}

body:has(.sub-layout) .rz-sidebar {
    display: none !important;
}

/* =================================
   Zakladni styly pro elementy
   ================================= */

.frm-sidebar {
    width: min(360px, 40vw);
    overflow-y: auto;
    background-color: #f8f9fa;
}

.frm-no-border {
    border: none !important;
}

    .frm-no-border:hover {
        border: none !important;
    }

    .frm-no-border:focus {
        border: none !important;
    }

.frm-element-wrapper {
    margin: 8px 0px;
    border: solid thin dimgray;
    min-height: 40px;
    border-radius: 5px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    background-color: wheat;
    padding: 2px 5px;
}

.frm-element {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.frm-selected {
    border-radius: 5px;
    border: 3px dotted orangered;
    padding: 0px !important;
    margin: 0px !important;
}

.frm-drag-over {
    border: 2px dashed var(--rz-primary);
    border-radius: 5px;
    background: #e9f5ff;
}

/* =================================
   Wrapper styly pro typy elementu
   ================================= */

.frm-expression-wrapper {
    background-color: lightgreen;
}

.frm-table-wrapper {
    background-color: honeydew;
}

.frm-text-wrapper {
    background-color: white;
    border: none;
}

.frm-help-wrapper {
    background-color: white;
    border: none;
}

.frm-line-wrapper {
    margin-top: 5px;
    background-color: white;
    border-top: 3px solid dimgray;
}

.frm-linebreak-wrapper {
    background-color: white;
}

.frm-small-space-wrapper {
    background-color: white;
}

.frm-medium-space-wrapper {
    background-color: white;
}

.frm-large-space-wrapper {
    background-color: white;
}

.frm-heading-wrapper {
    background-color: white;
    border: none;
}

/* =================================
   Styly pro skupiny
   ================================= */

.frm-group-wrapper {
    margin: 10px 0;
    background-image: linear-gradient(to right, #eeeeee 1px, transparent 1px), linear-gradient(to bottom, #eeeeee 1px, transparent 1px);
    background-size: calc(100% / 12) 56px;
    border-bottom: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
}

.frm-no-grid .frm-group-wrapper {
    background-image: none;
    border-bottom: none;
    border-right: none;
}

/* =================================
   Varianty skupin
   ================================= */

/* Pevna skupina */
.frm-group--fixed {
    border-radius: 6px;
}

    .frm-group--fixed > .frm-group-header {
        /*background: var(--frm-group-header-bg) !important;*/
        background: rgb(240, 240, 240);
        border: var(--frm-group-header-border);
        border-radius: 4px;
        margin-bottom: 0.2rem;
        margin-inline: 0;
        padding: 0.9rem 1rem;
        display: flex;
        align-items: center;
        width: 100%;
    }

/* Rozbalovaci skupina */
.frm-group--foldable-content {
    border-left: 4px solid var(--rz-base-400, #bbb);
    padding-left: 0.4rem;
}

/* Zahlavi rozbalovaci skupiny */
.frm-editor-content .rz-accordion > .rz-accordion-item > .rz-accordion-header {
    --rz-accordion-header-background: var(--frm-group-header-bg);
    background: var(--frm-group-header-bg) !important;
    color: var(--rz-text-color, #212121) !important;
    border: var(--frm-group-header-border) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 4px !important;
}

.frm-editor-content .rz-accordion > .rz-accordion-item > .rz-accordion-header > a,
.frm-editor-content .rz-accordion > .rz-accordion-item > .rz-accordion-header > button {
    color: var(--rz-text-color, #212121);
    padding: 0 !important;
}

/* =================================
   Drop zony
   ================================= */

.frm-drop-zone {
    width: 100%;
    min-height: 2.5rem;
    border: 2px dashed var(--rz-base-400, #dee2e6);
    border-radius: 4px;
    text-align: center;
    padding: 0.5rem;
    color: var(--rz-text-disabled-color, #6c757d);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 0.4rem;
    margin-bottom: 1rem;
    cursor: default;
}

.frm-drop-zone:hover {
    border-color: var(--rz-primary, #1e88e5);
    background: var(--rz-base-100, #f5f5f5);
}

.sub-layout:not(.frm-dragging) .frm-drop-zone:hover {
    border-color: var(--rz-base-400, #dee2e6);
    background: transparent;
}

.frm-drop-zone--empty {
    min-height: 5rem;
    margin-top: 0;
}

/* =================================
   Kody opakovanych skupin
   ================================= */

.frm-repeat-codes-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    margin-bottom: 0.4rem;
    border: 1px dashed var(--rz-base-400, #bbb);
    border-radius: 0.3rem;
    background: var(--rz-base-100, #f7f7f7);
    font-size: 0.75rem;
    color: var(--rz-text-disabled-color, #888);
}

.frm-repeat-codes-card code {
    cursor: pointer;
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
    background: var(--rz-base-300);
    transition: background 0.2s;
    user-select: all;
    font-size: 0.7rem;
}

.frm-repeat-codes-card code:hover {
    background: var(--rz-primary-lighter);
}

/* =================================
   Styly pro panel nastroju (sidebar)
   ================================= */

.frm-toolbox-button {
    position: fixed;
    right: 0;
    top: 5px;
    bottom: 5px;
}

.frm-source-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.frm-source-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    cursor: grab;
    min-width: 80px;
    background-color: #f8f9fa;
}

    .frm-source-item:hover {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }

/* =================================
   Utility styly
   ================================= */

.frm-preserve-lines {
    white-space: pre-wrap;
    word-break: break-word;
}

/* =================================
   Kompaktni rozlozeni
   ================================= */

.frm-compact {
    --rz-accordion-item-padding-block: 0.3rem;
}




.frm-compact .frm-element-wrapper {
    margin: 2px 0 !important;
    min-height: 24px !important;
    padding: 1px 3px !important;
    border-radius: 3px;
    font-size: 0.85rem;
}

.frm-compact .frm-element {
    font-size: 0.85rem;
}

.frm-compact .frm-group-wrapper {
    margin: 4px 0 !important;
    background-size: calc(100% / 12) 32px;
}

.frm-compact .mb-2 {
    margin-bottom: 0.15rem !important;
}

.frm-compact .mb-3 {
    margin-bottom: 0.25rem !important;
}

.frm-compact .frm-source-wrapper {
    gap: 0.2rem;
}

.frm-compact .frm-source-item {
    padding: 0.2rem 0.3rem;
    min-width: 56px;
    font-size: 0.75rem;
}

.frm-compact .frm-source-item .rzi {
    font-size: 1rem !important;
}

/* Sidebar - uzsi panel v kompaktnim modu */
.frm-compact .frm-sidebar {
    padding: 0.3rem 0.2rem !important;
    max-width: 160px;
    min-width: 280px !important;
}

/* Accordion - zahlavi polozek */
.frm-compact .rz-accordion-header {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.82rem !important;
    min-height: 0 !important;
    border-radius: 0 !important;
}

.frm-compact .rz-accordion-header .rz-accordion-header-text {
    font-size: 0.82rem !important;
}

.frm-compact .rz-accordion-header .rz-accordion-header-icon {
    font-size: 1rem !important;
}

.frm-compact .rz-accordion-content {
    padding: 0.2rem 0.3rem !important;
    margin-bottom: 1rem !important;
}

/* Radzen accordion item headers (RadzenAccordionItem) */
.frm-compact .rz-accordion-item > .rz-accordion-header {
    padding: 0.2rem 0.35rem !important;
}

/* Sjednocene zahlavi pevnych skupin v kompaktnim modu */
    .frm-compact .frm-group--fixed > .frm-group-header {
        padding: 0.5rem 0.3rem !important;
        border-radius: 0 !important;
        margin-bottom: 0;

    }

.frm-compact .rz-textbox,
.frm-compact .rz-textarea {
    padding: 0.15rem 0.3rem !important;
    font-size: 0.82rem !important;
    min-height: unset !important;
}

.frm-compact .frm-line-wrapper {
    margin-top: 2px;
}

.frm-compact h1, .frm-compact .h1 { font-size: 1.4rem !important; }
.frm-compact h2, .frm-compact .h2 { font-size: 1.2rem !important; }
.frm-compact h3, .frm-compact .h3 { font-size: 1.05rem !important; }
.frm-compact h4, .frm-compact .h4 { font-size: 0.95rem !important; }
.frm-compact h5, .frm-compact .h5 { font-size: 0.85rem !important; }
.frm-compact h6, .frm-compact .h6 { font-size: 0.8rem !important; }

.frm-compact .rz-icon,
.frm-compact .rzi {
    font-size: 1.1rem !important;
}

.frm-compact .rz-label {
    font-size: 0.82rem !important;
}

.frm-compact .frm-selected {
    border-width: 2px;
}

.frm-compact .small, .frm-compact small {
    font-size: 0.72rem !important;
}

/* Panel (RadzenPanel) - kompaktni */
.frm-compact .rz-panel-titlebar {
    padding: 0.2rem 0.4rem !important;
    min-height: unset !important;
}

.frm-compact .rz-panel {
    padding: 0.1rem;
    box-shadow: none;
    border-radius: 3px;
    margin-bottom: 0.25rem !important;
}

.frm-compact .rz-panel .rz-panel-content {
    padding: 0.25rem 0.4rem !important;
}

/* RadzenHeader - kompaktni */
.frm-compact .rz-header {
    padding: 0.15rem 0.4rem !important;
    min-height: unset !important;
}

/* =================================
   Kontrastni zobrazeni (bile pozadi, tmave popredi)
   ================================= */

.frm-high-contrast {
    --frm-hc-bg: #fff;
    --frm-hc-fg: #000;
    --frm-hc-accent: #0a3d91;
    --frm-hc-border: #000;
    --frm-hc-link: #0000ee;
    --frm-hc-input-bg: #fff;
    --frm-hc-hover: #e0e0e0;
    --frm-hc-sidebar-bg: #f0f0f0;
}

.frm-high-contrast .rz-body {
    background-color: var(--frm-hc-bg) !important;
    color: var(--frm-hc-fg) !important;
}

.frm-high-contrast .frm-sidebar {
    background-color: var(--frm-hc-sidebar-bg) !important;
    color: var(--frm-hc-fg) !important;
    border-left: 3px solid var(--frm-hc-border) !important;
}

.frm-high-contrast .frm-element-wrapper {
    background-color: #fffde6 !important;
    border: 2px solid var(--frm-hc-border) !important;
    color: var(--frm-hc-fg) !important;
}

.frm-high-contrast .frm-expression-wrapper {
    background-color: #d4edda !important;
    border-color: #155724 !important;
}

.frm-high-contrast .frm-table-wrapper {
    background-color: #d1ecf1 !important;
    border-color: #0c5460 !important;
}

.frm-high-contrast .frm-text-wrapper,
.frm-high-contrast .frm-help-wrapper,
.frm-high-contrast .frm-heading-wrapper {
    background-color: var(--frm-hc-input-bg) !important;
    border: 2px solid #555 !important;
    color: var(--frm-hc-fg) !important;
}

.frm-high-contrast .frm-line-wrapper {
    background-color: transparent !important;
    border-top: 4px solid var(--frm-hc-border) !important;
}

.frm-high-contrast .frm-linebreak-wrapper,
.frm-high-contrast .frm-small-space-wrapper,
.frm-high-contrast .frm-medium-space-wrapper,
.frm-high-contrast .frm-large-space-wrapper {
    background-color: transparent !important;
}

.frm-high-contrast .frm-selected {
    border: 3px dotted #cc0000 !important;
}

.frm-high-contrast .frm-drag-over {
    border: 3px dashed var(--frm-hc-accent) !important;
    background: #cce5ff !important;
}

.frm-high-contrast .frm-group-wrapper {
    background-image: linear-gradient(to right, #bbb 1px, transparent 1px), linear-gradient(to bottom, #bbb 1px, transparent 1px) !important;
    border-bottom: 2px solid #999 !important;
    border-right: 2px solid #999 !important;
}

.frm-high-contrast.frm-no-grid .frm-group-wrapper {
    background-image: none !important;
    border-bottom: none !important;
    border-right: none !important;
}

.frm-high-contrast .frm-source-item {
    background-color: var(--frm-hc-input-bg) !important;
    border: 2px solid #333 !important;
    color: var(--frm-hc-fg) !important;
    font-weight: 600;
}

.frm-high-contrast .frm-source-item:hover {
    background-color: var(--frm-hc-hover) !important;
    border-color: var(--frm-hc-accent) !important;
}

.frm-high-contrast .rz-accordion-header {
    background-color: #e8e8e8 !important;
    color: var(--frm-hc-fg) !important;
    border: 2px solid #333 !important;
    font-weight: 700;
}

.frm-high-contrast .rz-accordion-content {
    background-color: var(--frm-hc-bg) !important;
    color: var(--frm-hc-fg) !important;
}

.frm-high-contrast .rz-textbox,
.frm-high-contrast .rz-textarea {
    background-color: var(--frm-hc-input-bg) !important;
    color: var(--frm-hc-fg) !important;
    border: 2px solid #333 !important;
}

.frm-high-contrast .rz-textbox:focus,
.frm-high-contrast .rz-textarea:focus {
    border-color: var(--frm-hc-accent) !important;
    outline: 3px solid var(--frm-hc-accent) !important;
    outline-offset: 1px;
}

.frm-high-contrast .rz-label {
    color: var(--frm-hc-fg) !important;
    font-weight: 600;
}

.frm-high-contrast .rz-icon,
.frm-high-contrast .rzi {
    color: var(--frm-hc-accent) !important;
    opacity:1 !important;
}

.frm-high-contrast .rz-button {
    font-weight: 700;
    color:white !important;
}

.frm-high-contrast .rz-button .rzi {
    color: white !important;
}

.frm-high-contrast .rz-switch .rz-switch-circle {
    border: 2px solid var(--frm-hc-fg) !important;
}

.frm-high-contrast .text-muted {
    color: #444 !important;
}

.frm-high-contrast a {
    color: var(--frm-hc-link) !important;
    text-decoration: underline !important;
    font-weight: 600;
}

.frm-high-contrast h1, .frm-high-contrast .h1,
.frm-high-contrast h2, .frm-high-contrast .h2,
.frm-high-contrast h3, .frm-high-contrast .h3,
.frm-high-contrast h4, .frm-high-contrast .h4,
.frm-high-contrast h5, .frm-high-contrast .h5,
.frm-high-contrast h6, .frm-high-contrast .h6 {
    color: var(--frm-hc-fg) !important;
}

.frm-high-contrast .rz-panel {
    background-color: var(--frm-hc-input-bg) !important;
    color: var(--frm-hc-fg) !important;
    border: 2px solid #333 !important;
}

/* Scrollbary v kontrastnim rezimu */
.frm-high-contrast * {
    scrollbar-width: auto;
    scrollbar-color: #555 #e0e0e0;
}

.frm-high-contrast *::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

.frm-high-contrast *::-webkit-scrollbar-track {
    background: #e0e0e0;
    border: 1px solid #999;
}

.frm-high-contrast *::-webkit-scrollbar-thumb {
    background: #555;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
}

.frm-high-contrast *::-webkit-scrollbar-thumb:hover {
    background: #333;
}

.frm-high-contrast *::-webkit-scrollbar-corner {
    background: #e0e0e0;
}

/* =================================
   Copyable code badges
   ================================= */

.frm-copyable-code {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
