/* ==========================================================================
   DorukCRM — 03-components.css
   Her ekranda kullanılan parçalar: kart, düğme, form, rozet, uyarı, tablo, sayfalayıcı.

   SIRA ÖNEMLİ. Bu dosyalar tek bir app.css'ten bölündü ve kaskad hâlâ o
   sıraya bağlı: addaki sayı yüklenme sırasıdır. Sırayı belirleyen tek yer
   pages/_partials/styles.php.

   Parçalar 16 KB'ın ALTINDA tutuluyor ve bu ölçü keyfî değil: barındırmanın
   FTP yazması büyük dosyalarda 16384'ün katlarında kesiliyor, 91 KB'lık tek
   parça hâlindeki app.css bu yüzden günlerce sunucuya tam gidemedi. Buraya
   bölüm eklerken dosyayı büyütmek yerine yeni bir parça açın.
   ========================================================================== */

/* --- cards & panels ------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card__header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .75rem;
}
.card__header > svg { width: 18px; height: 18px; color: var(--text-muted); }
.card__title { font-weight: 600; font-size: .9375rem; margin: 0; }
.card__body { padding: 1.25rem; }
/* Kart eteği bir DÜĞME SIRASI ve o yüzden flex.

   Blok olarak duruyordu; içine düğmeleri sağa iten `.topbar__spacer` div'i
   konuyordu ama blok bir kapta o div satırı kırıyor: "Vazgeç" bir satırda,
   "Kaydet" bir alt satırda, ikisi de solda kalıyordu. Kalıp ayarların
   neredeyse her ekranında aynı olduğu için (kullanıcılar, Meta uygulamaları,
   numaralar, lead puanları, görüşme sonuçları, zaman aralıkları, gelen kutusu
   sekmeleri, API kanalları, veri aktarımı) hata da her yerdeydi — düzeltme bu
   yüzden ekranlarda değil burada.

   justify-content:flex-end etek düğmelerinin varsayılan yeri: eteğinde
   ayırıcı OLMAYAN kartlarda da (parola değiştir, bağlantıyı kaldır) düğme
   sağa yaslanıyor. Ayırıcı kullanan kartlarda bir şey değişmiyor: flex:1 olan
   ayırıcı boşluğu zaten kendisi yiyor, yani soldaki yıkıcı düğme solda kalır.

   flex-wrap dar ekran için: sığmayan düğme taşmak yerine alt satıra iner. */
.card__footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}

.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.stat { padding: 1rem 1.25rem; }
.stat__label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat__value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin-top: .25rem; }
.stat__hint  { font-size: .75rem; color: var(--text-faint); margin-top: .125rem; }

/* --- buttons -------------------------------------------------------------- */
/* display:inline-flex, [hidden]'ın tarayıcı varsayılanını (display:none) ezer:
   hidden verilmiş bir düğme ekranda kalırdı. Kural bu yüzden sınıfın hemen
   yanında duruyor — gizlemenin iki yolu (sınıf ve öznitelik) aynı sonucu
   versin. */
.btn[hidden] { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .875rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: .8125rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, opacity .12s ease;
}
.btn:hover  { text-decoration: none; filter: brightness(.97); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }

.btn--primary { background: var(--brand); color: var(--brand-contrast, #fff); }
.btn--primary:hover { background: var(--brand-dark); }
.btn--danger  { background: var(--danger); color: #fff; }
.btn--ghost   { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-3); color: var(--text); }
.btn--lg { padding: .75rem 1.25rem; font-size: .9375rem; }
.btn--block { width: 100%; }

/* --- forms ---------------------------------------------------------------- */
.field { margin-bottom: 1rem; }
.label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  margin-bottom: .375rem;
  color: var(--text);
}
.input, .textarea, .select {
  width: 100%;
  padding: .5625rem .75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .875rem;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.textarea { resize: vertical; min-height: 76px; }
.help { font-size: .75rem; color: var(--text-muted); margin-top: .375rem; }

/* --- badges & pills ------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .1875rem .5rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--text-muted);
  white-space: nowrap;
}
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--info    { background: var(--info-bg);    color: var(--info); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- alerts --------------------------------------------------------------- */
.alert {
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  margin-bottom: 1rem;
  font-size: .875rem;
  display: flex;
  gap: .625rem;
  align-items: flex-start;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert--error   { background: var(--danger-bg);  border-color: color-mix(in srgb, var(--danger) 25%, transparent);  color: var(--danger); }
.alert--success { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 25%, transparent); color: var(--success); }
.alert--warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 25%, transparent); color: var(--warning); }
.alert--info    { background: var(--info-bg);    border-color: color-mix(in srgb, var(--info) 25%, transparent);    color: var(--info); }

/* --- tables --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th {
  text-align: left;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-weight: 700;
  padding: .625rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}
.table td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-2); }

/* Satırın sonundaki eylemler. Tek yerde tanımlı, çünkü sekiz ayar listesinin
   sekizinde de aynı iki düğme duruyor: Değiştir ve Sil. */
.table__actions { text-align: right; white-space: nowrap; width: 1%; }
.table__actions .btn + .btn { margin-left: .25rem; }

/* --- pager ---------------------------------------------------------------
   Liste ekranlarının altındaki çubuk. Sol tarafta kaç kayıt olduğu, sağ
   tarafta sayfalar; tek sayfalık listede yalnızca sayaç kalır. */
.pager {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
}
.pager__count { flex: 1; min-width: 0; }
.pager__nav { display: flex; align-items: center; gap: .25rem; }
.pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
}
.pager__btn:hover { background: var(--surface-2); }
.pager__btn svg { width: 16px; height: 16px; }
.pager__btn--active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  cursor: default;
}
.pager__btn--active:hover { background: var(--brand); }
/* Devre dışı ok yine de çiziliyor: kaybolan bir düğme çubuğun genişliğini
   her sayfa geçişinde değiştirir ve göz, tıklayacağı yeri yeniden arar. */
.pager__btn--off { opacity: .35; cursor: default; }
.pager__gap { color: var(--text-muted); padding: 0 .125rem; }

/* --- definition rows (settings) ------------------------------------------ */
.dl { display: grid; grid-template-columns: minmax(160px, 200px) 1fr; }
.dl > dt {
  padding: .75rem 0;
  color: var(--text-muted);
  font-size: .8125rem;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.dl > dd {
  padding: .75rem 0;
  margin: 0;
  font-size: .875rem;
  border-bottom: 1px solid var(--border);
  word-break: break-word;
}
.dl > dt:last-of-type, .dl > dd:last-of-type { border-bottom: none; }

.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .8125rem; }