/* ============================================================================
 * ESP32 Manager — boards.css
 * ----------------------------------------------------------------------------
 * لایه تم برای تصاویر برد.
 *
 * فایل‌های SVG در پوشه assets/img با متغیرهای CSS رنگ‌آمیزی شده‌اند، اما
 * تصویر درون <img> قرار می‌گیرد و متغیرهای صفحه به آن ارث نمی‌رسد.
 * این فایل با استفاده از فیلتر، ظاهر بردها را با تم روشن/تیره هماهنگ می‌کند
 * تا بردها روی پس‌زمینه روشن بیش از حد تیره و روی پس‌زمینه تیره بی‌روح نشوند.
 * ==========================================================================*/

/* — تم روشن: کمی روشن‌تر و نرم‌تر تا با پس‌زمینه سفید هماهنگ شود — */
.esp32-root .choice-media img,
.esp32-root .board-detail-image img {
  filter: drop-shadow(0 3px 8px rgba(16, 32, 43, .16)) saturate(1.04) brightness(1.06);
  transition: transform var(--t-slow), filter var(--t-mid);
}

/* — تم تیره: عمق و درخشش بیشتر — */
.esp32-root[data-theme='dark'] .choice-media img,
.esp32-root[data-theme='dark'] .board-detail-image img {
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5)) saturate(1.12) brightness(1.02) contrast(1.03);
}

/* — قاب تصویر برد — */
.esp32-root .choice-media,
.esp32-root .board-detail-image {
  background-image:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--surface-3) 70%, transparent), transparent 72%),
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size: 100% 100%, 14px 14px, 14px 14px;
}

/* — حالت بارگذاری ناموفق تصویر: قاب خالی نماند — */
.esp32-root .board-detail-image:empty::after {
  content: '🖼';
  font-size: 32px;
  opacity: .35;
}