.choicable-container {
    white-space: normal !important;
    word-wrap: break-word;
    max-width: 100%;
    text-align: center !important;
}

/* ===== Branded fejléc (logó balra, bal-igazított nav) ===== */
.smu-header {
    position: relative;
}

.smu-header-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.smu-header-logo {
    height: 34px;
    width: auto;
    object-fit: contain;
}

.smu-header-brand-name {
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
    color: var(--rz-header-color, #fff);
}

.smu-nav-link {
    color: var(--rz-header-color, #fff) !important;
    text-decoration: none;
    font-weight: 500;
    padding: 0 0.5rem;
    opacity: 0.85;
}

/* ===== WASM-mentes fejléc-menük natív <details>-szel (SMU-598) ===== */
.smu-header-menu {
    position: relative;
}

.smu-header-menu > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.smu-header-menu > summary::-webkit-details-marker {
    display: none;
}

.smu-header-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.smu-header-menu[open] > .smu-header-menu-panel {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1050;
    min-width: 12rem;
}

.smu-header-menu-panel .smu-nav-link {
    color: var(--rz-text-color, #212529) !important;
    padding: 0.35rem 0.75rem;
    border-radius: 0.25rem;
}

.smu-header-menu-panel .smu-nav-link:hover,
.smu-header-menu-panel .smu-nav-link.active {
    background-color: rgba(34, 197, 94, 0.12);
    color: var(--smu-green, #22C55E) !important;
}

.smu-nav-link:hover {
    opacity: 1;
}

/* ===== Branded fejléc — zöld hover / aktív állapotok (SMU-343) ===== */

/* Nav linkek (Kezdőoldal, Árazás, Rólunk): zöld + aláhúzás hoverre, zöld az aktív oldal */
body.smu-theme .smu-nav-link:hover,
body.smu-theme .smu-nav-link.active {
    color: var(--smu-green, #22C55E) !important;
    opacity: 1;
}

body.smu-theme .smu-nav-link:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
}

/* Fogaskerék-menü (RadzenMenu) ikon + szöveg: zöld hover az alap (lila) helyett */
body.smu-theme .smu-header .rz-navigation-item-link:hover,
body.smu-theme .smu-header .rz-navigation-item-link:hover .rz-navigation-item-icon,
body.smu-theme .smu-header .rz-navigation-item-link:hover .rz-navigation-item-text {
    color: var(--smu-green, #22C55E) !important;
}

/* Nap/Hold megjelenés-váltó + egyéb text-variant ikon-gombok: zöld ikon + finom zöld háttér hoverre */
body.smu-theme .smu-header .rz-appearance-toggle:hover,
body.smu-theme .smu-header .rz-button.rz-variant-text:hover {
    color: var(--smu-green, #22C55E) !important;
    background-color: rgba(34, 197, 94, 0.12) !important;
}

div#formTabControl-tabpanel-0 {
    height: 88vh;
    display: flex;
    flex-direction: column;
}

.smu-element-card-header {
    margin: calc(var(--rz-card-padding, 1rem) * -1) calc(var(--rz-card-padding, 1rem) * -1) 0 calc(var(--rz-card-padding, 1rem) * -1);
    padding: 0.75rem 1rem;
    border-radius: var(--rz-border-radius, 8px) var(--rz-border-radius, 8px) 0 0;
}

.smu-element-card-icon {
    font-size: 1.1rem;
    color: var(--rz-primary);
}

.smu-element-card-content {
    padding-top: 1rem;
}

.smu-element-card-header .editable-label {
    flex: 1;
    min-width: 0;
}

.smu-element-card-header .editable-label input {
    width: 100%;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: var(--rz-border-radius);
    transition: all 0.2s ease;
}

.smu-element-card-header .editable-label input:not(:disabled) {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-base);
    padding: 0.375rem 0.75rem;
    box-shadow: var(--rz-shadow-1);
}

.smu-element-card-header .editable-label input:not(:disabled):focus {
    outline: none;
    border-color: var(--rz-primary);
    box-shadow: var(--rz-shadow-2);
}

.smu-element-card-header .editable-label input:disabled {
    background: transparent;
    border: none;
    padding: 0;
    cursor: default;
}

.rz-dropdown {
    height: auto !important;
}

.smu-card {
    width: 20rem;
    height: 10rem;
    margin: 0.75rem;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
}

.smu-card:hover {
    box-shadow: var(--shadow-heavy);
}

.smu-card-header {
    flex: 1;
    padding-bottom: 0;
}

.smu-card-title {
    margin-bottom: 0.5rem;
    font-weight: 500;
    overflow: hidden;
    font-size: 0.95rem;
    text-overflow: ellipsis;
    border-radius: var(--rz-border-radius);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.smu-card-description {
    margin: 0;
    font-size: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.smu-card-content {
    padding: 0 1.25rem;
    flex: 1;
}

.smu-card-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
    margin-top: auto;
}

#uploadDocument {
    width: 100%;

    .rz-fileupload-buttonbar .rz-fileupload-choose {
        width: 100%;
        text-align: center;
        font-size: 16px;
        padding: 100px 0;
    }
}

.rz-fileupload-buttonbar {
    padding: 0 !important;
}

.validation-message {
    color: var(--rz-danger, #dc3545);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.custom-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 250px;
    text-align: left;
}

#demo ul.rz-navigation-menu.rz-open
{
    padding-block: 0;
}

.custom-dropdown-menu.rz-header a, .rz-header a:hover
{
    color: inherit !important;
}

.rz-menu.menu-align-right .rz-menu-content {
    right: 0 !important;
    left: auto !important;
}

.rz-menu.menu-align-right .rz-navigation-menu {
    right: 0 !important;
    left: auto !important;
}

.rz-menu.menu-align-right .rz-panel-menu {
    right: 0 !important;
    left: auto !important;
}

.panel-nav-button {
    position: relative;
    white-space: nowrap;
    transition: margin-left 0.3s ease-in-out;
    max-width: 150px;
    overflow: clip;
    text-overflow: ellipsis;
}

.panel-nav-button:hover {
    z-index: 1000;
}

.dropzone {
    position: relative;
    transition: all 0.3s ease;
}

.dropzone.edit-mode .dropzone-card {
    border: 2px dotted var(--smu-dropzone-edit-border, var(--smu-green));
    border-radius: 4px;
    transition: all 0.3s ease;
}

.dropzone.can-drop > .dropzone-card {
    background-color: var(--smu-dropzone-can-drop-bg, rgba(34, 197, 94, 0.5));
    border-color: var(--smu-dropzone-can-drop-border, var(--smu-green));
    border-style: solid;
}

.dropzone.can-drop > .dropzone-card > * {
    position: relative;
}

.dropzone.no-drop > .dropzone-card {
    background-color: var(--smu-dropzone-no-drop-bg, rgba(239, 68, 68, 0.5));
    border-color: var(--smu-dropzone-no-drop-border, #ef4444);
    border-style: solid;
    cursor: not-allowed;
}

.dropzone.no-drop > .dropzone-card > * {
    position: relative;
}

.draggable .rz-navigation-item-link {
    cursor: grab;
}

.draggable .rz-navigation-item-link:active {
    cursor: grabbing;
}

span.self-made-element {
    display: inline;
    background-color: var(--rz-text-color);
    color: var(--rz-base-background-color);
    border: 1px solid var(--rz-text-color);
    border-radius: 0.5rem;
    padding: 0 0.5rem;
    vertical-align: baseline;
    user-select: all;
    cursor: default;
}

.smu-disabled-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-tertiary);
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.smu-centered-alert .rz-alert-message {
    align-items: center !important;
}

.add-element-button-container {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.add-element-button {
    border-radius: 50%;
    width: 50px;
    height: 50px;
}
.pagination-list-container .rz-navigation-item-text {
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;

    display: block;
    padding: 0px;
    min-width: 0px;
    width: 100%;
}

.rz-panel-menu.pagination-list-container .rz-navigation-item-link {
    padding-block: 8px;
    padding-inline: 8px;
    min-height: 0;
}

.onboarding-footer-wrap {
    flex-wrap: wrap;
    row-gap: 8px;
}

.onboarding-footer-wrap .onboarding-autostart-wrapper {
    flex: 0 0 100%;
    width: 100%;

    border-top: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.12));
    padding-top: 10px;
}

.onboarding-autostart-optout {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    font-family: inherit;
    font-size: 0.85rem;
    color: var(--rz-text-color, #424242);
    cursor: pointer;
    user-select: none;

    padding-left: 4px;
    text-align: left;
}

.onboarding-autostart-optout input {
    margin: 0;
    cursor: pointer;
}

.driver-tooltip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 16px);

    margin-top: 10px;
    padding: var(--rz-tooltip-padding, 0.45rem 0.65rem);

    font-family: inherit;
    font-size: var(--rz-tooltip-font-size, 0.85rem);
    line-height: 1.35;

    background: var(--rz-tooltip-background-color, var(--rz-panel-background-color, #fff));
    color: var(--rz-tooltip-color, var(--rz-text-color, #333));
    box-shadow: var(--rz-tooltip-shadow, 0 6px 14px rgba(0,0,0,0.18));
    border-radius: var(--rz-tooltip-border-radius, 8px);

    white-space: normal; 
    z-index: 999999;
}

.driver-tooltip-arrow {
    position: absolute;
    top: -4px;
    left: 12px;

    width: 8px;
    height: 8px;

    background-color: inherit;
    transform: rotate(45deg);
}

.driver-popover {
    background-color: var(--rz-panel-background-color, #fff);
    color: var(--rz-text-color, #2d2d2d);
    box-shadow: var(--rz-shadow-3, 0 1px 10px rgba(0, 0, 0, 0.4));
}

.driver-popover-title {
    color: var(--rz-text-title-color, var(--rz-text-color, #2d2d2d));
}

.driver-popover-description {
    color: var(--rz-text-color, #2d2d2d);
}

.driver-popover-close-btn {
    color: var(--rz-text-disabled-color, #d2d2d2);
}

.driver-popover-close-btn:hover,
.driver-popover-close-btn:focus {
    color: var(--rz-text-color, #2d2d2d);
}

.driver-popover-progress-text {
    color: var(--rz-text-secondary-color, #727272);
}

.driver-popover-footer button {
    background-color: var(--rz-panel-background-color, #fff);
    color: var(--rz-text-color, #2d2d2d);
    border-color: var(--rz-border-color, #ccc);
}

.driver-popover-footer button:hover,
.driver-popover-footer button:focus {
    background-color: var(--rz-base-background-color, #f7f7f7);
}

.driver-popover-arrow {
    border-color: var(--rz-panel-background-color, #fff);
}

.driver-popover-arrow-side-left {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
}

.driver-popover-arrow-side-right {
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
}

.driver-popover-arrow-side-top {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.driver-popover-arrow-side-bottom {
    border-left-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
}

.driver-popover-footer .driver-popover-btn-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


.driver-active .rz-popup,
.driver-active .rz-dropdown-panel,
.driver-active .rz-multiselect-panel {
    z-index: 10001 !important;
    pointer-events: auto !important;
}

.driver-active .rz-popup *,
.driver-active .rz-dropdown-panel *,
.driver-active .rz-multiselect-panel * {
    pointer-events: auto !important;
}

.dark-theme .driver-overlay {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Optionable (Select/ MultiSelect)*/
.smu-opt {
    font-weight: 500;
}

.smu-opt-text {
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.rz-colorpicker.smu-colorpicker button {
    height: 24px;
    min-height: 24px;
    padding: 0 8px;
}

.smu-select-compact {
    max-width: 280px;
    width: 100%;
}

/* Kitöltő-nézet multi-select chip-jei: egységes kék (mint a form-elem chip-ek), szürke helyett */
.smu-chip-primary .rz-chip {
    --rz-chip-background-color: var(--rz-primary-dark);
    --rz-chip-color: white;
}

/* Megjegyzés-mező: a nyers textarea a FormField-keretbe simuljon (ne legyen dupla keret) */
.smu-comment-field textarea {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    resize: vertical;
}

.smu-field-sync {
    border-radius: var(--rz-border-radius, 8px);
    transition: background-color 0.4s ease-out, box-shadow 0.4s ease-out;
}

.smu-field-synced {
    animation: smu-field-sync-flash 2s ease-out;
}

/* Kitöltő-nézet (nem builder): tömörebb mező-elrendezés.
   A sor/oszlop konténerek egymásba ágyazott .dropzone-card paddingje adja a
   térközök nagy részét; itt lefaragjuk, hogy a mezők közelebb legyenek
   egymáshoz és a panel széléhez. A builder (.edit-mode) változatlan marad. */
.dropzone:not(.edit-mode) .dropzone-card {
    /* függőlegesen marad a kis köz; vízszintesen 0, hogy a mezők közelebb
       legyenek a panel bal/jobb széléhez (a külső térközt a beágyazott
       dropzone-card-ok adták; az oszlopközt a .col padding tartja). */
    padding: 0.25rem 0;
}

/* Bootstrap-rács térköze a kitöltő-nézet soraiban: kisebb vízszintes hézag,
   nincs külön függőleges sor-gutter (azt a card-padding adja). */
.dropzone:not(.edit-mode) .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0;
    /* A bootstrap .row negatív margója (margin: 0 -gutter/2) több egymásba ágyazott,
       .col nélküli soron halmozódik és minden szint balra húz → balra csúszás.
       Nullázzuk; a vízszintes közt a .col paddingje adja, szimmetrikusan. */
    margin-left: 0;
    margin-right: 0;
}

/* A lebegő-label-es mezőkeret alapértelmezett alsó margója a kitöltő-nézetben
   adott a sorok közti üres helyhez — csökkentjük. */
.dropzone:not(.edit-mode) .rz-form-field {
    margin-bottom: 0.25rem;
}

/* Nagy/összetett mezők (szövegszerkesztő, időintervallum, dokumentum): saját
   keret a Radzen kitöltött-mező kinézetével — a címke fixen a keret tetején
   lebeg (abszolút, állapotfüggetlen), a tartalom normál block-ban folyik (nem
   flex-row, így a dokumentum-vezérlő elemei egymás alatt maradnak). */
.smu-framed-field {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 3.15rem;
    border: 0.0625rem solid var(--rz-input-border-color, rgb(189, 189, 189));
    border-radius: 4px;
    padding: 0.85rem 0.75rem 0.6rem;
    margin-top: 0.5rem;
}

.smu-framed-field > .smu-framed-label {
    position: absolute;
    top: -9px;
    left: 11px;
    font-size: 12px;
    line-height: 16px;
    color: var(--rz-text-secondary-color, rgb(117, 117, 117));
    background: var(--rz-base-background-color, #fff);
    padding: 0 4px;
    pointer-events: none;
    max-width: calc(100% - 22px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dokumentum-tároló feltöltő: nagy, teljes szélességű drop-zóna. */
.smu-doc-upload.rz-fileupload {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    border: 0.125rem dashed var(--rz-input-border-color, rgb(189, 189, 189));
    border-radius: 6px;
    padding: 0.75rem;
    box-sizing: border-box;
}

.smu-doc-upload .rz-fileupload-buttonbar {
    width: 100%;
}

.smu-doc-upload .rz-fileupload-choose {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A sor-konténer (ROW-elem) wrapper egyszerre bootstrap .row ÉS a szülő flex-rács
   eleme — grow/width nélkül a TARTALMA szélességére zsugorodik, balra igazodik, és a
   maradék hely a jobb oldalon gyűlik össze (aszimmetrikus jobb-hézag). Kitöltő-nézetben
   töltse ki a teljes szélességet, a benti dropzone-nal együtt. */
.dropzone:not(.edit-mode) .draggable.no-active.row {
    flex: 1 0 100%;
}

.dropzone:not(.edit-mode) .draggable.no-active.row > .dropzone {
    flex: 1 1 auto;
    width: 100%;
}

/* A panel bal/jobb széléhez a mezőket tartó (cols-os) sort a (gutter/2 − 2px)-szel
   kifelé húzzuk, így a külső térköz ~2px, az oszlopköz (a .col padding) változatlan. */
.dropzone:not(.edit-mode) .row:has(> .draggable.no-active.col) {
    margin-left: -4px;
    margin-right: -4px;
}

/* A maradék külső térközt a panel-kártya saját vízszintes body-paddingje adta
   (--rz-card-padding, alapból 1rem). Kitöltő-nézetben nullázzuk, hogy a mezők a
   panel bal/jobb széléig érjenek. A függőleges padding marad. */
.dropzone:not(.edit-mode) [data-element-type="panel"] > .rz-card.rz-variant-filled {
    padding-left: 0;
    padding-right: 0;
}

/* A fejléc -1rem vízszintes negatív margóval a (most már 0) padding fölé buggyanna
   ki → 16px-et kilógna. Nullázzuk a vízszintes margóját, így a kártya széléhez simul. */
.dropzone:not(.edit-mode) [data-element-type="panel"] > .rz-card.rz-variant-filled > .smu-element-card-header {
    margin-left: 0;
    margin-right: 0;
}

@keyframes smu-field-sync-flash {
    0% {
        background-color: var(--rz-primary-lighter, rgba(63, 81, 181, 0.18));
        box-shadow: 0 0 0 2px var(--rz-primary, #3f51b5);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

.digitalization-analysis-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 0.75rem;
    padding: 0.75rem;
}

.digitalization-analysis-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.digitalization-analysis-header h2 {
    margin: 0;
    flex: 1;
}

.digitalization-analysis-body {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 1rem;
}

.digitalization-analysis-bar {
    width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
    min-height: 0;
}

.digitalization-analysis-chat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.digitalization-analysis-intro {
    max-width: 44rem;
    margin: 0 auto;
    text-align: left;
    font-size: 1.1rem;
}

.digitalization-analysis-intro p {
    margin: 0 0 0.75rem;
}

/* SMU-481 — a "mit fogsz kapni" belépő-mondat, kiemelve az intro szövegtörzse fölött. */
.digitalization-analysis-intro-lead {
    font-weight: 600;
    color: var(--rz-text-title-color, var(--rz-text-color));
}

/* SMU-481 — elakadás-kezelés: kész példa-chipek, ha a látogató nem tudja, mivel kezdje. */
.digitalization-analysis-examples {
    max-width: 44rem;
    margin: 1.25rem auto 0;
    text-align: left;
}

.digitalization-analysis-examples-label {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--rz-text-secondary-color, var(--rz-text-color));
}

.digitalization-analysis-examples-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.digitalization-analysis-example-chip {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--rz-border-base);
    background-color: var(--rz-base-background-color);
    color: var(--rz-text-color);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.digitalization-analysis-example-chip:hover:not(:disabled) {
    background-color: rgba(127, 127, 127, 0.1);
}

.digitalization-analysis-example-chip:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* SMU-481 — a korai "aha": az első fázis-összefoglaló egyszeri kiemelése. */
.digitalization-analysis-aha {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin: 0 0 0.75rem;
    border-radius: var(--rz-border-radius);
    background-color: var(--rz-warning-lighter, #fff8e1);
    border: 1px solid var(--rz-warning, #ffc107);
}

.digitalization-analysis-aha-text {
    flex: 1;
    min-width: 0;
}

.digitalization-analysis-aha-text p {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--rz-text-secondary-color, var(--rz-text-color));
}

.digitalization-analysis-aha-text span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color, var(--rz-text-color));
}

.digitalization-analysis-aha-close {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--rz-text-secondary-color, var(--rz-text-color));
    padding: 0.1rem 0.3rem;
}

.digitalization-analysis-cta,
.digitalization-analysis-handoff {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--rz-border-radius);
    margin-top: 0.5rem;
}

/* A letöltés a beszélgetés közben is elérhető, ezért szándékosan visszafogott:
   nem versenyezhet a regisztrációs vagy a generálás-gombbal. */
.digitalization-analysis-download {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1rem 0;
    margin-top: 0.25rem;
}

.digitalization-analysis-download-error {
    font-size: 0.85rem;
    color: var(--rz-danger, #dc3545);
}

/* SMU-1217 — az e-mail-bekérő visszajelzései a letöltés (value-first pillanat) után. */
.digitalization-analysis-email-captured {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    color: var(--rz-success-dark, #146c43);
}

.digitalization-analysis-email-capture-error {
    padding: 0 1rem 0.6rem;
    font-size: 0.85rem;
    color: var(--rz-danger, #dc3545);
}

.digitalization-analysis-handoff {
    background-color: var(--rz-success-lighter);
    border: 1px solid var(--rz-success);
    color: var(--rz-success-dark);
    font-weight: 600;
}

.digitalization-analysis-error {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--rz-border-radius);
    margin-top: 0.5rem;
    background-color: var(--rz-danger-lighter);
    border: 1px solid var(--rz-danger);
    color: var(--rz-danger-dark);
}

.fazis-sav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-base);
    border-radius: var(--rz-border-radius);
    box-shadow: var(--rz-shadow-1);
}

.fazis-sav-fejlec {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.fazis-sav-lista {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fazis-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--rz-border-radius);
    color: var(--rz-text-color);
    cursor: default;
    transition: background-color 0.15s ease;
}

.fazis-item--nyithato {
    cursor: pointer;
}

.fazis-item--nyithato:hover,
.fazis-item--selected {
    background-color: rgba(127, 127, 127, 0.1);
}

.fazis-pont {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fazis-ikon {
    opacity: 0.7;
    font-size: 1.1rem;
}

.fazis-nev {
    flex: 1;
    font-size: 0.9rem;
}

.fazis-nyil {
    opacity: 0.6;
    font-size: 1.1rem;
}

.status--ures .fazis-pont {
    background-color: var(--rz-danger, #dc3545);
}

.status--ures .fazis-nev,
.status--ures .fazis-ikon {
    opacity: 0.55;
}

.status--reszleges .fazis-pont {
    background-color: var(--rz-warning, #f0ad4e);
}

.status--kesz .fazis-pont {
    background-color: var(--rz-success, #28a745);
}

.status--kesz .fazis-nev {
    font-weight: 600;
}

/* „Nem tudtuk kiértékelni" — szándékosan MÁS jel, mint az üres fázisé (SMU-789):
   az üres piros pötty azt üzeni, „még nem beszéltünk róla", ez viszont azt, hogy elakadtunk. */
.status--nem-ertekelheto .fazis-pont {
    background-color: var(--rz-warning, #f0ad4e);
    box-shadow: 0 0 0 2px var(--rz-base-background-color, #fff), 0 0 0 3px var(--rz-warning, #f0ad4e);
}

.status--nem-ertekelheto .fazis-nev {
    font-style: italic;
}

.fazis-hiba {
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-left: 3px solid var(--rz-warning, #f0ad4e);
    background-color: var(--rz-warning-lighter, rgba(240, 173, 78, 0.12));
    font-size: 0.85rem;
}

.fazis-reszletek {
    margin: 0.1rem 0 0.4rem 1.4rem;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--rz-primary);
    background-color: rgba(127, 127, 127, 0.06);
    border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0;
    font-size: 0.85rem;
}

.fazis-osszefoglalo {
    color: var(--rz-text-color);
}

.fazis-hianyzo {
    margin-top: 0.5rem;
}

.fazis-hianyzo-cim {
    font-weight: 600;
    opacity: 0.8;
}

.fazis-hianyzo ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}

/* Tanácsadó lelet: gyanús, de nem blokkol. Vizuálisan HALVÁNYABB a hiányzóknál —
   a felhasználónak látnia kell, hogy ez nem akadály, csak átgondolandó. */
.fazis-kerdes {
    margin-top: 0.5rem;
    opacity: 0.75;
}

.fazis-kerdes-cim {
    font-weight: 600;
    font-style: italic;
}

.fazis-kerdes ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}

/* A valódi mezőkártyák ne zsugorodjanak olvashatatlanul keskenyre.
   Ha már nem férnek el egy sorban, inkább törjenek a következő sorba.
   A Row, Column és Panel elrendezési elemeket ez nem érinti. */
.smu-record-layout .dropzone .row > .draggable.smu-field-element.col {
    flex: 1 1 20rem;
    max-width: 100%;
}

@media (max-width: 768px) {
    .digitalization-analysis-body {
        flex-direction: column;
    }

    .digitalization-analysis-bar {
        width: 100%;
        max-height: 40%;
    }
}

.smu-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.page-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ===================== Mobil (SMU-567 P1) =====================
   Touch-target minimum 44x44px (WCAG 2.5.5 AAA / Apple HIG) az elsődleges
   interaktív vezérlőkre + beágyazott képek reszponzív korlátja.
   CSAK < 768px alatt aktív; a desktop kódút (>=768px) VÁLTOZATLAN.
   A töréspont 767.98px (Bootstrap-konvenció), egységesen a többi mobil-blokkal:
   a korábbi 767px mellett a 767px < viewport <= 767.98px sávban a mobil-elrendezés
   már aktív volt, de az érintőfelület-növelés még nem. */
@media (max-width: 767.98px) {
    /* Radzen gombok (szöveges + ikon-only): effektív érintőfelület >= 44px.
       A vizuális kitöltés marad, csak a tap-terület nő (min-height/min-width).
       Compound (méret-osztályos) szelektor, hogy legyőzze a Radzen
       .rz-button-md/sm/xs/lg alap min-height szabályát (azonos (0,2,0) specificitás,
       de a smu.css a default.css UTÁN töltődik → ez nyer). */
    .rz-button.rz-button-xs,
    .rz-button.rz-button-sm,
    .rz-button.rz-button-md,
    .rz-button.rz-button-lg {
        min-height: 44px;
        min-width: 44px;
    }

    /* Anonim fejléc nav-linkek: inline horgonyok, ezért inline-flex kell, hogy a
       min-height érvényesüljön (sima inline elem figyelmen kívül hagyná). */
    .smu-nav-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Radzen menü/panel-menü tételek: a Radzen alap már display:flex + align-items:center,
       így elég a min-height — a szélességet/elrendezést NEM módosítjuk (panel-menü marad
       teljes szélességű). */
    .rz-navigation-item-link {
        min-height: 44px;
    }

    /* Márka-kattintófelület (logó + név, role=button) legyen könnyen célozható. */
    .smu-header-brand {
        min-height: 44px;
        min-width: 44px;
    }

    /* Önálló (standalone) szöveges nav/lábléc linkek (RadzenLink Text= → a.rz-link):
       a lábléc-nav és a kapcsolat-linkek tap-területe érje el a 44px-et. inline-flex,
       hogy a min-height inline horgonyon is érvényesüljön (mint a .smu-nav-link).
       Kihagyva: a gombot csomagoló RadzenLink (a.rz-link:has(.rz-button) — a gomb már
       44px), és a mondaton BELÜLI inline linkek (.login-link, .auth-register-link) —
       azok 44px-e törné a sor-tördelést (WCAG 2.5.5 inline kivétel, SMU-567 döntés). */
    a.rz-link:not(:has(.rz-button)):not(.login-link):not(.auth-register-link) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Beágyazott tartalmi képek sose okozzanak vízszintes túlcsordulást mobilon.
       Alacsony specificitású (elem-szintű) szabály: a komponens-szintű, osztályos
       kép-szabályokat (pl. logók, chat-kép) NEM írja felül. */
    img {
        max-width: 100%;
    }
}

/* ===================== Mobil (SMU-566 P0) =====================
   Bejelentkezett oldalsáv off-canvas fiókként mobilon: alapból kicsúsztatva,
   lebegő gomb (FAB) nyitja, félátlátszó háttér-réteg zárja. A töréspont a P1
   blokkéval AZONOS (767.98px), hogy ne maradjon sáv, ahol a fiók már aktív,
   de a 44px-es érintőfelület még nem. A desktop kódút (>=768px) VÁLTOZATLAN. */
.smu-mobile-nav-toggle {
    display: none;
}

.smu-mobile-nav-backdrop {
    display: none;
}

@media (max-width: 767.98px) {
    .smu-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        width: 300px;
        max-width: 85vw;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        background-color: var(--rz-base-background-color, #17171c);
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
    }

    .smu-sidebar.mobile-open {
        transform: translateX(0);
    }

    .smu-mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 16px;
        bottom: 16px;
        width: 48px;
        height: 48px;
        border: none;
        border-radius: 50%;
        z-index: 1041;
        color: #fff;
        background-color: var(--rz-primary, #22C55E);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        cursor: pointer;
    }

    .smu-mobile-nav-backdrop.open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1039;
        background-color: rgba(0, 0, 0, 0.45);
    }

    /* Nyitott AI-chat mellett a FAB ugyanabban a bal-alsó sávban ülne, mint a chat
       beviteli mezője, és rátakarna (a FAB z-indexe magasabb) → az input bal széle
       kattinthatatlan. A chat teljes szélességű mobilon, a fiók és a chat egyszerre
       amúgy sem értelmes, ezért nyitott chatnél a FAB-ot elrejtjük. A chat nyitott
       állapotát a Bootstrap d-flex osztály jelzi (zárva: d-none). */
    body:has(#chat-window.d-flex) .smu-mobile-nav-toggle {
        display: none;
    }
}

/* ===================== Mobil (SMU-568 P2) =====================
   Rekord-szerkesztő mobil-elrendezése: a lista-oldalsáv és a szerkesztő-felület
   egymás alá kerül, a fül-sáv vízszintesen görgethető.
   A desktop kódút (>=768px) VÁLTOZATLAN. */
@media (max-width: 767.98px) {
    .smu-record-layout {
        flex-wrap: wrap;
    }

    .smu-record-layout > .list-item-container {
        width: 100%;
        max-width: 100%;
        max-height: 45vh;
    }

    .smu-record-layout > .flex-grow-1 {
        flex: 1 1 100%;
        min-width: 0;
    }

    .smu-record-layout > .choicables {
        width: 100%;
        max-width: 100%;
    }

    #formTabControl > .rz-tabview-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #formTabControl > .rz-tabview-nav .rz-tabview-nav-item {
        flex: 0 0 auto;
    }

    /* A panelen belüli mezők bootstrap .col-ok egy .row-ban, tehát a Radzen alap
       `flex: 1 0 0%` szerint egyenlően OSZTOZNAK a soron: 375px-en három mező ~86px
       széles inputot és `rz-text-truncate`-tel csonkolt címkét kapott. Kitöltő-nézetben
       (`:not(.edit-mode)`) teljes szélességre váltjuk őket, így a .row wrap-je egymás
       alá teszi a mezőket. A szerkesztő-nézet (űrlap-építő) rácsa VÁLTOZATLAN — ott a
       drag-and-drop az oszlopos elrendezésre épül. */
    .smu-record-layout .dropzone:not(.edit-mode) .row > .draggable.no-active.col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* A gép hozzátétele — D10: egyértelműen jelölve, hogy SEJTÉS, és tartozzon hozzá teendő.
   Halványabb, mint a „Még tisztázandó": az hiány, ez viszont a gép kiegészítése. */
.fazis-megjegyzes {
    margin-top: .5rem;
    padding: .45rem .6rem;
    border-left: 3px solid var(--rz-warning-light, #f0c674);
    background: rgba(240, 198, 116, .08);
    border-radius: 3px;
    font-size: .8rem;
    opacity: .9;
}

.fazis-megjegyzes-cim {
    display: block;
    font-weight: 600;
    margin-bottom: .25rem;
}

.fazis-megjegyzes ul {
    margin: 0;
    padding-left: 1.1rem;
}

.fazis-megjegyzes-kerdes {
    display: block;
    margin-top: .15rem;
    font-style: italic;
    opacity: .85;
}

/* SMU-803 — kézi javítás a fázis-sávban. */
.fazis-szerkeszto {
    margin-top: .35rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.fazis-elem {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.fazis-elem-nev {
    flex: 1;
    overflow-wrap: anywhere;
}

.fazis-elem-input {
    flex: 1;
    min-width: 0;
}

/* A felvétel-sor elválik a meglévőktől: az egyik a mai állapot, a másik a hozzátétel. */
.fazis-elem--uj {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px dashed rgba(128, 128, 128, .35);
}

.fazis-szerkeszto-hiba {
    margin-top: .2rem;
    font-size: .85em;
    color: var(--rz-danger, #c0392b);
}