/* ==========================================================================
   MathMaster – ikonų ženkleliai (Lucide)
   ==========================================================================

   Vienas stilius visiems puslapiams: temų kortelėms, temų meniu, moduliui,
   formulių žinynui ir pagrindinio puslapio navigacijai.

   Spalva paduodama per `--icon-color` kintamąjį (temos spalva iš topics.json),
   todėl kiekviena tema atrodo sava, bet forma lieka vienoda.
   ========================================================================== */

/* ------------------------------- ženklelis ------------------------------- */

.topic-icon-badge {
  --icon-color: #6366F1;

  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* permatomas temos spalvos fonas – „glassmorphism“ */
  background: color-mix(in srgb, var(--icon-color) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--icon-color) 30%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  color: var(--icon-color);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.topic-icon-badge svg,
.topic-icon-badge i {
  width: 22px;
  height: 22px;
  stroke-width: 2.1;
}

/* Švytėjimas užvedus pele – ir tada, kai pelė yra ant visos kortelės. */
.topic-icon-badge:hover,
a:hover > .topic-icon-badge,
button:hover > .topic-icon-badge,
.topic-card:hover .topic-icon-badge,
.rec-card:hover .topic-icon-badge,
.fx-group:hover .topic-icon-badge {
  transform: scale(1.08);
  box-shadow: 0 0 16px color-mix(in srgb, var(--icon-color) 40%, transparent);
  background: color-mix(in srgb, var(--icon-color) 22%, transparent);
}

/* Mažesnis variantas – temų meniu mygtukams ir sąrašams. */
.topic-icon-badge.is-sm {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}
.topic-icon-badge.is-sm svg,
.topic-icon-badge.is-sm i { width: 17px; height: 17px; }

/* Didesnis – modulio antraštei. */
.topic-icon-badge.is-lg {
  width: 58px;
  height: 58px;
  border-radius: 16px;
}
.topic-icon-badge.is-lg svg,
.topic-icon-badge.is-lg i { width: 28px; height: 28px; }

/* Pasirinktos temos mygtukas yra spalvotas – ženklelis jame tampa baltas. */
/* Inline `--icon-color` (temos spalva) turi didesnę pirmenybę, todėl čia
   būtinas `!important` – kitaip ant spalvoto mygtuko ikona lieka neryski. */
.topic-btn.active .topic-icon-badge {
  --icon-color: #FFFFFF !important;
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .35);
}

/* ---------------------------- atskira ikona ------------------------------ */

.mm-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: -4px;
  stroke-width: 2;
}
svg.mm-icon { flex: 0 0 auto; }

.nav-icon-lucide { width: 20px; height: 20px; }

/* Kol Lucide dar nepakeitė <i> elemento, jis neturi turėti savo dydžio –
   kitaip kortelė trumpam „šokteli“. */
i[data-lucide] { display: inline-block; width: 1em; height: 1em; }

/* Antraštėse ir mygtukuose ikona turi stovėti viename lygyje su tekstu. */
.section-title svg.mm-icon,
.sol-head h3 svg.mm-icon,
.btn svg.mm-icon,
.ws-open svg.mm-icon,
.mode-ic svg,
.clinic-ic svg,
.mbook-ic svg {
  vertical-align: -4px;
  margin-right: 2px;
}
.section-title svg.mm-icon { width: 22px; height: 22px; vertical-align: -5px; }
.mode-ic svg { width: 19px; height: 19px; }
.clinic-ic svg, .mbook-ic svg { width: 21px; height: 21px; vertical-align: -5px; }
.tc-icon svg { width: 20px; height: 20px; }

/* --------------------------- spausdinant --------------------------------- */

@media print {
  .topic-icon-badge {
    background: none !important;
    border-color: #94A3B8 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ------------------------- senesnės naršyklės ---------------------------- */
/* `color-mix` nepalaikantiems variklims paliekame paprastą, bet tvarkingą foną. */
@supports not (background: color-mix(in srgb, red 15%, transparent)) {
  .topic-icon-badge {
    background: rgba(99, 102, 241, .15);
    border-color: rgba(99, 102, 241, .3);
  }
  .topic-icon-badge:hover {
    box-shadow: 0 0 16px rgba(99, 102, 241, .4);
  }
}