/* ============================================================
 * نگارش — استایل بلاک‌های رنگی برای سمت پوسته (front-end)
 * ============================================================
 *
 * شامل آیکون Lucide قبل از محتوای هر بلاک (قابل تنظیم از پنل).
 * ============================================================ */

:root {
  --tr-block-success-bg: #dcfce7;
  --tr-block-success-fg: #166534;
  --tr-block-success-bd: #86efac;
  --tr-block-success-ic: #16a34a;

  --tr-block-warning-bg: #fef3c7;
  --tr-block-warning-fg: #92400e;
  --tr-block-warning-bd: #fcd34d;
  --tr-block-warning-ic: #d97706;

  --tr-block-info-bg: #dbeafe;
  --tr-block-info-fg: #1e40af;
  --tr-block-info-bd: #93c5fd;
  --tr-block-info-ic: #2563eb;

  --tr-block-danger-bg: #fee2e2;
  --tr-block-danger-fg: #991b1b;
  --tr-block-danger-bd: #fca5a5;
  --tr-block-danger-ic: #dc2626;

  --tr-block-radius: 12px;
  --tr-block-pad: 14px 18px;
  --tr-block-icon-size: 22px;
}

/* حالت تیره */
@media (prefers-color-scheme: dark) {
  :root {
    --tr-block-success-bg: rgba(22, 163, 74, 0.18);
    --tr-block-success-fg: #86efac;
    --tr-block-success-bd: rgba(22, 163, 74, 0.55);
    --tr-block-success-ic: #4ade80;

    --tr-block-warning-bg: rgba(217, 119, 6, 0.18);
    --tr-block-warning-fg: #fcd34d;
    --tr-block-warning-bd: rgba(217, 119, 6, 0.55);
    --tr-block-warning-ic: #fbbf24;

    --tr-block-info-bg: rgba(37, 99, 235, 0.18);
    --tr-block-info-fg: #93c5fd;
    --tr-block-info-bd: rgba(37, 99, 235, 0.55);
    --tr-block-info-ic: #60a5fa;

    --tr-block-danger-bg: rgba(220, 38, 38, 0.18);
    --tr-block-danger-fg: #fca5a5;
    --tr-block-danger-bd: rgba(220, 38, 38, 0.55);
    --tr-block-danger-ic: #f87171;
  }
}

/* ---------- استایل پایه‌ی بلاک‌ها ---------- */
.tr-block {
  margin: 1.2em 0;
  padding: var(--tr-block-pad);
  padding-right: 52px; /* فضا برای آیکون در سمت راست */
  border-radius: var(--tr-block-radius);
  border: 1px solid var(--tr-block-info-bd);
  background: var(--tr-block-info-bg);
  color: var(--tr-block-info-fg);
  position: relative;
  direction: rtl;
  overflow-wrap: break-word;
  border-right: 4px solid var(--tr-block-info-ic);
}

.tr-block.tr-success {
  background: var(--tr-block-success-bg);
  color: var(--tr-block-success-fg);
  border-color: var(--tr-block-success-bd);
  border-right-color: var(--tr-block-success-ic);
}

.tr-block.tr-warning {
  background: var(--tr-block-warning-bg);
  color: var(--tr-block-warning-fg);
  border-color: var(--tr-block-warning-bd);
  border-right-color: var(--tr-block-warning-ic);
}

.tr-block.tr-danger {
  background: var(--tr-block-danger-bg);
  color: var(--tr-block-danger-fg);
  border-color: var(--tr-block-danger-bd);
  border-right-color: var(--tr-block-danger-ic);
}

/* ---------- آیکون Lucide قبل از محتوا ----------
 * هر بلاک یک آیکون متفاوت دارد که با mask و رنگ accent نمایش داده می‌شود.
 * آیکون‌ها از data URI SVG استفاده می‌کنند تا فایل خارجی لازم نباشد.
 * برای مخفی‌کردن آیکون‌ها، Front.php یک inline style با
 * `.tr-block::before { display: none !important; }` تزریق می‌کند.
 * ---------------------------------------------------------------- */

.tr-block::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: var(--tr-block-icon-size);
  height: var(--tr-block-icon-size);
  background-color: var(--tr-block-info-ic);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
  /* آیکون info (دایره با i) — پیش‌فرض */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
}

/* Success: check-circle */
.tr-block.tr-success::before {
  background-color: var(--tr-block-success-ic);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>");
}

/* Warning: alert-triangle */
.tr-block.tr-warning::before {
  background-color: var(--tr-block-warning-ic);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><line x1='12' x2='12' y1='9' y2='13'/><line x1='12' x2='12.01' y1='17' y2='17'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><line x1='12' x2='12' y1='9' y2='13'/><line x1='12' x2='12.01' y1='17' y2='17'/></svg>");
}

/* Danger: x-circle */
.tr-block.tr-danger::before {
  background-color: var(--tr-block-danger-ic);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
}

/* ---------- تایپوگرافی داخل بلاک ---------- */
.tr-block > *:last-child { margin-bottom: 0; }
.tr-block > *:first-child { margin-top: 0; }
.tr-block p { margin: 0 0 0.7em; line-height: 1.8; }
.tr-block ul,
.tr-block ol { margin: 0.4em 0; padding-right: 1.4em; }
.tr-block a { color: inherit; text-decoration: underline; }
.tr-block code {
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  background: rgba(0, 0, 0, 0.08);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.92em;
}