/* Birka — тёмная тема в стиле Cursor */

.nav-link {
  @apply px-3 py-2 rounded-lg text-sm font-medium text-zinc-400 hover:text-white hover:bg-white/5 transition;
}

.nav-link-active {
  @apply text-white bg-white/10;
}

.nav-link-active:hover {
  @apply text-white bg-white/15;
}

.mobile-nav-link {
  @apply block py-2 text-sm font-medium text-zinc-400 hover:text-white transition rounded-lg px-2;
}

.mobile-nav-link--logout {
  @apply text-red-400 hover:text-red-300;
}

.btn-primary {
  @apply inline-flex items-center justify-center px-5 py-2.5 rounded-md text-sm font-semibold text-black bg-white hover:bg-zinc-200 focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black transition;
}

.btn-secondary {
  @apply inline-flex items-center justify-center px-5 py-2.5 rounded-md text-sm font-semibold text-white bg-transparent hover:bg-zinc-900 border border-zinc-800 focus:outline-none focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-black transition;
}

.btn-danger {
  @apply inline-flex items-center justify-center px-5 py-2.5 rounded-md text-sm font-semibold text-white bg-red-600 hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:ring-offset-2 focus:ring-offset-black transition;
}

.card {
  @apply bg-transparent rounded-xl border border-zinc-800/40 overflow-hidden transition-all duration-300 hover:border-zinc-700;
}

/* Формы — стиль Cursor: тёмная карточка, тёмные поля, минимум декора */
.form-group {
  @apply mb-4;
}

.form-label {
  @apply block text-sm font-medium text-zinc-400 mb-1.5;
}

.form-input {
  @apply w-full min-h-[40px] px-3 py-2 rounded-md text-sm text-zinc-100 placeholder-zinc-500 outline-none transition-all duration-200;
  background-color: transparent;
  border: 1px solid rgb(39 39 42);
}

.form-input:hover {
  border-color: rgb(82 82 91);
}

.form-input:focus {
  border-color: rgb(161 161 170);
  box-shadow: 0 0 0 1px rgb(161 161 170);
}

.form-input:disabled {
  @apply opacity-60 cursor-not-allowed;
}

.form-input[readonly] {
  background-color: transparent;
  border-color: rgb(39 39 42);
  @apply cursor-default;
}

/* Подсказки под полем — компактно, приглушённо */
.form-help {
  @apply mt-1.5 text-xs text-zinc-500 leading-relaxed;
}

.form-error {
  @apply mt-1.5 text-xs text-red-400;
}

/* Все поля в формах и карточках — единый тёмный вид (zinc-800) */
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form input[type="url"],
form textarea,
.card input[type="text"],
.card input[type="email"],
.card input[type="password"],
.card input[type="number"],
.card input[type="file"],
.card textarea {
  @apply w-full min-h-[40px] px-3 py-2 rounded-md text-sm text-zinc-100 placeholder-zinc-500 outline-none transition-all duration-200;
  background-color: transparent;
  border: 1px solid rgb(39 39 42);
}

form input:hover,
form textarea:hover,
.card input:hover,
.card textarea:hover {
  border-color: rgb(82 82 91);
}

form input:focus,
form textarea:focus,
.card input:focus,
.card textarea:focus {
  border-color: rgb(161 161 170);
  box-shadow: 0 0 0 1px rgb(161 161 170);
}

form textarea,
.card textarea {
  @apply min-h-[100px] py-2 resize-y;
}

.card input[type="file"] {
  @apply min-h-[40px] py-1.5 file:mr-4 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-sm file:cursor-pointer;
  background-color: transparent;
  border: 1px solid rgb(39 39 42);
}

.card input[type="file"]::file-selector-button {
  background-color: rgb(39 39 42);
  color: rgb(244 244 245);
}

.card input[type="file"]::file-selector-button:hover {
  background-color: rgb(63 63 70);
}

/* Карточка формы входа/регистрации — как у Cursor */
.auth-card {
  @apply rounded-xl border p-8 w-full max-w-[360px] mx-auto;
  background-color: transparent;
  border-color: rgb(39 39 42);
}

.auth-card .form-group:last-of-type {
  @apply mb-0;
}

/* Разделитель "Или войти через" */
.auth-divider {
  @apply flex items-center gap-4 my-6;
}

.auth-divider::before,
.auth-divider::after {
  @apply flex-1 h-px;
  background-color: rgb(63 63 70);
  content: "";
}

.auth-divider span {
  @apply text-xs font-medium text-zinc-500 uppercase tracking-wider;
}

/* Кнопки соц. сетей */
.auth-social {
  @apply flex flex-col gap-3;
}

.auth-social-btn {
  @apply w-full inline-flex items-center justify-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium border transition;
  background-color: rgb(39 39 42);
  border-color: rgb(63 63 70);
  color: rgb(244 244 245);
}

.auth-social-btn:hover {
  background-color: rgb(63 63 70);
  border-color: rgb(82 82 91);
}

.section-title {
  @apply text-3xl sm:text-4xl font-bold text-white tracking-tight;
}

.section-subtitle {
  @apply mt-3 text-lg text-zinc-400 max-w-2xl mx-auto;
}