/* ==========================================================================
   components.css — Reusable Apple-style component classes (Wave 0 foundation)
   ==========================================================================
   Требует подключённый tokens.css (используются var(--...) из него).

   НЕ подключён никуда (base.html и т.д.) — будет сделано в Волне 1.
   Классы .navbar-apple присутствуют, но нигде пока не применяются.
   ========================================================================== */

/* --------------------------------------------------------------------
   Keyframes — плавное появление карточек/секций при загрузке
   -------------------------------------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp var(--transition-slow) both;
}

/* --------------------------------------------------------------------
   .card-glass — стеклянная карточка с blur-эффектом
   -------------------------------------------------------------------- */
.card-glass {
  background: var(--color-surface);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--color-divider);
  border-top: 2px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-divider));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

/* --------------------------------------------------------------------
   .card-glass-compact — компактный вариант .card-glass (без blur, меньше
   padding/radius) для плотных списков мини-карточек, например карточек
   кандидатов в HR-канбане.
   -------------------------------------------------------------------- */
.card-glass-compact {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.card-glass-compact:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------
   Кнопки — Apple-style
   -------------------------------------------------------------------- */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
  user-select: none;
}

.btn-primary {
  background: var(--color-accent);
  color: #ffffff;
  box-shadow: var(--shadow-1);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2), var(--shadow-accent);
}

.btn-primary:active {
  background: var(--color-accent-active);
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}

.btn-primary:disabled {
  background: var(--color-neutral-dot);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.6;
}

.btn-secondary {
  background: var(--color-surface-solid);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}

.btn-secondary:active {
  background: var(--color-divider);
  transform: translateY(0);
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------------------------------------------
   Pills — статусные индикаторы (точка + текст) вместо кислотных бейджей
   -------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-family);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--color-neutral-bg);
  color: var(--color-neutral-text);
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.pill-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.pill-success::before {
  background: var(--color-success-dot);
}

.pill-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.pill-warning::before {
  background: var(--color-warning-dot);
}

.pill-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}
.pill-danger::before {
  background: var(--color-danger-dot);
}

.pill-neutral {
  background: var(--color-neutral-bg);
  color: var(--color-neutral-text);
}
.pill-neutral::before {
  background: var(--color-neutral-dot);
}

/* --------------------------------------------------------------------
   .table-modern — базовый стиль таблицы
   -------------------------------------------------------------------- */
.table-modern {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.table-modern thead th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-secondary);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.table-modern tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
  word-break: break-word;
}

.table-modern tbody tr {
  transition: background-color var(--transition-fast);
}

.table-modern tbody tr:hover {
  background-color: var(--color-surface-hover);
}

.table-modern tbody tr:last-child td {
  border-bottom: none;
}

/* --------------------------------------------------------------------
   .table-card-view — responsive паттерн "таблица → карточки" (мобильный)
   Реальные data-label атрибуты будут добавлены в HTML позже, отдельными
   волнами для конкретных страниц. Здесь только CSS-паттерн.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .table-card-view,
  .table-card-view thead,
  .table-card-view tbody,
  .table-card-view tr,
  .table-card-view td {
    display: block;
    width: 100%;
  }

  .table-card-view thead {
    position: absolute;
    left: -9999px;
    top: -9999px;
  }

  /* `display: block` выше имеет специфичность (0,1,1) и побеждает утилиту
     .hidden (0,1,0) из tailwind — из-за чего скрытые строки (формы «изменить»
     в /users, /advertisers и т.п.) на телефоне раскрывались ВСЕ и разом,
     давая до 45% высоты страницы мусора. Возвращаем скрытие явным правилом
     с большей специфичностью. Правило общее: .table-card-view стоит на 20
     шаблонах, чинить точечно каждый — тот же баг завтра в новом. */
  .table-card-view tr.hidden,
  .table-card-view td.hidden,
  .table-card-view tr[hidden],
  .table-card-view td[hidden] {
    display: none;
  }

  .table-card-view tr {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface-solid);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    border: 1px solid var(--color-divider);
  }

  .table-card-view td {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-divider);
    text-align: right;
  }

  .table-card-view td:last-child {
    border-bottom: none;
  }

  .table-card-view td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: left;
    margin-right: var(--space-3);
  }
}

/* --------------------------------------------------------------------
   Модалка — blur-фон + fade/scale анимация открытия
   -------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: modalFadeIn var(--transition-base) both;
}

.modal-panel {
  background: var(--color-surface-solid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  border: 1px solid var(--color-divider);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  animation: modalScaleIn var(--transition-slow) both;
}

/* --------------------------------------------------------------------
   .input-modern — поле ввода/поиска
   -------------------------------------------------------------------- */
.input-modern {
  width: 100%;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-modern::placeholder {
  color: var(--color-text-tertiary);
}

.input-modern:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

/* --------------------------------------------------------------------
   .tabs-segmented — сегментированный контрол для табов (Apple-style)
   -------------------------------------------------------------------- */
.tabs-segmented {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-neutral-bg);
  border-radius: var(--radius-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.tabs-segmented::-webkit-scrollbar {
  display: none;
}

.tabs-segmented .tab-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.tabs-segmented .tab-item:hover {
  color: var(--color-text-primary);
}

.tabs-segmented .tab-item.active {
  background: var(--color-surface-solid);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-1);
}

/* --------------------------------------------------------------------
   .navbar-apple — навбар (sticky, blur), классы объявлены, но НЕ
   применены в base.html — это будет отдельным агентом в Волне 1.
   -------------------------------------------------------------------- */
.navbar-apple {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: rgba(245, 245, 247, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--color-divider);
}

.navbar-apple a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.navbar-apple a:hover,
.navbar-apple a.active {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------
   tw-* — токен-утилиты (короткие классы поверх var(--color-*)),
   заменяют инлайновые style="color:...". Добавлено при QA-полировке
   редизайна, чтобы устранить неопределённые классы, случайно оставшиеся
   в разметке без соответствующего CSS.
   -------------------------------------------------------------------- */
.tw-text-primary   { color: var(--color-text-primary); }
.tw-text-secondary { color: var(--color-text-secondary); }
.tw-text-tertiary  { color: var(--color-text-tertiary); }
.tw-text-accent    { color: var(--color-accent); }
.tw-text-danger    { color: var(--color-danger-text); }
.tw-text-warning   { color: var(--color-warning-text); }

.tw-bg-hover        { background-color: var(--color-surface-hover); }
.tw-bg-warning      { background-color: var(--color-warning-bg); }
.tw-bg-accent-soft  { background-color: var(--color-accent-soft); }

.tw-border          { border: 1px solid var(--color-divider); }
.tw-border-divider  { border-color: var(--color-divider); }
.tw-border-t         { border-top: 1px solid var(--color-divider); }

.hover\:tw-bg-hover:hover     { background-color: var(--color-surface-hover); }
.hover\:tw-text-danger:hover  { color: var(--color-danger-text); }
.hover\:tw-opacity-70:hover   { opacity: 0.7; }
.hover\:tw-opacity-80:hover   { opacity: 0.8; }
.hover\:tw-opacity-90:hover   { opacity: 0.9; }