:root{
  --bg:#f5f7fb;
  --card:#fff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --accent:#0b5cff;
  --accent2:#0848c9;
  --radius:14px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  z-index:10;
}

.brand{ display:flex; align-items:center; gap:12px; }
.logo{ height:34px; width:auto; }

.t1{ font-weight:800; line-height:1.1; }
.t2{ font-size:12px; color:var(--muted); }

/* ✅ FIX: Dashboard daha geniş + ortalı */
.wrap{
  max-width:1320px;
  margin:18px auto;
  padding:0 16px;
}

/* ===== Base Card ===== */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
  margin-bottom:14px;
}

h1{ margin:0 0 6px; font-size:20px; }
h2{ margin:0 0 10px; font-size:16px; }

.muted{ margin:0 0 12px; color:var(--muted); font-size:13px; }

/* ===== Grid Helpers ===== */
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* ✅ FIX: Grid içindeki panellerin taşmasını engelle (Chart.js taşmaları dahil) */
.grid2{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.grid2 > *{ min-width:0; }
.grid2 canvas{ max-width:100% !important; }

@media (max-width:780px){
  .grid2{ grid-template-columns:1fr; }
}

input, select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--text);
}

.actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px;
}

.btn{
  border:1px solid var(--line);
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  background:#fff;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.btn.primary:hover{ background:var(--accent2); }
.btn.ghost:hover{ transform:translateY(-1px); }

.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
}

/* ✅ NEW: PDF button */
.btn.pdf{
  background:#16a34a;
  border-color:#16a34a;
  color:#fff;
}
.btn.pdf:hover{
  filter:brightness(.95);
}

.pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
}

.msg{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}

.kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
@media (max-width:900px){
  .kpis{ grid-template-columns:1fr; }
}

.kpiLabel{ color:var(--muted); font-size:12px; }
.kpiValue{ font-size:22px; font-weight:900; margin-top:6px; }

/* ===== Table header row ===== */
.tableTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.filters{ display:flex; gap:10px; align-items:center; }

.tableWrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px;
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:900px;
  background:#fff;
}
th, td{
  padding:10px 10px;
  border-bottom:1px solid var(--line);
  font-size:12px;
  text-align:left;
}
th{
  background:#f8fafc;
  font-weight:900;
}

code{
  background:#f1f5f9;
  padding:2px 6px;
  border-radius:6px;
}

/* ===== Dashboard (Group-by Email/Company) ===== */
.dashGrid{
  display:grid;
  grid-template-columns: minmax(280px, 340px) minmax(320px, 420px) minmax(360px, 1fr);
  gap:12px;
  align-items:start;
}
.dashGrid > *{ min-width:0; }

@media (max-width: 1100px){
  .dashGrid{ grid-template-columns: 1fr; }
}

.panelTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.panelTitleRow h2{ margin:0; }

.list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: 68vh;
  overflow:auto;
  padding-right:4px;
}

.item{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  background:#fff;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.item:hover{ transform:translateY(-1px); }
.item.active{
  border-color: rgba(11,92,255,.5);
  box-shadow: 0 10px 30px rgba(11,92,255,.12);
}

.itemTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.itemTitle{
  font-weight:900;
  font-size:13px;
  line-height:1.2;
}

.itemMeta{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

.badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.badge{
  font-size:11px;
  border:1px solid var(--line);
  color:var(--muted);
  padding:2px 8px;
  border-radius:999px;
  white-space:nowrap;
}
.badge.strong{ border-color: rgba(16,185,129,.35); color:#065f46; background: rgba(16,185,129,.08); }
.badge.medium{ border-color: rgba(245,158,11,.35); color:#92400e; background: rgba(245,158,11,.08); }
.badge.weak{ border-color: rgba(239,68,68,.35); color:#7f1d1d; background: rgba(239,68,68,.08); }

.miniGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
@media (max-width: 900px){
  .miniGrid{ grid-template-columns: 1fr; }
}

/* KPI nested card azalt */
.card.kpiSmall{
  margin-bottom:0;
  box-shadow:none;
  padding:0;
  border:none;
  background:transparent;
}

.kpiSmall{
  padding:12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
}

.kpiSmall .kpiLabel{ font-size:12px; }
.kpiSmall .kpiValue{ font-size:18px; }

/* Sağ panel chart layout */
.dashGrid > section:last-child .grid2{
  grid-template-columns: 1fr;
}
@media (min-width: 1280px){
  .dashGrid > section:last-child .grid2{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }
}

/* Chart kutuları taşmasın */
.dashGrid > section:last-child .grid2 > .card{
  overflow:hidden;
  border-radius:12px;
}

/* Search row */
.searchRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.searchRow input,
.searchRow select{ flex:1; min-width: 160px; }

.smallNote{
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
}

/* ===== AI Output (minimal defaults; index-ai.js HTML uses these classes) ===== */
.aiWrap{ display:flex; flex-direction:column; gap:12px; }
.aiHeader{ padding-bottom:6px; border-bottom:1px solid var(--line); }
.aiTitleRow{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.aiTitle{ font-size:18px; font-weight:900; margin:0; }
.aiBadges{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.aiSub{ font-size:12px; color:var(--muted); margin-top:6px; }
.aiContextRow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.aiContextPill{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 10px; font-size:12px; display:inline-flex; gap:8px; align-items:center; }
.aiContextPill b{ font-weight:900; color:var(--text); }
.aiGrid2{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:12px; }
@media (max-width:900px){ .aiGrid2{ grid-template-columns:1fr; } }

.aiCard{ border:1px solid var(--line); border-radius:14px; background:#fff; padding:14px; box-shadow:0 10px 30px rgba(15,23,42,.06); }
.aiCardTitle{ font-weight:900; margin-bottom:10px; }
.aiCardAccent{ border-color: rgba(11,92,255,.25); }
.aiPara{ font-size:13px; color:var(--text); line-height:1.5; }
.aiSmall{ font-size:12px; margin-top:8px; }
.aiPre{ background:#0b1220; color:#e5e7eb; border-radius:12px; padding:12px; overflow:auto; font-size:12px; }
.aiList{ display:flex; flex-direction:column; gap:10px; }
.aiListItem{ border:1px solid var(--line); border-radius:12px; padding:10px; }
.aiListTop{ display:flex; gap:8px; align-items:center; }
.aiListBody{ margin-top:6px; font-size:13px; color:var(--text); }
.aiListHint{ margin-top:6px; font-size:12px; color:var(--muted); }
.aiTableWrap{ overflow:auto; border:1px solid var(--line); border-radius:12px; }
.aiTable{ width:100%; border-collapse:collapse; min-width:720px; background:#fff; }
.aiTable th, .aiTable td{ padding:10px; border-bottom:1px solid var(--line); font-size:12px; }
.aiTable th{ background:#f8fafc; font-weight:900; }
.aiGrid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width:980px){ .aiGrid{ grid-template-columns:1fr; } }
.aiMiniCard{ border:1px solid var(--line); border-radius:12px; padding:12px; }
.aiMiniTitle{ font-weight:900; margin-bottom:6px; }
.aiMiniBody{ font-size:13px; color:var(--text); line-height:1.45; }
.aiMiniHint{ font-size:12px; color:var(--muted); margin-top:6px; }
.aiUl{ margin:8px 0 0 18px; padding:0; }
.aiUl li{ margin:6px 0; font-size:13px; }

.taskTitle{ font-weight:900; font-size:13px; }
.taskDesc{ font-size:12px; color:var(--muted); margin-top:4px; }
.taskMeta{ margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--muted); }
.taskSub{ margin-top:8px; font-size:12px; color:var(--muted); line-height:1.5; }
.taskAssist{ margin-top:8px; font-size:12px; color:var(--muted); display:grid; gap:6px; }

.k{ font-size:12px; color:var(--muted); font-weight:800; }
.v{ font-size:13px; color:var(--text); }
.aiKV .row{ display:grid; grid-template-columns: 140px minmax(0,1fr); gap:10px; padding:8px 0; border-bottom:1px dashed var(--line); }
.aiKV .row:last-child{ border-bottom:none; }

.aiTensionHead{ font-weight:900; font-size:14px; margin-bottom:10px; }
.aiTensionGrid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width:980px){ .aiTensionGrid{ grid-template-columns:1fr; } }
.aiTensionBlock{ border:1px solid var(--line); border-radius:12px; padding:10px; background:#fff; }

.aiTimeline{ display:flex; flex-direction:column; gap:10px; }
.aiPhase{ border:1px solid var(--line); border-radius:12px; padding:12px; }
.aiPhaseHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.aiPhaseTitle{ font-weight:900; }
.aiPhaseObj{ font-size:12px; color:var(--muted); }
.aiPhaseCols{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px; }
@media (max-width:980px){ .aiPhaseCols{ grid-template-columns:1fr; } }
.aiPhaseFoot{ margin-top:10px; font-size:12px; color:var(--muted); }

/* ===== PDF export helpers ===== */
.pdf-hide{ display:none !important; }

/* PDF sırasında daha stabil sayfa kırılması için */
.aiCard, .aiMiniCard, .aiPhase, .aiListItem{
  break-inside: avoid;
  page-break-inside: avoid;
}