/* Meduza UI token source – dashboard/editor komponensek közös alapjai. */
:root {
    color-scheme: light;
    --meduza-color-surface: #f8fafc;
    --meduza-color-surface-raised: #ffffff;
    --meduza-color-surface-muted: #eef2f7;
    --meduza-color-text: #0f172a;
    --meduza-color-text-muted: #475569;
    --meduza-color-border: #cbd5e1;
    --meduza-color-brand: #1d4ed8;
    --meduza-color-info: #0369a1;
    --meduza-color-success: #047857;
    --meduza-color-warning: #b45309;
    --meduza-color-danger: #b91c1c;
    --meduza-color-focus: #1d4ed8;
    /* Tömör (kitöltött) gombok: a felirat (on-*) és a háttér (*-solid) párja >= 4.5:1. */
    --meduza-color-brand-solid: #1d4ed8;
    --meduza-color-brand-solid-hover: #1e40af;
    --meduza-color-on-brand: #ffffff;
    --meduza-color-danger-solid: #b91c1c;
    --meduza-color-danger-solid-hover: #991b1b;
    --meduza-color-on-danger: #ffffff;
    /* Fókuszgyűrű: vastagság és eltolás; a szín a --meduza-color-focus (>= 3:1). */
    --meduza-focus-ring-width: 2px;
    --meduza-focus-ring-offset: 2px;
    --meduza-color-info-bg: #e0f2fe;
    --meduza-color-success-bg: #d1fae5;
    --meduza-color-warning-bg: #fef3c7;
    --meduza-color-danger-bg: #fee2e2;
    --meduza-color-hover: #f1f5f9;
    --meduza-badge-green-bg: #d1fae5;
    --meduza-badge-green-fg: #065f46;
    --meduza-badge-red-bg: #fee2e2;
    --meduza-badge-red-fg: #991b1b;
    --meduza-badge-yellow-bg: #fef3c7;
    --meduza-badge-yellow-fg: #854d0e;
    --meduza-badge-blue-bg: #dbeafe;
    --meduza-badge-blue-fg: #1e40af;
    --meduza-badge-sky-bg: #e0f2fe;
    --meduza-badge-sky-fg: #0369a1;
    --meduza-badge-cyan-bg: #cffafe;
    --meduza-badge-cyan-fg: #164e63;
    --meduza-badge-indigo-bg: #e0e7ff;
    --meduza-badge-indigo-fg: #3730a3;
    --meduza-badge-purple-bg: #f3e8ff;
    --meduza-badge-purple-fg: #6b21a8;
    --meduza-color-border-subtle: #e2e8f0;
    --meduza-color-text-body: #334155;
    --meduza-color-selected-bg: #eff6ff;
    --meduza-color-text-subtle: #5b6b82;
    --meduza-color-input-bg: #ffffff;
    /* Beviteli mező kerete: >= 3:1 a mező és a környező felület ellen (WCAG 1.4.11). */
    --meduza-color-input-border: #64748b;
    --meduza-status-online: #059669;
    --meduza-status-offline: #64748b;
    --meduza-status-warning: #b45309;
    --meduza-status-danger: #b91c1c;
    --meduza-space-1: 0.25rem;
    --meduza-space-2: 0.5rem;
    --meduza-space-3: 0.75rem;
    --meduza-space-4: 1rem;
    --meduza-space-6: 1.5rem;
    --meduza-space-8: 2rem;
    --meduza-radius-sm: 0.375rem;
    --meduza-radius-md: 0.625rem;
    --meduza-radius-lg: 0.875rem;
    --meduza-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08);
    --meduza-shadow-md: 0 8px 24px rgb(15 23 42 / 0.14);
    --meduza-duration-fast: 150ms;
    --meduza-duration-normal: 220ms;
    --meduza-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --meduza-z-sticky: 20;
    --meduza-z-menu: 40;
    --meduza-z-modal: 100;
    --meduza-z-toast: 120;
}

/* Sötét téma: explicit (html[data-theme=dark] / .dark) vagy rendszerszintű
   (prefers-color-scheme), kivéve ha a felhasználó kifejezetten világosat kért.
   Az inline <style> blokkok ezeket a változókat használják. A kontrasztok:
   szöveg #f8fafc / #cbd5e1 a #0f172a-#1e293b felületen >= 7:1 (WCAG AAA). */
html[data-theme="dark"],
.dark {
    color-scheme: dark;
    --meduza-color-surface: #0f172a;
    --meduza-color-surface-raised: #1e293b;
    --meduza-color-surface-muted: #334155;
    --meduza-color-text: #f8fafc;
    --meduza-color-text-muted: #cbd5e1;
    --meduza-color-border: #64748b;
    --meduza-color-brand: #93c5fd;
    --meduza-color-info: #7dd3fc;
    --meduza-color-success: #6ee7b7;
    --meduza-color-warning: #fcd34d;
    --meduza-color-danger: #fca5a5;
    --meduza-color-focus: #93c5fd;
    --meduza-color-brand-solid: #2563eb;
    --meduza-color-brand-solid-hover: #1d4ed8;
    --meduza-color-on-brand: #ffffff;
    --meduza-color-danger-solid: #dc2626;
    --meduza-color-danger-solid-hover: #b91c1c;
    --meduza-color-on-danger: #ffffff;
    --meduza-color-info-bg: #0c4a6e;
    --meduza-color-success-bg: #064e3b;
    --meduza-color-warning-bg: #78350f;
    --meduza-color-danger-bg: #7f1d1d;
    --meduza-color-hover: #334155;
    --meduza-badge-green-bg: #064e3b;
    --meduza-badge-green-fg: #a7f3d0;
    --meduza-badge-red-bg: #7f1d1d;
    --meduza-badge-red-fg: #fecaca;
    --meduza-badge-yellow-bg: #713f12;
    --meduza-badge-yellow-fg: #fde68a;
    --meduza-badge-blue-bg: #1e3a8a;
    --meduza-badge-blue-fg: #bfdbfe;
    --meduza-badge-sky-bg: #0c4a6e;
    --meduza-badge-sky-fg: #bae6fd;
    --meduza-badge-cyan-bg: #164e63;
    --meduza-badge-cyan-fg: #a5f3fc;
    --meduza-badge-indigo-bg: #312e81;
    --meduza-badge-indigo-fg: #c7d2fe;
    --meduza-badge-purple-bg: #581c87;
    --meduza-badge-purple-fg: #e9d5ff;
    --meduza-color-border-subtle: #475569;
    --meduza-color-text-body: #e2e8f0;
    --meduza-color-selected-bg: #1e3a8a;
    --meduza-color-text-subtle: #a3b1c6;
    --meduza-color-input-bg: #334155;
    --meduza-color-input-border: #94a3b8;
    --meduza-status-online: #34d399;
    --meduza-status-offline: #94a3b8;
    --meduza-status-warning: #fcd34d;
    --meduza-status-danger: #fca5a5;
    --meduza-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --meduza-shadow-md: 0 8px 24px rgb(0 0 0 / 0.5);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --meduza-color-surface: #0f172a;
        --meduza-color-surface-raised: #1e293b;
        --meduza-color-surface-muted: #334155;
        --meduza-color-text: #f8fafc;
        --meduza-color-text-muted: #cbd5e1;
        --meduza-color-border: #64748b;
        --meduza-color-brand: #93c5fd;
        --meduza-color-info: #7dd3fc;
        --meduza-color-success: #6ee7b7;
        --meduza-color-warning: #fcd34d;
        --meduza-color-danger: #fca5a5;
        --meduza-color-focus: #93c5fd;
        --meduza-color-brand-solid: #2563eb;
        --meduza-color-brand-solid-hover: #1d4ed8;
        --meduza-color-on-brand: #ffffff;
        --meduza-color-danger-solid: #dc2626;
        --meduza-color-danger-solid-hover: #b91c1c;
        --meduza-color-on-danger: #ffffff;
        --meduza-color-info-bg: #0c4a6e;
        --meduza-color-success-bg: #064e3b;
        --meduza-color-warning-bg: #78350f;
        --meduza-color-danger-bg: #7f1d1d;
        --meduza-color-hover: #334155;
        --meduza-badge-green-bg: #064e3b;
        --meduza-badge-green-fg: #a7f3d0;
        --meduza-badge-red-bg: #7f1d1d;
        --meduza-badge-red-fg: #fecaca;
        --meduza-badge-yellow-bg: #713f12;
        --meduza-badge-yellow-fg: #fde68a;
        --meduza-badge-blue-bg: #1e3a8a;
        --meduza-badge-blue-fg: #bfdbfe;
        --meduza-badge-sky-bg: #0c4a6e;
        --meduza-badge-sky-fg: #bae6fd;
        --meduza-badge-cyan-bg: #164e63;
        --meduza-badge-cyan-fg: #a5f3fc;
        --meduza-badge-indigo-bg: #312e81;
        --meduza-badge-indigo-fg: #c7d2fe;
        --meduza-badge-purple-bg: #581c87;
        --meduza-badge-purple-fg: #e9d5ff;
        --meduza-color-border-subtle: #475569;
        --meduza-color-text-body: #e2e8f0;
        --meduza-color-selected-bg: #1e3a8a;
        --meduza-color-text-subtle: #a3b1c6;
        --meduza-color-input-bg: #334155;
        --meduza-color-input-border: #94a3b8;
        --meduza-status-online: #34d399;
        --meduza-status-offline: #94a3b8;
        --meduza-status-warning: #fcd34d;
        --meduza-status-danger: #fca5a5;
        --meduza-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
        --meduza-shadow-md: 0 8px 24px rgb(0 0 0 / 0.5);
    }
}

/* Egységes, kontrasztos fókuszjelölés minden billentyűzetes vezérlőhöz. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: var(--meduza-focus-ring-width, 2px) solid var(--meduza-color-focus);
    outline-offset: 3px;
}

/* A nem szükséges mozgás csökkentett mozgás esetén teljesen kikapcsolható. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* A modal/drawer görgetése ne terjedjen át a háttéroldalra. */
:where(.modal-overlay, [role="dialog"], [data-drawer]) {
    overscroll-behavior: contain;
}

/* 320 CSS px-en a dashboard tartalom ne kényszerítsen indokolatlan 2D scrollt. */
@media (max-width: 20rem) {
    .meduza-shell,
    .meduza-shell main,
    .meduza-shell section,
    .meduza-shell article {
        max-width: 100%;
        min-width: 0;
    }

    .meduza-shell table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

@media (forced-colors: active) {
    :where(button, a, input, select, textarea, [tabindex]):focus-visible {
        outline: 2px solid CanvasText;
        forced-color-adjust: none;
    }
}

/* Pulzáló/forgó animációk csökkentett mozgásnál: a jelzés statikus marad. */
@media (prefers-reduced-motion: reduce) {
    .pulse-online,
    .animate-pulse,
    .animate-spin,
    .spinner,
    [class*="pulse"] {
        animation: none !important;
    }
}

/* MeduzaUI.toast: egymásra halmozódó, aria-live értesítések. */
.meduza-toast-region {
    position: fixed;
    right: var(--meduza-space-4);
    bottom: var(--meduza-space-4);
    z-index: var(--meduza-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--meduza-space-2);
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.meduza-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--meduza-space-3);
    padding: var(--meduza-space-3) var(--meduza-space-4);
    border-radius: var(--meduza-radius-md);
    border: 1px solid var(--meduza-color-border);
    border-left-width: 4px;
    background: var(--meduza-color-surface-raised);
    color: var(--meduza-color-text);
    box-shadow: var(--meduza-shadow-md);
    animation: meduza-toast-in var(--meduza-duration-normal) var(--meduza-ease-standard);
}

.meduza-toast--success { border-left-color: var(--meduza-color-success); }
.meduza-toast--info { border-left-color: var(--meduza-color-info); }
.meduza-toast--warning { border-left-color: var(--meduza-color-warning); }
.meduza-toast--error { border-left-color: var(--meduza-color-danger); }

.meduza-toast__message {
    flex: 1;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: inherit;
    overflow-wrap: anywhere;
}

.meduza-toast__close {
    flex-shrink: 0;
    min-width: 2rem;
    min-height: 2rem;
    border: 0;
    border-radius: var(--meduza-radius-sm);
    background: transparent;
    color: var(--meduza-color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.meduza-toast__close:hover {
    background: var(--meduza-color-hover);
}

@keyframes meduza-toast-in {
    from { transform: translateY(0.5rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .meduza-toast { animation: none; }
}