/* Wiederverwendbare Komponenten. Die Layer-Reihenfolge entspricht Tailwind 4, damit Utility-Klassen
   (z. B. "w-full", "!px-3") die Komponenten weiterhin überschreiben und Preflight sie nicht zurücksetzt. */
@layer theme, base, components, utilities;

@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--ep-radius);
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition: color, background-color, border-color, box-shadow, scale, opacity;
    transition-duration: 150ms;
    transition-timing-function: var(--ep-ease);
  }
  .btn:active { scale: 0.97; }
  .btn:disabled { opacity: 0.4; }

  .btn-primary {
    background-color: var(--ep-accent);
    color: var(--ep-on-accent);
    box-shadow: 0 4px 6px -1px var(--ep-accent-shadow), 0 2px 4px -2px var(--ep-accent-shadow);
  }
  .btn-primary:hover { background-color: var(--ep-accent-hover); }

  .btn-soft { background-color: var(--ep-soft-bg); color: var(--ep-soft-text); }
  .btn-soft:hover { background-color: var(--ep-soft-bg-hover); }

  .btn-danger {
    background-color: var(--rose-500);
    color: var(--white);
    box-shadow: 0 4px 6px -1px color-mix(in oklab, var(--rose-500) 20%, transparent);
  }
  .btn-danger:hover { background-color: var(--rose-400); }

  .icon-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ep-radius);
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: var(--ep-icon);
    transition: background-color 150ms var(--ep-ease), scale 150ms var(--ep-ease);
  }
  .icon-btn:hover { background-color: var(--ep-icon-hover-bg); }
  .icon-btn:active { scale: 0.95; }
  .icon-btn:disabled { opacity: 0.3; }

  .input {
    width: 100%;
    border: 1px solid var(--ep-input-border);
    border-radius: var(--ep-radius);
    background-color: var(--ep-input-bg);
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    line-height: 1.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    outline: none;
    transition: border-color 150ms var(--ep-ease), box-shadow 150ms var(--ep-ease);
  }
  .input::placeholder { color: var(--ep-placeholder); }
  .input:focus {
    border-color: var(--ep-focus);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--ep-focus) 15%, transparent);
  }

  .card {
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-lg);
    background-color: var(--ep-surface);
    box-shadow: var(--ep-shadow-card);
  }
}

@layer utilities {
  /* Grauer Hilfetext ist im Dunkelmodus eine Stufe heller, damit er lesbar bleibt. */
  .dark .text-slate-500 { color: var(--slate-400); }
}

#panel:empty { display: none; }