/* ==========================================================================
   EzClap Design System — tokens + shared components
   ==========================================================================
   All classes are namespaced .ez-* so they never collide with legacy
   per-page styles. Pages migrate onto these one at a time; once a page
   is fully migrated its inline <style> block shrinks to page-specific
   layout only.

   Rules of the system (keep it boring, keep it consistent):
   - Two corner radii only: --ez-r-ctl (controls) and --ez-r-card (surfaces),
     plus --ez-r-pill for pills/avatars.
   - No glow shadows, no hover translateY lifts, no gradient text.
     Elevation = border + flat shadow. Motion = opacity/background only.
   - Emoji are never UI icons. Inline SVG (Lucide-style, 24x24 viewBox,
     currentColor) only.
   - lowercase is the brand voice (inherited from body). Never re-apply
     uppercase except .ez-overline.
   ========================================================================== */

:root {
    /* ---- color: derived from legacy vars so retro themes stay coherent
            during migration; fallbacks are the canonical EzClap dark. ---- */
    --ez-bg:            var(--bg-color, #0F1B20);
    --ez-surface:       var(--surface-color, #18252B);
    --ez-surface-2:     var(--sidebar-hover, #1D2C33);
    --ez-border:        var(--border-color, #2A3A41);
    --ez-border-strong: #33484F;

    --ez-accent:        var(--primary-color, #66F3DF);
    --ez-accent-ink:    #062A26;              /* text on accent fills */
    --ez-accent-dim:    rgba(102, 243, 223, 0.14);
    --ez-purple:        #8A5DFF;

    --ez-text:          var(--text-color, #E4ECEF);
    --ez-text-muted:    var(--text-muted, #9CAEB5);
    --ez-text-faint:    rgba(156, 174, 181, 0.55);

    --ez-success:       var(--success-color, #27D49A);
    --ez-danger:        var(--error-color, #EF5350);
    --ez-warning:       #F4B400;
    --ez-info:          #42A5F5;
    --ez-success-dim:   rgba(39, 212, 154, 0.14);
    --ez-danger-dim:    rgba(239, 83, 80, 0.14);
    --ez-warning-dim:   rgba(244, 180, 0, 0.14);
    --ez-info-dim:      rgba(66, 165, 245, 0.14);

    /* ---- radii ---- */
    --ez-r-ctl:  6px;
    --ez-r-card: 10px;
    --ez-r-pill: 999px;

    /* ---- spacing scale ---- */
    --ez-s1: 4px;
    --ez-s2: 8px;
    --ez-s3: 12px;
    --ez-s4: 16px;
    --ez-s5: 24px;
    --ez-s6: 32px;
    --ez-s7: 48px;

    /* ---- type scale ---- */
    --ez-fs-xs:   0.75rem;
    --ez-fs-sm:   0.85rem;
    --ez-fs-base: 0.95rem;
    --ez-fs-lg:   1.1rem;
    --ez-fs-xl:   1.35rem;
    --ez-fs-2xl:  1.7rem;

    /* ---- elevation (flat, no glow) ---- */
    --ez-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --ez-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35);

    /* ---- focus ring ---- */
    --ez-focus: 0 0 0 2px var(--ez-bg), 0 0 0 4px rgba(102, 243, 223, 0.5);

    /* ---- motion ---- */
    --ez-t-fast: 120ms ease;
    --ez-t-med:  200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ez-t-fast: 0ms;
        --ez-t-med: 0ms;
    }
}

/* ==========================================================================
   Icons — inline SVG, sized by wrapper context
   ========================================================================== */
.ez-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    vertical-align: -3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ez-icon--sm { width: 14px; height: 14px; }
.ez-icon--lg { width: 24px; height: 24px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.ez-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ez-s2);
    padding: 9px 16px;
    border-radius: var(--ez-r-ctl);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: var(--ez-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition: background-color var(--ez-t-fast), border-color var(--ez-t-fast), color var(--ez-t-fast), opacity var(--ez-t-fast);
    background: var(--ez-surface-2);
    color: var(--ez-text);
    border-color: var(--ez-border);
}
.ez-btn:hover { background: var(--ez-border); }
.ez-btn:focus-visible { outline: none; box-shadow: var(--ez-focus); }
.ez-btn:active { opacity: 0.85; }
.ez-btn:disabled,
.ez-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.ez-btn--primary {
    background: var(--ez-accent);
    color: var(--ez-accent-ink);
    border-color: transparent;
}
.ez-btn--primary:hover { background: #4ADFC9; }

.ez-btn--danger {
    background: transparent;
    color: var(--ez-danger);
    border-color: rgba(239, 83, 80, 0.45);
}
.ez-btn--danger:hover { background: var(--ez-danger-dim); }

.ez-btn--danger-solid {
    background: var(--ez-danger);
    color: #fff;
    border-color: transparent;
}
.ez-btn--danger-solid:hover { background: #D84340; }

.ez-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ez-text-muted);
}
.ez-btn--ghost:hover { background: var(--ez-surface-2); color: var(--ez-text); }

.ez-btn--sm { padding: 5px 10px; font-size: var(--ez-fs-xs); gap: var(--ez-s1); }
.ez-btn--lg { padding: 12px 22px; font-size: var(--ez-fs-base); }

/* square icon-only button */
.ez-btn--icon {
    padding: 8px;
    gap: 0;
}
.ez-btn--icon.ez-btn--sm { padding: 5px; }

/* full-width (forms, modals on mobile) */
.ez-btn--block { width: 100%; }

/* ==========================================================================
   Cards
   ========================================================================== */
.ez-card {
    background: var(--ez-surface);
    border: 1px solid var(--ez-border);
    border-radius: var(--ez-r-card);
    box-shadow: var(--ez-shadow-1);
}
.ez-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ez-s3);
    padding: var(--ez-s4) var(--ez-s5);
    border-bottom: 1px solid var(--ez-border);
}
.ez-card__title {
    margin: 0;
    font-size: var(--ez-fs-lg);
    font-weight: 700;
    color: var(--ez-text);
}
.ez-card__body { padding: var(--ez-s5); }
.ez-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ez-s2);
    padding: var(--ez-s3) var(--ez-s5);
    border-top: 1px solid var(--ez-border);
}

/* ==========================================================================
   Forms
   ========================================================================== */
.ez-field { display: flex; flex-direction: column; gap: var(--ez-s1); margin-bottom: var(--ez-s4); }
.ez-label {
    font-size: var(--ez-fs-sm);
    font-weight: 600;
    color: var(--ez-text);
}
.ez-help {
    font-size: var(--ez-fs-xs);
    color: var(--ez-text-muted);
}

.ez-input,
.ez-select,
.ez-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border-radius: var(--ez-r-ctl);
    border: 1px solid var(--ez-border);
    background: var(--ez-bg);
    color: var(--ez-text);
    font-family: inherit;
    font-size: var(--ez-fs-sm);
    transition: border-color var(--ez-t-fast);
}
.ez-input::placeholder,
.ez-textarea::placeholder { color: var(--ez-text-faint); }
.ez-input:hover, .ez-select:hover, .ez-textarea:hover { border-color: var(--ez-border-strong); }
.ez-input:focus-visible, .ez-select:focus-visible, .ez-textarea:focus-visible {
    outline: none;
    border-color: var(--ez-accent);
    box-shadow: 0 0 0 3px var(--ez-accent-dim);
}
.ez-input--error { border-color: var(--ez-danger) !important; }
.ez-textarea { resize: vertical; min-height: 80px; }

/* toggle switch */
.ez-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: var(--ez-s2);
}
.ez-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ez-switch__track {
    width: 36px;
    height: 20px;
    border-radius: var(--ez-r-pill);
    background: var(--ez-border);
    transition: background-color var(--ez-t-fast);
    flex-shrink: 0;
    position: relative;
}
.ez-switch__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ez-text);
    transition: transform var(--ez-t-fast);
}
.ez-switch input:checked + .ez-switch__track { background: var(--ez-accent); }
.ez-switch input:checked + .ez-switch__track::after { transform: translateX(16px); background: var(--ez-accent-ink); }
.ez-switch input:focus-visible + .ez-switch__track { box-shadow: var(--ez-focus); }

/* ==========================================================================
   Badges / status pills
   ========================================================================== */
.ez-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ez-s1);
    padding: 3px 10px;
    border-radius: var(--ez-r-pill);
    font-size: var(--ez-fs-xs);
    font-weight: 700;
    line-height: 1.4;
    border: 1px solid var(--ez-border);
    background: var(--ez-surface-2);
    color: var(--ez-text-muted);
}
.ez-badge--accent  { background: var(--ez-accent-dim);  color: var(--ez-accent);  border-color: rgba(102,243,223,0.3); }
.ez-badge--success { background: var(--ez-success-dim); color: var(--ez-success); border-color: rgba(39,212,154,0.3); }
.ez-badge--danger  { background: var(--ez-danger-dim);  color: var(--ez-danger);  border-color: rgba(239,83,80,0.3); }
.ez-badge--warning { background: var(--ez-warning-dim); color: var(--ez-warning); border-color: rgba(244,180,0,0.3); }
.ez-badge--info    { background: var(--ez-info-dim);    color: var(--ez-info);    border-color: rgba(66,165,245,0.3); }

/* small dot for live/status indicators */
.ez-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ez-text-faint);
    display: inline-block;
    flex-shrink: 0;
}
.ez-dot--success { background: var(--ez-success); }
.ez-dot--danger  { background: var(--ez-danger); }
.ez-dot--warning { background: var(--ez-warning); }

/* ==========================================================================
   Overline / section labels (the ONE sanctioned uppercase)
   ========================================================================== */
.ez-overline {
    font-size: var(--ez-fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ez-text-muted);
}

/* ==========================================================================
   Tabs
   ========================================================================== */
.ez-tabs {
    display: flex;
    gap: var(--ez-s1);
    border-bottom: 1px solid var(--ez-border);
    flex-wrap: wrap;
}
.ez-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: var(--ez-fs-sm);
    font-weight: 600;
    color: var(--ez-text-muted);
    cursor: pointer;
    transition: color var(--ez-t-fast), border-color var(--ez-t-fast);
    white-space: nowrap;
}
.ez-tab:hover { color: var(--ez-text); }
.ez-tab:focus-visible { outline: none; box-shadow: var(--ez-focus); border-radius: var(--ez-r-ctl); }
.ez-tab[aria-selected="true"],
.ez-tab.is-active {
    color: var(--ez-accent);
    border-bottom-color: var(--ez-accent);
}

/* ==========================================================================
   Modal (used by EzUI.modal / EzUI.confirm in ui.js)
   ========================================================================== */
.ez-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 10, 12, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ez-s4);
    z-index: 1000;
    opacity: 0;
    transition: opacity var(--ez-t-med);
}
.ez-modal-backdrop.is-open { opacity: 1; }

.ez-modal {
    background: var(--ez-surface);
    border: 1px solid var(--ez-border);
    border-radius: var(--ez-r-card);
    box-shadow: var(--ez-shadow-2);
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    transform: translateY(8px);
    transition: transform var(--ez-t-med);
}
.ez-modal-backdrop.is-open .ez-modal { transform: translateY(0); }
.ez-modal--wide { max-width: 720px; }

.ez-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ez-s3);
    padding: var(--ez-s4) var(--ez-s5);
    border-bottom: 1px solid var(--ez-border);
}
.ez-modal__title { margin: 0; font-size: var(--ez-fs-lg); font-weight: 700; }
.ez-modal__body { padding: var(--ez-s5); overflow-y: auto; color: var(--ez-text-muted); font-size: var(--ez-fs-sm); line-height: 1.6; }
.ez-modal__body > :first-child { margin-top: 0; }
.ez-modal__body > :last-child { margin-bottom: 0; }
.ez-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--ez-s2);
    padding: var(--ez-s3) var(--ez-s5);
    border-top: 1px solid var(--ez-border);
}

/* ==========================================================================
   Toasts (rendered by EzUI.toast in ui.js)
   ========================================================================== */
.ez-toast-stack {
    position: fixed;
    bottom: var(--ez-s5);
    right: var(--ez-s5);
    display: flex;
    flex-direction: column;
    gap: var(--ez-s2);
    z-index: 1100;
    pointer-events: none;
    max-width: min(360px, calc(100vw - 32px));
}
.ez-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--ez-s2);
    background: var(--ez-surface-2);
    border: 1px solid var(--ez-border);
    border-left: 3px solid var(--ez-accent);
    border-radius: var(--ez-r-ctl);
    box-shadow: var(--ez-shadow-2);
    padding: var(--ez-s3) var(--ez-s4);
    color: var(--ez-text);
    font-size: var(--ez-fs-sm);
    line-height: 1.45;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--ez-t-med), transform var(--ez-t-med);
}
.ez-toast.is-visible { opacity: 1; transform: translateY(0); }
.ez-toast--success { border-left-color: var(--ez-success); }
.ez-toast--error   { border-left-color: var(--ez-danger); }
.ez-toast--warning { border-left-color: var(--ez-warning); }
.ez-toast--info    { border-left-color: var(--ez-info); }
.ez-toast .ez-icon { margin-top: 1px; }
.ez-toast--success .ez-icon { color: var(--ez-success); }
.ez-toast--error   .ez-icon { color: var(--ez-danger); }
.ez-toast--warning .ez-icon { color: var(--ez-warning); }
.ez-toast--info    .ez-icon { color: var(--ez-info); }

@media (max-width: 600px) {
    .ez-toast-stack { left: var(--ez-s4); right: var(--ez-s4); bottom: var(--ez-s4); }
}

/* ==========================================================================
   Empty states — the signature 9:16 phone frame motif
   ========================================================================== */
.ez-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ez-s3);
    padding: var(--ez-s7) var(--ez-s5);
    color: var(--ez-text-muted);
}
.ez-empty__title { margin: 0; font-size: var(--ez-fs-lg); font-weight: 700; color: var(--ez-text); }
.ez-empty__hint { margin: 0; font-size: var(--ez-fs-sm); max-width: 380px; line-height: 1.6; }

/* the phone frame: EzClap's recurring visual signature */
.ez-phone {
    width: 84px;
    height: 150px;
    border-radius: 14px;
    border: 2px solid rgba(102, 243, 223, 0.35);
    background: var(--ez-bg);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.ez-phone__gameplay { height: 58%; background: var(--ez-accent-dim); }
.ez-phone__cam {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: rgba(138, 93, 255, 0.22);
    border: 1px solid rgba(138, 93, 255, 0.45);
}
.ez-phone__caption {
    position: absolute;
    bottom: 14px;
    left: 8px;
    right: 8px;
    height: 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.16);
}

/* ==========================================================================
   Loading — skeletons + spinner (subtle, no rainbow shimmer)
   ========================================================================== */
.ez-skeleton {
    background: var(--ez-surface-2);
    border-radius: var(--ez-r-ctl);
    position: relative;
    overflow: hidden;
}
.ez-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045), transparent);
    animation: ez-skeleton-sweep 1.4s infinite;
}
@keyframes ez-skeleton-sweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .ez-skeleton::after { animation: none; }
}

.ez-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--ez-border);
    border-top-color: var(--ez-accent);
    border-radius: 50%;
    animation: ez-spin 0.7s linear infinite;
    flex-shrink: 0;
}
.ez-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes ez-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Utility
   ========================================================================== */
.ez-divider { height: 1px; background: var(--ez-border); border: none; margin: var(--ez-s4) 0; }
.ez-row { display: flex; align-items: center; gap: var(--ez-s2); }
.ez-row--between { justify-content: space-between; }
.ez-stack { display: flex; flex-direction: column; gap: var(--ez-s3); }
.ez-muted { color: var(--ez-text-muted); }
.ez-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}