/* ============================================================================
   assets/common/components.css — базові компоненти на токенах.

   Усе з префіксом .mo- і побудоване ТІЛЬКИ на семантичних токенах
   (assets/common/tokens.css). Через це темна тема тут не описана жодного
   разу: коли перемикається тема, змінюються токени, а правила лишаються ті
   самі. Це і є сенс усієї витівки — раніше кожен компонент мав власний
   блок body.dark-mode, і половину з них забували оновити.

   ПРАВИЛА КОРИСТУВАННЯ
   1. Нова сторінка бере компоненти звідси і НЕ пише свої картки/кнопки.
   2. Потрібен інший вигляд — додається модифікатор ТУТ, а не інлайновий
      style у шаблоні.
   3. Наявні сторінки нічого не втрачають: класи нові, зіткнень немає.

   Фокус тут навмисно не описаний — його дає assets/common/a11y.css одним
   правилом на весь сайт.
   ========================================================================= */

/* ── Кнопка ─────────────────────────────────────────────────────────── */
.mo-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--mo-space-2);
  padding:10px 18px;
  border:1px solid transparent;
  border-radius:var(--mo-radius);
  font:600 var(--mo-text-base)/1.2 var(--mo-font);
  text-decoration:none;
  cursor:pointer;
  transition:background var(--mo-dur) var(--mo-ease),
             border-color var(--mo-dur) var(--mo-ease),
             color var(--mo-dur) var(--mo-ease);
  /* Мінімум 44px на дотик — вимога до тап-таргетів на телефоні. */
  min-height:44px;
  -webkit-appearance:none; appearance:none;
}
.mo-btn:disabled, .mo-btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed }

.mo-btn--primary{ background:var(--mo-accent); color:var(--mo-accent-fg) }
.mo-btn--primary:hover:not(:disabled){ background:var(--mo-accent-hover) }

.mo-btn--secondary{ background:var(--mo-surface); color:var(--mo-text); border-color:var(--mo-border-control) }
.mo-btn--secondary:hover:not(:disabled){ border-color:var(--mo-accent); color:var(--mo-accent) }

.mo-btn--ghost{ background:transparent; color:var(--mo-accent) }
.mo-btn--ghost:hover:not(:disabled){ background:var(--mo-surface-2) }

.mo-btn--danger{ background:var(--mo-danger); color:var(--mo-danger-on) }

.mo-btn--sm{ padding:6px 12px; font-size:var(--mo-text-sm); min-height:36px }
.mo-btn--lg{ padding:14px 26px; font-size:var(--mo-text-lg); min-height:52px }
.mo-btn--block{ width:100% }

/* Іконкова кнопка: квадратна, підпис лише для скрінрідера (aria-label). */
.mo-btn--icon{ padding:0; width:44px; min-height:44px }
.mo-btn--icon.mo-btn--sm{ width:36px; min-height:36px }

/* ── Картка ─────────────────────────────────────────────────────────── */
.mo-card{
  background:var(--mo-surface);
  border:1px solid var(--mo-border);
  border-radius:var(--mo-radius-lg);
  box-shadow:var(--mo-shadow-sm);
  padding:var(--mo-space-4);
  color:var(--mo-text);
}
.mo-card--flat{ box-shadow:none }
.mo-card--link{ display:block; text-decoration:none; transition:box-shadow var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease) }
.mo-card--link:hover{ box-shadow:var(--mo-shadow); transform:translateY(-2px) }
.mo-card__title{ font:700 var(--mo-text-lg)/var(--mo-leading-tight) var(--mo-font-head); margin:0 0 var(--mo-space-2) }
.mo-card__sub{ color:var(--mo-text-muted); font-size:var(--mo-text-sm); margin:0 }

/* ── Бейдж / пігулка ────────────────────────────────────────────────── */
.mo-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  border-radius:var(--mo-radius-sm);
  border:1px solid var(--mo-border);
  background:var(--mo-surface-2);
  color:var(--mo-text);
  font:700 var(--mo-text-xs)/1 var(--mo-font);
  white-space:nowrap;
}
.mo-badge--success{ background:var(--mo-success-bg); color:var(--mo-success-fg); border-color:transparent }
.mo-badge--danger { background:var(--mo-danger-bg);  color:var(--mo-danger-fg);  border-color:transparent }
.mo-badge--warning{ background:var(--mo-warning-bg); color:var(--mo-warning-fg); border-color:transparent }
.mo-badge--info   { background:var(--mo-info-bg);    color:var(--mo-info-fg);    border-color:transparent }
.mo-badge--pill   { border-radius:var(--mo-radius-pill) }

/* ── Поля вводу ─────────────────────────────────────────────────────── */
.mo-field{ display:flex; flex-direction:column; gap:6px }
.mo-label{ font:600 var(--mo-text-sm)/1.3 var(--mo-font); color:var(--mo-text-muted) }
.mo-input, .mo-select, .mo-textarea{
  width:100%;
  padding:10px 12px;
  min-height:44px;
  border:1px solid var(--mo-border-control);
  border-radius:var(--mo-radius);
  background:var(--mo-surface);
  color:var(--mo-text);
  font:400 var(--mo-text-base)/1.4 var(--mo-font);
  -webkit-appearance:none; appearance:none;
}
.mo-input::placeholder, .mo-textarea::placeholder{ color:var(--mo-text-faint) }
.mo-textarea{ min-height:96px; resize:vertical }
.mo-select{
  /* Шеврон малюємо саме background-IMAGE. Шорткат background: у темній
     темі скидав би картинку — на цьому проєкт уже обпікся. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:34px;
}
.mo-hint{ font-size:var(--mo-text-xs); color:var(--mo-text-muted) }
.mo-error{ font-size:var(--mo-text-xs); color:var(--mo-danger) }

/* ── Вкладки ────────────────────────────────────────────────────────
   Розмітка: role="tablist" на контейнері, role="tab" + aria-selected на
   кнопках, у неактивних tabindex="-1". Стан беремо з aria-selected, а не
   з класу .active — тоді розмітка й вигляд не можуть розійтися. */
.mo-tabs{ display:flex; gap:var(--mo-space-2); flex-wrap:wrap; border-bottom:1px solid var(--mo-border) }
.mo-tab{
  padding:10px 16px; min-height:44px;
  background:none; border:0; border-bottom:2px solid transparent;
  color:var(--mo-text-muted);
  font:600 var(--mo-text-base)/1.2 var(--mo-font);
  cursor:pointer;
}
.mo-tab[aria-selected="true"]{ color:var(--mo-accent); border-bottom-color:var(--mo-accent) }

/* ── Хлібні крихти ──────────────────────────────────────────────────── */
.mo-crumbs{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:var(--mo-text-sm); color:var(--mo-text-muted); padding:0; margin:0; list-style:none }
.mo-crumbs a{ color:var(--mo-text-muted); text-decoration:none }
.mo-crumbs a:hover{ color:var(--mo-accent); text-decoration:underline }
.mo-crumbs li + li::before{ content:"/"; margin-right:6px; color:var(--mo-text-faint) }

/* ── Порожній стан ──────────────────────────────────────────────────── */
.mo-empty{
  text-align:center;
  padding:var(--mo-space-7) var(--mo-space-4);
  color:var(--mo-text-muted);
  background:var(--mo-surface);
  border:1px dashed var(--mo-border-strong);
  border-radius:var(--mo-radius-lg);
}
.mo-empty__title{ font:700 var(--mo-text-lg)/1.3 var(--mo-font-head); color:var(--mo-text); margin:0 0 var(--mo-space-2) }

/* ── Скелетон ───────────────────────────────────────────────────────
   Анімацію глушить prefers-reduced-motion з a11y.css — окремо тут
   нічого писати не треба. */
.mo-skeleton{
  background:linear-gradient(90deg, var(--mo-surface-2) 25%, var(--mo-border) 37%, var(--mo-surface-2) 63%);
  background-size:400% 100%;
  animation:mo-shimmer 1.4s ease infinite;
  border-radius:var(--mo-radius-sm);
}
.mo-skeleton--text{ height:1em; margin-bottom:8px }
.mo-skeleton--title{ height:1.6em; width:60%; margin-bottom:12px }
@keyframes mo-shimmer{ from{ background-position:100% 50% } to{ background-position:0 50% } }

/* ── Сповіщення (toast) ─────────────────────────────────────────────
   Контейнеру потрібен aria-live="polite", інакше скрінрідер про появу
   не дізнається. */
.mo-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:10000;
  max-width:min(92vw, 420px);
  padding:12px 18px;
  border-radius:var(--mo-radius);
  background:var(--mo-slate-900); color:#fff;
  box-shadow:var(--mo-shadow-lg);
  font:600 var(--mo-text-sm)/1.4 var(--mo-font);
}
.mo-toast--success{ background:var(--mo-success); color:var(--mo-success-on) }
.mo-toast--danger { background:var(--mo-danger);  color:var(--mo-danger-on) }

/* ── Пагінація ──────────────────────────────────────────────────────── */
.mo-pager{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; list-style:none; padding:0; margin:var(--mo-space-5) 0 }
.mo-pager a, .mo-pager span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 10px;
  border:1px solid var(--mo-border); border-radius:var(--mo-radius-sm);
  color:var(--mo-text); text-decoration:none; font:600 var(--mo-text-sm)/1 var(--mo-font);
}
.mo-pager a:hover{ border-color:var(--mo-accent); color:var(--mo-accent) }
.mo-pager [aria-current="page"]{ background:var(--mo-accent); color:var(--mo-accent-fg); border-color:var(--mo-accent) }

/* ── Текст статті ───────────────────────────────────────────────────
   Довжина рядка 65–75 символів — межа, за якою око губить початок
   наступного рядка. */
.mo-prose{ max-width:var(--mo-measure); font-size:var(--mo-text-base); line-height:var(--mo-leading-loose); color:var(--mo-text) }
.mo-prose p{ margin:0 0 var(--mo-space-4) }
.mo-prose h2{ font:700 var(--mo-text-2xl)/var(--mo-leading-tight) var(--mo-font-head); margin:var(--mo-space-6) 0 var(--mo-space-3) }
.mo-prose h3{ font:700 var(--mo-text-xl)/var(--mo-leading-tight) var(--mo-font-head); margin:var(--mo-space-5) 0 var(--mo-space-2) }
.mo-prose img{ max-width:100%; height:auto; border-radius:var(--mo-radius) }
.mo-prose code{ font-family:var(--mo-font-mono); font-size:.9em; background:var(--mo-surface-2); padding:2px 5px; border-radius:4px }

/* ── Сітка карток ───────────────────────────────────────────────────── */
.mo-grid{ display:grid; gap:var(--mo-space-4); grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)) }
.mo-grid--sm{ grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)) }

/* ── Мобільні уточнення ─────────────────────────────────────────────
   Брейкпоінтів у проєкті 42. Тут навмисно один: 600px. Нові компоненти
   тримаються його, щоб набір не розповзався далі. */
@media (max-width:600px){
  .mo-card{ padding:var(--mo-space-3) }
  .mo-grid{ gap:var(--mo-space-3); grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)) }
  .mo-btn{ padding:10px 14px }
  .mo-toast{ left:12px; right:12px; transform:none; max-width:none }
}