/* ═══════════════════════════════════════════════════════
   styles-cards.css v14 — Карточный вид для мобильных устройств
   Rollback: удалить <link href="styles-cards.css"> из index.html
   ═══════════════════════════════════════════════════════ */

/* ── iOS Large Title — внутри card-list ── */
.card-list > .mob-large-title {
  padding: 6px 4px 2px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

/* ── @keyframes: карточки появляются снизу с fade ── */
@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Контейнер карточек ── */
.card-list {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  /* Запас снизу — чтобы последняя карточка не прятался под iOS Tab Bar */
  padding-bottom: calc(49px + env(safe-area-inset-bottom) + 12px);
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  width: 100%;
}

/* ── Отдельная карточка (B1: уменьшены padding/gap) ── */
.card-item {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.1s, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Entrance animation */
  animation: cardEntrance 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.card-item:active {
  background: var(--color-background-secondary);
  transform: scale(0.97);
}

/* ── Stagger delay: первые 6 карточек (child+1 т.к. mob-large-title = child(1)) ── */
.card-list > .card-item:nth-child(2)  { animation-delay: 0ms; }
.card-list > .card-item:nth-child(3)  { animation-delay: 40ms; }
.card-list > .card-item:nth-child(4)  { animation-delay: 75ms; }
.card-list > .card-item:nth-child(5)  { animation-delay: 105ms; }
.card-list > .card-item:nth-child(6)  { animation-delay: 130ms; }
.card-list > .card-item:nth-child(7)  { animation-delay: 150ms; }
.card-list > .card-item:nth-child(n+8) { animation-delay: 165ms; }
/* Fallback: если mob-large-title отсутствует — сдвиг начинается с child(1) */
.card-list > .card-item:nth-child(1)  { animation-delay: 0ms; }

/* ── Аватар (B1: 44→36px) ── */
.card-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; flex-shrink: 0;
  font-family: system-ui;
}

/* ── Тело карточки ── */
.card-body {
  flex: 1;
  min-width: 0;
}
.card-name {
  font-size: 14px; font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-sub + .card-sub {
  margin-top: 1px;
}

/* ── Правая часть (бейдж / ID / кнопки) ── */
.card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

/* ── A4: кнопка-карандаш вместо бейджа «Лид» ── */
.card-edit-btn {
  background: none;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  padding: 3px 7px;
  line-height: 1;
  color: var(--color-text-secondary);
  -webkit-tap-highlight-color: transparent;
  min-height: 28px;
}
.card-edit-btn:active { background: var(--color-background-secondary); }

/* ── B2: бейджи «нет документов» ── */
.mob-missing-badge {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--badge-orange-bg);
  color: var(--badge-orange-fg);
  white-space: nowrap;
  display: inline-block;
  line-height: 1.4;
}

/* ── Пустой список ── */
.card-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--color-text-secondary);
  font-size: 14px;
}

/* ── Мобильная статистика (C1–C3) ── */
.mob-stats {
  padding: 10px 12px 10px;
  border-bottom: 0.5px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-background-secondary);
}

/* ── iOS Today View — виджеты ── */
.mob-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
}
.mob-widget {
  background: var(--color-background-primary);
  border-radius: var(--border-radius-lg, 10px);
  border: 0.5px solid var(--color-border-tertiary);
  padding: 10px 8px 8px;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.mob-widget-val {
  font-size: 26px; font-weight: 700; line-height: 1.1;
  color: var(--color-text-primary);
}
.mob-widget-val--sm { font-size: 16px; font-weight: 700; line-height: 1.3; }
.mob-widget-label {
  font-size: 10px; color: var(--color-text-secondary); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.mob-widget.warn .mob-widget-val { color: var(--color-orange); }

/* ── Старые строки (group-rows, divider) — оставляем ── */
.mob-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
  font-size: 13px;
}
.mob-stat-label { color: var(--color-text-secondary); }
.mob-stat-value { font-weight: 600; color: var(--color-text-primary); }
.mob-stat-value.warn { color: var(--color-orange); }
.mob-stat-divider {
  border-top: 0.5px solid var(--color-border);
  margin: 6px 0 4px;
}
.mob-stat-group-row {
  display: flex;
  justify-content: space-between;
  padding: 1px 0 1px 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
  direction: rtl;
}
.mob-stat-add-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  text-align: center;
}

/* ── Фильтр-бар (горизонтальные чипы) ── */
.card-filter-bar {
  display: none; /* показывается через setMode */
  flex-direction: row;
  gap: 8px;
  padding: 8px 12px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
}
.card-filter-bar::-webkit-scrollbar { display: none; }

/* A1: шрифт в select-ах фильтров ── */
.card-filter-bar select,
#mod-payments-filter-bar select {
  font-size: var(--input-fs, 13px);
}

.card-filter-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border: 1.5px solid var(--color-border-secondary);
  background: var(--color-background-primary);
  color: var(--color-text-secondary);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  min-height: 34px;
}
.card-filter-chip.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* ── Фильтр-бар Оплат: два ряда чипов ── */
#mod-payments-filter-bar { flex-direction: column; }

/* ── WhatsApp ссылка в карточке ── */
a.card-wa-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
a.card-wa-link:active { color: #25D366; }