/* WOCH Marketplace — змінні теми (світла/темна).
   Підключається окремо від app.css, щоб не змішувати з базовими правилами LiveView. */

:root {
  --color-bg: #e2e4e8;
  --color-bg-alt: #d6d9de;
  --color-text: #1e293b;
  --color-text-muted: #475569;
  --color-border: #c2c7cd;
  --color-card-bg: #e8e9ec;
  --color-link: #7c3aed;
}

[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-bg-alt: #1e293b;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-border: #334155;
  --color-card-bg: #1e293b;
  --color-link: #c4b5fd;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

/* DevOps-панель: бейдж статусу lsyncd (розд. 28 журналу) */
.lsyncd-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.lsyncd-badge-ok {
  background: #f0fdf4;
}

.lsyncd-badge-ok .lsyncd-badge-text {
  color: #166534;
}

.lsyncd-badge-error {
  background: #fef2f2;
}

.lsyncd-badge-error .lsyncd-badge-text {
  color: #991b1b;
}

[data-theme="dark"] .lsyncd-badge-ok {
  background: rgba(22, 163, 74, 0.15);
}

[data-theme="dark"] .lsyncd-badge-ok .lsyncd-badge-text {
  color: #4ade80;
}

[data-theme="dark"] .lsyncd-badge-error {
  background: rgba(220, 38, 38, 0.15);
}

[data-theme="dark"] .lsyncd-badge-error .lsyncd-badge-text {
  color: #f87171;
}

.lsyncd-badge-warn {
  background: #fffbeb;
}

.lsyncd-badge-warn .lsyncd-badge-text {
  color: #92400e;
}

[data-theme="dark"] .lsyncd-badge-warn {
  background: rgba(217, 119, 6, 0.15);
}

[data-theme="dark"] .lsyncd-badge-warn .lsyncd-badge-text {
  color: #fbbf24;
}
.favorite-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--color-text);
  font-size: 15px;
}
.favorite-btn--active {
  border-color: #7c3aed;
  color: #7c3aed;
}
[data-theme="dark"] .favorite-btn--active {
  color: #a78bfa;
}

/* Імпорт товарів (/admin/import, /seller/import): блок пояснення про
   5% націнку -- світлий бокс за замовчуванням, у темній темі потрібна
   явна альтернатива (var() тут не рятує, бо задум саме контрастний бокс,
   а не прозорий фон сторінки). */
.import-markup-box {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
}
[data-theme="dark"] .import-markup-box {
  background: rgba(124, 58, 237, 0.15);
}
.import-markup-title {
  font-weight: 700;
  color: var(--color-text);
}
.import-markup-desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.import-field-input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-card-bg);
  color: var(--color-text);
  font-size: 14px;
  box-sizing: border-box;
}