/**
 * ═══════════════════════════════════════════════════════════
 * AVTE Design System v1.0
 * ═══════════════════════════════════════════════════════════
 *
 * Központi, alkalmazás-szintű design token-ek és komponensek.
 * Minden oldal és aloldal ezt használja a koherens megjelenésért.
 *
 * Betöltés: layout-top.php (automatikus, app.css után)
 * Dependencies: tailwind.css, app.css
 */

/* ═══════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */
:root {
    /* ── Palette ─────────────────────────────────── */
    --ds-bg-deep:       #0f172a;
    --ds-bg-surface:    rgba(255,255,255,0.03);
    --ds-bg-raised:     rgba(255,255,255,0.05);
    --ds-bg-hover:      rgba(255,255,255,0.04);
    --ds-bg-active:     rgba(56,189,248,0.08);

    --ds-border:        rgba(255,255,255,0.06);
    --ds-border-hover:  rgba(255,255,255,0.12);
    --ds-border-focus:  #38bdf8;
    --ds-border-accent: rgba(56,189,248,0.3);

    --ds-text-primary:  #f1f5f9;
    --ds-text-secondary:#cbd5e1;
    --ds-text-muted:    #64748b;
    --ds-text-dim:      #475569;

    --ds-accent:        #38bdf8;
    --ds-accent-strong: #0ea5e9;
    --ds-accent-glow:   rgba(56,189,248,0.35);
    --ds-accent-dim:    rgba(56,189,248,0.12);

    --ds-success:       #34d399;
    --ds-warning:       #fbbf24;
    --ds-danger:        #f87171;
    --ds-danger-hover:  rgba(248,113,113,0.08);
    --ds-danger-border: rgba(248,113,113,0.2);

    /* ── Typography ──────────────────────────────── */
    --ds-font:          'Inter', system-ui, sans-serif;
    --ds-font-mono:     'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    --ds-text-2xs:      9px;
    --ds-text-xs:       10px;
    --ds-text-sm:       11.5px;
    --ds-text-base:     13px;
    --ds-text-md:       14px;
    --ds-text-lg:       17px;

    /* ── Spacing ─────────────────────────────────── */
    --ds-gap-xs:        4px;
    --ds-gap-sm:        6px;
    --ds-gap-md:        10px;
    --ds-gap-lg:        16px;

    /* ── Radii ───────────────────────────────────── */
    --ds-radius-sm:     4px;
    --ds-radius-md:     8px;
    --ds-radius-lg:     12px;
    --ds-radius-xl:     14px;
    --ds-radius-full:   9999px;

    /* ── Shadows ─────────────────────────────────── */
    --ds-shadow-sm:     0 2px 8px rgba(0,0,0,0.3);
    --ds-shadow-md:     0 4px 20px rgba(0,0,0,0.5);
    --ds-shadow-glow:   0 0 8px var(--ds-accent-glow);

    /* ── Transitions ─────────────────────────────── */
    --ds-trans-fast:    0.12s ease;
    --ds-trans:         0.15s ease;
    --ds-trans-slow:    0.2s ease;

    /* ── Icon sizes ──────────────────────────────── */
    --ds-icon-sm:       14px;
    --ds-icon-md:       19px;
    --ds-icon-lg:       25px;

    /* ── Slider thumb sizes ──────────────────────── */
    --ds-thumb-sm:      12px;
    --ds-thumb-md:      14px;
    --ds-thumb-lg:      19px;
}

/* ═══════════════════════════════════════════════════════════
   2. SCROLLBAR UTILITY
   ═══════════════════════════════════════════════════════════ */
.ds-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.ds-scrollbar::-webkit-scrollbar-track { background: transparent; }
.ds-scrollbar::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.3); border-radius: 3px; }
.ds-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.5); }

/* ═══════════════════════════════════════════════════════════
   3. SLIDER (range input)
   ═══════════════════════════════════════════════════════════ */
.ds-slider {
    -webkit-appearance: none; appearance: none;
    flex: 1; height: 5px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--ds-radius-sm);
    outline: none; cursor: pointer;
}
.ds-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--ds-thumb-sm); height: var(--ds-thumb-sm);
    border-radius: 50%; border: none;
    background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-strong));
    box-shadow: 0 0 0 2px var(--ds-accent-dim), 0 0 6px rgba(56,189,248,0.2);
    cursor: pointer; transition: transform var(--ds-trans-fast); animation: none;
}
.ds-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    animation: dsPulseSm 1.2s ease-in-out infinite;
}
.ds-slider::-webkit-slider-thumb:active {
    transform: scale(1.1);
    animation: dsPulseSm 0.7s ease-in-out infinite;
}
.ds-slider::-moz-range-thumb {
    width: var(--ds-thumb-sm); height: var(--ds-thumb-sm);
    border-radius: 50%; border: none;
    background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-strong));
    box-shadow: 0 0 0 2px var(--ds-accent-dim), 0 0 6px rgba(56,189,248,0.2);
    cursor: pointer;
}

.ds-slider--md { height: 6px; }
.ds-slider--md::-webkit-slider-thumb { width: var(--ds-thumb-md); height: var(--ds-thumb-md); }
.ds-slider--md::-moz-range-thumb    { width: var(--ds-thumb-md); height: var(--ds-thumb-md); }
.ds-slider--lg { height: 8px; }
.ds-slider--lg::-webkit-slider-thumb { width: var(--ds-thumb-lg); height: var(--ds-thumb-lg); }
.ds-slider--lg::-moz-range-thumb    { width: var(--ds-thumb-lg); height: var(--ds-thumb-lg); }

@keyframes dsPulseSm {
    0%,100% { box-shadow: 0 0 0 2px rgba(56,189,248,0.12), 0 0 6px rgba(56,189,248,0.2); }
    50%     { box-shadow: 0 0 0 3px rgba(56,189,248,0.25), 0 0 10px rgba(56,189,248,0.35); }
}
@keyframes dsPulseLg {
    0%,100% { box-shadow: 0 0 0 2px rgba(56,189,248,0.12), 0 0 6px rgba(56,189,248,0.2); }
    50%     { box-shadow: 0 0 0 4px rgba(56,189,248,0.25), 0 0 12px rgba(56,189,248,0.35); }
}

/* ═══════════════════════════════════════════════════════════
   4. BUTTONS
   ═══════════════════════════════════════════════════════════ */
.ds-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--ds-gap-xs); padding: 5px 12px;
    font-size: var(--ds-text-sm); font-weight: 600; font-family: var(--ds-font);
    border-radius: var(--ds-radius-md); border: 1px solid transparent;
    cursor: pointer; transition: all var(--ds-trans);
    white-space: nowrap; line-height: 1.4;
}
.ds-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ds-btn:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

.ds-btn--primary {
    background: linear-gradient(135deg, #0ea5e9, #0284c7); color: #fff;
    box-shadow: 0 2px 8px rgba(14,165,233,0.25);
}
.ds-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
    box-shadow: 0 4px 16px rgba(14,165,233,0.4); transform: translateY(-1px);
}
.ds-btn--primary:active:not(:disabled) { transform: translateY(0); }

.ds-btn--ghost {
    background: transparent; color: var(--ds-text-muted);
}
.ds-btn--ghost:hover:not(:disabled) {
    background: var(--ds-bg-hover); color: var(--ds-text-secondary);
    border-color: var(--ds-border-hover);
}

.ds-btn--danger {
    background: rgba(239,68,68,0.12); color: #f87171;
    border-color: rgba(239,68,68,0.25);
}
.ds-btn--danger:hover:not(:disabled) {
    background: rgba(239,68,68,0.25); border-color: rgba(239,68,68,0.45);
    color: #fca5a5;
}

.ds-btn--accent {
    background: transparent; color: var(--ds-accent);
    border-color: rgba(56,189,248,0.2);
}
.ds-btn--accent:hover:not(:disabled) {
    background: var(--ds-bg-active); border-color: var(--ds-border-accent);
}

.ds-btn--success {
    background: rgba(52,211,153,0.15); color: var(--ds-success);
    border-color: rgba(52,211,153,0.25);
}
.ds-btn--success:hover:not(:disabled) { background: rgba(52,211,153,0.25); }

.ds-btn--violet {
    background: rgba(139,92,246,0.15); color: #c4b5fd;
    border-color: rgba(139,92,246,0.2);
}
.ds-btn--violet:hover:not(:disabled) {
    background: rgba(139,92,246,0.28); border-color: rgba(139,92,246,0.35);
}

.ds-btn--amber {
    background: rgba(245,158,11,0.12); color: #fbbf24;
    border-color: rgba(245,158,11,0.25);
}
.ds-btn--amber:hover:not(:disabled) {
    background: rgba(245,158,11,0.25); border-color: rgba(245,158,11,0.45);
    color: #fcd34d;
}

.ds-btn--rose {
    background: rgba(251,113,133,0.12); color: #fda4af;
    border-color: rgba(251,113,133,0.25);
}
.ds-btn--rose:hover:not(:disabled) {
    background: rgba(251,113,133,0.25); border-color: rgba(251,113,133,0.45);
    color: #fecdd3;
}

.ds-btn--sky {
    background: rgba(56,189,248,0.12); color: #38bdf8;
    border-color: rgba(56,189,248,0.25);
}
.ds-btn--sky:hover:not(:disabled) {
    background: rgba(56,189,248,0.25); border-color: rgba(56,189,248,0.45);
    color: #7dd3fc;
}

.ds-btn--emerald {
    background: rgba(52,211,153,0.12); color: #34d399;
    border-color: rgba(52,211,153,0.25);
}
.ds-btn--emerald:hover:not(:disabled) {
    background: rgba(52,211,153,0.25); border-color: rgba(52,211,153,0.45);
    color: #6ee7b7;
}

.ds-btn--indigo {
    background: rgba(99,102,241,0.12); color: #818cf8;
    border-color: rgba(99,102,241,0.25);
}
.ds-btn--indigo:hover:not(:disabled) {
    background: rgba(99,102,241,0.25); border-color: rgba(99,102,241,0.45);
    color: #a5b4fc;
}

.ds-btn--teal {
    background: rgba(20,184,166,0.12); color: #2dd4bf;
    border-color: rgba(20,184,166,0.25);
}
.ds-btn--teal:hover:not(:disabled) {
    background: rgba(20,184,166,0.25); border-color: rgba(20,184,166,0.45);
    color: #5eead4;
}

.ds-btn--fuchsia {
    background: rgba(217,70,239,0.12); color: #e879f9;
    border-color: rgba(217,70,239,0.25);
}
.ds-btn--fuchsia:hover:not(:disabled) {
    background: rgba(217,70,239,0.25); border-color: rgba(217,70,239,0.45);
    color: #f0abfc;
}

.ds-btn--icon { padding: 6px; min-width: 32px; min-height: 32px; }
.ds-btn--icon-round { padding: 6px; min-width: 32px; min-height: 32px; border-radius: 50%; }

.ds-btn--sm { padding: 3px 8px; font-size: var(--ds-text-xs); }
.ds-btn--lg { padding: 8px 18px; font-size: var(--ds-text-base); }

/* ═══════════════════════════════════════════════════════════
   5. TOGGLE SWITCH
   ═══════════════════════════════════════════════════════════ */
.ds-toggle {
    position: relative; flex-shrink: 0;
    width: 36px; height: 20px;
    border-radius: var(--ds-radius-full); border: none;
    cursor: pointer; outline: none; padding: 0;
    transition: background-color var(--ds-trans);
}
.ds-toggle:focus-visible { box-shadow: 0 0 0 2px rgba(14,165,233,0.5); }
.ds-toggle--on  { background-color: var(--ds-accent); }
.ds-toggle--off { background-color: var(--ds-text-dim); }
.ds-toggle__dot {
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background-color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform var(--ds-trans); pointer-events: none;
}
.ds-toggle--on .ds-toggle__dot { transform: translateX(16px); }

.ds-toggle--sm { width: 28px; height: 16px; }
.ds-toggle--sm .ds-toggle__dot { width: 12px; height: 12px; top: 2px; left: 2px; }
.ds-toggle--sm.ds-toggle--on .ds-toggle__dot { transform: translateX(12px); }

/* ═══════════════════════════════════════════════════════════
   6. SELECT DROPDOWN
   ═══════════════════════════════════════════════════════════
   A többi űrlapelemhez (ds-input) illesztve: raised háttér, token-keret,
   md radius, hover + fókusz glow. Egyedi chevron nyíl (appearance: none),
   a natív felugró opciólista is a sötét témához van igazítva.
   Megj.: a multi-line listbox (<select size=N>) megtartja a natív
   megjelenését (nincs rá chevron, nem appearance:none). */
.ds-select {
    background-color: var(--ds-bg-raised);
    border: 1px solid var(--ds-border);
    color: var(--ds-text-secondary);
    border-radius: var(--ds-radius-md);
    padding: 4px 28px 4px 8px;  /* jobb padding a chevronnak */
    font-size: var(--ds-text-xs);
    font-family: var(--ds-font);
    cursor: pointer;
    transition: border-color var(--ds-trans), background-color var(--ds-trans), box-shadow var(--ds-trans);
}
.ds-select:not([size]) {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}
.ds-select:hover {
    border-color: var(--ds-border-hover);
    background-color: var(--ds-bg-hover);
}
.ds-select:focus {
    border-color: var(--ds-border-focus); outline: none;
    box-shadow: 0 0 0 1px rgba(56,189,248,0.3);
}
.ds-select:disabled { opacity: 0.5; cursor: not-allowed; }
/* Natív felugró opciólista – sötét témához igazítva */
.ds-select option { background: #1e293b; color: var(--ds-text-secondary); }
.ds-select option:checked { background: var(--ds-accent-dim); color: var(--ds-accent); }
.ds-select option:hover { background: var(--ds-bg-active); }
.ds-select::-webkit-listbox {
    background: var(--ds-bg-deep);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}
.ds-select--sm { padding: 2px 22px 2px 6px; font-size: var(--ds-text-2xs); }
.ds-select--md { padding: 5px 28px 5px 10px; font-size: var(--ds-text-sm); }
.ds-select--lg { padding: 6px 30px 6px 12px; font-size: var(--ds-text-base); }

/* ═══════════════════════════════════════════════════════════
   7. TEXT INPUT
   ═══════════════════════════════════════════════════════════ */
.ds-input {
    background: var(--ds-bg-raised); border: 1px solid var(--ds-border);
    color: #fff; border-radius: var(--ds-radius-md);
    padding: 8px 12px; font-size: var(--ds-text-sm);
    font-family: var(--ds-font);
    transition: border-color var(--ds-trans), box-shadow var(--ds-trans);
}
.ds-input::placeholder { color: var(--ds-text-dim); }
.ds-input:focus {
    border-color: var(--ds-border-focus); outline: none;
    box-shadow: 0 0 0 1px rgba(56,189,248,0.3);
}
.ds-input--sm { padding: 3px 8px; font-size: var(--ds-text-xs); }
.ds-input--xs { padding: 2px 6px; font-size: var(--ds-text-2xs); }

/* ═══════════════════════════════════════════════════════════
   8. FLOATING TOOLTIP (info icon + bubble)
   <span class="ds-tip" data-tip="magyarázat">i</span>
   ═══════════════════════════════════════════════════════════ */
.ds-tip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--ds-accent-dim); color: var(--ds-accent);
    font-size: var(--ds-text-2xs); font-weight: 700;
    font-family: var(--ds-font); cursor: help; flex-shrink: 0;
    position: relative;
    transition: all var(--ds-trans-fast);
}
.ds-tip:hover {
    background: var(--ds-accent); color: var(--ds-bg-deep);
    transform: scale(1.15);
}
.ds-tip::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 10px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1e293b; color: var(--ds-text-secondary);
    font-size: var(--ds-text-xs); font-weight: 400;
    padding: 8px 12px; border-radius: var(--ds-radius-md);
    white-space: normal; width: 220px; text-align: left;
    line-height: 1.45; pointer-events: none; opacity: 0;
    transition: opacity var(--ds-trans), transform var(--ds-trans);
    border: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-md); z-index: 9999;
}
.ds-tip:hover::after {
    opacity: 1; transform: translateX(-50%) translateY(0);
}
.ds-tip::before {
    content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #1e293b;
    pointer-events: none; opacity: 0;
    transition: opacity var(--ds-trans); z-index: 9999;
}
.ds-tip:hover::before { opacity: 1; }

.ds-tip--right::after,
.ds-tip--right::before { bottom: auto; left: calc(100% + 10px); top: 50%; }
.ds-tip--right::after  { transform: translateY(-50%) translateX(4px); }
.ds-tip--right::before { transform: translateY(-50%); border-top-color: transparent; border-right-color: #1e293b; left: calc(100% + 4px); }
.ds-tip--right:hover::after { transform: translateY(-50%) translateX(0); }

/* ── Inline tooltip: use data-ds-tip="..." on any element ── */
[data-ds-tip] {
    position: relative;
    cursor: help;
}
[data-ds-tip]:hover::after {
    content: attr(data-ds-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(3px);
    background: #1e293b; color: var(--ds-text-secondary);
    font-size: var(--ds-text-xs); font-weight: 400;
    padding: 6px 10px; border-radius: var(--ds-radius-md);
    white-space: nowrap; pointer-events: none; opacity: 0;
    transition: opacity var(--ds-trans), transform var(--ds-trans);
    border: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-md); z-index: 9999;
}
[data-ds-tip]:hover::after {
    opacity: 1; transform: translateX(-50%) translateY(0);
}
[data-ds-tip]:hover::before {
    content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #1e293b;
    pointer-events: none; opacity: 0;
    transition: opacity var(--ds-trans); z-index: 9999;
}
[data-ds-tip]:hover::before { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   9. BADGE
   ═══════════════════════════════════════════════════════════ */
.ds-badge {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--ds-text-2xs); font-weight: 600;
    background: var(--ds-border); color: var(--ds-text-muted);
    padding: 1px 6px; border-radius: var(--ds-radius-full); line-height: 1.4;
}
.ds-badge--accent  { background: var(--ds-bg-active); color: var(--ds-accent); }
.ds-badge--success { background: rgba(52,211,153,0.15); color: var(--ds-success); }
.ds-badge--danger  { background: rgba(248,113,113,0.15); color: var(--ds-danger); }
.ds-badge--warning { background: rgba(251,191,36,0.15);  color: #fcd34d; }
.ds-badge--info    { background: rgba(56,189,248,0.15);  color: #7dd3fc; }
.ds-badge--violet  { background: rgba(139,92,246,0.15);  color: #c4b5fd; }
.ds-badge--indigo  { background: rgba(99,102,241,0.15);  color: #a5b4fc; }
.ds-badge--rose    { background: rgba(251,113,133,0.15); color: #fda4af; }

/* ═══════════════════════════════════════════════════════════
   10. CARD / PANEL
   ═══════════════════════════════════════════════════════════ */
.ds-card {
    background: var(--ds-bg-surface); border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg); padding: var(--ds-gap-lg);
}
.ds-card--flat { background: transparent; border: none; }
.ds-card__head {
    display: flex; align-items: flex-start; gap: var(--ds-gap-md);
    margin-bottom: var(--ds-gap-md); padding-bottom: var(--ds-gap-md);
    border-bottom: 1px solid var(--ds-border);
}
.ds-card__head .material-symbols-outlined { color: var(--ds-accent); }
.ds-card__title { font-size: var(--ds-text-md); font-weight: 600; color: var(--ds-text-primary); margin: 0; }
.ds-card__sub  { font-size: var(--ds-text-xs); color: var(--ds-text-muted); display: block; margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════
   11. SETTINGS ROW
   ═══════════════════════════════════════════════════════════ */
.ds-row {
    display: flex; align-items: center; gap: var(--ds-gap-sm);
    padding: 4px 6px; border-radius: var(--ds-radius-sm);
    transition: background var(--ds-trans-fast);
}
.ds-row:hover { background: var(--ds-bg-hover); }
.ds-row__label { font-size: var(--ds-text-sm); color: var(--ds-text-secondary); min-width: 110px; flex-shrink: 0; }
.ds-row__val   { font-size: var(--ds-text-xs); font-family: var(--ds-font-mono); color: var(--ds-accent); min-width: 38px; text-align: right; font-weight: 600; }
.ds-row__def   { font-size: var(--ds-text-2xs); font-family: var(--ds-font-mono); color: var(--ds-text-dim); min-width: 34px; text-align: right; }

.ds-row--md { gap: var(--ds-gap-md); padding: 6px 10px; }
.ds-row--md .ds-row__label { font-size: var(--ds-text-base); min-width: 140px; }
.ds-row--md .ds-row__val   { font-size: var(--ds-text-base); min-width: 48px; }
.ds-row--md .ds-row__def   { font-size: var(--ds-text-sm); min-width: 42px; }

/* ═══════════════════════════════════════════════════════════
   12. WEIGHT BAR
   ═══════════════════════════════════════════════════════════ */
.ds-weight-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px; background: var(--ds-bg-hover);
    border-radius: var(--ds-radius-md); margin-bottom: var(--ds-gap-md);
}
.ds-weight-bar__label { font-size: var(--ds-text-sm); color: var(--ds-text-secondary); font-weight: 500; }
.ds-weight-bar__total { font-family: var(--ds-font-mono); font-weight: 700; font-size: var(--ds-text-md); color: var(--ds-success); transition: color var(--ds-trans); }

/* ═══════════════════════════════════════════════════════════
   13. SIDEBAR NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.ds-sidebar {
    width: 240px; flex-shrink: 0;
    background: rgba(255,255,255,0.025); border-right: 1px solid var(--ds-border);
    padding: 10px 0; overflow-y: auto;
}
.ds-sidebar__group { padding: 0 0 6px 0; }
.ds-sidebar__group-title {
    padding: 12px 16px 6px; font-size: var(--ds-text-sm); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--ds-text-dim);
    display: flex; align-items: center; gap: 6px;
}
.ds-sidebar__group-title .material-symbols-outlined { font-size: var(--ds-icon-md); color: var(--ds-text-muted); }
.ds-sidebar__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px 8px 20px; margin: 2px 8px;
    border-radius: var(--ds-radius-md); cursor: pointer;
    transition: all var(--ds-trans); font-size: var(--ds-text-md);
    color: var(--ds-text-secondary); font-weight: 450;
    border-left: 2px solid transparent;
}
.ds-sidebar__item:hover { background: var(--ds-bg-hover); color: var(--ds-text-primary); }
.ds-sidebar__item--active {
    background: var(--ds-bg-active); color: var(--ds-accent); font-weight: 600;
    border-left-color: var(--ds-accent); border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0;
}
.ds-sidebar__item .material-symbols-outlined { font-size: var(--ds-icon-md); opacity: 0.7; }
.ds-sidebar__item .ds-badge { margin-left: auto; }

.ds-sidebar--compact { width: 190px; padding: 6px 0; }
.ds-sidebar--compact .ds-sidebar__group-title { padding: 8px 10px 3px; font-size: var(--ds-text-2xs); }
.ds-sidebar--compact .ds-sidebar__item { font-size: var(--ds-text-sm); padding: 5px 10px 5px 14px; margin: 0 3px; }

@media (max-width: 768px) {
    .ds-sidebar {
        width: 100%; border-right: none; border-bottom: 1px solid var(--ds-border);
        display: flex; overflow-x: auto; padding: 6px; gap: var(--ds-gap-xs);
    }
    .ds-sidebar__group { display: contents; }
    .ds-sidebar__group-title { display: none; }
    .ds-sidebar__item { white-space: nowrap; padding: 6px 12px; border-left: none; border-bottom: 2px solid transparent; }
    .ds-sidebar__item--active { border-left: none; border-bottom-color: var(--ds-accent); border-radius: var(--ds-radius-sm); }
    .ds-badge { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   14. LAYOUTS
   ═══════════════════════════════════════════════════════════ */
.ds-layout {
    display: flex; gap: 0; min-height: 520px;
    border-radius: var(--ds-radius-xl); overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.015);
}
.ds-layout__content { flex: 1; overflow-y: auto; padding: 24px 28px; }

.ds-split { display: flex; gap: var(--ds-gap-lg); align-items: flex-start; }
.ds-split__left  { flex: 1; min-width: 0; }
.ds-split__right { flex: 1; min-width: 0; }
@media (max-width: 900px) { .ds-split { flex-direction: column; } }

/* ═══════════════════════════════════════════════════════════
   15. TOAST
   ═══════════════════════════════════════════════════════════ */
.ds-toast {
    position: fixed; bottom: 24px; right: 24px;
    background: #065f46; color: #d1fae5;
    padding: 10px 20px; border-radius: var(--ds-radius-lg);
    font-size: var(--ds-text-sm); font-weight: 500; z-index: 9999;
    opacity: 0; transition: opacity var(--ds-trans-slow);
    pointer-events: none; box-shadow: var(--ds-shadow-md);
}
.ds-toast--visible { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   16. ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
.ds-fade-in { animation: dsFadeIn 0.2s ease; }
@keyframes dsFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   17. UTILITIES
   ═══════════════════════════════════════════════════════════ */
.ds-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════
   18. GRID ROW (for audit/scan result rows)
   ═══════════════════════════════════════════════════════════ */
.ds-grid-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-gap-xs);
    padding: var(--ds-gap-md);
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    transition: background var(--ds-trans-fast);
}
.ds-grid-row:hover { background: var(--ds-bg-hover); }
.ds-grid-row__label {
    font-size: var(--ds-text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text-muted);
}
.ds-grid-row__value {
    font-size: var(--ds-text-sm);
    color: var(--ds-text-secondary);
    word-break: break-word;
}

@media (min-width: 640px) {
    .ds-grid-row { grid-template-columns: 200px 1fr; gap: var(--ds-gap-md); align-items: center; }
}

/* ═══════════════════════════════════════════════════════════
   19. ACCORDION (details/summary toggle)
   ═══════════════════════════════════════════════════════════ */
.ds-accordion {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}
.ds-accordion > summary {
    display: flex; align-items: center; gap: var(--ds-gap-sm);
    padding: 10px 14px; cursor: pointer;
    font-size: var(--ds-text-sm); font-weight: 600;
    color: var(--ds-text-primary);
    background: var(--ds-bg-surface);
    list-style: none;
    transition: background var(--ds-trans-fast);
}
.ds-accordion > summary::-webkit-details-marker { display: none; }
.ds-accordion > summary::marker { display: none; content: none; }
.ds-accordion > summary:hover { background: var(--ds-bg-hover); }
.ds-accordion > summary .ds-accordion__chevron {
    transition: transform var(--ds-trans);
    font-size: var(--ds-icon-sm);
    color: var(--ds-text-muted);
}
.ds-accordion[open] > summary .ds-accordion__chevron {
    transform: rotate(90deg);
}
.ds-accordion__body {
    padding: 12px 14px;
    border-top: 1px solid var(--ds-border);
}

/* ═══════════════════════════════════════════════════════════
   20. SCORE PILL (percentage badges)
   ═══════════════════════════════════════════════════════════ */
.ds-score {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: var(--ds-radius-full);
    font-size: var(--ds-text-xs); font-weight: 600;
    font-family: var(--ds-font-mono);
    white-space: nowrap;
}
.ds-score--good { background: rgba(52,211,153,0.15); color: var(--ds-success); }
.ds-score--warn { background: rgba(251,191,36,0.15); color: var(--ds-warning); }
.ds-score--bad  { background: rgba(248,113,113,0.15); color: var(--ds-danger); }
.ds-score--info { background: var(--ds-bg-active); color: var(--ds-accent); }

/* ═══════════════════════════════════════════════════════════
   21. EMPTY STATE
   ═══════════════════════════════════════════════════════════ */
.ds-empty {
    text-align: center; padding: 32px 16px;
    font-size: var(--ds-text-sm); color: var(--ds-text-dim);
}

/* ═══════════════════════════════════════════════════════════
   22. FLOATING NOTIFICATIONS (toast stack)
   Container: <div id="ds-notify" class="ds-notify"></div>
   Trigger:   dsNotify('success', 'Message text')
   ═══════════════════════════════════════════════════════════ */
.ds-notify {
    position: fixed; top: 16px; right: 16px; z-index: 99999;
    display: flex; flex-direction: column; gap: 8px;
    max-width: 380px; pointer-events: none;
}
.ds-notify__item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: var(--ds-radius-lg);
    font-size: var(--ds-text-sm); font-weight: 500; line-height: 1.3;
    pointer-events: auto; cursor: pointer;
    animation: dsNotifyIn 0.3s ease;
    box-shadow: var(--ds-shadow-md);
    backdrop-filter: blur(12px);
    transition: opacity 0.25s, transform 0.25s;
}
.ds-notify__item--out {
    opacity: 0; transform: translateX(60px);
}
.ds-notify__item--success {
    background: rgba(6,95,70,0.92); color: #d1fae5; border: 1px solid rgba(52,211,153,0.3);
}
.ds-notify__item--error {
    background: rgba(127,29,29,0.92); color: #fecaca; border: 1px solid rgba(248,113,113,0.3);
}
.ds-notify__item--info {
    background: rgba(12,74,110,0.92); color: #bae6fd; border: 1px solid rgba(56,189,248,0.3);
}
.ds-notify__item--warning {
    background: rgba(120,53,15,0.92); color: #fde68a; border: 1px solid rgba(251,191,36,0.3);
}
.ds-notify__icon { flex-shrink: 0; font-size: 20px; line-height: 1; }
.ds-notify__msg { flex: 1; }
.ds-notify__close { flex-shrink: 0; font-size: 18px; opacity: 0.5; transition: opacity 0.15s; background: none; border: none; color: inherit; cursor: pointer; padding: 0; line-height: 1; }
.ds-notify__close:hover { opacity: 1; }

@keyframes dsNotifyIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 480px) {
    .ds-notify { left: 8px; right: 8px; top: 8px; max-width: none; }
}


/* ═══ ds-table – Adattábla komponens ═══ */
.ds-table { width:100% !important; border-collapse:collapse !important; font-size:12px; }
.ds-table thead tr { text-align:left; color:#94a3b8; border-bottom:1px solid rgba(255,255,255,0.08) !important; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; }
.ds-table thead th { padding:10px 12px; font-weight:600; }
.ds-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.04) !important; transition:background 0.15s; }
.ds-table tbody tr:hover { background:rgba(255,255,255,0.03); }
.ds-table tbody td { padding:8px 12px; color:#cbd1e1; }
.ds-table td.ds-table__mono { font-family:'JetBrains Mono','SF Mono',monospace; font-size:11px; color:#7dd3fc; }
.ds-table td.ds-table__muted { color:#64748b; font-size:11px; }
.ds-table td.ds-table__right { text-align:right; }
.ds-table .ds-table__badge { display:inline-block; padding:1px 8px; border-radius:4px; font-size:10px; font-weight:600; background:rgba(56,189,248,0.1); color:#7dd3fc; border:1px solid rgba(56,189,248,0.2); }
.ds-table--sm { font-size:11px; }
.ds-table--sm thead th { padding:6px 12px; }
.ds-table--sm tbody td { padding:6px 12px; }
.ds-table__badge--scraper { background:rgba(245,158,11,0.12) !important; color:#fcd34d !important; border-color:rgba(245,158,11,0.25) !important; }
.ds-table__badge--analyzer { background:rgba(139,92,246,0.12) !important; color:#c4b5fd !important; border-color:rgba(139,92,246,0.25) !important; }
.ds-table__badge--general { background:rgba(100,116,139,0.12) !important; color:#94a3b8 !important; border-color:rgba(100,116,139,0.25) !important; }
.ds-table__badge--thumbnail { background:rgba(56,189,248,0.12) !important; color:#7dd3fc !important; border-color:rgba(56,189,248,0.25) !important; }

/* ═══ ds-text-label – Kisméretű felirat/csoportcímke ═══ */
.ds-text-label {
    font-size: 9px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: #64748b; user-select: none;
}

/* ═══════════════════════════════════════════════════════════
   23. STATUS CARD (pipeline stat kártyák)
   ═══════════════════════════════════════════════════════════ */
.ds-status-card {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    flex: 1; min-width: 0; text-align: center;
    background: rgba(255,255,255,0.05); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--ds-radius-md); padding: 4px 8px 5px;
    transition: background var(--ds-trans), border-color var(--ds-trans);
    text-decoration: none; cursor: pointer;
}
.ds-status-card:hover { background: rgba(255,255,255,0.08); }
.ds-status-card__label {
    font-size: var(--ds-text-2xs); text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ds-text-muted);
}
.ds-status-card__value {
    font-size: var(--ds-text-base); font-weight: 900;
}
.ds-status-card__icon {
    font-size: 14px; opacity: 0.6;
}

/* ── Color variants ── */
.ds-status-card--amber           { border-color: rgba(245,158,11,0.3); }
.ds-status-card--amber .ds-status-card__value,
.ds-status-card--amber .ds-status-card__icon { color: #fbbf24; }
.ds-status-card--amber.ds-status-card--active { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.5); }

.ds-status-card--violet          { border-color: rgba(139,92,246,0.3); }
.ds-status-card--violet .ds-status-card__value,
.ds-status-card--violet .ds-status-card__icon { color: #a78bfa; }
.ds-status-card--violet.ds-status-card--active { background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.5); }

.ds-status-card--sky             { border-color: rgba(56,189,248,0.3); }
.ds-status-card--sky .ds-status-card__value,
.ds-status-card--sky .ds-status-card__icon { color: #38bdf8; }
.ds-status-card--sky.ds-status-card--active { background: rgba(56,189,248,0.08); border-color: rgba(56,189,248,0.5); }

.ds-status-card--emerald         { border-color: rgba(52,211,153,0.3); }
.ds-status-card--emerald .ds-status-card__value,
.ds-status-card--emerald .ds-status-card__icon { color: #34d399; }
.ds-status-card--emerald.ds-status-card--active { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.5); }

.ds-status-card--indigo          { border-color: rgba(99,102,241,0.3); }
.ds-status-card--indigo .ds-status-card__value,
.ds-status-card--indigo .ds-status-card__icon { color: #818cf8; }
.ds-status-card--indigo.ds-status-card--active { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.5); }

.ds-status-card--rose            { border-color: rgba(251,113,133,0.3); }
.ds-status-card--rose .ds-status-card__value,
.ds-status-card--rose .ds-status-card__icon { color: #fb7185; }
.ds-status-card--rose.ds-status-card--active { background: rgba(251,113,133,0.08); border-color: rgba(251,113,133,0.5); }

.ds-status-card--red             { border-color: rgba(239,68,68,0.3); }
.ds-status-card--red .ds-status-card__value,
.ds-status-card--red .ds-status-card__icon { color: #f87171; }
.ds-status-card--red.ds-status-card--active { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.5); }

.ds-status-card--slate           { border-color: rgba(148,163,184,0.3); }
.ds-status-card--slate .ds-status-card__value,
.ds-status-card--slate .ds-status-card__icon { color: #94a3b8; }
.ds-status-card--slate.ds-status-card--active { background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.5); }

.ds-status-card--teal            { border-color: rgba(20,184,166,0.3); }
.ds-status-card--teal .ds-status-card__value,
.ds-status-card--teal .ds-status-card__icon { color: #2dd4bf; }
.ds-status-card--teal.ds-status-card--active { background: rgba(20,184,166,0.08); border-color: rgba(20,184,166,0.5); }

.ds-status-card--fuchsia         { border-color: rgba(217,70,239,0.3); }
.ds-status-card--fuchsia .ds-status-card__value,
.ds-status-card--fuchsia .ds-status-card__icon { color: #e879f9; }
.ds-status-card--fuchsia.ds-status-card--active { background: rgba(217,70,239,0.08); border-color: rgba(217,70,239,0.5); }

/* ═══════════════════════════════════════════════════════════
   24. STATUS BADGE (pipeline státusz jelölő)
   ═══════════════════════════════════════════════════════════ */
.ds-status-badge {
    display: inline-block; padding: 1px 7px; border-radius: var(--ds-radius-sm);
    font-size: var(--ds-text-xs); font-weight: 600;
    line-height: 1.5;
}
.ds-status-badge--discovered  { background: rgba(245,158,11,0.12); color: #fcd34d; }
.ds-status-badge--scraped     { background: rgba(139,92,246,0.12); color: #c4b5fd; }
.ds-status-badge--thumb_done    { background: rgba(14,165,233,0.12); color: #7dd3fc; }
.ds-status-badge--rewrite_done  { background: rgba(20,184,166,0.12); color: #5eead4; }
.ds-status-badge--ready       { background: rgba(52,211,153,0.12); color: #6ee7b7; }
.ds-status-badge--distributed { background: rgba(99,102,241,0.12); color: #a5b4fc; }
.ds-status-badge--revoked  { background: rgba(148,163,184,0.12); color: #94a3b8; text-decoration: line-through; }