/**
 * Eko Sampa — design tokens & UI primitives (no arbitrary z-[999999]).
 *
 * @package Eko_Sampa
 */

:root {
    /* Semantic colors */
    --eko-primary: #4f46e5;
    --eko-primary-hover: #4338ca;
    --eko-secondary: #10b981;
    --eko-danger: #ef4444;
    --eko-warning: #f59e0b;
    --eko-info: #06b6d4;

    /* Surfaces */
    --eko-surface: #ffffff;
    --eko-surface-muted: #f8fafc;
    --eko-border: #e2e8f0;
    --eko-text: #0f172a;
    --eko-text-muted: #64748b;

    /* Spacing scale (rem) */
    --eko-space-1: 0.25rem;
    --eko-space-2: 0.5rem;
    --eko-space-3: 0.75rem;
    --eko-space-4: 1rem;
    --eko-space-5: 1.25rem;
    --eko-space-6: 1.5rem;

    /* Typography */
    --eko-text-xs: 0.75rem;
    --eko-text-sm: 0.875rem;
    --eko-text-base: 1rem;
    --eko-text-lg: 1.125rem;

    /* Radius */
    --eko-radius-md: 0.5rem;
    --eko-radius-lg: 0.75rem;
    --eko-radius-xl: 1rem;

    /* Z-index stack (centralized) */
    --eko-z-base: 0;
    --eko-z-sticky: 30;
    --eko-z-dropdown: 40;
    --eko-z-tooltip: 50;
    --eko-z-toast: 60;
    --eko-z-modal: 100;
    --eko-z-modal-nested: 110;
    --eko-z-popover: 120;
}

/* Layer utility classes */
.eko-layer-sticky {
    z-index: var(--eko-z-sticky);
}
.eko-layer-dropdown {
    z-index: var(--eko-z-dropdown);
}
.eko-layer-tooltip {
    z-index: var(--eko-z-tooltip);
}
.eko-layer-toast {
    z-index: var(--eko-z-toast);
}
.eko-layer-modal {
    z-index: var(--eko-z-modal);
}
.eko-layer-modal-nested {
    z-index: var(--eko-z-modal-nested);
}

/* Body scroll lock (modal) */
html.eko-modal-open {
    overflow: hidden;
}
html.eko-modal-open body {
    overflow: hidden;
    touch-action: none;
}

/* Cards */
.eko-card {
    border-radius: var(--eko-radius-xl);
    border: 1px solid var(--eko-border);
    background: var(--eko-surface);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

/* Buttons */
.eko-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--eko-space-2);
    border-radius: var(--eko-radius-lg);
    font-size: var(--eko-text-sm);
    font-weight: 500;
    line-height: 1.25;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.eko-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.eko-btn-primary {
    background: var(--eko-primary);
    color: #fff;
    padding: var(--eko-space-2) var(--eko-space-4);
}
.eko-btn-primary:hover:not(:disabled) {
    background: var(--eko-primary-hover);
}
.eko-btn-secondary {
    border: 1px solid var(--eko-border);
    background: var(--eko-surface);
    color: var(--eko-text);
    padding: var(--eko-space-2) var(--eko-space-4);
}
.eko-btn-secondary:hover:not(:disabled) {
    background: var(--eko-surface-muted);
}

/* Inputs */
.eko-input {
    width: 100%;
    border-radius: var(--eko-radius-lg);
    border: 1px solid var(--eko-border);
    padding: var(--eko-space-2) var(--eko-space-3);
    font-size: var(--eko-text-sm);
    color: var(--eko-text);
}
.eko-input:focus {
    outline: none;
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgb(79 70 229 / 0.15);
}

/* UI states */
.eko-ui-loading,
.eko-ui-empty,
.eko-ui-error {
    border-radius: var(--eko-radius-lg);
    padding: var(--eko-space-4) var(--eko-space-5);
    font-size: var(--eko-text-sm);
}
.eko-ui-loading {
    display: flex;
    align-items: center;
    gap: var(--eko-space-3);
    color: var(--eko-text-muted);
    background: var(--eko-surface-muted);
}
.eko-ui-loading__spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--eko-border);
    border-top-color: var(--eko-primary);
    border-radius: 50%;
    animation: eko-spin 0.7s linear infinite;
}
@keyframes eko-spin {
    to {
        transform: rotate(360deg);
    }
}
.eko-ui-empty {
    text-align: center;
    color: var(--eko-text-muted);
    border: 1px dashed var(--eko-border);
    background: var(--eko-surface-muted);
}
.eko-ui-empty__title {
    font-weight: 600;
    color: var(--eko-text);
}
.eko-ui-error {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

/* Field list row */
.eko-field-row {
    transition: background-color 0.12s ease;
}
.eko-field-row.is-collapsed .eko-field-row__detail {
    display: none;
}

.eko-field-row.is-syncing {
    opacity: 0.65;
    pointer-events: none;
}

.eko-field-row.is-sync-error {
    background: #fef2f2;
}

/* Toasts */
.eko-toast-host {
    position: fixed;
    right: var(--eko-space-4);
    bottom: var(--eko-space-4);
    z-index: var(--eko-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--eko-space-2);
    max-width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.eko-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--eko-space-3);
    padding: var(--eko-space-3) var(--eko-space-4);
    border-radius: var(--eko-radius-lg);
    border: 1px solid var(--eko-border);
    background: var(--eko-surface);
    box-shadow: 0 10px 25px rgb(15 23 42 / 0.12);
    animation: eko-toast-in 0.2s ease-out;
}

@keyframes eko-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.eko-toast__icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.eko-toast__title {
    font-weight: 600;
    font-size: var(--eko-text-sm);
    color: var(--eko-text);
}

.eko-toast__message {
    font-size: var(--eko-text-sm);
    color: var(--eko-text-muted);
}

.eko-toast__close {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--eko-text-muted);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

.eko-toast--success .eko-toast__icon {
    background: #d1fae5;
    color: #047857;
}
.eko-toast--error .eko-toast__icon {
    background: #fee2e2;
    color: #b91c1c;
}
.eko-toast--warning .eko-toast__icon {
    background: #fef3c7;
    color: #b45309;
}
.eko-toast--info .eko-toast__icon {
    background: #e0f2fe;
    color: #0369a1;
}
.eko-toast--loading .eko-toast__icon {
    background: #e2e8f0;
    color: #475569;
}