/**
 * Omnex Pages — settings.css
 * Genel Ayarlar (#/settings): sekme-başına kart dağılımı (2=65/35 · 3=eşit · 1=tam),
 * accordion kartlar (OxCard; başlık gri ton + chevron), toggle satırları, renk swatch.
 * Şema-güdümlü Settings.js ile çalışır.
 */

/* Sekmedeki kartların dağılımı (renderTab kart sayısına göre sınıf verir). */
.ox-set-cards { display: grid; gap: var(--ox-space-4); align-items: start; }
.ox-set-cards--2 { grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); }  /* %65 sol · %35 sağ */
.ox-set-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }        /* yan yana 3 eşit */
.ox-set-cards--n { grid-template-columns: repeat(2, minmax(0, 1fr)); }        /* 4+ kart: 2 kolon */
/* --1: varsayılan tek kolon (tam genişlik). Dar ekranda hepsi tek kolona düşer. */
@media (max-width: 960px) {
  .ox-set-cards--2, .ox-set-cards--3, .ox-set-cards--n { grid-template-columns: 1fr; }
}

/* Bildirim Ayarları — değişken grid (6 kolon): kartlar 3 (yarım) / 6 (tam) span'lar.
   Genel+Özet yan yana · Türler matrisi tam · DND+Retention yan yana · Webhook/SMTP tam. */
.ox-nset-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ox-space-4); align-items: start; grid-auto-flow: row dense; }
.ox-nset-3 { grid-column: span 3; }
.ox-nset-6 { grid-column: span 6; }
@media (max-width: 960px) { .ox-nset-3, .ox-nset-6 { grid-column: 1 / -1; } }

/* Toggle satırları (boolean ayarlar): kart içinde ayrık satır; üst çizgi + satır-arası ayraç. */
.ox-set-toggles { border-top: 1px solid var(--ox-border); padding-top: var(--ox-space-2); }
.ox-set-toggle { padding: var(--ox-space-2) 0; }
.ox-set-toggle + .ox-set-toggle { border-top: 1px dashed var(--ox-border); }
.ox-set-toggle__hint { font-size: var(--ox-text-xs); line-height: 1.4; margin-top: 2px; }

/* Renk swatch: şık kare-oval, gizli native picker + hex. --sw inline değişkeni renktir. */
.ox-colorpick { display: inline-flex; align-items: center; gap: var(--ox-space-3); }
.ox-swatch {
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--ox-radius-md);
  background: var(--sw, #000); border: 2px solid var(--ox-border);
  cursor: pointer; box-shadow: var(--ox-shadow-sm);
  transition: transform var(--ox-transition-fast), border-color var(--ox-transition-fast);
}
.ox-swatch:hover { transform: scale(1.06); border-color: var(--ox-border-strong); }
.ox-swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; }
.ox-colorpick__hex {
  font-family: var(--ox-font-mono); font-size: var(--ox-text-sm);
  color: var(--ox-fg-muted); text-transform: uppercase; letter-spacing: .02em;
}