/* ============================================================
   panel.css — Projeye özel eklentiler.
   Ana tema style.css içindedir; burası yalnız DikorPortal'a ait
   ek bileşenleri tanımlar (alt menü, giriş ekranı, form yardımı).
   ============================================================ */

/* ---- Marka görselleri ---- */
.brand-gorsel {
  height: 34px;
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
}
/* Menü daraltılınca yalnız logo kalır, ortalanır */
body.sidebar-collapsed .brand-gorsel { height: 26px; margin: 0 auto; }

.giris-logo {
  height: 52px;
  width: auto;
  object-fit: contain;
}

/* ---- Sol menü: alt menü (2. seviye) ---- */
.sb-sub {
  margin: 2px 0 6px 0;
  padding-left: 14px;
  border-left: 2px solid var(--border-soft);
  margin-left: 22px;
}
.sb-sub .sb-link {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 13px;
}
.sb-sub .sb-link i { font-size: 15px; flex-basis: 18px; }

.sb-link .sb-arrow {
  font-size: 12px !important;
  flex: 0 0 auto !important;
  margin-left: auto;
  transition: transform .2s;
  opacity: .55;
}
.sb-link.sb-toggle[aria-expanded="true"] .sb-arrow { transform: rotate(180deg); }

body.sidebar-collapsed .sb-sub { display: none !important; }
body.sidebar-collapsed .sb-arrow { display: none; }

/* ---- Giriş ekranı ---- */
.giris-sarmal {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 420px at 12% -8%, var(--accent-soft), transparent 60%),
    radial-gradient(760px 420px at 108% 108%, var(--accent-soft), transparent 55%),
    var(--bg);
}
.giris-kutu { width: 100%; max-width: 400px; }

.otp-kutu {
  width: 100%;
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 14px;
  padding: 14px 10px 14px 24px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Liste araç çubuğu ---- */
.liste-arac {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.liste-arac .form-control,
.liste-arac .form-select { min-width: 170px; }

/* ---- Tablo içi işlem düğmeleri ---- */
.satir-islem { display: inline-flex; gap: 6px; }
.satir-islem .icon-btn { width: 32px; height: 32px; }
.satir-islem .icon-btn i { font-size: 15px; }

/* ---- Ayar kartı ---- */
.ayar-satir {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px dashed var(--border-soft);
}
.ayar-satir:last-child { border-bottom: none; }
.ayar-satir .ayar-etiket { flex: 0 0 260px; }
.ayar-satir .ayar-etiket b { display: block; font-size: 13.5px; }
.ayar-satir .ayar-etiket span { font-size: 12px; color: var(--text-muted); }
.ayar-satir .ayar-alan { flex: 1 1 260px; max-width: 420px; }

@media (max-width: 767.98px) {
  .ayar-satir .ayar-etiket { flex-basis: 100%; }
}

/* ---- Yetki ağacı ---- */
.yetki-grup { border: 1px solid var(--border-soft); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.yetki-grup > .yg-baslik {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--surface-2); font-weight: 700; font-size: 13.5px;
}
.yetki-grup .yg-govde { padding: 6px 16px 14px; }
.yetki-satir { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 8px 0; border-top: 1px dashed var(--border-soft); }
.yetki-satir .ys-ad { flex: 0 0 190px; font-size: 13px; font-weight: 600; }

/* ---- Menü düzenleyici ---- */
.menu-satir {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border-soft);
  border-radius: 12px; background: var(--surface); margin-bottom: 8px;
}
.menu-satir.alt { margin-left: 34px; }
.menu-satir .ms-tut { cursor: grab; color: var(--text-soft); }
.menu-satir .ms-ad { font-weight: 600; font-size: 13.5px; }
.menu-satir .ms-yol { font-size: 11.5px; color: var(--text-muted); }
.menu-satir.baslik { background: var(--surface-2); border-style: dashed; }

/* ---- Belge: klasör kartı ---- */
.klasor-kart { position: relative; transition: transform .12s, box-shadow .12s; }
.klasor-kart:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.klasor-kart .klasor-duzenle {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  opacity: 0; transition: opacity .15s;
}
.klasor-kart:hover .klasor-duzenle { opacity: 1; }

/* ---- Belge: yükleme sürükle-bırak alanı ---- */
.yukleme-alan {
  border: 2px dashed var(--border); border-radius: 14px;
  padding: 34px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.yukleme-alan:hover { border-color: var(--accent); background: var(--surface-2); }
.yukleme-alan.surukle { border-color: var(--accent); background: var(--accent-soft); }
.yukleme-alan.dolu { border-style: solid; border-color: var(--accent); }
.yukleme-alan i { font-size: 40px; color: var(--accent); }

.min-w-0 { min-width: 0; }

/* ---- Liste kartı başlığı ----
   Tema, başlık stilini yalnız ".card .card-header" olarak tanımlamış; liste kartları
   (.table-card) bu seçiciye girmediği için başlık dolgusuz ve hizasız kalıyordu.
   Aynı görünümü .table-card için de tanımlıyoruz. ---- */
.table-card > .card-header {
  background: transparent;
  border-bottom: 1px solid var(--border-soft);
  padding: 18px 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- Sabit yerleşimli tablo ----
   Sütun genişlikleri içeriğe göre değil colgroup'a göre belirlenir; böylece
   uzun metin tabloyu kabından taşırmaz, hücreler tek satırda kalır. ---- */
.table-soft.tablo-sabit { table-layout: fixed; width: 100%; }
.table-soft.tablo-sabit td,
.table-soft.tablo-sabit th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Rozet taşıyan hücrelerde kırpma yerine daralma */
.table-soft.tablo-sabit td .badge-soft { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Tarih/kod sütunları hiçbir tabloda alt satıra kırılmasın */
.table-soft td.kod-metin, .table-soft th.kod-metin { white-space: nowrap; }

/* ============================================================
   İŞ YÖNETİMİ — pano ve kanban görünümleri
   ============================================================ */

/* ---- Filtre çipi (aktif durum) ---- */
.chip.aktif { background: var(--accent-soft); color: var(--accent-active); font-weight: 600; }
a.chip { text-decoration: none; }

/* ---- Pano: iş kartı ---- */
.is-kart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  transition: transform .12s, box-shadow .12s;
}
.is-kart:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.is-kart.gecikmis { border-left-color: #e0355a; }

.is-kart .ik-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.is-kart .ik-baslik { font-weight: 700; font-size: 14.5px; line-height: 1.35; }
.is-kart .ik-etiketler { display: flex; flex-wrap: wrap; gap: 6px; }
.is-kart .ik-aciklama {
  margin: 0; font-size: 12.5px; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.is-kart .ik-alt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border-soft);
  font-size: 12px; color: var(--text-muted);
}
.is-kart .ik-alt .ik-sag { white-space: nowrap; }

/* ---- Kanban ---- */
.kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: flex-start;
}
.kanban-sutun {
  flex: 0 0 280px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 300px);
}
.kanban-sutun .ks-baslik {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border-soft);
}
.kanban-sutun .ks-sayi {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  background: var(--surface); border-radius: 20px; padding: 2px 9px;
}
.kanban-sutun .ks-govde {
  padding: 10px; display: flex; flex-direction: column; gap: 9px;
  overflow-y: auto; min-height: 90px; flex: 1;
}
.kanban-sutun .ks-govde.uzerinde {
  background: var(--accent-softer);
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
}

.kanban-kart {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 11px 12px;
  cursor: grab;
  box-shadow: var(--shadow-xs);
}
.kanban-kart:active { cursor: grabbing; }
.kanban-kart.gecikmis { border-left-color: #e0355a; }
.kanban-kart.suruklenen { opacity: .45; }

.kanban-kart .kk-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 6px; font-size: 11px;
}
.kanban-kart .kk-baslik {
  display: block; font-weight: 600; font-size: 13px; line-height: 1.35;
  color: var(--text); text-decoration: none;
}
.kanban-kart .kk-baslik:hover { color: var(--accent); }
.kanban-kart .kk-alt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: 9px; font-size: 11.5px; color: var(--text-muted);
}

/* ---- İş detayı: akış zaman çizelgesi ---- */
.is-akis { display: flex; flex-direction: column; gap: 0; }
.is-akis .ia-satir {
  display: flex; gap: 12px; padding: 12px 0;
  border-bottom: 1px dashed var(--border-soft);
}
.is-akis .ia-satir:last-child { border-bottom: none; }
.is-akis .ia-ikon {
  flex: 0 0 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-active);
}
.is-akis .ia-govde { flex: 1 1 auto; min-width: 0; }
.is-akis .ia-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.is-akis .ia-metin { font-size: 13px; color: var(--text); margin: 4px 0 0; white-space: pre-wrap; }

/* ---- İş detayı: adım listesi ---- */
.is-adimlar { display: flex; flex-direction: column; gap: 8px; }
.is-adim {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--bg);
}
.is-adim.acik {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
.is-adim.iptal { opacity: .55; }
.is-adim .ia-sira {
  flex: 0 0 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border-soft);
  font-size: 12.5px; font-weight: 700; color: var(--text-soft);
}
.is-adim.acik .ia-sira { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 767.98px) {
  .kanban-sutun { flex-basis: 240px; }
  .is-adim { flex-wrap: wrap; }
  .is-adim > .d-flex { width: 100%; justify-content: flex-end; }
}

/* ---- Küçük yardımcılar ---- */
.metin-kirp { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kod-metin { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }