/* KNSDD Settings Page - Tabs, Panels, Sticky Actions */
#knsdd-settings-form.knsdd-settings-form {
  margin-top: 16px;
}
.knsdd-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #dcdcde;
  margin-bottom: 12px;
}
.knsdd-tab {
  display: inline-block;
  padding: 8px 12px;
  text-decoration: none;
  color: #2271b1;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}
.knsdd-tab:hover { color: #135e96; }
.knsdd-tab.is-active {
  background: #fff;
  border-color: #dcdcde;
  color: #1d2327;
}
.knsdd-tab-panels { background: #fff; border: 1px solid #dcdcde; border-radius: 0 4px 4px 4px; position: relative; padding-bottom: 18px; }
.knsdd-tab-panel { display: none; padding: 16px; }
.knsdd-tab-panel.is-active { display: block; }
.knsdd-tab-panel:focus { outline: none; }
.knsdd-tab-body .form-table { margin-top: 0; }

.knsdd-settings-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 0;
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #dcdcde;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.04);
  z-index: 10;
}

/* Compact button sizing only within the sticky actions bar */
.knsdd-settings-actions .button,
.knsdd-settings-actions .button-primary,
.knsdd-settings-actions .button-secondary {
  height: 30px;
  line-height: 28px;
  padding: 0 10px;
}

/* Grouped Settings Boxes (UI & Accessibility tab) */
.knsdd-settings-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.knsdd-settings-box:last-child {
  margin-bottom: 0;
}
.knsdd-settings-box h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
/* Form table inside settings boxes: ensure consistent layout across languages */
.knsdd-settings-box .form-table {
  table-layout: fixed;
  width: 100%;
}
.knsdd-settings-box .form-table th {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  word-wrap: break-word;
  vertical-align: top;
  padding-right: 12px;
}
.knsdd-settings-box .form-table td {
  word-wrap: break-word;
  vertical-align: top;
}

/* Sample theme tokens (extendable) */
:root {
  --knsdd-warn-bg-rose: #fde8e8;
  --knsdd-warn-bd-rose: #f5b5b5;
  --knsdd-warn-tx-rose: #7a1f1f;
  --knsdd-warn-bg-blue: #e8f1fd;
  --knsdd-warn-bd-blue: #b5cff5;
  --knsdd-warn-tx-blue: #123e7a;
  --knsdd-warn-bg-gray: #f4f6f8;
  --knsdd-warn-bd-gray: #d1d6dc;
  --knsdd-warn-tx-gray: #2f3947;
  --knsdd-warn-bg-sage: #e9f5f0;
  --knsdd-warn-bd-sage: #b9e0cf;
  --knsdd-warn-tx-sage: #1e5b48;
  --knsdd-warn-bg-lavender: #efe9f9;
  --knsdd-warn-bd-lavender: #d2c4ef;
  --knsdd-warn-tx-lavender: #3f2a77;
  --knsdd-warn-bg-amber: #fff7d6;
  --knsdd-warn-bd-amber: #f2d48a;
  --knsdd-warn-tx-amber: #7a4a0b;
}

.knsdd-theme-preview { margin-top: 10px; }
.knsdd-theme-preview .preview-box {
  padding: 10px 12px;
  border: 1px solid var(--knsdd-warn-bd-rose);
  background: var(--knsdd-warn-bg-rose);
  color: var(--knsdd-warn-tx-rose);
  border-radius: 4px;
}
.knsdd-theme-preview.theme-blue .preview-box,
.knsdd-tier-theme-preview.theme-blue .preview-box {
  border-color: var(--knsdd-warn-bd-blue);
  background: var(--knsdd-warn-bg-blue);
  color: var(--knsdd-warn-tx-blue);
}
.knsdd-theme-preview.theme-gray .preview-box,
.knsdd-tier-theme-preview.theme-gray .preview-box {
  border-color: var(--knsdd-warn-bd-gray);
  background: var(--knsdd-warn-bg-gray);
  color: var(--knsdd-warn-tx-gray);
}
.knsdd-theme-preview.theme-sage .preview-box,
.knsdd-tier-theme-preview.theme-sage .preview-box {
  border-color: var(--knsdd-warn-bd-sage);
  background: var(--knsdd-warn-bg-sage);
  color: var(--knsdd-warn-tx-sage);
}
.knsdd-theme-preview.theme-lavender .preview-box,
.knsdd-tier-theme-preview.theme-lavender .preview-box {
  border-color: var(--knsdd-warn-bd-lavender);
  background: var(--knsdd-warn-bg-lavender);
  color: var(--knsdd-warn-tx-lavender);
}
.knsdd-theme-preview.theme-amber .preview-box,
.knsdd-tier-theme-preview.theme-amber .preview-box {
  border-color: var(--knsdd-warn-bd-amber);
  background: var(--knsdd-warn-bg-amber);
  color: var(--knsdd-warn-tx-amber);
}
/* Rose teması için de eşleştirme ekleyelim */
.knsdd-theme-preview.theme-rose .preview-box,
.knsdd-tier-theme-preview.theme-rose .preview-box {
  border-color: var(--knsdd-warn-bd-rose);
  background: var(--knsdd-warn-bg-rose);
  color: var(--knsdd-warn-tx-rose);
}

/* About & Integrations Box */
.knsdd-about-box,
.knsdd-integrations-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}
.knsdd-about-box h2,
.knsdd-integrations-box h2 {
  margin: 0 0 10px;
}
.knsdd-about-box ul,
.knsdd-integrations-box ol {
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
}
.knsdd-about-box .description,
.knsdd-integrations-box .description {
  margin-top: 12px;
}

/* Integrations Tab Specifics */
.knsdd-integrations-box h3 {
    margin-top: 20px;
    margin-bottom: 8px;
}
.knsdd-integrations-box ol {
    list-style: decimal;
    padding-left: 20px;
    margin-bottom: 16px;
}
.knsdd-integrations-box li {
    margin-bottom: 12px;
}
.knsdd-code-snippet-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.knsdd-code-snippet {
    margin: 0;
    padding: 4px 8px;
    background: #f0f0f1;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    width: -moz-fit-content;
    width: fit-content;
}
.knsdd-copy-button.is-copied {
    background-color: #2271b1 !important;
    color: #fff !important;
    border-color: #2271b1 !important;
}
.knsdd-copy-button.is-copied:focus {
    box-shadow: none;
}

/* Inline code (ör: {{contact_email}}) için gri arka planı kaldır – sadece Entegrasyonlar alanında */
.knsdd-integrations-box p code,
.knsdd-integrations-box li code,
.knsdd-integrations-box .description code {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

/* UI – Tier Table Custom Color controls */
.knsdd-inline-label { min-width: 48px; color: #50575e; }
.knsdd-hex-input {
  width: 120px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 2px 6px;
}
.knsdd-tier-custom-controls .button.knsdd-tier-color-reset { margin-left: 4px; }

/* Palette preview under Tier Table Color Theme */
.knsdd-palette-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.knsdd-palette-preview .swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px; /* preview-box ile uyumlu, biraz kompakt */
  min-width: 96px;
  border-radius: 4px;
  border: 1px solid #d1d5db; /* gray-300 */
}
.knsdd-palette-preview .hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #50575e;
}

/* Tier theme preview, Uyarı/Son Odak kutuları ile aynı görünsün: preview-box stilini yeniden kullan */
.knsdd-tier-theme-preview { margin-top: 10px; }
.knsdd-tier-theme-preview .preview-box {
  padding: 10px 12px;
  border: 1px solid #e2e8f0; /* varsayılan sınır; JS ile palete göre güncellenecek */
  background: #f8fafc; /* varsayılan açık arka plan */
  color: #1f2937;
  border-radius: 4px;
}