/* =========================================================================
   Tema renkleri — TEK KAYNAK. Semantik renkler burada CSS değişkeni olarak
   tanımlanır; koyu tema override'ları [data-bs-theme="dark"] altında. Yüzey/
   metin/kenarlık için Bootstrap 5.3'ün kendi tema değişkenleri (--bs-*)
   kullanılır → data-bs-theme değişince otomatik döner.
   ========================================================================= */
:root {
  /* Uyarı / başarı kutuları */
  --arb-warn-bg: #fef3c7;   --arb-warn-border: #f59e0b;  --arb-warn-fg: #7c5e10;
  --arb-ok-bg: #dcfce7;     --arb-ok-border: #22c55e;    --arb-ok-fg: #14532d;
  /* Tablo satır vurguları */
  --arb-danger-row: #fee2e2;  --arb-danger-fg: #7f1d1d;
  --arb-aged-row: #fef9c3;    --arb-aged-fg: #713f12;
  /* Durum pill'leri (Veri Kaynakları tazeliği vb.) */
  --arb-pill-fresh-bg: #dcfce7;  --arb-pill-fresh-fg: #166534;
  --arb-pill-aging-bg: #fef3c7;  --arb-pill-aging-fg: #92400e;
  --arb-pill-stale-bg: #fee2e2;  --arb-pill-stale-fg: #991b1b;
  --arb-pill-never-bg: #e5e7eb;  --arb-pill-never-fg: #374151;
}

[data-bs-theme="dark"] {
  --arb-warn-bg: rgba(245, 158, 11, .14);  --arb-warn-border: rgba(245, 158, 11, .5);  --arb-warn-fg: #fcd34d;
  --arb-ok-bg: rgba(34, 197, 94, .14);     --arb-ok-border: rgba(34, 197, 94, .5);     --arb-ok-fg: #86efac;
  --arb-danger-row: rgba(239, 68, 68, .18);  --arb-danger-fg: #fca5a5;
  --arb-aged-row: rgba(234, 179, 8, .16);    --arb-aged-fg: #fde68a;
  --arb-pill-fresh-bg: rgba(34, 197, 94, .18);   --arb-pill-fresh-fg: #86efac;
  --arb-pill-aging-bg: rgba(245, 158, 11, .18);  --arb-pill-aging-fg: #fcd34d;
  --arb-pill-stale-bg: rgba(239, 68, 68, .20);   --arb-pill-stale-fg: #fca5a5;
  --arb-pill-never-bg: rgba(148, 163, 184, .22); --arb-pill-never-fg: #cbd5e1;
}

/* =========================================================================
   Taban / tipografi
   ========================================================================= */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* renk/arka plan Bootstrap'tan gelir (tema-duyarlı) */
}
h1 { font-size: 1.65rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
h1, h2, h3 { line-height: 1.25; }
a { text-underline-offset: .15em; }

/* Eski koyu üst çubuk (profil seçici vb. yerlerde kalabilir) */
.topbar { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.5rem;
  background: #1f2937; color: #fff; }
.topbar .who { margin-left: auto; opacity: 0.85; }

/* Ana içerik konteyneri */
.content { padding: 1.5rem; max-width: 960px; margin: 0 auto; }
@media (max-width: 576px) { .content { padding: 1rem; } }

.inline { display: inline; }
.muted { color: var(--bs-secondary-color); }

/* =========================================================================
   Rol / profil seçici kartları
   ========================================================================= */
.role-grid { display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.role-card { padding: 1.25rem 2rem; font-size: 1.1rem; cursor: pointer;
  border: 1px solid var(--bs-border-color); border-radius: .5rem;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  transition: background-color .12s ease, border-color .12s ease; }
.role-card:hover { background: var(--bs-secondary-bg); border-color: var(--bs-primary); }

/* =========================================================================
   İzin listesi
   ========================================================================= */
.permission-list { columns: 2; }
@media (max-width: 576px) { .permission-list { columns: 1; } }

/* =========================================================================
   Özel (Bootstrap dışı) tablolar
   ========================================================================= */
.data-table { width: 100%; border-collapse: collapse; margin-top: 1rem;
  color: var(--bs-body-color); }
.data-table th, .data-table td {
  border: 1px solid var(--bs-border-color); padding: 0.45rem 0.65rem; text-align: left;
  vertical-align: middle; }
.data-table thead th {
  background: var(--bs-secondary-bg); color: var(--bs-emphasis-color);
  font-weight: 600; white-space: nowrap; }
.data-table tbody tr:hover { background: var(--bs-tertiary-bg); }

/* Ürün satırlarındaki küçük görseller (Keepa/Amazon PNG'leri genelde beyaz zeminli):
   her temada beyaz çerçeve + yuvarlatma → koyu temada da düzgün oturur. */
.content td img, .content .card img.thumb {
  background: #fff; border-radius: .25rem; padding: 1px;
  box-shadow: 0 0 0 1px var(--bs-border-color); }

/* =========================================================================
   Formlar
   ========================================================================= */
.product-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }

/* =========================================================================
   Durum kutuları (uyarı / başarı) + satır vurguları
   ========================================================================= */
.badge-prep { display: inline-block; padding: .05rem .45rem; border-radius: .6rem;
  font-size: .82em; font-weight: 600; text-transform: capitalize;
  background: var(--arb-warn-bg); color: var(--arb-warn-fg);
  border: 1px solid var(--arb-warn-border); }

.warning { background: var(--arb-warn-bg); border: 1px solid var(--arb-warn-border);
  color: var(--arb-warn-fg); padding: 0.6rem 0.9rem; border-radius: .5rem; }
.ok { background: var(--arb-ok-bg); border: 1px solid var(--arb-ok-border);
  color: var(--arb-ok-fg); padding: 0.6rem 0.9rem; border-radius: .5rem; }

.low-stock { --bs-table-bg: var(--arb-danger-row); background: var(--arb-danger-row); color: var(--arb-danger-fg); }
.aged-bucket { --bs-table-bg: var(--arb-aged-row); background: var(--arb-aged-row); color: var(--arb-aged-fg); }

/* =========================================================================
   KPI kartları
   ========================================================================= */
.kpi-cards { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.kpi-card { background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color);
  border-radius: .625rem; padding: 1rem 1.5rem; min-width: 140px; text-align: center; }
.kpi-card span { display: block; font-size: 1.6rem; font-weight: 700; color: var(--bs-emphasis-color); }
.kpi-card label { font-size: 0.85rem; color: var(--bs-secondary-color); }

/* =========================================================================
   Veri Kaynakları panosu
   ========================================================================= */
.src-group-title { margin-top: 1.75rem; padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--bs-border-color); }
.src-table td { vertical-align: top; }
.src-sub { font-size: 0.8rem; color: var(--bs-secondary-color); margin-top: 0.15rem; }
.src-failed { color: var(--bs-danger); }
.src-add { margin-top: 2rem; }
.src-add summary { cursor: pointer; font-weight: 600; }
.src-add .product-form { margin-top: 0.75rem; }

.pill { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.pill-fresh { background: var(--arb-pill-fresh-bg); color: var(--arb-pill-fresh-fg); }
.pill-aging { background: var(--arb-pill-aging-bg); color: var(--arb-pill-aging-fg); }
.pill-stale { background: var(--arb-pill-stale-bg); color: var(--arb-pill-stale-fg); }
.pill-never { background: var(--arb-pill-never-bg); color: var(--arb-pill-never-fg); }

/* Tüketen sayfalardaki "veri durumu" şeridi */
.ds-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem;
  padding: 0.5rem 0.9rem; margin: 0.75rem 0 1.25rem; font-size: 0.88rem; }
.ds-strip-label { font-weight: 600; color: var(--bs-secondary-color); }
.ds-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.ds-now { display: inline; }
.ds-now button { font-size: 0.8rem; padding: 0.1rem 0.5rem; cursor: pointer; }