﻿/* ==========================================================
   W6 ConvertProjects – FINAL Stylesheet
   ----------------------------------------------------------
   - Workflow-ähnliche Panels
   - Sticky Toolbar im Form-DOM
   - symmetrische Buttons mit Pressdown-Optik
   - selektierter Konvertierungsschritt ruhig, aber sichtbar
   - w6wf-field--file / w6wf-field--addgrid im Input
   - globale W6-Validierung optisch unterstützt
   ========================================================== */


/* ==========================================================
   THEME TOKENS
   ========================================================== */
.w6cp-root {
    --w6cp-panel-bg1: rgba(44, 50, 63, 0.96);
    --w6cp-panel-bg2: rgba(53, 60, 76, 0.98);
    --w6cp-panel-border: rgba(70, 109, 165, 0.32);
    --w6cp-panel-border-soft: rgba(70, 109, 165, 0.18);
    --w6cp-panel-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 2px 8px rgba(0,0,0,0.10);
    --w6cp-title: rgba(245, 249, 255, 0.96);
    --w6cp-subtle: rgba(183, 201, 226, 0.76);
    --w6cp-ac1: #3ea0ff;
    --w6cp-ac2: #216fdd;
    --w6cp-acGlow: rgba(62, 160, 255, 0.22);
    --w6cp-btn-border: rgba(255,255,255,0.10);
    --w6cp-input-bg: rgba(5, 10, 20, 0.88);
    --w6cp-input-border: rgba(255,255,255,0.08);
}

html[data-wiso-theme="light"] .w6cp-root,
html[data-wiso-theme="contrast-light"] .w6cp-root {
    --w6cp-panel-bg1: rgba(246, 249, 253, 0.98);
    --w6cp-panel-bg2: rgba(238, 243, 250, 0.99);
    --w6cp-panel-border: rgba(82, 118, 172, 0.24);
    --w6cp-panel-border-soft: rgba(82, 118, 172, 0.14);
    --w6cp-panel-shadow: inset 0 1px 0 rgba(255,255,255,0.70), 0 2px 8px rgba(20,30,40,0.06);
    --w6cp-title: rgba(25, 36, 54, 0.96);
    --w6cp-subtle: rgba(86, 103, 132, 0.78);
    --w6cp-ac1: #2d8cff;
    --w6cp-ac2: #1d67d9;
    --w6cp-acGlow: rgba(45, 140, 255, 0.16);
    --w6cp-btn-border: rgba(108,132,170,0.20);
    --w6cp-input-bg: rgba(255,255,255,0.96);
    --w6cp-input-border: rgba(82, 118, 172, 0.14);
}


/* ==========================================================
   HOST / SHELL / ROOT
   ========================================================== */
.w6-convertprojects-sideform-host {
    width: 100%;
    height: 100%;
    overflow: auto !important;
    background: transparent;
}

.w6cp-shell {
    display: block;
    width: 100%;
    height: auto;
}

.w6cp-toolbar-sticky {
    display: none !important;
}

.w6cp-scrollbody {
    overflow: visible !important;
    min-height: 0;
}

.w6-convertprojects-form-root,
.w6cp-root {
    width: 100%;
    height: auto !important;
    overflow: visible !important;
    background: transparent;
    padding: 8px 10px 14px 10px;
    box-sizing: border-box;
}


/* ==========================================================
   OBERER STEP-HEADER AUSBLENDEN
   ========================================================== */
.w6cp-steps-host {
    display: none !important;
}


/* ==========================================================
   TOOLBAR – SYMMETRISCH + STICKY + PRESSDOWN
   ========================================================== */
/*
.w6cp-toolbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px 0 !important;
    padding: 0;
}

.w6cp-toolbar-inline {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 8px 10px 10px 10px;
    margin: 0 0 12px 0 !important;
    background: linear-gradient(180deg, rgba(39,45,58,0.98), rgba(39,45,58,0.92));
    backdrop-filter: blur(2px);
}

html[data-wiso-theme="light"] .w6cp-toolbar-inline,
html[data-wiso-theme="contrast-light"] .w6cp-toolbar-inline {
    background: linear-gradient(180deg, rgba(245,248,252,0.98), rgba(245,248,252,0.92));
}

.w6cp-toolbar-inline > * {
    display: flex;
    align-items: center;
    gap: 8px;
}

.w6cp-toolbar-inline button,
.w6cp-toolbar-inline .wiso_button,
.w6cp-toolbar-inline .dhx_button,
.w6cp-toolbar button,
.w6cp-toolbar .wiso_button,
.w6cp-toolbar .dhx_button {
    min-width: 118px;
    height: 30px;
    border-radius: 8px !important;
    border: 1px solid var(--w6cp-btn-border) !important;
    background: linear-gradient(180deg, rgba(22,27,38,0.98), rgba(9,12,19,0.98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.25) !important;
    transform: translateY(0);
    transition: transform 100ms ease, box-shadow 100ms ease, filter 100ms ease;
}

    .w6cp-toolbar-inline button:hover,
    .w6cp-toolbar-inline .wiso_button:hover,
    .w6cp-toolbar-inline .dhx_button:hover,
    .w6cp-toolbar button:hover,
    .w6cp-toolbar .wiso_button:hover,
    .w6cp-toolbar .dhx_button:hover {
        filter: brightness(1.05);
    }

    .w6cp-toolbar-inline button:active,
    .w6cp-toolbar-inline .wiso_button:active,
    .w6cp-toolbar-inline .dhx_button:active,
    .w6cp-toolbar button:active,
    .w6cp-toolbar .wiso_button:active,
    .w6cp-toolbar .dhx_button:active {
        transform: translateY(1px);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04) !important;
    }

html[data-wiso-theme="light"] .w6cp-toolbar-inline button,
html[data-wiso-theme="light"] .w6cp-toolbar-inline .wiso_button,
html[data-wiso-theme="light"] .w6cp-toolbar-inline .dhx_button,
html[data-wiso-theme="light"] .w6cp-toolbar button,
html[data-wiso-theme="light"] .w6cp-toolbar .wiso_button,
html[data-wiso-theme="light"] .w6cp-toolbar .dhx_button,
html[data-wiso-theme="contrast-light"] .w6cp-toolbar-inline button,
html[data-wiso-theme="contrast-light"] .w6cp-toolbar-inline .wiso_button,
html[data-wiso-theme="contrast-light"] .w6cp-toolbar-inline .dhx_button,
html[data-wiso-theme="contrast-light"] .w6cp-toolbar button,
html[data-wiso-theme="contrast-light"] .w6cp-toolbar .wiso_button,
html[data-wiso-theme="contrast-light"] .w6cp-toolbar .dhx_button {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(231,237,246,0.98)) !important;
    border: 1px solid rgba(108,132,170,0.20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(120,140,170,0.12), 0 1px 2px rgba(20,30,40,0.08) !important;
}
*/

/* ==========================================================
   PANELS / FIELDSETS
   ========================================================== */
.w6cp-panel,
.w6cp-root fieldset,
.w6cp-root .dhx_fieldset,
.w6cp-root .wiso_fieldset {
    position: relative;
    border: 1px solid var(--w6cp-panel-border) !important;
    border-radius: 14px !important;
    /*background: linear-gradient(180deg, var(--w6cp-panel-bg1), var(--w6cp-panel-bg2)) !important;*/
    background:transparent !important;
    box-shadow: var(--w6cp-panel-shadow) !important;
    overflow: hidden;
    margin-bottom: 14px !important;
}

.w6cp-root legend,
.w6cp-root .dhx_fieldset_label,
.w6cp-root .wiso_fieldset_label {
    color: var(--w6cp-title) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 0 8px !important;
}


/* ==========================================================
   FELDABSTÄNDE / LAYOUT
   ========================================================== */
.w6cp-root .dhx_form-group,
.w6cp-root .wiso_form-group,
.w6cp-root .dhx_layout-row {
    margin-bottom: 8px;
}

.w6cp-root label,
.w6cp-root .dhx_label,
.w6cp-root .wiso_label {
    margin-bottom: 4px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    color: var(--w6cp-title);
}


/* ==========================================================
   INPUT / TEXTAREA / COMBO LOOK
   ========================================================== */
.w6cp-root input,
.w6cp-root textarea,
.w6cp-root .wiso_input,
.w6cp-root .dhx_input,
.w6cp-root .wiso_combobox-input,
.w6cp-root .wiso_combobox-input-box,
.w6cp-root .dhx_combo_input,
.w6cp-root .dhx_combobox-input {
    min-height: 34px !important;
    box-sizing: border-box;
    background: var(--w6cp-input-bg) !important;
    border-color: var(--w6cp-input-border) !important;
    box-shadow: none !important;
}

.w6cp-root textarea {
    min-height: 72px !important;
    resize: vertical;
}


/* ==========================================================
   WORKFLOW-LIKE FILE / ADDGRID FELDER
   ========================================================== */
.w6cp-root .w6wf-field--file,
.w6cp-root .w6wf-field--addgrid {
    position: relative;
    cursor: pointer;
}

    .w6cp-root .w6wf-field--file input,
    .w6cp-root .w6wf-field--file textarea,
    .w6cp-root .w6wf-field--file .wiso_input,
    .w6cp-root .w6wf-field--file .dhx_input,
    .w6cp-root .w6wf-field--addgrid input,
    .w6cp-root .w6wf-field--addgrid textarea,
    .w6cp-root .w6wf-field--addgrid .wiso_input,
    .w6cp-root .w6wf-field--addgrid .dhx_input {
        padding-right: 34px !important;
    }

    .w6cp-root .w6wf-field--file::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        width: 15px;
        height: 15px;
        transform: translateY(-50%);
        background-image: url("../img/extended/icons-grid/file-outline.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: 0.92;
        pointer-events: none;
        z-index: 3;
    }

    .w6cp-root .w6wf-field--addgrid::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        width: 15px;
        height: 15px;
        transform: translateY(-50%);
        background-image: url("../img/extended/icons-grid/view-grid-outline.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: 0.92;
        pointer-events: none;
        z-index: 3;
    }


/* ==========================================================
   LEGACY-RESTE ABSICHERN
   ========================================================== */
.w6cp-field,
.w6cp-inputwrap,
.w6cp-iconbtn,
.w6cp-input-inner,
.w6cp-iconbtn-infield,
.w6cp-has-infield-button,
.w6cp-iconbtn-overlay {
    all: unset;
}


/* ==========================================================
   VALIDIERUNG – NUR OPTISCH
   ========================================================== */
.w6cp-root .w6-validate-error input,
.w6cp-root .w6-validate-error textarea,
.w6cp-root .w6-validate-error .wiso_input,
.w6cp-root .w6-validate-error .wiso_combobox-input-box,
.w6cp-root .w6-validate-error .dhx_input,
.w6cp-root .w6-validate-error .dhx_combobox-input {
    box-shadow: inset 0 0 0 1px rgba(214, 76, 76, 0.55) !important;
}

.w6cp-root .w6-validate-success input,
.w6cp-root .w6-validate-success textarea,
.w6cp-root .w6-validate-success .wiso_input,
.w6cp-root .w6-validate-success .wiso_combobox-input-box,
.w6cp-root .w6-validate-success .dhx_input,
.w6cp-root .w6-validate-success .dhx_combobox-input {
    box-shadow: inset 0 0 0 1px rgba(54, 168, 107, 0.42) !important;
}


/* ==========================================================
   INNERE ECKIGE WRAPPER / STEPBOX FIX
   ========================================================== */

/* generelle innere Wrapper neutralisieren */
.w6cp-root .wiso_form fieldset > .wiso_layout-rows,
.w6cp-root .wiso_form fieldset > .wiso_layout-row,
.w6cp-root .wiso_form .w6cp-panel > .wiso_layout-rows,
.w6cp-root .wiso_form .w6cp-panel > .wiso_layout-row,
.w6cp-root .wiso_form .wiso_layout-cell-content,
.w6cp-root .wiso_form .wiso_layout-cell-inner_html,
.w6cp-root .wiso_form .wiso_form-group {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: inherit !important;
    overflow: visible !important;
}

/* äußerer Step-Container */
.w6cp-root [data-cell-id="step1Box"],
.w6cp-root [data-cell-id="step2Box"],
.w6cp-root [data-cell-id="step3Box"] {
    position: relative;
    background: transparent !important;
    border-radius: 14px !important;
}

    /* fieldset selbst */
    .w6cp-root [data-cell-id="step1Box"] > fieldset.w6cp-panel,
    .w6cp-root [data-cell-id="step2Box"] > fieldset.w6cp-panel,
    .w6cp-root [data-cell-id="step3Box"] > fieldset.w6cp-panel {
        position: relative;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

        /* der tatsächlich sichtbare eckige Innenblock */
        .w6cp-root [data-cell-id="step1Box"] > fieldset.w6cp-panel > .wiso_layout-cell-content.wiso_layout-cell.wiso_layout-rows,
        .w6cp-root [data-cell-id="step2Box"] > fieldset.w6cp-panel > .wiso_layout-cell-content.wiso_layout-cell.wiso_layout-rows,
        .w6cp-root [data-cell-id="step3Box"] > fieldset.w6cp-panel > .wiso_layout-cell-content.wiso_layout-cell.wiso_layout-rows {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            border-radius: 0 0 14px 14px !important;
        }

    /* direkte innere Wrapper neutralisieren */
    .w6cp-root [data-cell-id="step1Box"] .wiso_layout-cell.wiso_layout-columns,
    .w6cp-root [data-cell-id="step2Box"] .wiso_layout-cell.wiso_layout-columns,
    .w6cp-root [data-cell-id="step3Box"] .wiso_layout-cell.wiso_layout-columns,
    .w6cp-root [data-cell-id="step1Box"] .wiso_form-group,
    .w6cp-root [data-cell-id="step2Box"] .wiso_form-group,
    .w6cp-root [data-cell-id="step3Box"] .wiso_form-group {
        background: transparent !important;
        box-shadow: none !important;
    }

    /* ==========================================================
   SELEKTIERTER STEP – NUR FIELDSET LEUCHTET
   ----------------------------------------------------------
   - äußere StepBox ohne Umrandung/Glow
   - kein Balken vorne
   - nur das Fieldset selbst leuchtet
   ========================================================== */

    /* äußere StepBox bewusst neutral lassen */
    .w6cp-root [data-cell-id="step1Box"].w6cp-step-selected,
    .w6cp-root [data-cell-id="step2Box"].w6cp-step-selected,
    .w6cp-root [data-cell-id="step3Box"].w6cp-step-selected {
        box-shadow: none !important;
        border-color: transparent !important;
        background: transparent !important;
    }

        /* keine Pseudo-Markierungen an der StepBox */
        .w6cp-root [data-cell-id="step1Box"].w6cp-step-selected::before,
        .w6cp-root [data-cell-id="step2Box"].w6cp-step-selected::before,
        .w6cp-root [data-cell-id="step3Box"].w6cp-step-selected::before,
        .w6cp-root [data-cell-id="step1Box"].w6cp-step-selected::after,
        .w6cp-root [data-cell-id="step2Box"].w6cp-step-selected::after,
        .w6cp-root [data-cell-id="step3Box"].w6cp-step-selected::after {
            content: none !important;
            display: none !important;
        }

        /* nur Fieldset leuchtet */
        .w6cp-root [data-cell-id="step1Box"].w6cp-step-selected > fieldset.w6cp-panel,
        .w6cp-root [data-cell-id="step2Box"].w6cp-step-selected > fieldset.w6cp-panel,
        .w6cp-root [data-cell-id="step3Box"].w6cp-step-selected > fieldset.w6cp-panel {
            border-color: rgba(96, 172, 255, 0.68) !important;
            box-shadow: inset 0 0 0 1px rgba(120, 190, 255, 0.20), 0 0 0 1px rgba(84, 156, 236, 0.22), 0 0 14px rgba(56, 138, 226, 0.14), 0 0 26px rgba(56, 138, 226, 0.10) !important;
        }

            /* optional: subtiler innerer Schimmer */
            .w6cp-root [data-cell-id="step1Box"].w6cp-step-selected > fieldset.w6cp-panel::before,
            .w6cp-root [data-cell-id="step2Box"].w6cp-step-selected > fieldset.w6cp-panel::before,
            .w6cp-root [data-cell-id="step3Box"].w6cp-step-selected > fieldset.w6cp-panel::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 14px;
                pointer-events: none;
                box-shadow: inset 0 0 0 1px rgba(130, 196, 255, 0.10);
            }

