/* ============================================================
   Webmaister Approval – Design Tokens
   ------------------------------------------------------------
   Központi CSS változó-deklarációk. Ezt a fájlt MINDEN olyan
   stíluslap előtt be kell húzni, amelyik var(--*) tokeneket
   használ (style.css, admin.css, public-form.css, editor.css …).
   Egyetlen forrás az igazság – itt módosíts, és minden felület
   automatikusan átveszi a változást.
   ============================================================ */

:root {
    /* Natív form-controlok színsémája (default light). */
    color-scheme: light;

    /* Brand */
    --brand:             #ce100a;
    --brand-color:       var(--brand);
    --brand-light:       #ff6b6b;
    --brand-bright:      #ff3b30;
    --brand-dark:        #e8231d;
    --brand-bg:          rgba(206, 16, 10, 0.1);
    --brand-light-bg:    rgba(255, 107, 107, 0.1);
    --brand-shadow:      rgba(206, 16, 10, 0.3);
    --brand-shadow-hover:rgba(206, 16, 10, 0.4);

    /* Buttons - badges */
    --btn-primary-bg:   linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 25%, var(--brand-bright) 50%, var(--brand-dark) 75%, var(--brand) 100%);
    --btn-primary-color: #ffffff;
    --icon-btn-hover-color: #ffffff;
    --badge:            linear-gradient(135deg, #447abd, #5a8fd4, #6ba3e8, #5a8fd4, #447abd);

    /* Semantic – state colors */
    --success:           #28a745;
    --success-bg:        #f0fff4;
    --warning:           #e78d00;
    --warning-bg:        #fdf5e9;
    --danger:            #ce100a;
    --danger-text:       #ce100a;
    --danger-bg:         #ffd9d9;
    --info:              #6c8add; /* #2563eb; */
    --info-bg:           #dbeafe;
    --report:            #9b59b6;
    --report-bg:         #f9eaff;
    --kb:                #00a8c2;
    --kb-bg:             #f4feff;

    /* Accent (toast, badge gradient) */
    --accent:            #447abd;
    --accent-mid:        #5a8fd4;
    --accent-light:      #6ba3e8;
    --accent-badge-bg:   linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 25%, var(--accent-light) 50%, var(--accent-mid) 75%, var(--accent) 100%);
    --accent-shadow:     0 2px 8px rgba(68, 122, 189, 0.3), inset 0 1px rgba(255, 255, 255, 0.3);

    /* Success gradient */
    --success-dark:      #3a8c29;
    --success-mid:       #4ba837;
    --success-base:      #59bd44;
    --success-bright:    #76e160;
    --success-deep:      #359321;
    --success-badge-bg:  linear-gradient(135deg, var(--success-dark) 0%, var(--success-mid) 25%, var(--success-base) 50%, var(--success-bright) 75%, var(--success-deep) 100%);
    --success-shadow:    0 2px 8px rgba(53, 147, 33, 0.3), inset 0 1px rgba(255, 255, 255, 0.3);

    /* Neutrals */
    --text-primary:      #1e293b;
    --text-body:         #334155;
    --text-secondary:    #64748b;
    --text-muted:        #6d7582;
    --text-placeholder:  #999;

    /* Surfaces */
    --white:             #ffffff;
    --surface-page:      #fffaef;
    --surface-section:   var(--white);
    --surface-card:      #edf0f7;
    --surface-code:      #1e293b;
    --surface-hover:     var(--surface-card);
    --surface-muted:     #f8f8f8;
    --surface-selected:  #f3f2ff;
    --surface-input:     var(--white);
    --surface-radio:     var(--white);
    --surface-mark:      #fff3b0;

    /* Borders */
    --border:            #e8e8e8;
    --border-light:      #eee;
    --border-rule:       #f0f0f0;
    --border-highlight:  #ccc;
    --border-width:      1px;
    --border-width-double: 2px;
    --border-width-triple: 3px;
    --border-style:      solid;
    --border-dashed:     dashed;

    /* Header */
    --header-bg:         rgba(255, 250, 239, 0.75);

    /* Shadows */
    --shadow-card:       0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-btn:        0 4px 15px var(--brand-shadow), 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.4);
    --shadow-btn-hover:  0 8px 25px var(--brand-shadow-hover), 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.4);
    --shadow-dropdown:   0 8px 30px rgba(0, 0, 0, 0.18);
    --shadow-toast:      0 6px 24px rgba(0, 0, 0, 0.25);

    /* Radius */
    --radius-xs:         4px;
    --radius-sm:         6px;
    --radius-md:         8px;
    --radius-lg:         10px;
    --radius-xl:         12px;
    --radius-pill:       100px;

    /* Spacing */
    --space-xs:          4px;
    --space-sm:          8px;
    --space-md:          12px;
    --space-lg:          16px;
    --space-xl:          20px;
    --space-2xl:         24px;
    --space-3xl:         28px;
    --space-4xl:         32px;
    --form-gap:          var(--space-xs);

    /* Typography */
    --font-body:        'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display:     'Bebas Neue', cursive;
    --font-mono:        'Courier New', monospace;
    --font-size:        14px;
    --font-size-input:  16px;
    --font-size-btn:    16px;
    --font-size-subtitle: 16px;
    --font-size-title:  18px;
    --font-size-label:  12px;
    --font-size-menu:   13px;
    --font-size-badge:  9px;
    --font-size-number-title: 36px;
    --font-size-h1:     32px;
    --font-size-h2:     28px;
    --font-size-h3:     24px;
    --font-size-h4:     20px;
    --font-size-h5:     16px;
    --font-size-h6:     14px;
    --font-weight-bold: 700;
    --font-weight-medium: 500;
    --font-uppercase:   uppercase;
    --font-italic:      italic;
    --line-height:      1.5;
    --icon-size:        32px;
    --icon-size-sm:     16px;
    --icon-size-lg:     64px;
    --icon-inner:       var(--icon-size-sm);
    --icon-inner-sm:    14px;
    --icon-inner-md:    20px;
    --icon-inner-lg:    24px;
    --icon-inner-xl:    var(--icon-size);
    --icon-inner-xxl:   var(--icon-size-lg);
    --input-height:     38px;

    --letter-spacing-label: 0.03em;

    /* Transitions */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-smooth: 0.4s ease;

    /* Layout */
    --container-max:     820px;
    --header-max:        1400px;
    --backdrop-filter:   blur(5px);
}

/* ============================================================
   Sötét mód
   ------------------------------------------------------------
   Itt csak a témafüggő tokeneket írjuk felül. A többi token
   (brand, semantic, spacing, radius, typography, shadow stb.)
   változatlan marad.

   Két ág:
   • [data-theme="dark"]                → kifejezett választás
   • [data-theme="auto"] + prefers-color-scheme: dark → rendszer

   Ha egy oldalra NEM akarsz dark mode-ot (pl. publikus űrlap
   light-only opció), egyszerűen ne tedd ki a html-re a
   data-theme attribútumot, akkor a default light token marad.
   ============================================================ */

[data-theme="light"] {
    /* Explicit light választás – még akkor is light marad, ha az OS dark. */
    color-scheme: light;
}

[data-theme="dark"] {
    /* Natív form-controlok (input, select, textarea, scrollbar) színsémája. */
    color-scheme: dark;
    /* Brand */
    --brand-color:       var(--brand-light);

    /* Surfaces */
    --dark:              #0f172a;
    --surface-page:      #1e293b;
    --surface-section:   var(--dark);
    --surface-card:      #0a1121;
    --surface-hover:     var(--surface-card);
    --surface-muted:     #2a354a;
    --surface-selected:  #101e38;
    --surface-input:     var(--dark);
    --surface-radio:     var(--dark);


    /* Neutrals */
    --text-primary:      #cbd5e1;
    --text-body:         #f1f5f9;
    --text-secondary:    #cbd5e1;
    --text-muted:        #9ca3af;
    --text-placeholder:  #6b7280;

    --border:            #334155;
    --border-light:      #1f2937;
    --border-rule:       #1f2937;
    --border-highlight:  #475569;

    --header-bg:         rgba(15, 23, 42, 0.85);

    --danger-text:       var(--brand-light);
    --success-bg:        #0d2b18;
    --warning-bg:        #2b1d04;
    --danger-bg:         #380303;
    --info-bg:           #0c1e3d;
    --kb-bg:             #0b383d;
    --report-bg:         #2a0c36;
}

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        /* Natív form-controlok színsémája (auto + rendszer dark). */
        color-scheme: dark;

        /* Brand */
        --brand-color:       var(--brand-light);

        /* Surfaces */
        --dark:              #0f172a;
        --surface-page:      #1e293b;
        --surface-section:   var(--dark);
        --surface-card:      #0a1121;
        --surface-hover:     var(--surface-card);
        --surface-muted:     #2a354a;
        --surface-selected:  #101e38;
        --surface-input:     var(--dark);
        --surface-radio:     var(--dark);


        /* Neutrals */
        --text-primary:      #cbd5e1;
        --text-body:         #f1f5f9;
        --text-secondary:    #cbd5e1;
        --text-muted:        #9ca3af;
        --text-placeholder:  #6b7280;

        --border:            #334155;
        --border-light:      #1f2937;
        --border-rule:       #1f2937;
        --border-highlight:  #475569;

        --header-bg:         rgba(15, 23, 42, 0.85);

        --danger-text:       var(--brand-light);
        --success-bg:        #0d2b18;
        --warning-bg:        #2b1d04;
        --danger-bg:         #380303;
        --info-bg:           #0c1e3d;
        --kb-bg:             #0b383d;
        --report-bg:         #2a0c36;
    }
    :root:not([data-theme]) {
        /* Csak akkor érvényesül, ha az oldal nem deklarál explicit
           data-theme-et (admin felület, főoldal). A publikus űrlap
           mindig kapja a data-theme attribútumot, ezért ezt a blokkot
           a [data-theme="light"]/[data-theme="dark"]/[data-theme="auto"]
           ágak felülírják. */
        color-scheme: dark;

        /* Brand */
        --brand-color:       var(--brand-light);

        /* Surfaces */
        --dark:              #0f172a;
        --surface-page:      #1e293b;
        --surface-section:   var(--dark);
        --surface-card:      #0a1121;
        --surface-hover:     var(--surface-card);
        --surface-muted:     #2a354a;
        --surface-selected:  #101e38;
        --surface-input:     var(--dark);
        --surface-radio:     var(--dark);


        /* Neutrals */
        --text-primary:      #cbd5e1;
        --text-body:         #f1f5f9;
        --text-secondary:    #cbd5e1;
        --text-muted:        #9ca3af;
        --text-placeholder:  #6b7280;

        --border:            #334155;
        --border-light:      #1f2937;
        --border-rule:       #1f2937;
        --border-highlight:  #475569;

        --header-bg:         rgba(30, 41, 59, 0.75);

        --danger-text:       var(--brand-light);
        --success-bg:        #0d2b18;
        --warning-bg:        #2b1d04;
        --danger-bg:         #380303;
        --info-bg:           #0c1e3d;
        --kb-bg:             #0b383d;
        --report-bg:         #2a0c36;
    }
}

/* ============================================================
   Self-hosted fonts
   ------------------------------------------------------------
   Mivel a --font-body / --font-display itt van deklarálva,
   a hozzájuk tartozó @font-face is logikusan ide tartozik.
   ============================================================ */

/* Bebas Neue – latin-ext */
@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/bebas-neue-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bebas Neue – latin */
@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/bebas-neue-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Figtree – latin-ext */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(../fonts/figtree-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree – latin */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(../fonts/figtree-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Alap globális formázások
   ------------------------------------------------------------
   A legfontosabb formázások, amik minden layoutban használhatók.
   Nem specifikusak egyetlen komponensre sem,
   de a legtöbb felületen szükség lesz rájuk,
   ezért itt vannak deklarálva.
   (Pl. alert, toast, badge, stb.)
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-primary);
    margin: var(--space-md) 0 var(--space-xs);
}
h1 {
    font-size: var(--font-size-h1);
}
h2 {
    font-size: var(--font-size-h2);
}
h3 {
    font-size: var(--font-size-h3);
}
h4 {
    font-size: var(--font-size-h4);
}
h5 {
    font-size: var(--font-size-h5);
}
h6 {
    font-size: var(--font-size-h6);
}

pre {
    background: var(--surface-code);
    color: var(--white);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: var(--space-md);
    font-size: var(--font-size-label);
    font-family: var(--font-mono);
    word-break: break-word;
    white-space: wrap;
}
pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

mark {
    background: var(--surface-mark);
    padding: 0 var(--space-xs);
    border-radius: var(--radius-sm);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

blockquote {
    border-left: var(--border-width-triple) var(--border-style) var(--brand);
    padding: var(--space-xs) var(--space-md);
    margin: var(--space-sm) 0;
    color: var(--text-secondary);
    background: var(--surface-selected);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

iframe {
    border-radius: var(--radius-md);
}

.hidden {
    display: none !important;
}

.no-scroll {
    overflow: hidden !important;
}

.clipboard-fallback {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0 !important;
    pointer-events: none;
}

.color-danger {
    color: var(--color-danger);
}

.text-desc {
    margin-bottom: var(--space-lg);
}

.login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: var(--space-xl) 0;
    text-align: center;
    justify-content: center;
}
.login-section {
    width: 100%;
    max-width: 400px;
    padding: var(--space-lg);
}
.login-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}
.login-icon {
    color: var(--brand);
    stroke-width: 1.5;
}
.login-wrap .btn {
    margin-top: var(--space-md);
}

/* Markdown images */
.md-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--space-sm) 0;
    display: block;
    cursor: zoom-in;
}

.divider {
    width: 100%;
    border: none;
    border-top: var(--border-width) var(--border-style) var(--border);
    margin: var(--space-md) 0;
}

/* Buttons */
a:not(.btn):not(.icon-btn) {
  border-radius: var(--radius-sm);
  word-break: break-word;
}
a:not(.btn):not(.icon-btn):focus-visible,
button:focus-visible {
  outline: var(--border-width) var(--border-style) var(--brand);
}

.btn {
    border-radius: var(--radius-pill);
    padding: var(--space-sm) var(--space-2xl);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    line-height: var(--line-height);
}
.btn svg {
    margin-right: var(--space-xs);
}

.btn-sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-label);
}

.btn-primary {
    font-size: var(--font-size-btn);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: all var(--transition-smooth);
    border: var(--border-width-double) var(--border-style) var(--brand);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    box-shadow: var(--shadow-btn);
}
.btn-primary:hover,
.btn-primary:focus {
    transform: translateY(-2px);
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-btn-hover);
}
.btn-primary:focus-visible {
    outline: var(--border-width) var(--border-style) var(--brand);
}

.btn-secondary {
    font-size: var(--font-size-btn);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: all var(--transition-smooth);
    border: var(--border-width-double) var(--border-style) var(--brand-color);
    background: var(--brand-bg);
    color: var(--brand-color);
    box-shadow: var(--shadow-btn);
}
.btn-secondary:hover,
.btn-secondary:focus {
    transform: translateY(-2px);
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-btn-hover);
}
.btn-secondary:focus-visible {
    outline: var(--border-width) var(--border-style) var(--brand-color);
}

.btn-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-smooth);
}
.btn-text:hover {
    color: var(--brand-color);
}

.inline-btn-text-wrapper {
    display: inline-flex;
}
.inline-btn-text {
    background: none;
    border: none;
    color: var(--brand-color);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: none;
}
.inline-btn-text:hover {
    text-decoration: underline;
}

.btn-small {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-label);
}

/* .icon-btn (layout) - variánsok: edit/delete/info/success/warning/action/highlight */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-smooth);
    text-decoration: none;
}
.icon-btn.edit-icon-btn {
    border: var(--border-width) var(--border-style) var(--warning);
    background: var(--warning-bg);
    color: var(--warning);
}
.icon-btn.edit-icon-btn:hover,
.icon-btn.edit-icon-btn:focus {
    background: var(--warning);
    color: var(--icon-btn-hover-color);
}
.icon-btn.edit-icon-btn:focus-visible {
    outline: var(--border-width) var(--border-style) var(--warning);
}
.icon-btn.delete-icon-btn {
    border: var(--border-width) var(--border-style) var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
}
.icon-btn.delete-icon-btn:hover,
.icon-btn.delete-icon-btn:focus {
    background: var(--danger);
    color: var(--icon-btn-hover-color);
}
.icon-btn.delete-icon-btn:focus-visible {
    outline: var(--border-width) var(--border-style) var(--danger);
}
.icon-btn.info-icon-btn {
    border: var(--border-width) var(--border-style) var(--info);
    background: var(--info-bg);
    color: var(--info);
}
.icon-btn.info-icon-btn:hover,
.icon-btn.info-icon-btn:focus {
    background: var(--info);
    color: var(--icon-btn-hover-color);
}
.icon-btn.info-icon-btn:focus-visible {
    outline: var(--border-width) var(--border-style) var(--info);
}
.icon-btn.success-icon-btn {
    border: var(--border-width) var(--border-style) var(--success);
    background: var(--success-bg);
    color: var(--success);
}
.icon-btn.success-icon-btn:hover,
.icon-btn.success-icon-btn:focus {
    background: var(--success);
    color: var(--icon-btn-hover-color);
}
.icon-btn.success-icon-btn:focus-visible {
    outline: var(--border-width) var(--border-style) var(--success);
}
.icon-btn.warning-icon-btn {
    border: var(--border-width) var(--border-style) var(--warning);
    background: var(--warning-bg);
    color: var(--warning);
}
.icon-btn.warning-icon-btn:hover,
.icon-btn.warning-icon-btn:focus {
    background: var(--warning);
    color: var(--icon-btn-hover-color);
}
.icon-btn.warning-icon-btn:focus-visible {
    outline: var(--border-width) var(--border-style) var(--warning);
}
.icon-btn.action-icon-btn {
    border: var(--border-width) var(--border-style) var(--kb);
    background: var(--kb-bg);
    color: var(--kb);
}
.icon-btn.action-icon-btn:hover,
.icon-btn.action-icon-btn:focus {
    background: var(--kb);
    color: var(--icon-btn-hover-color);
}
.icon-btn.action-icon-btn:focus-visible {
    outline: var(--border-width) var(--border-style) var(--kb);
}
.icon-btn.highlight-icon-btn {
    border: var(--border-width) var(--border-style) var(--report);
    background: var(--report-bg);
    color: var(--report);
}
.icon-btn.highlight-icon-btn:hover,
.icon-btn.highlight-icon-btn:focus {
    background: var(--report);
    color: var(--icon-btn-hover-color);
}
.icon-btn.highlight-icon-btn:focus-visible {
    outline: var(--border-width) var(--border-style) var(--report);
}

.icon-btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.qr-item.aa-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-nowrap {
    white-space: nowrap;
}

/* Form inputs - labels */
.form-group {
    margin-bottom: var(--space-md);
}
.form-group-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.form-group-row {
    display: flex;
    flex-direction: row;
    gap: var(--space-xs);
}
.form-input {
    padding: var(--space-xs) var(--space-sm);
    border: var(--border-width-double) var(--border-style) var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    background: var(--surface-input);
    height: var(--input-height);
    box-sizing: border-box;
}
textarea.form-input {
    height: auto;
}
.form-input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 1;
    text-align: left;
}
input, select, textarea {
    color: var(--text-body);
    font-size: var(--font-size-input);
}

.form-input:focus,
.form-input:focus-visible {
    outline: var(--border-width) var(--border-style) var(--brand);
}
textarea {
  width: 100%;
}
.form-label {
    display: block;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    font-size: var(--font-size);
    margin-bottom: var(--space-xs);
}
.form-hint {
    font-size: var(--font-size-label);
    color: var(--text-secondary);
    margin: var(--space-xs) 0 0 0;
    padding: 0;
}
.auth-code-input {
    text-align: center;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
}

/* Filters */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: flex-end;
    margin-bottom: var(--space-md);
}
.filter-search {
    flex: 1;
    min-width: 180px;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.filter-group .ps-wrap {
    width: auto;
    min-width: 150px;
}
.filter-label {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-bold);
    color: var(--text-muted);
}
.filter-actions {
    flex-direction: row;
    gap: var(--space-xs);
}

.item-count {
    font-size: var(--font-size-label);
    color: var(--text-muted);
    margin: 0 0 var(--space-sm) 0;
}
/* Filters responsive */
@media (max-width: 600px) {
    .filters {
        flex-direction: column;
    }
    .filter-group {
        width: 100%;
        min-width: 0;
    }
    .filter-group .form-input {
        width: 100%;
        max-width: 100%;
    }
    .filter-search {
        min-width: 0;
    }
}

/* ----- Modals ----- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
}
.modal-overlay.active {
    display: flex;
}
.modal-overlay.child-modal {
    background: rgba(0, 0, 0, 0.32);
}
.modal {
    background: var(--header-bg);
    backdrop-filter: var(--backdrop-filter);
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: var(--shadow-card);
    text-align: center;
    width: 380px;
    max-width: calc(100% - var(--space-2xl) * 2);
    max-height: calc(100vh - var(--space-2xl) * 2);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal > form {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}
.modal-wide {
    width: 620px;
}

/* Nested (child) modal: enyhén kisebb, hogy a szülő kontextus látható maradjon. */
.modal-overlay.child-modal .modal {
    width: 342px; /* 380 * 0.9 */
    max-width: calc((100% - var(--space-2xl) * 2) * 0.9);
    max-height: calc((100vh - var(--space-2xl) * 2) * 0.9);
}
.modal-overlay.child-modal .modal.modal-wide {
    width: 558px; /* 620 * 0.9 */
}
.form-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: monospace;
    font-size: var(--font-size-label);
    text-align: left;
}
.form-textarea p,
.form-textarea ul,
.form-textarea ol {
    margin-bottom: var(--space-lg);
}
.signature-preview {
    width: 100%;
    height: 200px;
    border: var(--border-width) var(--border-style) var(--border-color);
    background: #fff;
}
.modal-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-xs);
    transition: all var(--transition-smooth);
    z-index: 1;
}
.modal-close:hover {
    color: var(--text-primary);
}
.modal-title {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    padding: var(--space-3xl) var(--space-4xl) var(--space-md);
    margin: 0;
    flex-shrink: 0;
}
.modal-subtitle {
    font-size: var(--font-size);
    color: var(--text-muted);
    padding: 0 var(--space-4xl) var(--space-md);
    margin: 0;
    word-break: break-word;
    flex-shrink: 0;
}
.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-xs) var(--space-4xl);
    min-height: 0;
}
.modal-body:focus-visible {
    outline: var(--border-width) var(--border-style) var(--brand);
}
.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
    align-items: center;
    padding: var(--space-lg) var(--space-4xl) var(--space-3xl);
    flex-shrink: 0;
}
.modal-body .form-input {
    width: 100%;
}
.modal-body .form-group {
    text-align: left;
}

/* Badge */
/* ============================================================
   Egységes badge rendszer (.p-badge) – használható minden
   pill/tag/státusz kontextusban (decision, customer/lead, KB,
   notifikáció, pretty-select tag, stb.).

   Alap: semleges szürke. Variánsok:
     .p-badge-success   – zöld (jóváhagyva, ügyfél, aktív)
     .p-badge-info      – kék (függőben/várakozó, lead)
     .p-badge-warning   – sárga (vegyes/módosítással, ismeretlen, lejárt)
     .p-badge-error     – piros (elutasítva, letiltva, hiba)
     .p-badge-accent    – lila (riport, értesítés, másodlagos kapcsolat)
     .p-badge-note      – türkiz (KB, emlékeztető, egyszeri)
   ============================================================ */
.p-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    user-select: none;
    font-size: var(--font-size);
    line-height: 1;
    font-weight: var(--font-weight-bold);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-secondary);
    border: var(--border-width) var(--border-style) var(--text-secondary);
    white-space: nowrap;
}
.p-badge-success {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success);
}
.p-badge-info {
    background: var(--info-bg);
    color: var(--info);
    border-color: var(--info);
}
.p-badge-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: var(--warning);
}
.p-badge-error {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: var(--danger);
}
.p-badge-accent {
    background: var(--report-bg);
    color: var(--report);
    border-color: var(--report);
}
.p-badge-note {
    background: var(--kb-bg);
    color: var(--kb);
    border-color: var(--kb);
}

/* Alert */
.alert {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-label);
    margin-bottom: var(--space-md);
}
/* Error */
.alert-error,
.error-banner {
    background: var(--brand-light-bg);
    color: var(--danger-text);
    border: var(--border-width) var(--border-style) var(--danger);
}
/* Warning */
.alert-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border: var(--border-width) var(--border-style) var(--warning);
}
/* Info */
.alert-info {
    background: var(--info-bg);
    color: var(--info);
    border: var(--border-width) var(--border-style) var(--info);
}

/* Toast értesítés */
.toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: var(--accent-badge-bg);
    color: var(--white);
    padding: 14px 40px 14px 20px;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--accent-shadow);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-smooth);
    z-index: 10005;
    max-width: 90vw;
    text-align: center;
}
.toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.toast-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: rgba(255,255,255,.8);
    font-size: var(--font-size-title);
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    line-height: 1;
}
.toast-close:hover {
    color: var(--white);
}
.toast-success {
    background: var(--success-badge-bg);
    box-shadow: var(--success-shadow);
}

/* ─── SVG ikonok ──────────────────────────────────────────────
   Globális ikon utility-k a public/assets/img/icons.svg sprite-hoz.
   Markup: <?= Icons::render('trash', 'icon icon-lg') ?>
   Méret modifierek: .icon-sm (14), .icon (16, default), .icon-md (20),
                     .icon-lg (24), .icon-xl (32).
*/
.icon {
    width: var(--icon-inner);
    height: var(--icon-inner);
    flex-shrink: 0;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
}
.icon-sm {
    width: var(--icon-inner-sm);
    height: var(--icon-inner-sm);
}
.icon-md {
    width: var(--icon-inner-md);
    height: var(--icon-inner-md);
}
.icon-lg {
    width: var(--icon-inner-lg);
    height: var(--icon-inner-lg);
}
.icon-xl {
    width: var(--icon-inner-xl);
    height: var(--icon-inner-xl);
}
.icon-xxl {
    width: var(--icon-inner-xxl);
    height: var(--icon-inner-xxl);
}

/* ─── Pretty select ──────────────────────────────────────────────
   Globális speciális custom select komponenshez,
   a hagyományos dropdown UI helyett. Használható egyedi selectként,
   de akár checkbox vagy radio listaként is.
   Bármilyen select, vagy rádió cserélhető erre a komponensre.

*/
.ps-hidden-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.ps-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.ps-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    width: 100%;
    min-height: var(--input-height);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-input);
    color: inherit;
    background: var(--surface-input);
    border: var(--border-width-double) var(--border-style) var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}
.ps-trigger:focus-visible {
    outline: var(--border-width) var(--border-style) var(--brand);
}
.ps-trigger[aria-expanded="true"] {
    outline: var(--border-width) var(--border-style) var(--brand);
}
.ps-trigger-flag,
.ps-trigger-flags .ps-trigger-flag {
    font-size: var(--font-size-input);
    line-height: 1;
}
.ps-trigger-flags {
    display: inline-flex;
    gap: var(--space-xs);
    margin-right: var(--space-xs);
}
.ps-trigger-dial {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.ps-trigger-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ps-trigger-label {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    overflow: hidden;
}
.ps-trigger-label.ps-trigger-empty {
    color: var(--text-muted);
    font-style: italic;
}
.ps-trigger-count {
    color: var(--text-muted);
}
.ps-caret {
    margin-left: auto;
}

/* Popup */
.ps-popup {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-xs));
    left: 0;
    right: 0;
    /* High z-index because the popup is portal-mounted to <body>, so it must
       sit above modal overlays (z:10000) and toasts. */
    z-index: 10010;
    max-height: 22rem;
    background: var(--surface-input);
    border: var(--border-width) var(--border-style) var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-direction: column;
}
.ps-popup.is-open {
    display: flex;
}
/* JS-positioned (portal-mounted under <body>): the JS sets CSS custom
   properties via style.setProperty() and adds .is-positioned. We use
   `position: fixed` so coords are viewport-relative regardless of
   ancestor containing blocks. The fallbacks keep the popup on-screen
   if a property is missing. */
.ps-popup.is-positioned {
    position: fixed;
    top: var(--ps-pop-top, auto);
    bottom: var(--ps-pop-bottom, auto);
    left: var(--ps-pop-left, 0);
    right: auto;
    width: var(--ps-pop-width, auto);
    max-height: var(--ps-pop-max-h, 22rem);
}

.ps-popup-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border-bottom: var(--border-width) var(--border-style) var(--border);
    background: var(--surface-input);
}
.ps-search {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    border: var(--border-width-double) var(--border-style) var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-input);
    color: var(--text-body);
    font-family: inherit;
    font-size: var(--font-size-input);
    height: var(--input-height);
    box-sizing: border-box;
    appearance: none;
}
.ps-search:focus,
.ps-search:focus-visible {
    outline: var(--border-width) var(--border-style) var(--brand);
}
.ps-bulk-bar {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}
.ps-bulk-btn {
    flex: 1;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-label);
    border: var(--border-width) var(--border-style) var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-input);
    color: inherit;
    cursor: pointer;
    transition: all var(--transition-smooth);
}
.ps-bulk-btn:hover,
.ps-bulk-btn-clear:hover {
    background: var(--brand-light-bg);
    border-color: var(--brand);
    color: var(--brand-color);
}

.ps-list {
    list-style: none;
    padding: var(--space-xs) 0;
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
}
.ps-list:focus-visible {
    outline: var(--border-width) var(--border-style) var(--brand);
    outline-offset: -1px;
}
.ps-option {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
}
/* Country flavor: tabular grid with flag + dial + ISO + name */
.ps-flavor-country .ps-option,
.ps-popup.ps-flavor-country .ps-option {
    display: grid;
    grid-template-columns: auto 2.25rem 3.25rem 1.5rem 1fr;
}
.ps-flavor-country.ps-wrap-single .ps-option,
.ps-popup.ps-flavor-country.ps-popup-single .ps-option {
    grid-template-columns: 2.25rem 3.25rem 1.5rem 1fr;
}
.ps-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    border: var(--border-width) var(--border-style) var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-input);
    color: var(--brand);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-label);
    line-height: 1;
    transition: all var(--transition-smooth);
}
/* SVG check a multi-mode opci\u00f3kban \u2014 sprite-b\u00f3l, opacity-vel toggle. */
.ps-option-check .pretty-check-icon {
    width: 80%;
    height: 80%;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.ps-option-check:hover {
    border-color: var(--text-primary);
}
.ps-option.is-selected .ps-option-check {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--white);
}
.ps-option.is-selected .ps-option-check .pretty-check-icon {
    opacity: 1;
}
.ps-option:hover,
.ps-option.is-active,
.ps-option.is-selected {
    background: var(--surface-hover);
}
.ps-option.is-selected {
    color: var(--brand-color);
}
.ps-option-code {
    font-variant-numeric: tabular-nums;
}
.ps-option-dial {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.ps-option-flag {
    font-size: var(--font-size-input);
    line-height: 1;
    text-align: center;
}
.ps-option-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ps-option-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Wrapper for inline tag rows in pretty-select options. */
.ps-option-tags {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}


.ps-status {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-label);
    color: var(--text-muted);
    border-top: var(--border-width) var(--border-style) var(--border);
    background: var(--surface-subtle);
}

/* ============================================================
   Pretty Check / Pretty Radio – globális checkbox/radio komponens
   ------------------------------------------------------------
   Markup minta (CHECKBOX):
     <label class="pretty-check">
         <input class="pretty-check-input" type="checkbox" name="..." value="...">
         <span class="pretty-check-box" aria-hidden="true"></span>
         <span class="pretty-check-label">Címke</span>
     </label>

   Markup minta (RADIO):
     <label class="pretty-radio">
         <input class="pretty-radio-input" type="radio" name="..." value="...">
         <span class="pretty-radio-box" aria-hidden="true"></span>
         <span class="pretty-radio-label">Címke</span>
     </label>

   Méret modifierek (opcionális): .pretty-check--sm / .pretty-check--lg
                                  .pretty-radio--sm / .pretty-radio--lg
   Disabled, :focus-visible, :indeterminate, hover natívan kezelve.
   A natív <input> form-funkcióban marad (validation, autofill, A11Y),
   csak vizuálisan rejtve. A box span sibling, így :checked ~ .box
   szelektor festi át.
   ============================================================ */

.pretty-check,
.pretty-radio {
    --pc-size: 1.125em;            /* alap doboz méret (em → követi a font-size-ot) */
    --pc-radius: var(--radius-xs);
    --pc-bg: var(--surface-input);
    --pc-border: var(--border-highlight);
    --pc-border-checked: var(--brand);
    --pc-bg-checked: var(--brand);
    --pc-mark: var(--white);
    --pc-focus-ring: 0 0 0 3px var(--brand-light-bg);
    --pc-gap: var(--space-sm);
    --pc-transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--pc-gap);
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}

/* Méret modifierek */
.pretty-check--sm, .pretty-radio--sm { --pc-size: 0.9375em; }
.pretty-check--lg, .pretty-radio--lg { --pc-size: 1.375em; }

/* Natív input rejtése (de fókusz, validáció, form data megmarad).
   Nem position:absolute paddingú wrapperhez — ehelyett
   width/height 0-ra zsugorítjuk és sőrő abszolút 0,0-ra rakjuk.
   A kattintás a label-en keresztül megy, a billentyűzet fókusz az
   inputon van, és a :focus-visible ~ .box szelektor festi a dobozt. */
.pretty-check-input,
.pretty-radio-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

/* Vizuális doboz */
.pretty-check-box,
.pretty-radio-box {
    position: relative;
    flex-shrink: 0;
    width: var(--pc-size);
    height: var(--pc-size);
    background: var(--pc-bg);
    border: var(--border-width-double) var(--border-style) var(--pc-border);
    border-radius: var(--pc-radius);
    transition: var(--pc-transition);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pc-mark);
}
.pretty-radio-box {
    border-radius: 50%;
}

/* SVG checkmark a sprite-ból (i-check). Alapból rejtve. */
.pretty-check-icon {
    width: 80%;
    height: 80%;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

/* Címke szöveg (opcionális — az átmigrált form mezők saját .pf-* osztályukat használják) */
.pretty-check-label,
.pretty-radio-label {
    color: var(--text-body);
    font-size: 1em;
}

/* Hover (csak engedélyezett mezőn) */
.pretty-check:hover .pretty-check-input:not(:disabled) ~ .pretty-check-box,
.pretty-radio:hover .pretty-radio-input:not(:disabled) ~ .pretty-radio-box {
    border-color: var(--pc-border-checked);
}

/* Focus-visible: csak billentyűzet fókusznál mutatunk kemenény outline-t.
   A standalone pretty-check / pretty-radio (pl. GDPR) box-on jelenik meg.
   Tile-ban (.pf-choice-tile) a tile maga kapja az outline-t — lásd public-form.css. */
.pretty-check-input:focus-visible ~ .pretty-check-box,
.pretty-radio-input:focus-visible ~ .pretty-radio-box {
    outline: var(--border-width) var(--border-style) var(--brand);
    outline-offset: 2px;
    border-color: var(--pc-border-checked);
}

/* Checked (checkbox) — SVG ikon megjelenik */
.pretty-check-input:checked ~ .pretty-check-box {
    background: var(--pc-bg-checked);
    border-color: var(--pc-border-checked);
}
.pretty-check-input:checked ~ .pretty-check-box .pretty-check-icon {
    opacity: 1;
}

/* Indeterminate (tri-state) — vonal jelenik meg ikon helyett */
.pretty-check-input:indeterminate ~ .pretty-check-box {
    background: var(--pc-bg-checked);
    border-color: var(--pc-border-checked);
}
.pretty-check-input:indeterminate ~ .pretty-check-box .pretty-check-icon {
    opacity: 0;
}
.pretty-check-input:indeterminate ~ .pretty-check-box::after {
    content: '';
    position: absolute;
    left: 22%;
    right: 22%;
    top: 50%;
    height: 0.15em;
    background: var(--pc-mark);
    transform: translateY(-50%);
    border-radius: 1px;
}

/* Checked (radio) — belső pötty */
.pretty-radio-input:checked ~ .pretty-radio-box {
    border-color: var(--pc-border-checked);
    background: var(--pc-bg);
}
.pretty-radio-input:checked ~ .pretty-radio-box::after {
    content: '';
    position: absolute;
    inset: 22%;
    background: var(--pc-bg-checked);
    border-radius: 50%;
}

/* Disabled */
.pretty-check-input:disabled,
.pretty-radio-input:disabled { cursor: not-allowed; }
.pretty-check-input:disabled ~ .pretty-check-box,
.pretty-radio-input:disabled ~ .pretty-radio-box {
    opacity: 0.5;
    cursor: not-allowed;
}
.pretty-check-input:disabled ~ .pretty-check-label,
.pretty-radio-input:disabled ~ .pretty-radio-label,
.pretty-check:has(.pretty-check-input:disabled),
.pretty-radio:has(.pretty-radio-input:disabled) { cursor: not-allowed; }

/* Invalid állapot (HTML5 validáció vagy custom .is-invalid) */
.pretty-check-input:user-invalid ~ .pretty-check-box,
.pretty-radio-input:user-invalid ~ .pretty-radio-box,
.pretty-check.is-invalid .pretty-check-box,
.pretty-radio.is-invalid .pretty-radio-box {
    border-color: var(--danger);
}

/* ============================================================
   Pretty filter (search/filter input)
   Egységes szűrő/kereső mező listák szűkítéséhez (modalokban,
   listák felett). Markup-ot a PHP `PrettyFilter::render()` adja,
   a tényleges szűrést a `pretty-filter.js` `attach()` végzi.
   ============================================================ */
.pretty-filter {
    --pf-pad-y: var(--space-xs);
    --pf-pad-x: var(--space-sm);
    --pf-icon-size: 1em;
    --pf-gap: var(--space-xs);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--pf-gap);
    padding: var(--pf-pad-y) var(--pf-pad-x);
    margin-bottom: var(--space-sm);
    border: var(--border-width-double) var(--border-style) var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-input);
    height: var(--input-height);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pretty-filter:focus-within {
    border-color: var(--brand);
    outline: var(--border-width) var(--border-style) var(--brand);
    outline-offset: -2px;
}
.pretty-filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
    pointer-events: none;
}
.pretty-filter-icon-svg {
    width: var(--pf-icon-size);
    height: var(--pf-icon-size);
}
.pretty-filter-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1em;
    color: var(--text-body);
    padding: 0;
    height: auto;
}
.pretty-filter-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}
.pretty-filter-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}
.pretty-filter-clear:hover {
    color: var(--text-body);
    background: var(--surface-muted);
}
.pretty-filter-clear:focus-visible {
    outline: var(--border-width) var(--border-style) var(--brand);
    outline-offset: 1px;
}
.pretty-filter-clear[hidden] {
    display: none;
}
.pretty-filter-clear-svg {
    width: 0.875em;
    height: 0.875em;
}
/* Auto-létrehozott "Nincs találat." elem (JS-ből, list-bind esetén) */
.pretty-filter-empty {
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-md);
    margin: 0;
}