/* ============================================================
   Zeo Geo-Radar · Modül stili: Prompt Designer (P3, designer-wizards.js)
   Sahip olduğu sınıf önekleri: .dg-* (modül-yeni), .bulk-*, .wizard-*,
   .csv-*, .gen-*
   Ortak iskelet: .zr-wizard / .zr-step-dots / .zr-bulkbar (radar.css)
   Kurallar: yalnızca var(--*) token; radar.css primitifleri
   yeniden stillenmez.
   ============================================================ */

/* ---------------- Sayfa başlığı & üst bar ---------------- */

/* İşlevsel kök işareti: #modalHolder'daki .dg-modal-root bu modüle aittir;
   sahiplik denetimi JS'te, burada yalnızca katman önceliği. */
.dg-modal-root {
  z-index: 95;
}

.dg-backlink {
  border: none;
  background: none;
  padding-left: 0;
}

.dg-modified-badge {
  display: inline-flex;
  align-items: center;
  background: var(--pink-100);
  color: var(--accent);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--mono);
  white-space: nowrap;
}

.dg-side-label {
  padding-top: 0;
}

.dg-grid-frame {
  margin: 6px 26px 40px;
  border-radius: var(--radius);
}

.dg-side .t-row .n {
  min-width: 20px;
  text-align: right;
}

/* ---------------- Araç çubuğu ---------------- */

.dg-search-box {
  flex: 1;
  max-width: 340px;
}

/* ---------------- Prompt tablosu ---------------- */

.dg-tbl {
  table-layout: auto;
}

.dg-tbl th.dg-checkcol,
.dg-tbl td.dg-checkcol {
  width: 34px;
  padding-right: 0;
}

.dg-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1.4px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--panel);
  cursor: pointer;
  vertical-align: middle;
}

.dg-check:hover {
  border-color: var(--accent);
}

.dg-check.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--panel);
}

body.dark .dg-check.on {
  background: var(--pink-200);
  border-color: var(--pink-200);
  color: var(--ink);
}

.dg-check svg {
  width: 9px;
  height: 9px;
}

.dg-row.sel td {
  background: var(--pink-100);
}

.dg-row:hover td {
  background: var(--hover);
}

.dg-row.sel:hover td {
  background: var(--pink-100);
}

.dg-prompt-cell {
  min-width: 320px;
  max-width: 460px;
}

.dg-prompt-text {
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
}

.dg-dot-mod {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--accent);
  vertical-align: middle;
  margin-left: 2px;
}

.dg-badge-off {
  background: var(--pink-100);
  color: var(--accent);
}

.dg-topic-cell {
  color: var(--ink-3);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dg-engine-stack {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.dg-addrow td {
  color: var(--ink-4);
  font-size: 13px;
  cursor: pointer;
}

.dg-addrow:hover td {
  background: var(--hover);
  color: var(--ink-2);
}

.dg-empty-row {
  padding: 26px 14px;
  text-align: center;
}

/* ---------------- Canlı kayıt durumu + toplu işlem sonuçları ----------------
   08 §2 durum makinesi (idle/saving/saved/error) ve satır başına toplu işlem
   sonucu; iki temada da token ile çalışır. */

.dg-save-note {
  color: var(--ink-3);
  font-size: 12.5px;
}

.dg-save-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--mono);
  background: var(--chip-bg);
  color: var(--ink-3);
  white-space: nowrap;
}

.dg-save-chip.saved {
  color: var(--green);
}

.dg-save-chip.failed {
  color: var(--red);
  white-space: normal;
}

.dg-row-pending td {
  opacity: .65;
}

.dg-rowact {
  text-align: right;
  white-space: nowrap;
}

.dg-bulk-panel {
  border-top: 1px solid var(--border);
  padding: 12px 14px 16px;
}

.dg-bulk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13.5px;
  margin-bottom: 8px;
}

.dg-bulk-note {
  color: var(--ink-3);
  font-size: 12.5px;
  margin-bottom: 6px;
}

.dg-bulk-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.dg-bulk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 6px 10px;
  background: var(--panel);
}

.dg-bulk-text {
  flex: 1;
  min-width: 0;
  color: var(--ink-2);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------- Yüzer toplu işlem çubuğu ---------------- */
/* İskelet .zr-bulkbar (radar.css); burada yalnızca iç düzen. */

.bulk-action-bar-floating {
  max-width: calc(100vw - 40px);
  overflow-x: auto;
}

.bulk-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  border-radius: 99px;
  padding: 6px 11px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}

.bulk-btn:hover {
  background: var(--hover);
  color: var(--ink);
}

.bulk-btn.danger {
  color: var(--red);
}

.bulk-btn.danger:hover {
  background: var(--pink-100);
}

.bulk-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex: none;
}

.bulk-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 2px;
}

.bulk-count {
  color: var(--ink-3);
  font-size: 12.5px;
  font-family: var(--mono);
  white-space: nowrap;
}

.bulk-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 99px;
  padding: 5px 11px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}

.bulk-clear-btn:hover {
  background: var(--hover);
  border-color: var(--pink-200);
}

.bulk-modal-sub {
  color: var(--ink-3);
  font-size: 13px;
  margin-bottom: 12px;
}

.bulk-modal-select {
  width: 100%;
}

/* ---------------- Ortak sihirbaz çerçevesi ---------------- */
/* İskelet .zr-wizard / .zr-wiz-head / -body / -foot (radar.css). */

.wizard-frame {
  width: 940px;
}

.wizard-frame.wizard-sm {
  width: 460px;
}

.wizard-frame .zr-wiz-head {
  color: var(--ink);
}

.wizard-dots {
  margin-left: 8px;
}

.wizard-x {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--ink-4);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.wizard-x:hover {
  background: var(--pink-100);
  color: var(--accent);
}

.wizard-foot-note {
  color: var(--ink-3);
  font-size: 12.5px;
  max-width: 60%;
}

.wizard-foot-spacer {
  flex: 1;
}

.wizard-cancel {
  color: var(--red);
}

.wizard-split {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 26px;
  min-height: 360px;
}

.wizard-side h3 {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 12px;
}

.wizard-side p {
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 10px;
}

.wizard-req {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.wizard-req b {
  color: var(--ink);
  display: block;
  margin: 10px 0 4px;
}

.wizard-req ul {
  padding-left: 16px;
  line-height: 1.55;
}

.wizard-req li {
  margin-bottom: 4px;
}

.wizard-input,
.wizard-textarea,
.wizard-select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 11px;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--panel);
  outline: none;
}

.wizard-textarea {
  height: 92px;
  resize: vertical;
  line-height: 1.5;
}

.wizard-select {
  cursor: pointer;
  appearance: none;
  padding-right: 26px;
}

.wizard-input:focus,
.wizard-textarea:focus,
.wizard-select:focus,
.wizard-input:focus-visible,
.wizard-textarea:focus-visible,
.wizard-select:focus-visible {
  border-color: var(--accent);
  outline: none;
}

/* Adım 3 bölünmüş görünüm (CSV incele + üretim özelleştir) */
.wizard-review-split {
  display: grid;
  grid-template-columns: 220px 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 340px;
}

.wizard-topics-col {
  border-right: 1px solid var(--border-soft);
  padding: 10px;
  overflow-y: auto;
  max-height: 52vh;
}

.wizard-col-label {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px 8px;
}

.wizard-topic-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
}

.wizard-topic-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard-topic-item b {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-4);
}

.wizard-topic-item.on {
  background: var(--pink-100);
  color: var(--ink);
  font-weight: 600;
}

.wizard-rows-col {
  overflow-y: auto;
  max-height: 52vh;
  min-width: 0;
}

/* Adım 2.5 yükleme ekranı */
.wizard-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 340px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 45%, var(--pink-100), transparent 62%),
    repeating-linear-gradient(0deg, var(--border-soft) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, var(--border-soft) 0 1px, transparent 1px 9px);
  border-radius: var(--radius);
}

.wizard-spark {
  font-size: 26px;
  animation: dgSparkPulse 1.4s ease-in-out infinite;
}

@keyframes dgSparkPulse {
  0%, 100% { opacity: .45; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.08); }
}

.wizard-load-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
}

.wizard-stage {
  color: var(--ink-3);
  font-size: 13px;
}

.wizard-progress {
  width: 260px;
  height: 5px;
  border-radius: 99px;
  background: var(--pink-200);
  overflow: hidden;
  margin-top: 6px;
}

.wizard-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .35s ease;
}

/* ---------------- CSV sihirbazı ---------------- */

.csv-template-btn {
  margin-top: 6px;
}

.csv-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: var(--chip-bg);
  min-height: 300px;
  padding: 22px;
  text-align: center;
  cursor: pointer;
}

.csv-dropzone:hover {
  border-color: var(--accent);
}

.csv-file-input {
  display: none;
}

.csv-drop-inner,
.csv-filecard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: var(--ink-3);
}

.csv-drop-title {
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
}

.csv-browse-btn {
  margin-top: 4px;
}

.csv-filename {
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
}

.csv-filesize {
  color: var(--ink-4);
  font-size: 12.5px;
  font-family: var(--mono);
}

.csv-remove-btn {
  margin-top: 2px;
}

.csv-map-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.csv-map-heads {
  display: grid;
  grid-template-columns: 1fr 26px 1fr;
  gap: 10px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
  padding-bottom: 8px;
}

.csv-map-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 44vh;
  overflow-y: auto;
}

.csv-map-row {
  display: grid;
  grid-template-columns: 1fr 26px 1fr;
  gap: 10px;
  align-items: center;
}

.csv-map-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--panel);
  overflow: hidden;
}

.csv-map-status {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  flex: none;
}

.csv-map-status.ok {
  color: var(--green);
}

.csv-map-status.off {
  color: var(--ink-4);
}

.csv-map-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
}

.csv-fallback-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border-soft);
  margin-top: 14px;
  padding-top: 14px;
}

.csv-fallback-row label {
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.csv-fallback-row .wizard-select {
  width: auto;
  min-width: 210px;
}

.csv-engine-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--ink-3);
  font-size: 12.5px;
  white-space: nowrap;
}

.csv-map-warn {
  margin-top: 10px;
  background: var(--pink-100);
  color: var(--accent);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 12.5px;
  font-weight: 600;
}

.csv-rev-tbl {
  font-size: 13px;
}

.csv-rev-tbl th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.csv-rev-idx {
  font-family: var(--mono);
  color: var(--ink-4);
  width: 34px;
}

.csv-rev-text {
  color: var(--ink);
  font-weight: 500;
  min-width: 240px;
}

.csv-rev-more {
  color: var(--ink-4);
  font-size: 12.5px;
  padding: 10px 14px;
}

/* ---------------- Üretim sihirbazı ---------------- */

.gen-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 4px;
}

.gen-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.gen-field label {
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
}

.gen-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.gen-topic-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gen-topic-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gen-topic-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 8px;
  color: var(--ink-4);
  cursor: pointer;
}

.gen-topic-remove:hover {
  background: var(--pink-100);
  border-color: var(--pink-200);
  color: var(--red);
}

.gen-addtopic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 9px;
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}

.gen-addtopic-btn:hover {
  background: var(--hover);
  border-color: var(--pink-200);
}

.gen-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gen-counter {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: var(--ink-4);
  font-size: 11.5px;
  font-family: var(--mono);
  pointer-events: none;
}

.gen-rows-col {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gen-row {
  display: grid;
  grid-template-columns: 26px 1fr 190px 30px;
  gap: 8px;
  align-items: center;
}

.gen-row-idx {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-4);
  text-align: right;
}

.gen-row-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink);
  background: var(--panel);
  outline: none;
}

.gen-row-input:focus,
.gen-row-input:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.gen-row-select {
  font-size: 12.5px;
  padding: 6px 9px;
}

/* ---------------- Dar ekran ---------------- */

@media (max-width: 1180px) {
  .wizard-frame {
    width: 96vw;
  }

  .wizard-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wizard-review-split {
    grid-template-columns: 160px 1fr;
  }

  .gen-row {
    grid-template-columns: 22px 1fr 140px 28px;
  }
}

/* ---------------- Canlı CSV sihirbazı (H2: sunucu önizleme/içe aktarma) ----------------
   Satır durumları ve toplamlar preview-prompts-csv sonucundan çizilir;
   tüm renkler token, iki temada da geçerli. */

.dgcsv-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 4px;
}

.dgcsv-textarea {
  height: 110px;
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: pre;
}

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

.dgcsv-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}

.dgcsv-map-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.dgcsv-map-field > span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

.dgcsv-stale-note {
  display: none;
}

.dgcsv-stale-note.on {
  display: block;
  background: var(--pink-100);
  color: var(--accent);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 12.5px;
  font-weight: 600;
}

.dgcsv-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.dgcsv-preview.stale {
  opacity: .45;
}

.dgcsv-totals {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 8px;
}

.dgcsv-tot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--chip-bg);
  color: var(--ink-3);
  white-space: nowrap;
}

.dgcsv-tot b {
  font-family: var(--mono);
}

.dgcsv-tot.ok b {
  color: var(--green);
}

.dgcsv-tot.dup b {
  color: var(--accent);
}

.dgcsv-tot.bad b {
  color: var(--red);
}

.dgcsv-hash {
  margin-left: auto;
  color: var(--ink-4);
  font-size: 11.5px;
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.dgcsv-tblwrap {
  max-height: 200px;
  overflow-y: auto;
  border-top: 1px solid var(--border-soft);
}

.dgcsv-st {
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--mono);
  background: var(--chip-bg);
  color: var(--ink-3);
  white-space: nowrap;
}

.dgcsv-st.ok {
  color: var(--green);
}

.dgcsv-st.dup {
  color: var(--accent);
}

.dgcsv-st.bad {
  color: var(--red);
}

.dgcsv-errcell {
  min-width: 180px;
}

.dgcsv-errchip {
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  padding: 2px 7px;
  margin: 1px 2px 1px 0;
  font-size: 11.5px;
  font-family: var(--mono);
  background: var(--pink-100);
  color: var(--red);
  white-space: nowrap;
}

.dgcsv-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dgcsv-errlist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 130px;
  overflow-y: auto;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 8px 11px;
}

.dgcsv-errrow {
  color: var(--red);
  font-size: 12.5px;
  font-family: var(--mono);
}

.dgcsv-result {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-soft);
  background: var(--chip-bg);
  color: var(--green);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .dgcsv-map {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dgcsv-map {
    grid-template-columns: 1fr;
  }

  .dgcsv-filerow {
    flex-wrap: wrap;
  }

  .dgcsv-hash {
    max-width: 120px;
  }
}