/* ================= CRM & Mesajlar v2 stilleri =================
   index.html Vision UI degiskenlerini (:root) kullanir; tek basina tema tasimaz.
   Bolumler: ust bar / gorev seridi / spotlight kart grid / kanban / sohbet drawer. */

/* ---- Ust bar + gorunum degistirici ---- */
.crm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 18px;margin-bottom:12px}
.crm-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.view-toggle{display:flex;border:1px solid rgba(226,232,240,.14);border-radius:12px;overflow:hidden}
.view-toggle .btn-sm{border:none;border-radius:0;background:transparent}
.view-toggle .btn-sm.active{background:var(--accent-soft);color:#fff}

/* ---- Gorev seridi (Faz 8'de dolar) ---- */
#crm_tasks_strip{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
#crm_tasks_strip.hidden{display:none}
.ts-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.ts-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt2);background:var(--panel2);border:1px solid var(--glass-border);border-radius:10px;padding:6px 9px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ts-chip.overdue{border-color:rgba(245,101,101,.45);background:var(--danger-soft)}
.ts-chip.today{border-color:rgba(255,181,71,.4);background:var(--warning-soft)}
.ts-chip .ts-who{color:var(--accent2);cursor:pointer}
.ts-chip .ts-who:hover{text-decoration:underline}
.ts-chip .ts-done{cursor:pointer;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--muted);font-size:11px;padding:2px 7px}
.ts-chip .ts-done:hover{border-color:var(--success);color:#8ee9c5;background:var(--success-soft)}

/* ---- Spotlight kart grid ---- */
#crm_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;align-items:stretch}
#crm_grid.hidden{display:none}
.crm-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:9px;
  border:1px solid var(--glass-border);border-radius:var(--radius);
  background:var(--panel);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  padding:16px;cursor:pointer;box-shadow:var(--shadow);
  transition:border-color .2s,transform .18s,box-shadow .25s;
  animation:cardIn .5s cubic-bezier(.22,.61,.36,1) both;
}
/* Spotlight: imleci izleyen radial parilti (JS --mx/--my degiskenlerini gunceller) */
.crm-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s;
  pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(245,158,11,.16),transparent 65%);
}
@media(hover:hover){
  .crm-card:hover{border-color:rgba(245,158,11,.45);transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(245,158,11,.4)}
  .crm-card:hover::before{opacity:1}
}
/* Dokunmatik: imlec yok -> ustten sabit, cok hafif parilti */
@media(hover:none){
  .crm-card::before{opacity:.45;background:radial-gradient(300px circle at 50% 0%,rgba(245,158,11,.10),transparent 65%)}
}
.cc-top{display:flex;align-items:center;gap:10px;min-width:0}
.cc-ava{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:13px;font-weight:800;letter-spacing:.02em}
.cc-headtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cc-name{font-size:14.5px;font-weight:700;color:var(--txt);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-stage{align-self:flex-start;font-size:10px;font-weight:700;padding:2px 8px;border-radius:7px;border:1px solid;letter-spacing:.04em;text-transform:uppercase}
.cc-phone{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);min-width:0}
.cc-phone .num{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-wa{flex:none;padding:4px 10px;font-size:12px;font-weight:700;border-radius:9px;background:rgba(1,181,116,.14);border:1px solid rgba(1,181,116,.4);color:#5ee6b0}
.cc-wa:hover{background:rgba(1,181,116,.28);border-color:var(--success);color:#fff}
.cc-tags{display:flex;flex-wrap:wrap;gap:5px}
.cc-budget{font-size:12.5px;font-weight:600;color:#ffd699}
.cc-summary{font-size:12.5px;color:var(--txt2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);margin-top:auto;padding-top:4px}
.cc-ind{display:flex;gap:7px;align-items:center}

/* ---- Kanban pano ---- */
/* Sutunlar mevcut genisligi ESIT paylasir -> 6 sutun ekrana sigar, yatay kaydirma yok.
   Cok dar ekranda (min-width'e inince) guvenlik icin board yine de kaydirilabilir kalir. */
#crm_kanban.hidden{display:none}
.kb-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch;align-items:flex-start}
.kb-col{flex:1 1 0;min-width:210px;background:var(--panel2);border:1px solid var(--glass-border);border-radius:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.kb-head{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--txt2)}
.kb-dot{width:9px;height:9px;border-radius:50%;flex:none}
.kb-count{margin-left:auto;font-size:11px;color:var(--muted);background:rgba(160,174,192,.12);padding:1px 8px;border-radius:8px}
/* Pano kartlari = Kartlar gorunumundeki buyuk kart (crm-card). Sutun govdesi dikey kaydirilir. */
.kb-body{padding:10px;display:flex;flex-direction:column;gap:12px;min-height:64px;max-height:70vh;overflow-y:auto}
.kb-empty{font-size:11.5px;color:var(--muted);text-align:center;padding:10px 4px;border:1px dashed var(--line);border-radius:10px}
.drag-ghost{opacity:.4}

/* ---- Sohbet drawer (sagdan kayar; mobilde tam ekran) ---- */
#crm_drawer_backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:49;opacity:0;transition:opacity .3s;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#crm_drawer_backdrop.open{opacity:1}
#crm_drawer_backdrop.hidden{display:none}
#crm_drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);z-index:50;
  display:flex;flex-direction:column;
  background:#12151d;
  border-left:1px solid var(--glass-border);
  box-shadow:-24px 0 60px -20px rgba(0,2,18,.85);
  transform:translateX(105%);transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
#crm_drawer.open{transform:none}
#crm_drawer.hidden{display:none}
#crm_drawer .chat-head{flex:none}
#crm_drawer .chat-head .ttl{min-width:0;flex-wrap:wrap}
.dr-meta{flex:none;padding:10px 14px;border-bottom:1px solid var(--line);background:rgba(14,16,22,.35);max-height:46vh;overflow-y:auto}
.dr-chips{display:flex;flex-wrap:wrap;gap:6px}
.dr-summary{margin-top:8px;font-size:12.5px;color:var(--txt2);line-height:1.5}
.dr-row{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--txt2);flex-wrap:wrap}
.dr-row .lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
/* Drawer gorevleri */
.dr-task{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--txt2);padding:4px 0;min-width:0}
.dr-task-chk{accent-color:var(--accent);width:15px;height:15px;flex:none;cursor:pointer}
.dr-task-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-task-late{color:#fecaca}
.dr-task-del{background:transparent;border:none;color:var(--muted);padding:2px 6px;font-size:12px}
.dr-task-del:hover{color:var(--danger)}
.dr-task-add{display:flex;gap:6px;margin-top:8px;align-items:center;flex-wrap:wrap}
.dr-task-add input[type=text]{flex:1;min-width:120px;padding:8px 11px;font-size:13px}
.dr-task-add input[type=date]{width:auto;padding:8px 10px;border-radius:12px;border:1px solid rgba(226,232,240,.14);background:rgba(14,16,22,.55);color:var(--txt);font-family:inherit;font-size:12.5px;color-scheme:dark}
.dr-task-add .btn-sm{flex:none}
.dr-task-quick{display:flex;gap:6px;margin-top:6px}
.dr-task-quick .btn-sm{padding:4px 10px;font-size:11.5px}
#crm_dr_messages{flex:1}
#crm_drawer .chat-input{flex:none}
.bubble.pending{opacity:.7}
.bubble.failed{background:var(--danger-soft);border:1px solid rgba(245,101,101,.5);color:#fecaca;box-shadow:none}
@media(max-width:760px){ #crm_drawer{width:100vw;border-left:none} }

@media (prefers-reduced-motion:reduce){
  #crm_drawer,#crm_drawer_backdrop,.crm-card{transition:none}
  .crm-card{animation:none}
}