.btn {
  @apply inline-flex items-center justify-center 
         font-semibold rounded-lg px-6 py-3
         text-base transition-all duration-200
         cursor-pointer select-none;
}

.btn-primary {
  @apply border-none;
  background: var(--btn-background);
  color: var(--btn-text);
}

.btn-primary:hover {
  filter: brightness(0.95);
}

.btn-outline {
  @apply border border-solid;
  border-color: var(--btn-outline-border);
  color: var(--btn-outline-text);
  background: var(--btn-outline-background);
}

.btn-outline:hover {
  background-color: var(--btn-outline-background-hover);
  color: var(--btn-outline-text-hover);
}

.btn-ghost {
  background-color: transparent;
  color: var(--btn-ghost-text);
}

.btn-ghost:hover {
  background-color: var(--btn-ghost-hover-bg);
}

.fuz-input {
  width: 100%;
  padding: 0.75rem 1rem; /* bardziej eleganckie */
  border-radius: 0.75rem;

  /* Kolory z theme.css */
  background-color: var(--f-background);
  color: var(--f-text);
  border: 1px solid var(--fuz-border, #d1d5db); /* fallback dla bezpieczeństwa */

  box-shadow: 0 1px 2px rgba(0,0,0,0.06);

  transition: all 0.2s ease;
}

/* Hover odcien zależny od border, nie od Tailwind */
.fuz-input:hover {
  border-color: var(--f-text);
  opacity: 0.9;
}

/* Placeholder — używa f-text ale jaśniejszy */
.fuz-input::placeholder {
  color: color-mix(in srgb, var(--f-text) 40%, transparent);
}

/* Focus — używa accent */
.fuz-input:focus {
  outline: none;
  border-color: var(--fuz-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fuz-accent) 40%, transparent);
}

/* Error */
.fuz-input-error {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.3) !important;
}

/* Disabled */
.fuz-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: color-mix(in srgb, var(--f-background) 80%, #888);
}

/* Textarea */
/* textarea.fuz-input {
  resize: none;
} */

/* .fuz-link {
  color: var(--fuz-accent);
  transition: color 0.2s ease;
} */


/* Kapsuła — input + dropdown jako jedna całość */
.autocomplete-wrapper {
  position: relative;
}

/* Input (gdy dropdown otwarty) */
.autocomplete-open {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-width: 0 !important;
}

/* Dropdown */
.autocomplete-list {
  @apply absolute left-0 right-0 z-50 bg-[var(--f-background)] text-[var(--f-text)]
         border border-gray-300 dark:border-slate-700
         rounded-b-xl shadow-xl max-h-56 overflow-auto;

  border-top: none; /* ważne */
  animation: fadeIn 0.12s ease-out;
}

.autocomplete-list li {
  @apply px-4 py-2 cursor-pointer transition-colors;
}

.autocomplete-list li:hover,
.autocomplete-list li.active {
  @apply bg-gray-100 dark:bg-slate-800;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}