/* ============================================================
   CRM ORTAK TASARIM SİSTEMİ  (crm-ui.css)
   Tüm CRM ekranlarının paylaştığı tek kaynak.
   Sınıf adları mevcut ekranlarla (.crm-*) uyumludur.
   ============================================================ */

:root{
  /* Marka & nötrler (hafif soğuk gri)
     MARKA ARTIK LACİVERT: --c-brand'i kullanan her şey (birincil düğme, aktif
     chip, odak halkası, bağlantı, satır hover) tek noktadan laciverte döndü.
     Mavi yalnız DURUM rengi olarak kaldı (--s-open: "Açık/Gönderildi"). */
  --c-brand:#1e2d47; --c-brand-700:#16223a; --c-brand-soft:#e9eef7;
  --c-ink:#1c2430; --c-muted:#697586; --c-line:#e8ebf1; --c-soft:#f6f8fc;
  --c-bg:#f4f6fb;

  /* Anlamsal durum renkleri — tek anlam, her ekranda aynı */
  --s-win:#1e8e4e;  --s-win-bg:#e6f7ec;
  --s-open:#0d6efd; --s-open-bg:#e7f1ff;
  --s-hold:#b9770e; --s-hold-bg:#fff4e0;
  --s-lose:#c0392b; --s-lose-bg:#fdecec;
  --s-wait:#6f42c1; --s-wait-bg:#efe7ff;
  --s-mut:#697586;  --s-mut-bg:#eef1f5;

  /* Yapı rengi (lacivert) — BAŞLIK/ÇERÇEVE demektir, "durum" demek DEĞİL.
     Renk dili: lacivert = yapı VE eylem (başlık, tablo şeridi, birincil düğme),
                mavi     = yalnız DURUM (--s-open: "Açık/Gönderildi"),
                yeşil/kırmızı/turuncu = durum,  beyaz = içerik yüzeyi.
     Her ekran beyaz olduğunda göz nereye bakacağını bulamıyordu; yapı
     öğeleri artık lacivertle işaretli. --c-brand de laciverte eşitlendi. */
  --c-navy:#1e2d47; --c-navy-2:#29394f;
  --c-navy-grad:linear-gradient(180deg,#1e2d47 0%,#29394f 100%);
  /* İki ayrı ton gerekiyor: sayfa zemini zaten açık gri (#f3f5f9).
     -soft  → BEYAZ kartın İÇİNDE duran bant (bölüm başlığı) için,
     -band  → ZEMİN üstünde tek başına duran bant (bağlam çubuğu) için;
              -soft bu konumda zeminle aynı tona düşüp kayboluyor. */
  --c-navy-soft:#f1f4f9;   --c-navy-line:#dde4ee;
  --c-navy-band:#e6ecf6;   --c-navy-band-line:#ccd7e7;

  /* Gölge & köşe */
  --c-radius:14px;
  --c-shadow-sm:0 1px 2px rgba(20,28,45,.04), 0 1px 3px rgba(20,28,45,.06);
  --c-shadow-md:0 6px 18px rgba(20,28,45,.08);
  --c-shadow-lift:0 10px 26px rgba(20,28,45,.12);
}

/* Bölüm/başlık işareti: 4px lacivert şerit. .crm-topbar başlığı, .crm-panel
   başlığı ve ekranlara özgü başlıklar aynı işareti kullanır. */
.crm-title h5::before,
.crm-panel > h6::before{ content:""; flex:none; width:4px; align-self:stretch; min-height:20px;
  border-radius:3px; background:var(--c-navy-grad); }

/* ---- Sayfa sarmalayıcı ---- */
.crm-wrap{ padding:22px 26px 44px; }

/* ---- Üst başlık (topbar) ---- */
.crm-topbar{ background:#fff; border:1px solid var(--c-line); border-radius:var(--c-radius); padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px;
  box-shadow:var(--c-shadow-sm); }
.crm-title h5{ margin:0; color:var(--c-navy); font-size:1.14rem; font-weight:800; letter-spacing:-.01em;
  display:flex; align-items:center; gap:9px; }
.crm-title span{ display:block; margin-top:4px; color:var(--c-muted); font-size:.82rem; }

/* ---- Butonlar ---- */
.crm-btn{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 15px; border-radius:10px;
  font-size:.83rem; font-weight:700; text-decoration:none; border:1px solid var(--c-line); background:#fff;
  color:var(--c-ink); white-space:nowrap; cursor:pointer; font-family:inherit;
  transition:transform .12s, background .14s, border-color .14s, box-shadow .14s; }
.crm-btn:hover{ background:var(--c-soft); color:var(--c-ink); transform:translateY(-1px); }
.crm-btn:active{ transform:translateY(0); }
.crm-btn .material-icons-outlined{ font-size:19px; }
/* Birincil düğme lacivert. Üzerine gelince MAVİYE dönüyordu (--c-brand-700) ve
   gölgesi de mavi tonluydu — lacivert bir düğmenin mavi parlaması renk sıçraması
   gibi görünüyor. İkisi de laciverte çekildi; hover yalnız bir tık açılıyor. */
.crm-btn-primary {
    background: var(--c-navy-grad);
    border-color: #1e2d47;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(30,45,71,.28);
}
.crm-btn-primary:hover{ background:linear-gradient(180deg,#2a3c5c 0%,#35485f 100%);
    border-color:#2a3c5c; box-shadow:0 6px 16px rgba(30,45,71,.34); }
.crm-btn-ghost{ background:#eef2f8; border-color:transparent; color:#33415a; }
.crm-btn-ghost:hover{ background:#e4ebf5; color:#33415a; }
.crm-btn-success{ background:var(--s-win); border-color:var(--s-win); color:#fff !important; box-shadow:0 4px 12px rgba(30,142,78,.26); }
.crm-btn-success:hover{ filter:brightness(.95); }
.crm-btn-danger{ background:var(--s-lose-bg); border-color:#f3cfca; color:var(--s-lose) !important; }
.crm-btn-danger:hover{ background:#f9ddd8; }
.crm-btn-sm{ height:32px; padding:0 12px; font-size:.78rem; }

/* ---- KPI şeridi (tek parça, bölmeli) ----
   Önce altı ayrı beyaz kart yan yana yüzüyordu: her biri kendi kenarlığı,
   kendi gölgesi, aralarında 14px boşluk. Altı kutu = altı odak, hiçbiri
   diğerinden önemli değil ve altındaki tabloyla aynı ağırlıkta.
   Artık TEK panel, içinde bölmeler.

   Ayraçlar KENARLIKLA da `gap`+kapsayıcı zeminiyle de çizilmiyor; ikisi de
   sarkmada bozuluyor (kenarlıkta satır başındaki bölme fazladan çizgi alır,
   zemin yönteminde boş kalan hücreler koca bir gri blok gösterir — KPI sayısı
   ekrandan ekrana 4/5/6 değiştiği için sarkma kaçınılmaz).
   Çözüm: her bölme sol ve üst kenarına 1px gölge basar. Satır/sütun başındaki
   bölmelerin gölgesi kapsayıcının dışına düştüğü için `overflow:hidden` onları
   kırpar — yani ayraçlar yalnız GEREKEN yerde görünür, boş hücreler beyaz kalır.
   Üst şerit her bölmede var: renkli olanlar durumu, nötr olan sürekliliği taşır. */
.crm-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0;
  background:#fff; border:1px solid #e3e8f0; border-radius:var(--c-radius);
  overflow:hidden; box-shadow:0 2px 10px rgba(30,45,71,.06); margin-bottom:14px; }
.crm-kpi{ position:relative; background:#fff; border:0; border-radius:0; padding:14px 16px 15px;
  box-shadow:-1px 0 0 var(--c-navy-line), 0 -1px 0 var(--c-navy-line);
  transition:background .14s; overflow:hidden; }
.crm-kpi:hover{ transform:none; background:var(--c-navy-soft); }
.crm-kpi .k-lbl{ color:var(--c-muted); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.crm-kpi .k-val{ color:var(--c-navy); font-size:1.45rem; font-weight:800; margin-top:5px; letter-spacing:-.02em; line-height:1.1; }
.crm-kpi.k-open .k-val,.crm-kpi.k-sent .k-val{ color:var(--s-open); }
.crm-kpi.k-win  .k-val{ color:var(--s-win); }
.crm-kpi.k-lose .k-val{ color:var(--s-lose); }
.crm-kpi.k-hold .k-val{ color:var(--s-hold); }
.crm-kpi.k-wait .k-val,.crm-kpi.k-hi .k-val{ color:var(--s-wait); }
/* Üst şerit: nötr taban tüm bölmelerde, durum renkleri üstüne biner. */
.crm-kpi::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:var(--c-navy-line); opacity:.9; }
.crm-kpi.k-open::before,.crm-kpi.k-sent::before{ background:var(--s-open); }
.crm-kpi.k-win::before{ background:var(--s-win); }
.crm-kpi.k-lose::before{ background:var(--s-lose); }
.crm-kpi.k-hold::before{ background:var(--s-hold); }
.crm-kpi.k-wait::before,.crm-kpi.k-hi::before{ background:var(--s-wait); }

/* ---- Filtre chip'leri ---- */
.crm-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.crm-chip{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 15px; border-radius:999px;
  font-size:.8rem; font-weight:600; text-decoration:none; border:1px solid var(--c-line); background:#fff; color:#4a5566; cursor:pointer;
  transition:border-color .14s, background .14s, box-shadow .14s; }
.crm-chip:hover{ border-color:#c3cede; background:var(--c-soft); }
.crm-chip.active{ background:var(--c-brand); border-color:var(--c-brand); color:#fff; box-shadow:0 4px 12px rgba(30,45,71,.28); }

/* ---- Arama kutusu ---- */
.crm-search{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--c-line);
  border-radius:11px; padding:0 13px; height:38px; max-width:340px; box-shadow:var(--c-shadow-sm); }
.crm-search .material-icons-outlined{ font-size:19px; color:#9aa4b2; flex:none; }
.crm-search input{ border:none; outline:none; background:transparent; font-size:.86rem; width:100%; color:var(--c-ink); font-family:inherit; }
.crm-search:focus-within{ border-color:var(--c-brand); box-shadow:0 0 0 3px rgba(30,45,71,.14); }

/* ---- Kart & Tablo ---- */
.crm-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--c-radius); overflow:hidden; box-shadow:var(--c-shadow-sm); }
.crm-tbl-scroll{ overflow-x:auto; }
.crm-tbl{ width:100%; border-collapse:separate; border-spacing:0; }
/* Tablo şeridi lacivert: uzun listelerde sütun başlıkları içerikten ayrışsın,
   kaydırırken "hangi kolondayım" kaybolmasın. */
.crm-tbl thead th{ background:var(--c-navy-grad); color:#fff; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  text-align:left; padding:13px 16px; border-bottom:1px solid var(--c-navy); white-space:nowrap; }
.crm-tbl thead th:first-child{ border-top-left-radius:2px; }
.crm-tbl tbody td{ padding:13px 16px; border-bottom:1px solid var(--c-line); font-size:.87rem; color:var(--c-ink); vertical-align:middle; }
.crm-tbl tbody tr:last-child td{ border-bottom:none; }
.crm-tbl tbody tr{ transition:background .12s; }
/* Zebra, :hover'dan ÖNCE tanımlı olmalı — aynı özgüllükte sonraki kural kazanır. */
.crm-tbl tbody tr:nth-child(even){ background:#fafbfe; }
.crm-tbl tbody tr:hover{ background:var(--c-brand-soft); }
.crm-tbl .t-baslik{ font-weight:700; }

/* ---- Aşama noktası ---- */
.crm-asama{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; }
.crm-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; box-shadow:0 0 0 3px rgba(0,0,0,.04); }

/* ---- Rozetler (durum → renk sabit; otomatik nokta) ---- */
.crm-badge{ display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px; font-size:.72rem; font-weight:700; line-height:1.1; }
.crm-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.crm-b-open{ background:var(--s-open-bg); color:var(--s-open); }
.crm-b-win{  background:var(--s-win-bg);  color:var(--s-win); }
.crm-b-lose{ background:var(--s-lose-bg); color:var(--s-lose); }
.crm-b-hold{ background:var(--s-hold-bg); color:var(--s-hold); }
.crm-b-wait{ background:var(--s-wait-bg); color:var(--s-wait); }
.crm-b-mut,.crm-b-draft,.crm-b-exp{ background:var(--s-mut-bg); color:var(--s-mut); }
.crm-b-sent{ background:var(--s-open-bg); color:var(--s-open); }
.crm-b-rev{ background:var(--s-hold-bg); color:var(--s-hold); }
.crm-revtag{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:6px;
  background:#eaeefb; color:#4256b8; font-size:.68rem; font-weight:800; }

/* ---- Satır işlem ikonları ---- */
.crm-act a{ color:#98a2b3; text-decoration:none; margin:0 2px; padding:4px; border-radius:7px; display:inline-flex; transition:background .12s, color .12s; }
.crm-act a:hover{ color:var(--c-brand); background:var(--c-brand-soft); }
.crm-act a.del:hover{ color:var(--s-lose); background:var(--s-lose-bg); }

/* ---- Boş durum ---- */
.crm-empty{ text-align:center; padding:52px 16px; color:var(--c-muted); }
.crm-empty a{ color:var(--c-brand); font-weight:700; text-decoration:none; }

/* ---- Panel & Form alanları ---- */
.crm-panel{ background:#fff; border:1px solid var(--c-line); border-radius:var(--c-radius); padding:18px 20px; margin-bottom:16px; box-shadow:var(--c-shadow-sm); }
/* Bölüm başlığı: lacivert şerit + lacivert metin + ince ayraç.
   Panelin iç boşluğuna bağlı değil — her ekranda aynı çalışır. */
.crm-panel > h6{ display:flex; align-items:center; gap:9px; font-size:.92rem; font-weight:800; color:var(--c-navy);
  margin:0 0 15px; padding-bottom:11px; border-bottom:1px solid var(--c-navy-line); }
.crm-panel > h6 .material-icons-outlined{ font-size:20px; color:var(--c-navy-2); }
.crm-field{ margin-bottom:14px; }
.crm-field > label{ display:block; font-size:.78rem; font-weight:700; color:var(--c-muted); margin-bottom:6px; }
.crm-field .req{ color:var(--s-lose); }
.crm-field input, .crm-field select, .crm-field textarea{ width:100%; border:1px solid var(--c-line); border-radius:10px;
  padding:10px 13px; font-size:.9rem; color:var(--c-ink); background:#fff; outline:none; font-family:inherit; transition:border-color .14s, box-shadow .14s; }
.crm-field textarea{ resize:vertical; min-height:72px; }
.crm-field input:focus, .crm-field select:focus, .crm-field textarea:focus{ border-color:var(--c-brand); box-shadow:0 0 0 3px rgba(30,45,71,.14); }

/* ---- Form ızgarası & satır ---- */
.crm-grid{ display:grid; grid-template-columns:2fr 1fr; gap:16px; align-items:start; }
@media (max-width:900px){ .crm-grid{ grid-template-columns:1fr; } }
.crm-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.crm-actions{ display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; }

/* ---- Dropdown + "+" hızlı ekleme ---- */
.crm-inline{ display:flex; gap:6px; align-items:stretch; }
.crm-inline select{ flex:1; min-width:0; }
.crm-addbtn{ flex:0 0 auto; width:40px; border:1px solid var(--c-brand); background:var(--c-brand-soft); color:var(--c-brand); border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .14s, color .14s; }
.crm-addbtn:hover{ background:var(--c-brand); color:#fff; }
.crm-addbtn .material-icons-outlined{ font-size:20px; }

/* ---- Hızlı ekleme modalı ---- */
.crm-qa-overlay{ display:none; position:fixed; inset:0; background:rgba(20,30,50,.45); z-index:9999; align-items:center; justify-content:center; padding:16px; }
.crm-qa-box{ background:#fff; width:100%; max-width:430px; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(20,28,45,.3); }
.crm-qa-head{ display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--c-line); font-weight:800; color:var(--c-ink); font-size:.95rem; }
.crm-qa-head button{ border:0; background:none; cursor:pointer; color:var(--c-muted); font-size:1.1rem; line-height:1; }
.crm-qa-body{ padding:18px 20px; }
.crm-qa-foot{ display:flex; justify-content:flex-end; gap:10px; padding:13px 20px; border-top:1px solid var(--c-line); background:var(--c-soft); }

/* ---- Mesaj kutuları ---- */
.crm-msg{ display:flex; align-items:center; gap:9px; padding:11px 15px; border-radius:11px; font-size:.85rem; font-weight:600; border:1px solid; margin-bottom:14px; }
.crm-msg .material-icons-outlined{ font-size:19px; }
.crm-msg.ok{   background:var(--s-win-bg);  color:var(--s-win);  border-color:#bfe6cd; }
.crm-msg.warn{ background:var(--s-hold-bg); color:var(--s-hold); border-color:#eeddb8; }
.crm-msg.err{  background:var(--s-lose-bg); color:var(--s-lose); border-color:#f3cfca; }

/* ---- Bilgi bandı ---- */
.crm-note{ background:var(--s-open-bg); border:1px solid #d5e3ff; color:#0b5ed7; border-radius:11px; padding:10px 14px; font-size:.82rem; display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.crm-note a{ color:#0b5ed7; font-weight:700; text-decoration:none; }

/* ---- Tür etiketi ---- */
.crm-tur{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; background:var(--c-soft); border:1px solid var(--c-line); border-radius:7px; padding:3px 9px; color:var(--c-ink); }

/* ---- Küçük alt metin ---- */
.crm-sub{ color:var(--c-muted); font-size:.76rem; }

/* ---- Sayısal ---- */
.crm-num{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- Ortaklık rozeti ----
   Fırsat / teklif / satış kaydı listelerinde MÜŞTERİ kolonu tek kişi gösterir;
   ortaklı satışta "asıl müşteri DIŞINDAKİ" alıcı sayısı bu rozetle belirtilir. */
.crm-ortak-rz{ display:inline-flex; align-items:center; margin-left:6px; padding:2px 8px;
               border-radius:999px; font-size:.68rem; font-weight:700; white-space:nowrap;
               background:#e9eef7; color:#1e2d47; border:1px solid #ccd7e7; vertical-align:middle; }