/* ============================================================================
   AG Dekor — BENTO Dashboard  (bento-dashboard.css)
   ----------------------------------------------------------------------------
   Bu dosya, mevcut dashboard'u "Bento" görünümüne çevirir. Mevcut SINIFLARINIZI
   hedefler (.dash-cell, .card, .dash-*-head, .dash-head-ico, .dash-pulse-value …).
   Token'lar variables.css'ten gelir — YENİ RENK YOK.

   KULLANIM (iki seçenek):
   • Hızlı: app.css'te `dashboard.css`'ten SONRA import edin (override kazanır):
       @import "pages/dashboard.css";
       @import "pages/bento-dashboard.css";
   • Temiz: aşağıdaki kuralları doğrudan dashboard.css içine taşıyıp eski
     başlık-bandı kurallarını silin (kullanıcı "eski tasarım kalksın" dedi).

   VARSAYIM: widget kökü .dash-cell'in doğrudan çocuğudur ve .card sınıfını taşır
   (örn. <section class="card dash-alerts">). Kök .card değilse de aşağıdaki
   `.dash-cell > *` kuralları kabuğu yine Bento yapar.
   ============================================================================ */

/* ── 1) Izgara: biraz daha ferah ─────────────────────────────────────────── */
.dash-grid { gap: 18px; }

/* ── 2) Kart kabuğu: 18px yuvarlatma, tonlu zemin, yumuşak gölge, hover ───── */
.dash-cell > * {
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--bento-accent, var(--border)) 16%, var(--border));
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--bento-accent, transparent) 6%, var(--surface)),
      var(--surface) 62%);
  box-shadow: 0 6px 22px rgba(70, 62, 124, .07);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.dash-cell > *:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(70, 62, 124, .12); }
/* Boyutlandırma/yakın-köşe sırasında yükselmeyi kapat (titreme olmasın) */
.dash-cell.is-resizing > *, .dash-cell.is-near-corner > * { transform: none; }
/* Tek kolon (mobil): hover yükselmesi gereksiz */
@media (max-width: 767px) { .dash-cell > *:hover { transform: none; } }

/* ── 3) Widget → aksan eşlemesi (kartın renk karakteri) ──────────────────── */
/* Kök sınıfa göre --bento-accent. Yeni widget'ta köke .dash-<x> + aksan ekleyin. */
.dash-cell > .dash-alerts     { --bento-accent: var(--red); }
.dash-cell > .dash-pulse      { --bento-accent: var(--brand); }
.dash-cell > .dash-cal        { --bento-accent: var(--blue); }
.dash-cell > .dash-feed       { --bento-accent: var(--navy); }
.dash-cell > .dash-fih        { --bento-accent: var(--brand); }
.dash-cell > .dash-bal--asset { --bento-accent: var(--green); }
.dash-cell > .dash-bal--liab  { --bento-accent: var(--red); }
.dash-cell > .dash-health     { --bento-accent: var(--brand); }
.dash-cell > .dash-actions    { --bento-accent: var(--brand); }
.dash-cell > .dash-crm        { --bento-accent: var(--blue); }
/* Düz `.card` köklü widget'lar (kendi .dash-x sınıfı yok) → data-widget ile aksan ver
   (TUTARLILIK: tüm modüllerde aynı hafif gradient olsun). */
.dash-cell[data-widget="gorevler"]    > * { --bento-accent: var(--brand); }
.dash-cell[data-widget="cok-satanlar"] > * { --bento-accent: var(--green); }
.dash-cell[data-widget="dusuk-stok"]  > * { --bento-accent: var(--red); }
.dash-cell[data-widget="notlar"]      > * { --bento-accent: var(--navy); }
.dash-cell[data-widget="kasa-hedefi"] > * { --bento-accent: var(--brand); }
/* KPI kutucukları aksanlarını inline style ile taşır (bkz. dashboard.js örneği). */

/* ── 4) Başlık BANTLARINI sadeleştir → ikon çipi + düz başlık ─────────────── */
/* Mevcut renkli/gradient bantların zemin+çerçeve+kutu görünümünü kaldır. */
.dash-alerts-head,
.dash-cal-head,
.dash-feed-head,
.dash-bal-head,
.dash-fih-head,
.dash-health-head,
.dash-crm-head {
  background: none !important;
  border: 0 !important;
  /* Başlığı veriden ayıran ince, temaya uyumlu çizgi (token rengi). */
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 2px 2px 10px !important;
  margin: 0 0 var(--space-3) !important;
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--text);            /* eskiden --navy; Bento'da daha nötr başlık */
}
/* İşletme Sağlığı: kart .card space-5 padding'ini kullanır → başlık bento 2px ile kart padding'inin
   İÇİNDE (çizgi de içeride, diğer kartlar gibi). İçerik (.dash-health-top) yatay padding'i SIFIR
   (karttan gelir; çift padding olmasın). */
.dash-health-top { padding-left: 0 !important; padding-right: 0 !important; }
/* Bilanço başlığındaki toplam tutar sağda kalsın (mevcut .dash-bal-head-total) */
.dash-bal-head-total { font-size: var(--fs-lg); }
/* Ödeme Takvimi alt-notu */
.dash-cal-head small { color: var(--text-muted); font-weight: 600; }

/* İkon çipini Bento ölçüsüne getir (mevcut .dash-head-ico) */
.dash-head-ico { width: 34px; height: 34px; border-radius: 11px; margin-right: 11px; }
.dash-head-ico svg { width: 17px; height: 17px; }
/* Çip zemini zaten aksan tonlu (--brand/--blue/--green/--red/--navy varyantları) — korunur. */

/* ── 5) Büyük rakamlar (Bento karakteri) ─────────────────────────────────── */
.dash-pulse-value { font-size: 2.4rem; letter-spacing: -.02em; }
.stat-value { font-size: 2rem; }
.dash-bal-head-total { font-variant-numeric: tabular-nums; }

/* ── 6) Hızlı İşlemler → kompakt dikey kutucuklar (prototip Bento) ────────── */
/* Mevcut .dash-actions yatay buton barı; Bento'da kare kutucuk ızgarası. */
.dash-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  align-content: center;
}
.dash-actions .btn {
  flex: none !important;
  flex-direction: column;
  gap: 9px;
  padding: 14px 8px;
  height: auto;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.dash-actions .btn svg { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .dash-actions { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
}

/* ── 7) KPI mini-kutucuğu (YENİ widget'lar — dashboard.js'te register edilir) ─ */
.dash-kpi {
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-5);
}
.dash-kpi-top { display: flex; align-items: center; gap: 10px; }
.dash-kpi-ico {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bento-accent, var(--navy)) 14%, transparent);
  color: var(--bento-accent, var(--navy));
}
.dash-kpi-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.dash-kpi-lbl { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 600; }
.dash-kpi-val {
  font-size: 1.9rem; font-weight: 800; color: var(--text); margin-top: 10px;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.dash-kpi-trend { font-size: var(--fs-xs); font-weight: 700; margin-top: 2px; color: var(--text-muted); }
.dash-kpi-trend.is-up { color: var(--green); }
.dash-kpi-trend.is-down { color: var(--red); }

/* ── 8) Boyutlandırma kolu (mevcut .dash-cell::after) Bento yuvarlağına otur ─ */
/* dashboard.css'te ::after grip zaten var; Bento'da köşe yarıçapına uydur. */
.dash-cell::after { right: 7px; bottom: 7px; }

/* ── 9) (Opsiyonel) Düzenle modu görünümü — canlı sürükle-bırak için ──────── */
/* Eğer §8 (Modül Kütüphanesi + canlı sürükle) eklenirse bu sınıflar kullanılır. */
.dash-grid.is-editing .dash-cell > * { border-style: dashed; border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.dash-cell.is-dragging { opacity: .45; }
.dash-cell.is-drop-target > * { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-glow), var(--shadow); }
/* ⚠️ height:auto ŞART: .dash-cell > * { height:100% } kuralı (kart için) bu kontrol kutusuna
   da uyguluyordu → şeffaf ama tam-boy kutu kartı kaplıyordu. pointer-events yalnız butonlarda. */
.dash-cell-ctrls { display: none; position: absolute; top: 8px; right: 8px; height: auto !important; width: auto; gap: 6px; z-index: 6; pointer-events: none; }
.dash-grid.is-editing .dash-cell-ctrls { display: flex; }
.dash-cell-ctrls .dash-cell-ctrl { pointer-events: auto; }
.dash-cell-ctrl {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
  display: grid; place-items: center; cursor: pointer; color: var(--text-muted); box-shadow: var(--shadow-sm);
}
.dash-cell-ctrl:hover { color: var(--brand); border-color: var(--brand); }
.dash-cell-ctrl.is-danger:hover { color: var(--red); border-color: var(--red); }
.dash-cell-ctrl svg { width: 15px; height: 15px; }

/* CRM Takipleri widget aksanı (bu oturumda eklendi) */
.dash-cell > .dash-crm { --bento-accent: var(--blue); }

/* ── Düzenleme modu: banner araç çubuğu (Bento) ──────────────────────────── */
.dash-toolbar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: var(--space-3); }
/* "Paneli Düzenle" = küçük puntolu sade metin linki */
.dash-edit-textbtn {
  border: 0; background: none; cursor: pointer; padding: 2px 4px;
  font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: .01em;
  transition: color var(--transition);
}
.dash-edit-textbtn:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.dash-toolbar.dash-edit-on {
  justify-content: flex-start; gap: var(--space-3);
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 8%, var(--surface)), var(--surface) 62%);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  border-radius: 14px; padding: var(--space-3) var(--space-4); flex-wrap: wrap;
}
.dash-edit-ico { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 11px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.dash-edit-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.dash-edit-text { display: flex; flex-direction: column; min-width: 0; }
.dash-edit-text b { font-size: var(--fs-md); color: var(--text); }
.dash-edit-text span { font-size: var(--fs-xs); color: var(--text-muted); }
.dash-edit-spacer { flex: 1 1 auto; }

/* Düzenleme modunda boyutlandırma tutamağı her zaman görünür + grip imleci */
.dash-grid.is-editing .dash-cell::after { opacity: .8; border-color: var(--brand); }
.dash-cell-grip { cursor: grab; }
.dash-cell-grip:active { cursor: grabbing; }
.dash-cell-grip svg { fill: currentColor; stroke: none; width: 15px; height: 15px; }
.dash-cell.is-dragging { opacity: .4; }

/* ── Modül Kütüphanesi (sağdan açılan drawer) ────────────────────────────── */
.dash-drawer-overlay { position: fixed; inset: 0; background: rgba(20,16,38,.42); opacity: 0; transition: opacity .24s ease; z-index: 1400; }
.dash-drawer-overlay.show { opacity: 1; }
.dash-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 360px; max-width: 88vw; z-index: 1401;
  background: var(--surface); box-shadow: -10px 0 40px rgba(70,62,124,.18); transform: translateX(100%);
  transition: transform .26s cubic-bezier(.22,.61,.36,1); display: flex; flex-direction: column; }
.dash-drawer.show { transform: translateX(0); }
.dash-drawer-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border); }
.dash-drawer-head h3 { margin: 0; font-size: var(--fs-lg); font-weight: 800; }
.dash-drawer-head p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.dash-drawer-close { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--text-muted);
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; }
.dash-drawer-close:hover { background: var(--row-hover); color: var(--text); }
.dash-drawer-close svg { width: 18px; height: 18px; }
.dash-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.dash-lib-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dash-lib-card.is-added { background: var(--surface-alt); }
.dash-lib-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: var(--fs-sm); }
.dash-lib-added { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: var(--fs-sm); font-weight: 700; flex: 0 0 auto; }
.dash-lib-added svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.dash-lib-card .btn svg { width: 15px; height: 15px; }