/* Livex — марката върху Metronic.
 *
 * Зарежда се СЛЕД styles.css, иначе не бие нищо.
 *
 * Цветовете са взети от логото (1 ноември 2026). Ако не съвпадат точно с
 * изходния файл, поправя се тук — на едно място, а не из шаблоните.
 *
 * Класовете най-долу са написани на ръка, защото Metronic Tailwind идва
 * предварително компилиран: клас, който собствените им демота не ползват,
 * просто не съществува и не дава грешка. Проверява се с tools/check-classes.py.
 */

:root {
  /* Марката: виолетовото от логото. */
  --primary: #7c4df5;
  --primary-foreground: #ffffff;

  /* Искрата от логото. Малки акценти, не цели повърхности. */
  --spark: #c5f24e;
  --spark-foreground: #16210a;

  /* Мастилото от логото — тъмната повърхност. */
  --ink: #0e1219;

  /* Състояния. Резервирани — никога не се ползват като цвят на серия. */
  --good: #10b981;
  --warning: #f59e0b;
  --danger: #f4564a;
  --points: #f0b429;

  /* Платформи. Само за логата, не за данни.
   * Внимание: зеленото на Kick е съседно на искрата — не ги слагай едно до друго. */
  --kick: #53fc18;
  --discord: #5865f2;

  /* Категорични серии, светла тема.
   * Бележка: трета серия (виолетово) вече се бие с цвета на марката.
   * За графики с марков елемент в кадъра я пропускай или я мести последна. */
  --series-1: #0098a4;
  --series-2: #b65400;
  --series-3: #8851d1;
  --series-4: #008d24;
  --series-5: #bf3584;
  --series-6: #0077cd;
}

.dark {
  --primary: #8b61f7;
  --primary-foreground: #0b0618;

  --background: #0e1219;
  --card: #151a24;
  --popover: #151a24;

  --series-1: #00a7a8;
  --series-2: #e36a00;
  --series-3: #a474ec;
  --series-4: #3aad47;
  --series-5: #dd5da1;
  --series-6: #2096f8;
}

/* ------------------------------------------------------------------ */
/* Марката                                                            */
/* ------------------------------------------------------------------ */

.livex-accent { color: var(--primary); }
.livex-spark { color: var(--spark); }
.livex-points { color: var(--points); }
.livex-kick { color: var(--kick); }
.livex-discord { color: var(--discord); }

/* Знакът в хедъра и сайдбара */
.livex-mark {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}
.livex-mark-sm {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Логото на платформата вътре в бутон */
.livex-platform-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.livex-btn-kick {
  background-color: var(--kick);
  color: #0a1f03;
  border-color: var(--kick);
}
.livex-btn-kick:hover { background-color: color-mix(in oklab, var(--kick) 86%, black); }

.livex-btn-discord {
  background-color: var(--discord);
  color: #ffffff;
  border-color: var(--discord);
}
.livex-btn-discord:hover { background-color: color-mix(in oklab, var(--discord) 86%, black); }

/* Сияние зад заглавието на началната страница */
.livex-glow { position: relative; isolation: isolate; }
.livex-glow::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 420px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 50% 0%, color-mix(in oklab, var(--primary) 24%, transparent), transparent 70%),
    radial-gradient(38% 46% at 82% 6%, color-mix(in oklab, var(--spark) 12%, transparent), transparent 70%);
}

.livex-card-accent {
  border-color: color-mix(in oklab, var(--primary) 38%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 12%, transparent);
}

.livex-step-line {
  height: 1px;
  background: linear-gradient(to right, color-mix(in oklab, var(--primary) 45%, transparent), transparent);
}

.livex-max-w-prose { max-width: 68ch; }
.livex-max-w-form { max-width: 420px; }

/* ------------------------------------------------------------------ */
/* Utility класове, които ги няма в компилирания Metronic             */
/* ------------------------------------------------------------------ */

.content-start { align-content: flex-start; }
.w-fit { width: fit-content; }
.hover\:underline:hover { text-decoration-line: underline; }

.mt-0\.5 { margin-top: 0.125rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-20 { margin-top: 5rem; }
.p-6 { padding: 1.5rem; }
.py-16 { padding-block: 4rem; }
.py-20 { padding-block: 5rem; }

/* Футърът на панела — Metronic го ползва в demo1, но правилото липсва. */
.kt-footer { flex-shrink: 0; }

@media (width >= 40rem) {
  .sm\:inline-flex { display: inline-flex; }
  .sm\:justify-between { justify-content: space-between; }
}

@media (width >= 48rem) {
  .md\:flex { display: flex; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (width >= 64rem) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ */
/* Съобщението за бисквитките                                         */
/* Позиционирането е написано тук, за да не зависи от utility класове,*/
/* които компилираният Metronic може да няма.                         */
/* ------------------------------------------------------------------ */

.livex-cookie {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  padding: 0.75rem;
  pointer-events: none;
}
.livex-cookie[hidden] { display: none; }

.livex-cookie-inner {
  pointer-events: auto;
  max-width: 64rem;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border-radius: calc(var(--radius) + 0.25rem);
  border: 1px solid color-mix(in oklab, var(--primary) 28%, var(--border));
  background-color: var(--card);
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.45);
}

.livex-cookie-icon {
  color: var(--spark);
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.livex-cookie-icon svg { width: 1.375rem; height: 1.375rem; }

.livex-cookie-text {
  flex: 1 1 auto;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--secondary-foreground);
  margin: 0;
}

@media (width < 40rem) {
  .livex-cookie-inner { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------------------------ */
/* Лейаутът на панела                                                 */
/*                                                                    */
/* В компилирания styles.css НЯМА нито едно правило за .kt-sidebar,   */
/* .kt-wrapper, .kt-header и .demo1 — класовете се срещат само като   */
/* части от варианти. Затова целият фиксиран лейаут е написан тук.    */
/* Проверено на 1 ноември 2026: без това сайдбарът просто не се вижда.*/
/* ------------------------------------------------------------------ */

:root {
  --livex-sidebar: 17rem;
  --livex-sidebar-narrow: 4.5rem;
  --livex-header: 4rem;
}

.kt-sidebar {
  width: var(--livex-sidebar);
  transition: width 0.25s ease;
}

.kt-sidebar-header {
  height: var(--livex-header);
  border-bottom: 1px solid var(--border);
}

.kt-sidebar-content {
  min-height: 0;
  overflow: hidden;
}

.kt-scrollable-y-hover {
  overflow-y: auto;
  scrollbar-width: thin;
}

.kt-header {
  height: var(--livex-header);
  border-bottom: 1px solid transparent;
}

.kt-wrapper {
  padding-top: var(--livex-header);
  min-width: 0;
}

@media (width >= 64rem) {
  .kt-wrapper { padding-inline-start: var(--livex-sidebar); }
  .kt-header { inset-inline-start: var(--livex-sidebar); }

  body.kt-sidebar-collapse .kt-sidebar { width: var(--livex-sidebar-narrow); }
  body.kt-sidebar-collapse .kt-wrapper { padding-inline-start: var(--livex-sidebar-narrow); }
  body.kt-sidebar-collapse .kt-header { inset-inline-start: var(--livex-sidebar-narrow); }
  body.kt-sidebar-collapse .kt-menu-title,
  body.kt-sidebar-collapse .kt-menu-heading,
  body.kt-sidebar-collapse .kt-sidebar-header span { display: none; }
  body.kt-sidebar-collapse .kt-badge { display: none; }
}

/* ------------------------------------------------------------------ */
/* Ширина на страниците и подравняване на текста                      */
/*                                                                    */
/* По желание на потребителя: блоковете вървят по цялата ширина, а    */
/* текстът е двустранно подравнен. За да не зеят дупки между думите   */
/* на български, пускаме и пренасяне.                                 */
/* ------------------------------------------------------------------ */

.kt-container-fixed {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

main p,
main li {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* Кратките пояснения под полетата не се подравняват — там justify личи зле. */
main p.text-xs,
main .kt-form-label,
main .kt-badge,
main .kt-btn {
  text-align: start;
  hyphens: manual;
}

/* Ограниченията по ширина отпадат, щом страницата е по цялата ширина. */
.livex-max-w-prose { max-width: none; }

/* Режимът «чекмедже» на сайдбара.
 *
 * KTUI чете --kt-drawer-enable от самия елемент. Metronic го задава с два
 * класа с произволни стойности, а те не са в компилирания CSS. Без тях
 * сайдбарът остава чекмедже и на широк екран, тоест извън кадъра. */
.\[--kt-drawer-enable\:true\] { --kt-drawer-enable: true; }

@media (width >= 64rem) {
  .lg\:\[--kt-drawer-enable\:false\] { --kt-drawer-enable: false; }
}

/* Поле и бутон един до друг — произволните стойности ги няма в компилирания CSS. */
@media (width >= 40rem) {
  .livex-input-row {
    grid-template-columns: 1fr auto;
  }
}

/* Екран 4 — списък и редактор един до друг */
@media (width >= 64rem) {
  .livex-cols-list { grid-template-columns: 1fr 420px; }
}
.livex-row + .livex-row { border-top: 1px solid var(--border); }
.livex-help-text { text-align: end; max-width: 60%; }