/* =========================================================================
   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;
  --arb-info-bg: #dbeafe;   --arb-info-border: #3b82f6;  --arb-info-fg: #1e3a8a;
  --arb-error-bg: #fee2e2;  --arb-error-border: #ef4444; --arb-error-fg: #7f1d1d;
  /* 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;

  /* Zemin (canvas) ve yüzey (surface) — göz yormayan hafif gri zemin, üstünde
     beyaz kartlar. Şablonlardaki sabit renkler bu ikisine ve --bs-*/--arb-* 'a
     çevrildi → dark'ta da okunur. */
  --arb-canvas: #eef0f4;      /* içerik alanının arka planı (body) */
  --arb-surface: #ffffff;     /* kart / sidebar / tablo başlığı yüzeyi */
  --arb-surface-2: #f6f7f9;   /* ikincil yüzey (satır vurgusu, alt kutu) */
  --arb-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
}

[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-info-bg: rgba(59, 130, 246, .16);  --arb-info-border: rgba(59, 130, 246, .5);  --arb-info-fg: #93c5fd;
  --arb-error-bg: rgba(239, 68, 68, .16);  --arb-error-border: rgba(239, 68, 68, .5);  --arb-error-fg: #fca5a5;
  --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;

  --arb-canvas: #15171a;      /* body'den biraz koyu → yüzeyler öne çıksın */
  --arb-surface: #212630;     /* kart / sidebar — canvas'tan belirgin açık */
  --arb-surface-2: #272d38;
  --arb-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .30);
}

/* Zemin: hafif gri (light) / koyu (dark). Kartlar ve sidebar bunun üstünde yüzer. */
body { background-color: var(--arb-canvas); }

/* =========================================================================
   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 — genişlik kuralları aşağıda (Uygulama kabuğu). */
.content { padding: 1.5rem; }
@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
   ========================================================================= */
/* Tam genişlik kabukta 2 kolon çok seyrek kalıyordu → ekrana göre 1-4 kolon. */
.permission-list { columns: 2; column-gap: 2rem; }
@media (min-width: 1200px) { .permission-list { columns: 3; } }
@media (min-width: 1800px) { .permission-list { columns: 4; } }
@media (max-width: 576px) { .permission-list { columns: 1; } }
.permission-list li { break-inside: avoid; }

/* =========================================================================
   Özel (Bootstrap dışı) tablolar
   ========================================================================= */
/* NOT: burada bilerek `overflow: hidden` YOK. Tabloya overflow verilirse tablo bir
   kaydırma bağlamı olur ve `thead th`'deki `position: sticky` sayfa yerine tablonun
   içine yapışır (yani hiç çalışmaz) — sayfaların kendi sarmalayıcılarını yazma
   sebebi buydu. Yuvarlatma köşe hücrelerine verilir. */
.data-table { width: 100%; border-collapse: collapse; margin-top: 1rem;
  background: var(--arb-surface); color: var(--bs-body-color);
  border-radius: .5rem; box-shadow: var(--arb-shadow); }
.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 tr:first-child th:first-child { border-top-left-radius: .5rem; }
.data-table thead tr:first-child th:last-child { border-top-right-radius: .5rem; }
.data-table tbody tr:last-child td:first-child { border-bottom-left-radius: .5rem; }
.data-table tbody tr:last-child td:last-child { border-bottom-right-radius: .5rem; }
.data-table thead th {
  background: var(--arb-surface-2); color: var(--bs-emphasis-color);
  font-weight: 600; white-space: nowrap; }
.data-table tbody tr:hover { background: var(--arb-surface-2); }

/* Açıklaması olan hücre/başlık — `title` ile hesap özeti taşır. Noktalı alt çizgi:
   üzerine gelinince açıklama çıkacağı BELLİ olsun (tooltip'i kimse aramıyor). */
.has-help {
  border-bottom: 1px dotted var(--bs-secondary-color); cursor: help;
}

/* Dar ekranda TABLOYU SIKIŞTIR — önce sığdırmayı dene, kaydırma son çare.
   Kullanıcı şikâyeti: 1366/1440 px dizüstülerde geniş tablolar ekrana sığmıyor.
   Yazı tipi ve hücre boşluğu ekran daraldıkça kademeli küçülür; ürün görselleri de
   (satır yüksekliğini onlar belirliyor) birlikte küçülür. Kaydırma çubukları
   (.table-wrap + otomatik üst çubuk) yine yerinde — sığmayan tablo hâlâ kaydırılır. */
@media (max-width: 1600px) {
  .data-table { font-size: .93rem; }
  .data-table th, .data-table td { padding: .38rem .5rem; }
}
@media (max-width: 1300px) {
  .data-table { font-size: .87rem; }
  .data-table th, .data-table td { padding: .3rem .4rem; }
  .data-table .prod-thumb { --arb-thumb: 46px; }
}
@media (max-width: 992px) {
  .data-table { font-size: .82rem; }
  .data-table th, .data-table td { padding: .25rem .32rem; }
  .data-table .prod-thumb { --arb-thumb: 38px; }
}

/* Ü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); }

/* Ürün küçük görseli — TÜM tablolarda ortak boyut/davranış (satır içi stil YAZMA).
   Üstüne gelince büyür: `transform` kullanıldığı için yer kaplamaz, satır yüksekliği
   ve kolon genişlikleri sabit kalır; yalnız üste biner. Boyut `--arb-thumb` ile
   sayfa/tablo başına ayarlanabilir (ör. dar bir tabloda .data-table { --arb-thumb: 44px }). */
.prod-thumb {
  --arb-thumb: 64px;
  width: var(--arb-thumb); height: var(--arb-thumb); object-fit: contain;
  transition: transform .12s ease-out; }
.prod-thumb:hover {
  transform: scale(3); position: relative; z-index: 20;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
/* Büyüyen görsel hücrede kırpılmasın (bazı tablolar overflow:hidden kullanıyor). */
td:has(> .prod-thumb), td:has(> * > .prod-thumb) { overflow: visible; }

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

/* Önceden doldurulmuş alan (ör. A1 şablonunda FBA envanterinden gelen FNSKU/SKU).
   Sabit açık-yeşil zemin koyu temada okunmuyordu → zemin+YAZI birlikte temadan gelir.
   Sadece zemini boyamak yetmez: yazı rengi temaya göre dönüyor. */
input.field-prefilled, textarea.field-prefilled {
  background: var(--arb-ok-bg); color: var(--arb-ok-fg);
  border: 1px solid var(--arb-ok-border);
}
input.field-prefilled::placeholder { color: var(--arb-ok-fg); opacity: .6; }

/* =========================================================================
   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; }

/* Panel içi bilgi/sonuç kutuları (router'ların ürettiği HTML parçaları da kullanır).
   Renkler sabit YAZILMAZ — dark'ta açık zemin + açık yazı okunmaz hale geliyordu. */
.note-box { padding: 0.55rem 0.75rem; border-radius: .4rem; border: 1px solid transparent; }
.note-info { background: var(--arb-info-bg); border-color: var(--arb-info-border); color: var(--arb-info-fg); }
.note-ok { background: var(--arb-ok-bg); border-color: var(--arb-ok-border); color: var(--arb-ok-fg); }
.note-warn { background: var(--arb-warn-bg); border-color: var(--arb-warn-border); color: var(--arb-warn-fg); }
.note-error { background: var(--arb-error-bg); border-color: var(--arb-error-border); color: var(--arb-error-fg); }

.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-card`/`.kpi-cards` hiçbir şablonda kullanılmadığı için
   kaldırıldı (ölü kod). Gerçek desen: satinalma/_period_cards.html makroları. */

/* =========================================================================
   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; }

/* =========================================================================
   Cila (2026-07): tipografi + banner + native form kontrolleri + düzen.
   Hepsi tema değişkenleriyle (dark mode uyumlu); renk HARDCODE edilmez.
   ========================================================================= */

/* --- Tipografi: biraz daha büyük ve okunur --- */
body {
  font-size: 1.03rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1 { font-size: 1.95rem; font-weight: 700; margin-bottom: .5rem; letter-spacing: -.01em; }
h2 { font-size: 1.42rem; font-weight: 650; margin-top: 1.9rem; }
h3 { font-size: 1.16rem; font-weight: 600; margin-top: 1.3rem; }

/* --- Hesap banner'ı (üst çubuk ortası): büyük, göze çarpan --- */
.account-banner {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 1.35rem;
  letter-spacing: .06em;
  white-space: nowrap;
  pointer-events: none;                 /* altındaki tıklamaları engellemesin */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
@media (max-width: 1400px) { .account-banner { font-size: 1.1rem; } }

/* --- Native (Bootstrap class'ı olmayan) form kontrolleri → modern görünüm --- */
.content button:not(.btn):not(.navbar-toggler):not(.ds-now button),
.content input[type="submit"]:not(.btn) {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--bs-primary); color: #fff;
  border: 1px solid var(--bs-primary); border-radius: .5rem;
  padding: .42rem .95rem; transition: filter .12s ease, box-shadow .12s ease;
}
.content button:not(.btn):not(.navbar-toggler):hover,
.content input[type="submit"]:not(.btn):hover { filter: brightness(1.08); }
.content button:not(.btn):active,
.content input[type="submit"]:not(.btn):active { filter: brightness(.95); }
/* Veri-durumu şeridindeki küçük "Güncelle" butonları kompakt kalsın */
.content .ds-now button { font-size: .8rem; font-weight: 600; padding: .12rem .55rem; }

.content input[type="text"]:not(.form-control),
.content input[type="date"]:not(.form-control),
.content input[type="number"]:not(.form-control),
.content input[type="search"]:not(.form-control),
.content input[type="email"]:not(.form-control),
.content input[type="password"]:not(.form-control),
.content select:not(.form-select) {
  font: inherit; padding: .4rem .6rem; border-radius: .5rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg); color: var(--bs-body-color);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.content input:not(.form-control):focus,
.content select:not(.form-select):focus {
  outline: none; border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .2);
}

/* --- Bölümler arası nefes: iç içe/karışık görünmesin --- */
.content section { margin-bottom: 1.5rem; }

/* =========================================================================
   SAYFA BAŞLIĞI — tek desen, sınıf gerektirmez. `.content` içindeki sınıfsız
   her <h1> aynı boşluk + ayraç düzenini alır; `class` taşıyan başlıklar
   (login vb. `h4 mb-3`) bilerek dışarıda bırakılır.
   Alt satır veya sağda aksiyon isteyen sayfa: partials/_page_head.html makrosu.
   ========================================================================= */
.content h1:not([class]) {
  margin: 0 0 1.1rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem 1.25rem; flex-wrap: wrap;
  margin: 0 0 1.1rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--bs-border-color);
}
/* Makro içindeki başlık ayracı iki kez çizmesin. `.content` öneki ŞART: yukarıdaki
   `.content h1:not([class])` kuralı aksi halde daha güçlü kalır ve çift çizgi çıkar. */
.content .page-head h1 { margin: 0; padding: 0; border-bottom: 0; }
.page-head-sub { margin-top: .15rem; font-size: .9rem; color: var(--bs-secondary-color); }
.page-head-actions {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-left: auto;
}

/* =========================================================================
   FİLTRE / ARAÇ ÇUBUĞU — form kontrollerini tek kartta toplar. İçindeki native
   input/select/button yukarıdaki kurallardan zaten stil alır; ek sınıf gerekmez.
   Satır kırmak için araya <span class="filterbar-break"></span>.
   ========================================================================= */
.filterbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem;
  padding: .7rem .85rem; margin: 0 0 1.1rem;
  background: var(--arb-surface); border: 1px solid var(--bs-border-color);
  border-radius: .6rem; box-shadow: var(--arb-shadow);
}
.filterbar label { font-size: .82rem; font-weight: 600; color: var(--bs-secondary-color); }
.filterbar-break { flex-basis: 100%; height: 0; }

/* Segment (aç/kapa) grubu — birbirini dışlayan seçenekler için bitişik link/buton
   şeridi. Aktif olan `.active` alır. */
.segmented {
  display: inline-flex; border: 1px solid var(--bs-border-color);
  border-radius: .5rem; overflow: hidden;
}
/* `.content` öneki: yukarıdaki native-buton kuralı (mavi dolgu) segmentleri ezmesin. */
.segmented > a, .content .segmented > button {
  padding: .35rem .9rem; text-decoration: none; border: 0; border-radius: 0;
  background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-weight: 500;
}
.segmented > a + a, .content .segmented > button + button {
  border-left: 1px solid var(--bs-border-color);
}
.segmented > a:hover, .content .segmented > button:hover { background: var(--bs-secondary-bg); }
.segmented > .active, .content .segmented > button.active {
  background: var(--bs-primary); color: #fff; font-weight: 700;
}

/* --- "Hızlı erişim" alt-menü satırları (·-ayraçlı link grupları) — .quicklinks
       verilen sayfalarda toolbar görünümü. Sınıf yoksa görünüm değişmez (güvenli). --- */
.quicklinks {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center;
  margin: .75rem 0 1.25rem; padding: 0;
}
.quicklinks a {
  display: inline-block; padding: .34rem .7rem; border-radius: .5rem;
  background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color); text-decoration: none; font-size: .92rem; font-weight: 500;
  transition: background-color .12s ease, border-color .12s ease;
}
.quicklinks a:hover { background: var(--bs-tertiary-bg); border-color: var(--bs-primary); }

/* =========================================================================
   UYGULAMA KABUĞU (2026-07) — üst çubuk + sol menü + tam genişlik içerik.
   Renkler Bootstrap tema değişkenlerinden (--bs-*) türer → data-bs-theme
   değişince otomatik döner. HARDCODE renk yok.
   ========================================================================= */
:root {
  --arb-topbar-h: 54px;
  --arb-sidebar-w: 268px;
  --arb-sidebar-rail: 66px;
}

/* --- Üst çubuk: ince, yapışkan --- */
.app-topbar {
  position: sticky; top: 0; z-index: 1030;
  min-height: var(--arb-topbar-h); padding: 0 .85rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.app-topbar-inner {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: .5rem;
}
.app-brand { font-weight: 700; letter-spacing: -.01em; margin-right: .25rem; }
.app-topbar-right { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.app-topbar-icon {
  color: rgba(255, 255, 255, .82); font-size: 1.1rem; line-height: 1;
  padding: .25rem .3rem; text-decoration: none; border-radius: .4rem;
}
.app-topbar-icon:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.app-user { font-size: .88rem; opacity: .85; }
.app-sidebar-toggle { --bs-btn-padding-x: .5rem; --bs-btn-padding-y: .15rem; font-size: 1.05rem; }

/* --- Kabuk düzeni: [sidebar | içerik] --- */
.app-shell { display: flex; align-items: stretch; min-height: calc(100vh - var(--arb-topbar-h)); }

.app-sidebar {
  flex: 0 0 auto; width: var(--arb-sidebar-w);
  position: sticky; top: var(--arb-topbar-h); align-self: flex-start;
  height: calc(100vh - var(--arb-topbar-h)); overflow-y: auto; overscroll-behavior: contain;
  padding: .75rem .6rem 1.5rem;
  background: var(--arb-surface);
  border-right: 1px solid var(--bs-border-color);
  transition: width .16s ease;
}
.app-sidebar::-webkit-scrollbar { width: 8px; }
.app-sidebar::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 4px; }

/* İçerik: kalan tüm genişlik. min-width:0 → geniş tablolar flex kutusunu taşırmaz. */
.content { flex: 1 1 auto; min-width: 0; padding: 1.5rem 1.75rem 3rem; }
/* Form/metin ağırlıklı sayfalar okunur genişlikte kalsın (opt-in). */
.content.content-narrow { max-width: 920px; }
/* Çok geniş ekranda satırlar sonsuz uzamasın. */
@media (min-width: 2100px) { .content { max-width: 2000px; } }
@media (max-width: 576px) { .content { padding: 1rem .9rem 2.5rem; } }
/* Oturum yokken (login/kurulum/profil) sidebar yok → eski konteyner genişliği korunur;
   bu sayfalar zaten kendi Bootstrap row/col'leriyle ortalanıyor. */
.app-shell-bare .content { max-width: 1180px; margin: 0 auto; }

/* --- Menü satırları --- */
.app-nav { display: flex; flex-direction: column; gap: .15rem; }
.nav-flat { list-style: none; margin: 0 0 .35rem; padding: 0; }
.nav-group { margin-bottom: .2rem; }
.nav-group-items { list-style: none; margin: 0; padding: 0 0 .25rem; }
.nav-group.collapsed > .nav-group-items { display: none; }

.nav-row, .nav-group-toggle {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .44rem .6rem; border-radius: .5rem;
  color: var(--bs-body-color); text-decoration: none;
  font-size: .93rem; line-height: 1.25;
  border: 0; background: transparent; text-align: left;
  transition: background-color .12s ease, color .12s ease;
}
.nav-row:hover, .nav-group-toggle:hover { background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); }
.nav-row.active {
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis);
  font-weight: 600; box-shadow: inset 3px 0 0 var(--bs-primary);
}
.nav-group-toggle {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bs-secondary-color); cursor: pointer; margin-top: .35rem;
}
.nav-group-items .nav-row { padding-left: .95rem; }
.nav-ico { font-size: 1.02rem; width: 1.25rem; flex: 0 0 auto; text-align: center; opacity: .85; }
.nav-row.active .nav-ico { opacity: 1; }
.nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-chev { font-size: .7rem; opacity: .6; transition: transform .15s ease; }
.nav-group.collapsed .nav-chev { transform: rotate(-90deg); }

.nav-badge {
  flex: 0 0 auto; min-width: 1.3rem; padding: .05rem .38rem;
  background: var(--bs-danger); color: #fff;
  border-radius: 999px; font-size: .72rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Grup açıkken başlıktaki toplamı gösterme — satırlarda zaten görünüyor. */
.nav-group:not(.collapsed) > .nav-group-toggle .nav-badge-group { display: none; }

/* --- İkon şeridi (daraltılmış sidebar, >=992px) --- */
@media (min-width: 992px) {
  .sidebar-collapsed .app-sidebar { width: var(--arb-sidebar-rail); padding-left: .4rem; padding-right: .4rem; }
  .sidebar-collapsed .app-sidebar .nav-label,
  .sidebar-collapsed .app-sidebar .nav-chev { display: none; }
  .sidebar-collapsed .app-sidebar .nav-row,
  .sidebar-collapsed .app-sidebar .nav-group-toggle { justify-content: center; padding-left: .4rem; padding-right: .4rem; }
  .sidebar-collapsed .app-sidebar .nav-group-items .nav-row { padding-left: .4rem; }
  /* Daraltılmışken gruplar hep açık: her sayfa tek tıkla erişilebilir kalsın. */
  .sidebar-collapsed .app-sidebar .nav-group.collapsed > .nav-group-items { display: block; }
  .sidebar-collapsed .app-sidebar .nav-group-toggle {
    border-top: 1px solid var(--bs-border-color); border-radius: 0;
    margin-top: .5rem; padding-top: .5rem;
  }
  /* Rozet: dar şeritte sayı sığmaz → ikonun köşesinde küçük sayı. */
  .sidebar-collapsed .app-sidebar .nav-row { position: relative; }
  .sidebar-collapsed .app-sidebar .nav-badge {
    position: absolute; top: .05rem; right: .25rem;
    min-width: auto; padding: 0 .25rem; font-size: .62rem; line-height: 1.35;
  }
  .app-backdrop { display: none; }
}

/* --- Dar ekran: sidebar üstüne kayan panel + arka perde --- */
@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed; top: var(--arb-topbar-h); left: 0; z-index: 1040;
    width: min(84vw, var(--arb-sidebar-w));
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: 0 0 24px rgba(0, 0, 0, .28);
  }
  .sidebar-open .app-sidebar { transform: none; }
  .app-backdrop {
    position: fixed; inset: var(--arb-topbar-h) 0 0 0; z-index: 1035;
    background: rgba(0, 0, 0, .45);
  }
  .account-banner { display: none !important; }
}

/* =========================================================================
   Pano bileşenleri — panel sayfalarındaki kart ızgarası
   ========================================================================= */
.panel-grid {
  display: grid; gap: .9rem; margin: 1.25rem 0;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.panel-card {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .95rem 1.05rem; border-radius: .7rem;
  background: var(--arb-surface); border: 1px solid var(--bs-border-color);
  box-shadow: var(--arb-shadow);
  color: var(--bs-body-color); text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.panel-card:hover {
  border-color: var(--bs-primary); box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
  transform: translateY(-1px); color: var(--bs-body-color);
}
.panel-card-ico {
  flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: .55rem;
  display: grid; place-items: center; font-size: 1.15rem;
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis);
}
.panel-card-body { min-width: 0; flex: 1 1 auto; }
.panel-card-title { font-weight: 600; display: flex; align-items: center; gap: .45rem; }
.panel-card-sub { font-size: .84rem; color: var(--bs-secondary-color); margin-top: .1rem; }
.panel-section-title {
  font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bs-secondary-color); margin: 1.6rem 0 .1rem;
}

/* =========================================================================
   TABLO SARMALAYICILARI — TEK KAYNAK. Aynı iş için sayfa sayfa yazılmış
   çeşitlemeler (kopyalanmış .table-scroll tanımları, inline overflow-x)
   buraya toplandı. İki tane var, ikisi yeter:

     .table-wrap    → yatay kaydırma. Geniş tablo dar ekranda sayfayı taşırmasın.
     .table-scroll  → yüksekliği sınırlı kutu + YAPIŞKAN başlık satırı.

   Kendi kutusu olmayan, sayfayla birlikte kayan tablolar için `.data-table` +
   `.sticky-head` (başlık üst çubuğun altına yapışır).
   ========================================================================= */
.table-wrap { overflow-x: auto; }
.table-wrap > table { margin-top: 0; }

/* Kaydırma çubuğu GÖRÜNÜR olsun: kullanıcı tablonun sağa devam ettiğini fark etmezse
   veriyi kayıp sanıyor ("sağa sola çekme çubuğu yok" şikâyeti). İnce ama sürekli. */
.table-wrap { scrollbar-width: thin; }
.table-wrap::-webkit-scrollbar { height: 11px; }
.table-wrap::-webkit-scrollbar-track { background: var(--bs-tertiary-bg); border-radius: 6px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--bs-secondary-color); border-radius: 6px;
  border: 2px solid var(--bs-tertiary-bg);
}

/* ÜST yatay kaydırma çubuğu (base.html otomatik ekler; tabloyla iki yönlü senkron).
   Uzun tablolarda alttaki çubuk ekranın dışında kalıyor — üstte bir eşi olmalı.
   `.arb-scroll-top-inner` genişliği JS'te tablonun gerçek genişliğine ayarlanır. */
.arb-scroll-top {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; margin-top: 1rem;
}
.arb-scroll-top::-webkit-scrollbar { height: 11px; }
.arb-scroll-top::-webkit-scrollbar-track { background: var(--bs-tertiary-bg); border-radius: 6px; }
.arb-scroll-top::-webkit-scrollbar-thumb {
  background: var(--bs-secondary-color); border-radius: 6px;
  border: 2px solid var(--bs-tertiary-bg);
}
.arb-scroll-top-inner { height: 1px; }
/* Üst çubuk eklenen tabloda çift boşluk olmasın (çubuğun kendi margin'i var). */
.arb-scroll-top + .table-wrap > table { margin-top: .15rem; }

/* Yükseklik sayfa başına ayarlanır:
   <div class="table-scroll" style="--arb-table-max-h:900px"> … </div> */
.table-scroll {
  --arb-table-max-h: 70vh;
  max-height: var(--arb-table-max-h);
  overflow: auto;
  border: 1px solid var(--bs-border-color); border-radius: .5rem;
}
.table-scroll > table { margin-top: 0; }
.table-scroll thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--arb-surface-2);
}

/* Sayfa kaydırmasıyla yapışan başlık. Üst çubuk sticky olduğu için başlık onun
   ALTINA yapışmalı (`top: 0` verilirse çubuğun arkasında kaybolur).
   NOT: base.html'deki otomatik sarmalayıcı bu tabloları ATLAR — sarmalayınca sticky
   başlık sayfa yerine sarmalayıcıya yapışır ve çalışmaz. Yatay kaydırma gerekiyorsa
   `.sticky-head` yerine `.table-scroll` (kendi kutusu + yapışkan başlık) kullan. */
.sticky-head thead th {
  position: sticky; top: var(--arb-topbar-h); z-index: 2;
  background: var(--arb-surface-2);
}

/* =========================================================================
   Kullanma kılavuzu + asistan
   ========================================================================= */
/* Sayfa künyesi (adres/rol/izin) — dar, etiket kolonu belirgin. */
.guide-facts { max-width: 720px; }
.guide-facts th { width: 11rem; background: var(--bs-secondary-bg); font-weight: 600; }

/* Elle yazılan kılavuz gövdesi (markdown_lite çıktısı). */
.guide-body { max-width: 900px; }
.guide-body h2 { border-bottom: 1px solid var(--bs-border-color); padding-bottom: .3rem; }
.guide-body code {
  background: var(--bs-secondary-bg); border-radius: .25rem; padding: .05rem .3rem;
  font-size: .9em;
}
.guide-body blockquote {
  margin: .9rem 0; padding: .55rem .9rem;
  border-left: 3px solid var(--bs-primary);
  background: var(--bs-tertiary-bg); border-radius: 0 .4rem .4rem 0;
}
.guide-body ul, .guide-body ol { padding-left: 1.35rem; }
.guide-body li { margin-bottom: .25rem; }
.guide-body .guide-table { max-width: 100%; }

/* Asistan cevabı — eski sabit renkler yerine tema değişkenleri (dark uyumlu). */
.assistant-answer {
  background: var(--bs-tertiary-bg); border-left: 4px solid var(--bs-primary);
  padding: 1rem 1.25rem; border-radius: 0 .4rem .4rem 0;
  white-space: pre-wrap; font-size: .95rem; line-height: 1.6; max-width: 860px;
}
.assistant-sources { margin-top: 1rem; font-size: .85rem; color: var(--bs-secondary-color); }