/* FILE: /assets/krok/css/krok-cards-v2.css
   Reskin карток КРОК-хабу: «Великий рік + кругле кільце прогресу».
   Дизайн-система сайту (Ubuntu/Raleway, зелено-ціан, плоско). Override-шар:
   підключається ОСТАННІМ — перекриває обидва скіни A(mainhub)/B(design-b) + inline.
   Розмітку дає krok-hub-v2.js (предмети) і PHP-партіали (роки/системи). */

:root {
  --km-surface: #ffffff;
  --km-surface-2: #f0f6f4;
  --km-ink: #122e2a;
  --km-muted: #4f6b66;
  --km-line: #dde8e5;
  --km-primary: #10b981;
  --km-primary-strong: #0c9f6e;
  --km-accent: #0891b2;
  --km-danger: #dc2626;
  --km-ring: rgba(8,145,178,.30);
  --km-pill-bg: #ecfdf5;
  --km-pill-bd: #bbe9d6;
  --km-fhead: 'Ubuntu', system-ui, -apple-system, sans-serif;
  --km-fbody: 'Raleway', system-ui, -apple-system, sans-serif;
}
body.dark-mode {
  --km-surface: #121e1c;
  --km-surface-2: #182825;
  --km-ink: #e9f2f0;
  --km-muted: #9db4af;
  --km-line: #243733;
  --km-primary: #2f9e7b;
  --km-primary-strong: #277f64;
  --km-accent: #5fb0c9;
  --km-danger: #f87171;
  --km-pill-bg: #11261f;
  --km-pill-bd: #2c5b48;
}

/* ── СІТКА: широка по центру (до 1200px), 3 простори картки в ряд (десктоп) ── */
@media (min-width: 1025px) {
  /* виходимо за межі контейнера (.container max-width:1200) і займаємо ширину екрана,
     але рівно 3 у ряд і не ширше 1500px — щоб картки лишались «середні» */
  #grid-years, #grid-systems, #subjectsGrid {
    width: min(84vw, 1100px) !important;
    max-width: none !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

/* ── КАРТКА ── */
.test-grid .test-item {
  background: var(--km-surface) !important;
  background-image: none !important;
  border: 1px solid var(--km-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(13,60,52,.05) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 17px !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
}
/* картки буклетів/систем/предметів — рівна комфортна висота, кнопки притиснуті донизу */
#grid-years > .test-item,
#grid-systems > .test-item,
#subjectsGrid > .test-item {
  display: flex !important;
  flex-direction: column !important;
  min-height: 148px !important;
}
#grid-years > .test-item > .test-buttons,
#grid-systems > .test-item > .test-buttons,
#subjectsGrid > .test-item > .test-buttons { margin-top: auto !important; }
.test-grid .test-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 30px -14px rgba(13,60,52,.20) !important;
}
.test-item.demo-booklet, .test-item.psy-booklet {
  animation: none !important;
  transform: none !important;
}
.test-item.demo-booklet::before, .test-item.demo-booklet::after,
.test-item.psy-booklet::before, .test-item.psy-booklet::after { display: none !important; content: none !important; }
.test-item *[class*="particle"] { display: none !important; }
/* особливі буклети (демо/психо) — той самий фон/рамка, що й звичайні */
.test-grid .test-item.demo-booklet,
.test-grid .test-item.psy-booklet,
body.dark-mode .test-grid .test-item.demo-booklet,
body.dark-mode .test-grid .test-item.psy-booklet {
  background: var(--km-surface) !important;
  background-image: none !important;
  border-color: var(--km-line) !important;
}

/* ── ШАПКА: ліво (рік+підпис) + кільце ── */
.kc-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 13px !important;
}
/* .test-title переюзано як ліву колону */
.test-grid .test-title.kc-left {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  flex: 1 1 auto !important;
}
.kc-yearrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* велика іконка-замінник року для особливих буклетів (психологи тощо) */
.kc-bigic { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
body.dark-mode .kc-bigic { filter: brightness(1.1); }
.kc-year {
  font-family: var(--km-fhead);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--km-ink);
}
/* найкращий результат: кубок + % справа від року */
.kc-best {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--km-fhead); font-weight: 700; font-size: 13px;
  color: var(--km-primary-strong);
  background: var(--km-pill-bg); border: 1px solid var(--km-pill-bd);
  border-radius: 999px; padding: 4px 9px; white-space: nowrap;
}
.kc-best svg { width: 14px; height: 14px; }
/* пігулка «Новинка» (особливі буклети) — той самий стиль, що й бест */
.kc-new {
  display: inline-flex; align-items: center;
  font-family: var(--km-fhead); font-weight: 700; font-size: 11px;
  letter-spacing: .02em; text-transform: uppercase;
  color: #fff; background: var(--km-primary);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.kc-titleplain {
  font-family: var(--km-fhead);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--km-ink);
}
/* велика назва предмета / системи — у дусі великого року буклетів */
.kc-bigtitle {
  font-family: var(--km-fhead);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.3px;
  color: var(--km-ink);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
/* іменована шапка (предмети/системи): великий заголовок на всю ширину зверху,
   нижче рядок «підпис + кільце» — щоб довгі назви не тиснулись поруч із кільцем */
.kc-head.kc-head--named {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
}
.kc-head--named .kc-namerow {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0;
}
.kc-head--named .kc-metarow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.kc-head--named .kc-sub { margin-top: 0; }
.kc-head--named .kc-best { flex: 0 0 auto; }
/* заголовок картки системи / предмета (ліва колона) */
.kc-sysrow, .kc-subjrow {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.kc-subj-ic { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.kc-subj-name {
  font-family: var(--km-fhead); font-weight: 700; font-size: 16.5px; line-height: 1.25;
  color: var(--km-ink); min-width: 0; word-break: break-word;
}
/* стара пігулка прогресу більше не показується (замість неї — кільце) */
.kc-progress-hidden { display: none !important; }
.kc-sub {
  margin-top: 7px;
  font-family: var(--km-fbody);
  font-size: 13px;
  color: var(--km-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kc-sub img { width: 16px; height: 16px; }
.kc-ai {
  font-family: var(--km-fbody);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: rgba(99,102,241,.12); color: #6366f1;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
body.dark-mode .kc-ai { background: rgba(99,102,241,.22); color: #a5b4fc; }
.kc-desc {
  margin: 0 0 12px !important;
  background: none !important;
  color: var(--km-muted) !important;
  font-family: var(--km-fbody) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ── КІЛЬЦЕ ПРОГРЕСУ ── */
.kc-ring {
  position: relative;
  width: 62px; height: 62px;
  flex: 0 0 auto;
  border-radius: 50%;
  /* зелена зона = правильні (0→c1), червона = неправильні (c1→c2), решта = не пройдено */
  background: conic-gradient(
    var(--km-primary) 0 calc(var(--kc-c1, 0) * 1%),
    var(--km-danger) calc(var(--kc-c1, 0) * 1%) calc(var(--kc-c2, 0) * 1%),
    var(--km-surface-2) calc(var(--kc-c2, 0) * 1%) 100%
  );
}
.kc-ring__h {
  position: absolute; inset: 8px;
  border-radius: 50%;
  background: var(--km-surface);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.kc-ring__p { font-family: var(--km-fhead); font-weight: 700; font-size: 15px; line-height: 1; color: var(--km-primary); }
.kc-ring__f { font-size: 9px; color: var(--km-muted); margin-top: 2px; }

/* ── ПІГУЛКА «Бест» ── */
.best-result {
  display: inline-block !important;
  background: var(--km-pill-bg) !important;
  background-image: none !important;
  border: 1px solid var(--km-pill-bd) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--km-muted) !important;
  font-family: var(--km-fbody) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 11px !important;
  margin: 0 0 12px !important;
}
.best-result b { color: var(--km-primary-strong) !important; }
.best-result--mid b { color: #b45309 !important; }
.best-result--low b { color: var(--km-danger) !important; }

/* ── КНОПКИ: значки зліва + зелене play-коло (FAB) справа ── */
.test-grid .test-buttons { display: flex !important; gap: 10px !important; margin: 0 !important; align-items: center !important; }
/* старт = кругла зелена кнопка з play-трикутником, без напису */
.test-grid .start-btn {
  order: 3 !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;          /* притискаємо праворуч */
  width: 52px !important; height: 52px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  background: var(--km-primary) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 18px -6px rgba(16,185,129,.65) !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.test-grid .start-btn span { display: none !important; }   /* напис «Почати» прибрано */
.test-grid .start-btn .kc-play { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; margin-left: 2px; }
.test-grid .start-btn:hover {
  background: var(--km-primary-strong) !important;
  transform: scale(1.07) !important;
  box-shadow: 0 12px 24px -6px rgba(16,185,129,.75) !important;
}
body.dark-mode .test-grid .start-btn { box-shadow: 0 8px 18px -6px rgba(47,158,123,.6) !important; }
.test-grid .start-btn:disabled, .test-grid .start-btn[disabled],
.kc-mist-btn:disabled, .kc-mist-btn[disabled] { opacity: .45 !important; cursor: not-allowed !important; }
.test-grid .history-btn {
  order: 1 !important;
  flex: 0 0 auto !important;
  width: 48px !important;
  padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: var(--km-surface) !important;
  background-image: none !important;
  color: var(--km-accent) !important;
  border: 1.5px solid var(--km-line) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  height: 44px !important;
}
.test-grid .history-btn:hover { background: var(--km-surface-2) !important; border-color: var(--km-accent) !important; transform: none !important; }
.test-grid .history-btn svg { width: 18px; height: 18px; }

/* компактна кнопка помилок (значок + число) у тому ж ряду — ФІКСОВАНА ширина,
   щоб «Почати» була однакова на картках з помилками і без них */
.kc-mist-btn {
  order: 2;
  flex: 0 0 auto;
  width: auto;
  min-width: 48px;
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 44px; padding: 0 12px;
  border: 1.5px solid rgba(220,38,38,.28);
  border-radius: 12px;
  background: rgba(220,38,38,.08);
  color: var(--km-danger);
  font-family: var(--km-fhead); font-weight: 700; font-size: 13.5px;
  cursor: pointer;
  transition: background .15s ease;
}
.kc-mist-btn:hover { background: rgba(220,38,38,.15); }
.kc-mist-n { font-weight: 700; }
body.dark-mode .kc-mist-btn { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.32); }
/* спейсер більше не потрібен — старт це фіксоване коло справа */
.kc-mist-spacer { display: none !important; }


/* ── ТАБИ / ПОШУК (легкий reskin під сайт) ── */
.tab-btn {
  background: var(--km-surface) !important; background-image: none !important;
  border: 1px solid var(--km-line) !important; color: var(--km-ink) !important;
  box-shadow: none !important; border-radius: 999px !important;
  font-family: var(--km-fbody) !important; font-weight: 600 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.tab-btn.active {
  background: var(--km-primary) !important; background-image: none !important;
  color: #fff !important; border-color: var(--km-primary) !important; box-shadow: none !important;
}
.hub-search input {
  background: var(--km-surface) !important; background-image: none !important;
  border: 1.5px solid var(--km-line) !important; box-shadow: none !important;
  border-radius: 12px !important; font-family: var(--km-fbody) !important; color: var(--km-ink) !important;
}
.hub-search input:focus { border-color: var(--km-accent) !important; box-shadow: 0 0 0 4px var(--km-ring) !important; transform: none !important; }

/* ── ТУЛБАР-КНОПКИ (Мої теми / Моя статистика / Активність) під дизайн карток ── */
.km-toolbtn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 8px !important;
  height: 44px !important; padding: 0 18px !important;
  background: var(--km-surface) !important; background-image: none !important;
  color: var(--km-ink) !important;
  border: 1.5px solid var(--km-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-family: var(--km-fhead) !important; font-weight: 600 !important; font-size: 14px !important;
  text-decoration: none !important; cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.km-toolbtn:hover { background: var(--km-surface-2) !important; border-color: var(--km-accent) !important; transform: none !important; }
.km-toolbtn svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* головна — зелена заливка */
.km-toolbtn--primary {
  background: var(--km-primary) !important; color: #fff !important; border-color: var(--km-primary) !important;
}
.km-toolbtn--primary:hover { background: var(--km-primary-strong) !important; border-color: var(--km-primary-strong) !important; }
/* адмін — нейтральний темний */
.km-toolbtn--admin {
  background: var(--km-ink) !important; color: #fff !important; border-color: var(--km-ink) !important;
}
.km-toolbtn--admin:hover { filter: brightness(1.12); }

/* ── МОБІЛЬНИЙ ── */
@media (max-width: 600px) {
  .test-grid .test-item { padding: 18px !important; }
  #grid-years > .test-item, #grid-systems > .test-item,
  #subjectsGrid > .test-item { min-height: 184px !important; }
  .kc-year { font-size: 32px !important; }
  .kc-bigtitle { font-size: 20px !important; }
  .kc-ring { width: 64px !important; height: 64px !important; }
  .kc-ring__p { font-size: 16px !important; }
  /* старт = зелене play-коло справа; значки зліва */
  .test-grid .test-buttons { justify-content: flex-start !important; align-items: center !important; }
  .test-grid .start-btn {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    width: 52px !important; height: 52px !important; padding: 0 !important;
    border-radius: 50% !important;
  }
  .test-grid .start-btn span { display: none !important; }
  .test-grid .start-btn .kc-play { width: 22px; height: 22px; }
  .test-grid .history-btn { order: 1 !important; width: 50px !important; height: 50px !important; }
  .kc-mist-btn { order: 2 !important; margin-left: 0 !important; height: 50px !important; }
}