/* ===========================================================================
   components.css
   A frontend/styles/** mappa portolása + a Vaadin komponensek (button,
   text-field, grid, tabs, menu-bar, dialog, details, notification, checkbox,
   combo-box) Lumo megjelenésének natív CSS-es újraépítése.
   =========================================================================== */

/* ---------- styles.css ---------- */
:root {
    --app-bar-height: var(--lumo-size-xl);
    --navi-drawer-width: calc(var(--lumo-size-m) * 7);
    --navi-drawer-rail-width: calc(var(--lumo-size-m) * 1.75);
    --navi-item-indentation: calc(var(--lumo-icon-size-s) + var(--lumo-space-l));
    --details-drawer-width: calc(var(--lumo-size-m) * 11);

    --transition-duration-s: 160ms;
    --transition-duration-m: 240ms;
    --transition-duration-l: 320ms;

    --lumo-space-r-m: var(--lumo-space-m);
    --lumo-space-r-l: var(--lumo-space-l);
    --lumo-space-r-x: var(--lumo-space-l);
    --lumo-space-wide-r-m: var(--lumo-space-wide-m);
    --lumo-space-wide-r-l: var(--lumo-space-wide-l);
}

@media (max-width: 479px) {
    :root { --lumo-space-r-x: 0; }
}
@media (min-width: 480px) and (max-width: 1023px) {
    :root { --lumo-space-r-x: var(--lumo-space-m); }
}
@media (max-width: 1023px) {
    :root {
        --lumo-space-r-m: var(--lumo-space-s);
        --lumo-space-r-l: var(--lumo-space-m);
        --lumo-space-wide-r-m: var(--lumo-space-wide-s);
        --lumo-space-wide-r-l: var(--lumo-space-wide-m);
    }
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    overflow: hidden;
    width: 100%;
    margin: 0;
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size-m);
    line-height: var(--lumo-line-height-m);
    color: var(--lumo-body-text-color);
    -webkit-font-smoothing: antialiased;
}

.root {
    background-color: var(--lumo-contrast-5pct);
    display: flex;
    height: 100%;
    width: 100%;
}

.root__column {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    transition: padding var(--transition-duration-m);
}

.app-header-outer, .app-footer-outer { z-index: 3; }

.pointer:hover { cursor: move; }
.hand:hover { cursor: pointer; }
.download-link:hover {
    cursor: pointer;
    text-decoration: underline;
    color: var(--lumo-primary-text-color);
}
.vertical-center {
    margin: 0; position: absolute; top: 50%; transform: translateY(-50%);
}

/* ---------- brand-expression.css ---------- */
.brand-expression {
    align-items: center;
    box-shadow: inset 0 -1px var(--lumo-contrast-10pct);
    display: flex;
    flex-shrink: 0;
    padding: var(--lumo-space-m);
    gap: var(--lumo-space-m);
}
.brand-expression__logo {
    border-radius: var(--lumo-border-radius);
    flex-shrink: 0;
    height: var(--lumo-size-m);
    width: var(--lumo-size-m);
    object-fit: contain;
}
.brand-expression__title {
    font-size: var(--lumo-font-size-xl);
    font-weight: 600;
    color: var(--lumo-header-text-color);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- navi-drawer.css ---------- */
.navi-drawer { z-index: 2; position: relative; }
.navi-drawer[open] + * { pointer-events: none; }

.navi-drawer__scrim {
    background-color: var(--lumo-shade-20pct);
    bottom: 0; top: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    transition: opacity var(--transition-duration-m);
}

.navi-drawer__content {
    background-color: var(--lumo-base-color);
    box-shadow: var(--lumo-box-shadow-s);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: margin var(--transition-duration-m);
    width: var(--navi-drawer-width);
    z-index: 2;
}

.navi-drawer .search-field {
    box-shadow: inset 0 -1px var(--lumo-contrast-10pct);
    padding: var(--lumo-space-m);
    width: 100%;
}

.navi-drawer__scroll-area {
    box-shadow: inset 0 -1px var(--lumo-contrast-10pct);
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.navi-drawer__footer {
    border-radius: 0;
    margin-bottom: 0;
    margin-top: auto;
    min-width: 0;
}

/* Rail mód */
.navi-drawer[rail]:not([open]) .navi-drawer__content {
    left: 0; top: 0;
    overflow: hidden;
    position: absolute;
    transition: width var(--transition-duration-s);
    width: var(--navi-drawer-rail-width);
}
.navi-drawer[rail]:not([open]):hover .navi-drawer__content {
    width: var(--navi-drawer-width);
}
.navi-drawer[rail]:not([open]) + .root__column {
    padding-left: var(--navi-drawer-rail-width);
}

@media (max-width: 1023px) {
    .navi-drawer[open] .navi-drawer__scrim { opacity: 1; pointer-events: all; }
    .navi-drawer[rail]:not([open]) + .root__column { padding-left: 0; }
    .navi-drawer__content { bottom: 0; position: absolute; top: 0; }
    .navi-drawer:not([open]) .navi-drawer__content {
        margin-left: calc(var(--navi-drawer-width) * -1.2);
    }
    .navi-drawer__footer { display: none; }
}

@media (min-width: 1024px) {
    .navi-drawer[rail]:not([open]):not(:hover) .account-switcher__avatar,
    .navi-drawer[rail]:not([open]):not(:hover) .navi-item__link .icon {
        margin-left: auto; margin-right: auto;
    }
    .navi-drawer[rail]:not([open]):not(:hover) .account-switcher__title,
    .navi-drawer[rail]:not([open]):not(:hover) .account-switcher__email,
    .navi-drawer[rail]:not([open]):not(:hover) .brand-expression__title,
    .navi-drawer[rail]:not([open]):not(:hover) .navi-item[level],
    .navi-drawer[rail]:not([open]):not(:hover) .navi-item__link span,
    .navi-drawer[rail]:not([open]):not(:hover) .navi-item .navi-item__toggle,
    .navi-drawer[rail]:not([open]):not(:hover) .navi-drawer .search-field {
        display: none;
    }
}

/* ---------- navi-menu.css / navi-item.css ---------- */
.navi-menu { display: flex; flex-direction: column; padding: var(--lumo-space-s) 0; }

.navi-item { display: flex; flex-direction: column; }
.navi-item[level="1"] { display: none; }
.navi-item[level="1"].is-visible { display: flex; }

.navi-item__link {
    align-items: center;
    border-radius: 0 var(--lumo-border-radius) var(--lumo-border-radius) 0;
    color: var(--lumo-body-text-color);
    cursor: pointer;
    display: flex;
    font-size: var(--lumo-font-size-s);
    font-weight: 500;
    gap: var(--lumo-space-m);
    margin-right: var(--lumo-space-s);
    min-height: var(--lumo-size-m);
    padding: var(--lumo-space-xs) var(--lumo-space-m);
    text-decoration: none;
    transition: background-color var(--transition-duration-s);
    user-select: none;
}
.navi-item__link:hover { background-color: var(--lumo-contrast-5pct); }
.navi-item__link .icon {
    color: var(--lumo-contrast-60pct);
    flex-shrink: 0;
    height: var(--lumo-icon-size-s);
    width: var(--lumo-icon-size-s);
}
.navi-item__link span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.navi-item[level="1"] .navi-item__link {
    padding-left: var(--navi-item-indentation);
}
.navi-item.is-highlighted > .navi-item__link {
    background-color: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-text-color);
}
.navi-item.is-highlighted > .navi-item__link .icon { color: var(--lumo-primary-text-color); }

.navi-item__toggle {
    background: none; border: none; cursor: pointer;
    color: var(--lumo-contrast-60pct);
    padding: 0; display: flex; align-items: center;
    transition: transform var(--transition-duration-s);
}
.navi-item.is-expanded > .navi-item__link .navi-item__toggle { transform: rotate(180deg); }

/* ---------- account-switcher.css ---------- */
.account-switcher {
    align-items: center;
    box-shadow: inset 0 -1px var(--lumo-contrast-10pct);
    cursor: pointer;
    display: flex;
    gap: var(--lumo-space-m);
    padding: var(--lumo-space-m);
}
.account-switcher__avatar {
    border-radius: 100%;
    flex-shrink: 0;
    height: var(--lumo-size-m);
    width: var(--lumo-size-m);
}
.account-switcher__title {
    color: var(--lumo-header-text-color);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    line-height: var(--lumo-line-height-xs);
}
.account-switcher__email {
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-xs);
}

/* ---------- app-bar.css ---------- */
.app-bar {
    background-color: var(--lumo-base-color);
    box-shadow: var(--lumo-box-shadow-s);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.app-bar__container {
    align-items: center;
    display: flex;
    padding-left: var(--lumo-space-r-l);
    padding-right: var(--lumo-space-r-l);
    transition: padding var(--transition-duration-m);
}
.app-bar__navi-icon, .app-bar__context-icon {
    background: none; border: none; cursor: pointer;
    color: var(--lumo-contrast-60pct);
    margin-bottom: calc((var(--app-bar-height) - var(--lumo-icon-size-m)) / 2);
    margin-right: var(--lumo-space-l);
    margin-top: calc((var(--app-bar-height) - var(--lumo-icon-size-m)) / 2);
    padding: 0;
}
.app-bar__title {
    flex-grow: 1;
    font-size: var(--lumo-font-size-l);
    font-weight: 600;
    line-height: var(--lumo-line-height-xs);
    color: var(--lumo-header-text-color);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-bar__title:not(:empty) {
    margin-bottom: calc((var(--app-bar-height) - (var(--lumo-font-size-l) * var(--lumo-line-height-xs))) / 2);
    margin-top: calc((var(--app-bar-height) - (var(--lumo-font-size-l) * var(--lumo-line-height-xs))) / 2);
}
.app-bar__action-items { display: flex; align-items: center; }
.app-bar__action-items > *:not(:last-child) { margin-right: var(--lumo-space-s); }
.app-bar__avatar {
    border-radius: 100%;
    flex-shrink: 0;
    height: var(--lumo-size-s);
    margin-left: var(--lumo-space-s);
    width: var(--lumo-size-s);
}

@media (min-width: 1024px) {
    .app-bar__navi-icon { display: none; }
}

/* ---------- view-frame.css ---------- */
.view-frame { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; }
.view-frame__header { z-index: 2; }
.view-frame__wrapper { display: flex; flex: 1; overflow: hidden; }
.view-frame__content {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
}
.view-frame__footer { z-index: 2; }

/* ---------- details-drawer.css ---------- */
.details-drawer {
    background-color: var(--lumo-base-color);
    box-shadow: var(--lumo-box-shadow-s);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    transition: margin var(--transition-duration-m);
    width: var(--details-drawer-width);
    z-index: 1;
}
.details-drawer:not([open]) { margin-right: calc(var(--details-drawer-width) * -1); }
.details-drawer__header, .details-drawer__footer {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: var(--lumo-space-s);
    padding: var(--lumo-space-s) var(--lumo-space-m);
}
.details-drawer__header { box-shadow: inset 0 -1px var(--lumo-contrast-10pct); }
.details-drawer__footer { box-shadow: inset 0 1px var(--lumo-contrast-10pct); margin-top: auto; }
.details-drawer__content { flex: 1; overflow: auto; padding: var(--lumo-space-m); }

/* ---------- list-item.css ---------- */
.list-item {
    align-items: center;
    display: flex;
    gap: var(--lumo-space-m);
    padding: var(--lumo-space-s) 0;
}
.list-item__primary {
    color: var(--lumo-header-text-color);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    line-height: var(--lumo-line-height-xs);
}
.list-item__secondary {
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-xs);
}
.secondary-text { color: var(--lumo-secondary-text-color); font-size: var(--lumo-font-size-s); }

/* ===========================================================================
   Vaadin komponensek natív újraépítése
   =========================================================================== */

/* ---------- vaadin-button ---------- */
.v-button {
    align-items: center;
    background-color: var(--lumo-contrast-5pct);
    border: none;
    border-radius: var(--lumo-border-radius);
    color: var(--lumo-primary-text-color);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: var(--lumo-font-size-m);
    font-weight: 500;
    gap: var(--lumo-space-s);
    height: var(--lumo-size-m);
    justify-content: center;
    min-width: calc(var(--lumo-size-m) * 2);
    padding: 0 calc(var(--lumo-border-radius) + var(--lumo-space-m));
    transition: background-color 60ms;
    white-space: nowrap;
}
.v-button:hover { background-color: var(--lumo-contrast-10pct); }
.v-button:disabled {
    background-color: var(--lumo-contrast-5pct);
    color: var(--lumo-disabled-text-color);
    cursor: default;
    pointer-events: none;
}
.v-button[theme~="primary"] {
    background-color: var(--lumo-primary-color);
    color: var(--lumo-primary-contrast-color);
}
.v-button[theme~="primary"]:hover { background-color: var(--lumo-primary-text-color); }
.v-button[theme~="error"] { background-color: var(--lumo-error-color-10pct); color: var(--lumo-error-text-color); }
.v-button[theme~="error"][theme~="primary"] {
    background-color: var(--lumo-error-color); color: var(--lumo-error-contrast-color);
}
.v-button[theme~="tertiary"] { background-color: transparent; }
.v-button[theme~="tertiary"]:hover { background-color: var(--lumo-contrast-5pct); }
.v-button[theme~="small"] {
    font-size: var(--lumo-font-size-s);
    height: var(--lumo-size-s);
    padding: 0 calc(var(--lumo-border-radius) + var(--lumo-space-s));
    min-width: calc(var(--lumo-size-s) * 2);
}
.v-button[theme~="icon"] { min-width: var(--lumo-size-m); padding: 0; width: var(--lumo-size-m); }
.v-button[theme~="icon"][theme~="small"] { min-width: var(--lumo-size-s); width: var(--lumo-size-s); }
.v-button .icon { height: var(--lumo-icon-size-s); width: var(--lumo-icon-size-s); }

/* ---------- vaadin-text-field / date-picker / combo-box ---------- */
.v-field { display: flex; flex-direction: column; padding: var(--lumo-space-xs) 0; width: 100%; }
.v-field__label {
    align-self: flex-start;
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
    font-weight: 500;
    line-height: 1;
    padding-bottom: 0.5em;
    transition: color 0.2s;
}
.v-field__label.required::after {
    content: "•";
    color: var(--lumo-primary-text-color);
    padding-left: 0.25em;
}
.v-field__input {
    background-color: var(--lumo-contrast-10pct);
    border: none;
    border-radius: var(--lumo-border-radius);
    box-sizing: border-box;
    color: var(--lumo-body-text-color);
    font-family: inherit;
    font-size: var(--lumo-font-size-m);
    height: var(--lumo-size-m);
    padding: 0 var(--lumo-space-s);
    width: 100%;
    transition: background-color 0.15s, box-shadow 0.15s;
}
.v-field__input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
}
.v-field__input:disabled {
    background-color: var(--lumo-contrast-5pct);
    color: var(--lumo-disabled-text-color);
}
.v-field[theme~="small"] .v-field__input {
    font-size: var(--lumo-font-size-s);
    height: var(--lumo-size-s);
}
.v-field[theme~="small"] .v-field__label { font-size: var(--lumo-font-size-xs); }
textarea.v-field__input { height: auto; padding: var(--lumo-space-xs) var(--lumo-space-s); resize: vertical; }
select.v-field__input { appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23708090' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.4em center; background-size: 1.2em;
    padding-right: 1.6em;
}

/* ---------- vaadin-checkbox ---------- */
.v-checkbox { align-items: center; cursor: pointer; display: inline-flex; gap: var(--lumo-space-xs);
    font-size: var(--lumo-font-size-s); user-select: none; padding: var(--lumo-space-xs) 0; }
.v-checkbox input { accent-color: var(--lumo-primary-color); cursor: pointer; height: 1.1em; width: 1.1em; margin: 0; }

/* ---------- vaadin-details ---------- */
.v-details {
    background-color: var(--lumo-contrast-5pct);
    border-radius: var(--lumo-border-radius);
    margin-bottom: var(--lumo-space-s);
}
.v-details__summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: var(--lumo-font-size-s);
    font-weight: 500;
    gap: var(--lumo-space-s);
    padding: var(--lumo-space-xs) var(--lumo-space-s);
    user-select: none;
}
.v-details__summary .icon { transition: transform var(--transition-duration-s); }
.v-details[open] .v-details__summary .icon { transform: rotate(90deg); }
.v-details__content { display: none; padding: var(--lumo-space-s); }
.v-details[open] .v-details__content { display: block; }

/* ---------- vaadin-tabs / PagedTabs ---------- */
.v-tabs {
    box-shadow: inset 0 -1px 0 0 var(--lumo-contrast-10pct);
    display: flex;
    flex-shrink: 0;
    gap: var(--lumo-space-m);
    overflow-x: auto;
}
.v-tab {
    background: none; border: none;
    color: var(--lumo-secondary-text-color);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--lumo-font-size-m);
    font-weight: 500;
    padding: var(--lumo-space-s) var(--lumo-space-xs);
    position: relative;
    white-space: nowrap;
}
.v-tabs[theme~="small"] .v-tab { font-size: var(--lumo-font-size-s); padding: var(--lumo-space-xs); }
.v-tab:hover { color: var(--lumo-body-text-color); }
.v-tab.is-selected { color: var(--lumo-primary-text-color); }
.v-tab.is-selected::after {
    background-color: var(--lumo-primary-color);
    bottom: 0; content: ""; height: 2px; left: 0; position: absolute; right: 0;
}
.v-tab-page { display: none; flex: 1; flex-direction: column; min-height: 0; }
.v-tab-page.is-selected { display: flex; }

/* ---------- vaadin-menu-bar ---------- */
.v-menubar { display: flex; gap: var(--lumo-space-xs); flex-wrap: wrap; align-items: center;
    padding: var(--lumo-space-xs) 0; }
.v-menubar__item { position: relative; }
.v-menubar__button {
    align-items: center;
    background-color: var(--lumo-primary-color);
    border: none;
    border-radius: var(--lumo-border-radius);
    color: var(--lumo-primary-contrast-color);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: var(--lumo-font-size-s);
    font-weight: 500;
    gap: var(--lumo-space-xs);
    height: var(--lumo-size-s);
    padding: 0 var(--lumo-space-s);
}
.v-menubar__button:hover { background-color: var(--lumo-primary-text-color); }
.v-menubar__button:disabled {
    background-color: var(--lumo-contrast-5pct);
    color: var(--lumo-disabled-text-color);
    cursor: default; pointer-events: none;
}
.v-menubar__submenu {
    background-color: var(--lumo-base-color);
    border-radius: var(--lumo-border-radius);
    box-shadow: var(--lumo-box-shadow-m);
    display: none;
    left: 0;
    min-width: 12em;
    padding: var(--lumo-space-xs) 0;
    position: absolute;
    top: calc(100% + 2px);
    z-index: 20;
}
.v-menubar__item.is-open .v-menubar__submenu { display: block; }
.v-menubar__subitem {
    color: var(--lumo-body-text-color);
    cursor: pointer;
    display: block;
    font-size: var(--lumo-font-size-s);
    padding: var(--lumo-space-xs) var(--lumo-space-m);
    white-space: nowrap;
}
.v-menubar__subitem:hover { background-color: var(--lumo-primary-color-10pct); }
.v-menubar__subitem.is-disabled { color: var(--lumo-disabled-text-color); pointer-events: none; }
.v-menubar__separator { border: none; border-top: 1px solid var(--lumo-contrast-10pct); margin: var(--lumo-space-xs) 0; }

/* ---------- vaadin-grid ---------- */
.v-grid-wrapper {
    background-color: var(--lumo-base-color);
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.v-grid { border-collapse: collapse; font-size: var(--lumo-font-size-s); width: 100%; }
.v-grid thead th {
    background-color: var(--lumo-base-color);
    border-bottom: 1px solid var(--lumo-contrast-20pct);
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-xs);
    font-weight: 500;
    padding: var(--lumo-space-xs) var(--lumo-space-s);
    position: sticky;
    text-align: left;
    top: 0;
    white-space: nowrap;
    z-index: 1;
}
.v-grid tbody td {
    border-bottom: 1px solid var(--lumo-contrast-10pct);
    color: var(--lumo-body-text-color);
    padding: var(--lumo-space-xs) var(--lumo-space-s);
    vertical-align: middle;
}
/* GridVariant.LUMO_COLUMN_BORDERS */
.v-grid[theme~="column-borders"] th:not(:last-child),
.v-grid[theme~="column-borders"] td:not(:last-child) {
    border-right: 1px solid var(--lumo-contrast-10pct);
}
/* GridVariant.LUMO_ROW_STRIPES
   A csíkozást a szerver jelöli (is-even), mert a kinyitott sorrészletek
   miatt a :nth-child() elcsúszna. */
.v-grid[theme~="row-stripes"] tbody tr.is-even > td {
    background-color: var(--lumo-contrast-5pct);
}
.v-grid[theme~="row-stripes"] tbody tr.v-grid__row:not(.is-even):not(.is-selected) > td {
    background-color: transparent;
}
/* GridVariant.LUMO_COMPACT */
.v-grid[theme~="compact"] td, .v-grid[theme~="compact"] th {
    padding: 2px var(--lumo-space-xs);
}
.v-grid__row { cursor: pointer; }
.v-grid__row:hover > td { background-color: var(--lumo-primary-color-10pct); }
.v-grid__row.is-selected > td {
    background-color: var(--lumo-primary-color-10pct);
    box-shadow: inset 0 0 0 1px var(--lumo-primary-color-50pct);
}
.v-grid__row.is-drop-target > td { box-shadow: inset 0 0 0 2px var(--lumo-primary-color); }
.v-grid__details > td { background-color: var(--lumo-contrast-5pct); padding: var(--lumo-space-m); }
.v-grid__expander { color: var(--lumo-tertiary-text-color); cursor: pointer; display: inline-flex; }
.v-grid__expander .icon { transition: transform var(--transition-duration-s); }
.v-grid__expander.is-open .icon { transform: rotate(90deg); }
.v-grid__empty {
    color: var(--lumo-tertiary-text-color);
    font-size: var(--lumo-font-size-s);
    padding: var(--lumo-space-l);
    text-align: center;
}
.v-grid-title {
    align-items: center;
    color: var(--lumo-header-text-color);
    display: flex;
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    gap: var(--lumo-space-xs);
    padding: var(--lumo-space-xs) 0;
}

/* ---------- badge (UIUtils.createBadge) ---------- */
.badge {
    background-color: var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius);
    display: inline-block;
    font-size: var(--lumo-font-size-xs);
    font-weight: bold;
    line-height: 1;
    padding: 0.4em calc(0.5em + var(--lumo-border-radius));
    white-space: nowrap;
}
.badge.small { font-size: var(--lumo-font-size-xxs); padding: 0.3em calc(0.4em + var(--lumo-border-radius)); }
.badge.pill { border-radius: 1em; }

/* ---------- vaadin-dialog (ThemedDialog) ---------- */
.v-dialog-overlay {
    align-items: center;
    background-color: var(--lumo-shade-20pct);
    bottom: 0; left: 0; right: 0; top: 0;
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 100;
}
.v-dialog {
    background-color: var(--lumo-base-color);
    border-radius: var(--lumo-border-radius-l);
    box-shadow: var(--lumo-box-shadow-xl);
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    max-width: 96vw;
    width: 600px;
}
.v-dialog[theme~="fullscreen"] { height: 100vh; max-height: 100vh; width: 100vw; max-width: 100vw; border-radius: 0; }
.v-dialog[theme~="dock"] { width: 320px; }
.v-dialog__header {
    align-items: center;
    background-color: hsl(214, 35%, 21%);
    border-radius: var(--lumo-border-radius-l) var(--lumo-border-radius-l) 0 0;
    color: hsl(214, 100%, 98%);
    cursor: move;
    display: flex;
    gap: var(--lumo-space-xs);
    padding: var(--lumo-space-xs) var(--lumo-space-m);
    user-select: none;
}
.v-dialog__title {
    flex: 1;
    font-size: var(--lumo-font-size-m);
    font-weight: 600;
    margin: 0;
}
.v-dialog__header .v-button {
    background: transparent;
    color: hsla(214, 96%, 96%, 0.9);
    height: var(--lumo-size-s);
    min-width: var(--lumo-size-s);
    padding: 0; width: var(--lumo-size-s);
}
.v-dialog__header .v-button:hover { background: hsla(0, 0%, 100%, 0.14); }
.v-dialog__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--lumo-space-m);
}
.v-dialog__footer {
    border-top: 1px solid var(--lumo-contrast-10pct);
    display: flex;
    gap: var(--lumo-space-s);
    justify-content: flex-end;
    padding: var(--lumo-space-s) var(--lumo-space-m);
}

/* ---------- vaadin-notification ---------- */
.v-notifications {
    display: flex;
    flex-direction: column;
    gap: var(--lumo-space-s);
    position: fixed;
    right: var(--lumo-space-m);
    top: var(--lumo-space-m);
    z-index: 200;
}
.v-notification {
    background-color: var(--lumo-base-color);
    border-radius: var(--lumo-border-radius);
    box-shadow: var(--lumo-box-shadow-m);
    color: var(--lumo-body-text-color);
    font-size: var(--lumo-font-size-s);
    max-width: 24em;
    padding: var(--lumo-space-s) var(--lumo-space-m);
    animation: notif-in var(--transition-duration-m) both;
}
.v-notification.is-warning { color: red; }
.v-notification.is-leaving { animation: notif-out var(--transition-duration-m) both; }
@keyframes notif-in  { from { opacity: 0; transform: translateX(1rem); } }
@keyframes notif-out { to   { opacity: 0; transform: translateX(1rem); } }

/* ---------- layout segédosztályok (FlexBoxLayout / layout.size.*) ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; min-height: 0; min-width: 0; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.spacing-xs { gap: var(--lumo-space-xs); }
.spacing-s  { gap: var(--lumo-space-s); }
.spacing-m  { gap: var(--lumo-space-m); }
.padding-responsive { padding: var(--lumo-space-r-m) var(--lumo-space-r-x) 0; }
.padding-bottom-s { padding-bottom: var(--lumo-space-s); }
.margin-top-s { margin-top: var(--lumo-space-s); }
hr.v-hr { border: none; border-top: 1px solid var(--lumo-contrast-10pct); margin: var(--lumo-space-xs) 0; width: 100%; }

/* PartnerekView content split: 0.3 / 0.0001 / 0.6999 (PartnerekView.java) */
.partnerek__content { display: flex; flex: 1; min-height: 0; width: 100%; }
.partnerek__left   { flex: 0.3;    display: flex; flex-direction: column; min-width: 0; }
.partnerek__sep    { flex: 0.0001; margin: var(--lumo-space-m); }
.partnerek__right  { flex: 0.6999; display: flex; flex-direction: column; min-width: 0; }

@media (max-width: 767px) {
    .partnerek__content { flex-direction: column; }
    .partnerek__left, .partnerek__right { flex: none; }
    .partnerek__left { height: 16rem; }
    .partnerek__right { flex: 1; }
}

.is-dragging { opacity: 0.5; }
.is-hidden { display: none !important; }

/* ===========================================================================
   Termékek modul: TreeGrid, CollapsibleSplitLayout, ContextMenu,
   bezárható PagedTabs fülek
   =========================================================================== */

/* ---------- vaadin-tree-grid hierarchia oszlop ---------- */
.v-tree .v-tree__indent,
.v-tree .v-tree__spacer {
    display: inline-block;
    vertical-align: middle;
}
.v-tree .v-tree__spacer { width: var(--lumo-icon-size-s); }
.v-tree .v-grid__expander { vertical-align: middle; margin-right: var(--lumo-space-xs); }

/* ---------- CollapsibleSplitLayout (20% / 80%) ---------- */
.v-split {
    display: flex;
    flex: 1;
    min-height: 0;
    width: 100%;
}
.v-split__primary {
    display: flex;
    flex-direction: column;
    flex: 0 0 20%;
    min-width: 0;
    overflow: hidden;
    transition: flex-basis var(--transition-duration-m);
}
.v-split.is-collapsed .v-split__primary { flex-basis: 0; }

.v-split__splitter {
    align-items: center;
    align-self: stretch;
    background-color: var(--lumo-contrast-5pct);
    border-radius: var(--lumo-border-radius);
    color: var(--lumo-tertiary-text-color);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    margin: 0 var(--lumo-space-xs);
    width: 0.9rem;
}
.v-split__splitter:hover { background-color: var(--lumo-contrast-10pct); }

.v-split__secondary {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

@media (max-width: 767px) {
    .v-split { flex-direction: column; }
    .v-split__primary { flex: none; height: 14rem; }
    .v-split.is-collapsed .v-split__primary { height: 0; }
    .v-split__splitter { width: auto; height: 0.9rem; margin: var(--lumo-space-xs) 0; }
}

/* ---------- ContextMenu a fa sorain ---------- */
.v-contextmenu { position: relative; display: inline-flex; }
.v-contextmenu__submenu { left: auto; right: 0; }

/* ---------- Bezárható fül ---------- */
.v-tab__close {
    color: var(--lumo-tertiary-text-color);
    display: inline-flex;
    margin-left: var(--lumo-space-xs);
    vertical-align: middle;
}
.v-tab__close:hover { color: var(--lumo-error-text-color); }

/* ---------- TextField helper text ---------- */
.v-field__helper {
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-xxs);
    padding-top: 0.25em;
}

/* ---------- RadioButtonGroup ---------- */
.v-radio-group { display: flex; flex-wrap: wrap; gap: var(--lumo-space-m); }
.v-radio-group input { accent-color: var(--lumo-primary-color); cursor: pointer; margin: 0; }