/* ════════════════════════════════════════════════════════════════════════════
   ANA SAYFA GÖSTERGE PANELİ — GÖRSEL KATMAN
   ════════════════════════════════════════════════════════════════════════════
   TÜM SEÇİCİLER .mr-dash ALTINDA KAPSANMIŞTIR.
   Gelen tasarımda .panel, .line, .blue, .cell gibi çok genel adlar vardı;
   serbest bırakılsalardı sistemdeki 40+ ekranın düzenini bozarlardı.

   TEK EKRAN İLKESİ
   Panel dikeyde dört şeride bölünür ve toplam yükseklik viewport'a bağlanır.
   Yazı boyutları, boşluklar ve grafik yükseklikleri clamp() ile ekrana göre
   ölçeklenir — küçük dizüstünde de 27" monitörde de kaydırmadan okunur.
   1100px altında (tablet/telefon) tek sütuna düşer ve kaydırma serbest kalır.
   ════════════════════════════════════════════════════════════════════════════ */

.mr-dash {
  --d-surface: rgba(255,255,255,.95);
  --d-surface-2: #f8fbff;
  --d-border: #e6edf7;
  --d-ink: #0f224f;
  --d-muted: #7d8fa8;

  --d-blue: #3b82f6;
  --d-cyan: #22b8cf;
  --d-orange: #ff7a00;
  --d-green: #18a66a;
  --d-red: #ff3b3b;
  --d-purple: #7657e8;
  --d-yellow: #eab84b;
  --d-slate: #8fa1ba;

  --d-shadow: 0 1px 2px rgba(15,34,79,.02), 0 6px 20px rgba(37,68,120,.045);
  --d-shadow-hover: 0 14px 32px rgba(37,68,120,.10);
  --d-radius: 14px;

  /* Ekrana göre ölçek — tüm ölçüler bunlardan türer */
  --d-gap: clamp(8px, .72vh, 13px);
  --d-pad: clamp(10px, 1.05vh, 17px);
  --d-f-mini: clamp(8.5px, .85vh, 10.5px);
  --d-f-kucuk: clamp(9.5px, .95vh, 11.5px);
  --d-f-orta: clamp(10.5px, 1.05vh, 12.5px);
  --d-f-sayi: clamp(17px, 2.15vh, 27px);
  --d-f-sayi-kucuk: clamp(14px, 1.75vh, 21px);

  color: var(--d-ink);
  display: flex;
  flex-direction: column;
  gap: var(--d-gap);
}

[data-tema="koyu"] .mr-dash {
  --d-surface: rgba(30,41,59,.95);
  --d-surface-2: #172033;
  --d-border: #2b3a52;
  --d-ink: #e2e8f0;
  --d-muted: #8296b0;
  --d-shadow: 0 1px 2px rgba(0,0,0,.20), 0 6px 20px rgba(0,0,0,.22);
  --d-shadow-hover: 0 14px 32px rgba(0,0,0,.34);
}

/* ── KART TEMELİ ─────────────────────────────────────────────────────────── */
.mr-dash .d-kart {
  background: linear-gradient(180deg, var(--d-surface), var(--d-surface-2));
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: var(--d-pad);
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mr-dash .d-kart:hover { transform: translateY(-2px); box-shadow: var(--d-shadow-hover); }

.mr-dash .d-kart::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
              rgba(59,130,246,.07), transparent 30%);
  transition: opacity .2s ease;
}
.mr-dash .d-kart:hover::after { opacity: 1; }

/* ── ŞERİTLER ────────────────────────────────────────────────────────────── */
.mr-dash .d-serit-kpi {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: var(--d-gap);
}

/* Tablolar üstte — iş listesi önce gelir, daha çok satır görünsün diye
   biraz daha fazla pay alır. Grafikler altta özet görevi görür. */
.mr-dash .d-serit-tablo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--d-gap);
  min-height: 0;
  flex: 1.25;
}

.mr-dash .d-serit-surec {
  display: grid;
  grid-template-columns: 2.3fr 1fr;
  gap: var(--d-gap);
}

.mr-dash .d-serit-grafik {
  display: grid;
  grid-template-columns: .95fr 1.5fr .95fr;
  gap: var(--d-gap);
  min-height: 0;
  flex: 1;
}

/* ── KPI ─────────────────────────────────────────────────────────────────── */
.mr-dash .d-kpi { flex-direction: row; align-items: center; gap: 11px; cursor: pointer; }
.mr-dash .d-kpi:hover { border-color: #cddcf1; }
[data-tema="koyu"] .mr-dash .d-kpi:hover { border-color: #3d5170; }

.mr-dash .d-kpi-ikon {
  width: clamp(32px, 3.5vh, 46px);
  height: clamp(32px, 3.5vh, 46px);
  border-radius: 12px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.mr-dash .d-etiket {
  font-size: var(--d-f-mini); font-weight: 800; letter-spacing: .06em;
  color: var(--d-muted); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mr-dash .d-sayi { font: 800 var(--d-f-sayi)/1 Manrope, Inter, sans-serif; margin-top: 4px; }
.mr-dash .d-degisim {
  font-size: var(--d-f-mini); margin-top: 4px; display: flex;
  align-items: center; gap: 3px; white-space: nowrap;
}
.mr-dash .d-artis { color: var(--d-green); font-weight: 800; }
.mr-dash .d-azalis { color: var(--d-red); font-weight: 800; }
.mr-dash .d-degisim-not { color: var(--d-muted); }

/* ── BAŞLIK ──────────────────────────────────────────────────────────────── */
.mr-dash .d-baslik {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: calc(var(--d-pad) * .7); flex-shrink: 0;
}
.mr-dash .d-baslik-ad { font: 800 var(--d-f-orta) Manrope, Inter, sans-serif; letter-spacing: .02em; }
.mr-dash .d-baslik-not { font-size: var(--d-f-mini); color: var(--d-muted); font-weight: 600; }

/* ── RENK KUTULARI ───────────────────────────────────────────────────────── */
.mr-dash .r-blue   { color: #3b82f6; background: #dceafe; }
.mr-dash .r-green  { color: #18a66a; background: #dcf7e9; }
.mr-dash .r-orange { color: #ff7a00; background: #fff0e2; }
.mr-dash .r-red    { color: #ff3b3b; background: #ffe5e5; }
.mr-dash .r-purple { color: #7657e8; background: #ece8ff; }
.mr-dash .r-slate  { color: #6f86a6; background: #e9eff7; }
.mr-dash .r-cyan   { color: #22b8cf; background: #d9f4f8; }

[data-tema="koyu"] .mr-dash .r-blue   { background: #1b2f52; }
[data-tema="koyu"] .mr-dash .r-green  { background: #12332a; }
[data-tema="koyu"] .mr-dash .r-orange { background: #3a2a16; }
[data-tema="koyu"] .mr-dash .r-red    { background: #3a1e1e; }
[data-tema="koyu"] .mr-dash .r-purple { background: #262046; }
[data-tema="koyu"] .mr-dash .r-slate  { background: #232f42; color: #9db0c9; }
[data-tema="koyu"] .mr-dash .r-cyan   { background: #10333a; }

/* ── SÜREÇ KARTLARI ──────────────────────────────────────────────────────── */
.mr-dash .d-surec-izgara {
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap: calc(var(--d-gap) * .7); flex: 1; min-height: 0;
}
.mr-dash .d-surec {
  background: var(--d-surface-2);
  border: 1px solid var(--d-border);
  border-radius: 11px;
  padding: calc(var(--d-pad) * .72);
  display: flex; align-items: center; gap: 9px;
  transition: transform .2s ease, border-color .2s ease;
  min-width: 0;
}
.mr-dash .d-surec:hover { transform: translateY(-3px); border-color: #bcd0ed; }
[data-tema="koyu"] .mr-dash .d-surec:hover { border-color: #3d5170; }

.mr-dash .d-surec-ikon {
  width: clamp(26px, 2.9vh, 36px); height: clamp(26px, 2.9vh, 36px);
  border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

/* ── SÜRE KARTLARI ───────────────────────────────────────────────────────── */
.mr-dash .d-sure-izgara {
  display: grid; grid-template-rows: repeat(3, 1fr);
  gap: calc(var(--d-gap) * .7); flex: 1; min-height: 0;
}
.mr-dash .d-sure {
  background: var(--d-surface-2);
  border: 1px solid var(--d-border);
  border-radius: 11px;
  padding: calc(var(--d-pad) * .6) calc(var(--d-pad) * .8);
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}

/* ── TABLO ───────────────────────────────────────────────────────────────── */
.mr-dash .d-tablo { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Satırlar boşluğa eşit dağılır — kart altında boş alan kalmaz */
.mr-dash .d-tablo > .d-tsatir:not(.d-tbaslik) { flex: 1; }
.mr-dash .d-tsatir {
  display: grid; align-items: center;
  gap: 8px;
  padding: calc(var(--d-pad) * .38) 4px;
  border-bottom: 1px solid var(--d-border);
  font-size: var(--d-f-kucuk);
  cursor: pointer;
  transition: background .15s ease;
  min-width: 0;
}
.mr-dash .d-tsatir:hover { background: rgba(59,130,246,.06); }
.mr-dash .d-tbaslik {
  font-size: var(--d-f-mini); font-weight: 800; color: var(--d-muted);
  letter-spacing: .05em; border-bottom: 1px solid var(--d-border);
  padding-bottom: 5px;
}
.mr-dash .d-hucre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-dash .d-no { font-weight: 800; color: var(--d-blue); }
.mr-dash .d-gecikme { color: var(--d-red); font-weight: 800; text-align: right; }

.mr-dash .d-tumu {
  font-size: var(--d-f-mini); font-weight: 800; color: var(--d-blue);
  cursor: pointer; letter-spacing: .03em;
}

/* ── ÇUBUK ───────────────────────────────────────────────────────────────── */
.mr-dash .d-cubuk-zemin { height: 5px; border-radius: 3px; overflow: hidden; background: var(--d-border); }
.mr-dash .d-cubuk { height: 100%; border-radius: 3px; transition: width .55s cubic-bezier(.4,0,.2,1); }

/* ── SÜTUN GRAFİK ────────────────────────────────────────────────────────── */
.mr-dash .d-bar {
  border-radius: 6px 6px 2px 2px; overflow: hidden;
  display: flex; flex-direction: column-reverse;
  box-shadow: 0 3px 7px rgba(59,130,246,.13);
  transition: transform .2s ease, filter .2s ease, opacity .15s ease;
}
.mr-dash .d-bar-sar:hover .d-bar { transform: translateY(-4px); filter: brightness(1.07); }

/* ── UYARI ROZETİ ────────────────────────────────────────────────────────── */
.mr-dash .d-rozet {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff4d9; color: #8a6714;
  border: 1px solid #f0d9a0; border-radius: 20px;
  padding: 3px 10px; font-size: var(--d-f-mini); font-weight: 800;
}
[data-tema="koyu"] .mr-dash .d-rozet {
  background: #3a2f18; color: #e0b84f; border-color: #6b5527;
}

/* ════════════════════════════════════════════════════════════════════════════
   YETKİ MATRİSİ IZGARASI — YOĞUN YERLEŞİM
   ════════════════════════════════════════════════════════════════════════════
   ÖNCEKİ SORUN: grid kullanılıyordu. Grid'de bir satırdaki tüm hücreler en
   uzun kartın yüksekliğine uzar. KAMERA modülünde tek işlem var, yanındaki
   MUHASEBE'de yirmi tane — kamera kartı boş boş yirmi satırlık yer kaplıyordu.
   Sayfa gereksiz yere uzuyor, kaydırmak yoruyordu.

   ÇÖZÜM: CSS çok sütunlu düzen (columns). Her kart kendi içeriği kadar yer
   kaplar, sütunlar doğal olarak dolar — kısa kartların altına bir sonraki
   kart hemen gelir. Boşluk kalmaz.

   break-inside: avoid — bir kartın ortadan bölünüp iki sütuna dağılmasını
   engeller; yetki listesi bölünürse okunamaz hale gelir.
   ════════════════════════════════════════════════════════════════════════════ */
.mr-yetki-izgara {
  display: block !important;      /* grid'i iptal et */
  columns: 3;
  column-gap: 12px;
}

.mr-yetki-izgara > * {
  break-inside: avoid;
  page-break-inside: avoid;       /* eski tarayıcılar */
  -webkit-column-break-inside: avoid;
  margin-bottom: 12px;
  display: inline-block;          /* Safari'de bölünmeyi engeller */
  width: 100%;
}

@media (min-width: 1900px) { .mr-yetki-izgara { columns: 4; } }
@media (max-width: 1300px) { .mr-yetki-izgara { columns: 2; } }
@media (max-width: 820px)  { .mr-yetki-izgara { columns: 1; } }

/* ── YÜZEN DÜĞME ÇAKIŞMASI ───────────────────────────────────────────────
   WhatsApp ve görüntülü görüşme düğmeleri sağ altta sabit duruyor ve
   panelin son şeridindeki sağ kartın üstüne biniyordu — DOSYA DURUMLARI
   kartında yüzde değerleri düğmelerin altında kalıyordu.
   Son şeridin sağdaki kartına düğme genişliği kadar boşluk bırakılır. */
.mr-dash .d-serit-grafik > *:last-child,
.mr-dash .d-serit-tablo > *:last-child {
  padding-right: 62px;
}

/* Dar ekranda kartlar tek sütuna düştüğü için çakışma olmaz */
@media (max-width: 1250px) {
  .mr-dash .d-serit-grafik > *:last-child,
  .mr-dash .d-serit-tablo > *:last-child {
    padding-right: var(--d-pad);
  }
}

/* ── DUYARLI ─────────────────────────────────────────────────────────────── */
@media (max-width: 1500px) {
  .mr-dash .d-serit-kpi { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1250px) {
  .mr-dash { height: auto !important; }
  .mr-dash .d-serit-grafik,
  .mr-dash .d-serit-surec,
  .mr-dash .d-serit-tablo { grid-template-columns: 1fr; flex: none; }
  .mr-dash .d-surec-izgara { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .mr-dash .d-serit-kpi { grid-template-columns: repeat(2, 1fr); }
  .mr-dash .d-surec-izgara { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .mr-dash .d-serit-kpi { grid-template-columns: 1fr; }
}