/**
 * MA_Directions — стили карточек направлений (общий слой дашбордов по призмам).
 *
 * Вынесено из src/owner-dashboard/index.html (inline .owner-card*) под канон-
 * namespace .dir-card*. Разметка/визуал ИДЕНТИЧНЫ owner (после свопа owner
 * выглядит байт-в-байт). Два варианта:
 *   .dir-card             — mobile-триаж (полная карточка / тонкая строка collapsed)
 *   .dir-card--desktop    — карточка-навигатор (крупная плитка для desktop dashboard)
 *
 * Только CSS-токены theme.css (обе темы), 0 хардкод-цветов.
 */

/* --- Контейнер сетки карточек (mobile = колонка, desktop = грид) --- */
.dir-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  margin-bottom: var(--space-5);
}

/* --- Карточка направления --- */
.dir-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);   /* светофор — левая граница (F3) */
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dir-card.sig-red    { border-left-color: var(--red); }
.dir-card.sig-amber  { border-left-color: var(--yellow); }
.dir-card.sig-green  { border-left-color: var(--green); }
.dir-card.sig-gray   { border-left-color: var(--border); opacity: 0.78; }

.dir-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Светофор-точка в заголовке (НЕ emoji — span с фоном-токеном) */
.dir-sig-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border);
}
.sig-red   .dir-sig-dot { background: var(--red); }
.sig-amber .dir-sig-dot { background: var(--yellow); }
.sig-green .dir-sig-dot { background: var(--green); }
.sig-gray  .dir-sig-dot { background: var(--text2); opacity: 0.5; }

.dir-card-icon {
  flex-shrink: 0;
  color: var(--text2);
  display: inline-flex;
}
.dir-card-title {
  font-size: 14px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
}
.dir-card-resp {
  font-size: 11px;
  font-weight: 500;
  color: var(--text2);
  white-space: nowrap;
}

/* Триггер-метрика (большое число) */
.dir-card-trigger {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.dir-card-trigger.t-red   { color: var(--red); }
.dir-card-trigger.t-amber { color: var(--yellow); }
.dir-card-trigger.t-green { color: var(--green); }
.dir-card-trigger.t-gray  { color: var(--text2); }

.dir-card-sub {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: var(--space-3);
}
.dir-card-sub strong { color: var(--text); font-weight: 700; }

/* «дёрнуть» — кого зовёт руководитель (только mobile-триаж) */
.dir-card-pull {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text2);
  margin-bottom: var(--space-3);
}
.dir-card-pull svg { flex-shrink: 0; color: var(--text2); }
.dir-card-pull b { color: var(--text); font-weight: 600; }

/* CTA «Разобрать →» */
.dir-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  background: var(--accent-light);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.dir-card-cta:hover { background: color-mix(in srgb, var(--accent-light) 60%, var(--accent) 18%); }
.dir-card-cta svg { flex-shrink: 0; }

/* Заглушка needs-data (Контент/SEO) */
.dir-card-stub {
  font-size: 12px;
  color: var(--text2);
  font-style: normal;
}

/* Свёрнутая карточка чужого направления (тонкая строка — mobile-триаж) */
.dir-card.is-collapsed {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.dir-card.is-collapsed .dir-card-head,
.dir-card.is-collapsed .dir-card-trigger,
.dir-card.is-collapsed .dir-card-sub,
.dir-card.is-collapsed .dir-card-pull,
.dir-card.is-collapsed .dir-card-cta { display: none; }
.dir-card-thin {
  display: none;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  font-size: 13px;
}
.dir-card.is-collapsed .dir-card-thin { display: flex; }
.dir-card-thin-name { font-weight: 600; flex: 1; min-width: 0; }
.dir-card-thin-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dir-card-thin-arrow {
  color: var(--accent);
  display: inline-flex;
  flex-shrink: 0;
}

/* Чип среза МП на карточке (F1 — только Возвраты/Реклама) */
.dir-card-mp {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  white-space: nowrap;
}

/* =====================================================================
   DESKTOP-вариант — карточка-навигатор (крупная плитка, hover-подъём).
   Сетка плиток задаётся страницей (.dir-cards--grid пример ниже); сама
   плитка чуть крупнее и реагирует на hover как кликабельный навигатор.
   ===================================================================== */
.dir-cards--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}
.dir-card--desktop {
  padding: var(--space-5);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.dir-card--desktop:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.dir-card--desktop .dir-card-trigger { font-size: 28px; }

/* Узкий экран — плитки в одну колонку */
@media (max-width: 560px) {
  .dir-cards--grid { grid-template-columns: 1fr; }
}