/* =============================================================================
   XML SHELL — Trendmetrik XML kurulum akışı ortak tasarım dili
   -----------------------------------------------------------------------------
   Tek kaynak: 3 XML sayfasını (Kaynak Ekleme, Field Mapping, Kategori
   Eşleştirme) marka mavisi + dashboard diliyle hizalar. Hiçbir jenerik AI
   estetiği yok — tüm renkler theme-variables.css `--tm-*` / `--color-*`
   token'larından gelir; dark mode otomatik (token'lar html.dark-mode altında
   yeniden tanımlanır).

   Kullanım:
     • base.html `{% block head %}` içinde link'lenir (PR-A: additive, hiçbir
       sayfayı değiştirmez).
     • Sayfa kök sarmalına `.xmlsh-scope` eklenir (PR-B/C/D).
     • Mevcut sayfa class'ları (`.fm-hero`, `.progress-steps` vb.) CSS alias ile
       bu kabuğa köprülenir — HTML/JS hook'larına dokunulmaz.

   Kurallar:
     • `!important` minimum (yalnız Bootstrap/eski !important kurallarını
       yenmek gerektiğinde).
     • Yeni token tanımı YOK — yalnız mevcut kanonik token'lar referanslanır.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1) SCOPE / CONTAINER
   2026-06-12 (CEO global-padding directive): .xmlsh-scope ARTIK kendi
   container/padding'ini SÜRMÜYOR. Yatay gutter + genişlik tek kaynaktan gelir:
   global shell sözleşmesi `main#mainContent.tmv2-page` (tm-shell-v2.css:184,
   padding 10/76/20/16 → token'lı --tmv2-layout-gutter ailesi) + .tmv2-page-inner
   max-width. Önceden buradaki max-width:1520px + margin-inline:auto +
   padding-inline:18px global gutter ile ÇAKIŞIYOR → tutarsız kenar boşluğu
   (CEO "kenar boşlukları tutarsız" şikâyeti). Bu blok artık YALNIZ token tanımı
   + tipografi; layout global'e bırakılır.
   --------------------------------------------------------------------------- */
.xmlsh-scope {
  --xmlsh-gap: var(--tmv2-section-gap, 16px);
  --xmlsh-radius: 14px;
  --xmlsh-radius-sm: 10px;
  --xmlsh-radius-pill: 999px;

  /* Tipografi — system stack (JetBrains Mono YALNIZ <code>/.xml-preview-box) */
  --xmlsh-font: var(--tmv2-ff-sans, ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --xmlsh-font-mono: var(--tmv2-ff-mono, "JetBrains Mono", ui-monospace, Menlo,
    monospace);

  /* Genişlik global shell'in (.tmv2-page-inner) sorumluluğunda; scope yalnız
     tam sütunu doldurur. Yatay padding YOK — global gutter tek kaynak. */
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  font-family: var(--xmlsh-font);
  color: var(--tm-text-primary);
}

.xmlsh-scope code,
.xmlsh-scope .xml-preview-box,
.xmlsh-scope .xmlsh-mono {
  font-family: var(--xmlsh-font-mono);
}

/* -----------------------------------------------------------------------------
   2) KART SİSTEMİ
   Tek kart yüzeyi. Mevcut class'lar (.fm-hero, .modern-card, .form-section,
   .form-card ...) alias ile aynı yüzeye köprülenir.
   --------------------------------------------------------------------------- */
.xmlsh-card {
  background: var(--tm-bg-card);
  border: 1px solid var(--tm-border-color);
  border-radius: var(--xmlsh-radius);
  box-shadow: var(--tm-shadow-sm);
}

.xmlsh-card--pad {
  padding: var(--xmlsh-pad);
}

/* -----------------------------------------------------------------------------
   3) BUTON HİYERARŞİSİ
   primary (marka mavisi) · ghost (nötr) · success (yeşil). Gökkuşağı buton seti
   (kategori #28a745/#0d6efd/#ffc107) bu üçlüye indirgenir.
   --------------------------------------------------------------------------- */
.xmlsh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--xmlsh-radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease;
}

.xmlsh-btn:focus-visible {
  outline: none;
  box-shadow: var(--tmv2-focus-ring, 0 0 0 3px rgba(var(--color-primary-rgb), 0.35));
}

.xmlsh-btn--primary {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: var(--tm-fg-on-brand);
}
.xmlsh-btn--primary:hover {
  background: var(--tm-primary-hover);
  border-color: var(--tm-primary-hover);
  color: var(--tm-fg-on-brand);
}

.xmlsh-btn--ghost {
  background: var(--tm-bg-card);
  border-color: var(--tm-border-color);
  color: var(--tm-text-primary);
}
.xmlsh-btn--ghost:hover {
  background: var(--tm-bg-hover);
  border-color: var(--tm-border-input);
  color: var(--tm-text-primary);
}

.xmlsh-btn--success {
  background: var(--tm-success);
  border-color: var(--tm-success);
  color: var(--tm-fg-on-brand);
}
.xmlsh-btn--success:hover {
  filter: brightness(0.95);
  color: var(--tm-fg-on-brand);
}

.xmlsh-btn:disabled,
.xmlsh-btn[disabled],
.xmlsh-btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   4) PAGE HEADER (partial _xml_page_header.html ile birlikte)
   Nötr kart + sol marka accent şeridi — mor banner'ların yerine.
   --------------------------------------------------------------------------- */
.xmlsh-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--xmlsh-gap);
  flex-wrap: wrap;
  padding: 14px 18px 14px 20px;
  margin: 0 0 var(--xmlsh-gap);
  background: var(--tm-bg-card);
  border: 1px solid var(--tm-border-color);
  border-radius: var(--xmlsh-radius);
  box-shadow: var(--tm-shadow-sm);
  overflow: hidden;
}

/* Sol marka accent şeridi (mavi) — mor gradient banner'ın nötr karşılığı */
.xmlsh-header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--tm-primary) 0%, var(--color-secondary, var(--tm-primary)) 100%);
}

.xmlsh-header__mark {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--xmlsh-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tm-fg-on-brand);
  font-size: 1rem;
  background: var(--tm-primary);
}

.xmlsh-header__titles {
  flex: 1 1 240px;
  min-width: 0;
}

.xmlsh-header__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: var(--tm-text-primary);
  letter-spacing: -0.01em;
}

.xmlsh-header__sub {
  font-size: 0.78rem;
  color: var(--tm-text-secondary);
  margin: 0.15rem 0 0;
  line-height: 1.4;
}

.xmlsh-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Geri / nötr pill — dashboard diliyle uyumlu */
.xmlsh-header__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tm-text-secondary);
  background: var(--tm-bg-secondary);
  border: 1px solid var(--tm-border-color);
  border-radius: var(--xmlsh-radius-pill);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.xmlsh-header__back:hover {
  color: var(--tm-primary);
  border-color: var(--tm-primary);
  background: var(--tm-primary-soft);
}

@media (max-width: 560px) {
  .xmlsh-header {
    padding: 12px 14px 12px 16px;
  }
  .xmlsh-header__actions {
    width: 100%;
    margin-left: 0;
  }
  .xmlsh-header__back span {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
   5) HERO ALIAS — field-mapping `.fm-hero` mor gradient'ini nötr karta köprüle
   (PR-C bunu aktive eder; burada additive olarak hazır durur — scope altında.)
   --------------------------------------------------------------------------- */
.xmlsh-scope .fm-hero,
.xmlsh-scope div.fm-hero {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border: 1px solid var(--tm-border-color) !important;
  box-shadow: var(--tm-shadow-sm) !important;
  position: relative;
  overflow: hidden;
}
.xmlsh-scope .fm-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--tm-primary) 0%, var(--color-secondary, var(--tm-primary)) 100%);
}
.xmlsh-scope .fm-hero h1,
.xmlsh-scope .fm-hero .fm-hero-text h1 {
  color: var(--tm-text-primary) !important;
}
.xmlsh-scope .fm-hero p,
.xmlsh-scope .fm-hero .fm-hero-text p {
  color: var(--tm-text-secondary) !important;
  opacity: 1 !important;
}
.xmlsh-scope .fm-hero-stat {
  background: var(--tm-bg-secondary) !important;
  border: 1px solid var(--tm-border-color) !important;
  backdrop-filter: none !important;
}
.xmlsh-scope .fm-hero-stat small {
  color: var(--tm-text-secondary) !important;
}
.xmlsh-scope .fm-hero-stat b {
  color: var(--tm-text-primary) !important;
}

/* -----------------------------------------------------------------------------
   6) BUTON ALIAS — kategori gökkuşağı / field-mapping mavileri → hiyerarşi
   (PR-C/D scope eklendiğinde aktive; additive, scope dışı sayfayı etkilemez.)
   --------------------------------------------------------------------------- */
.xmlsh-scope .btn-primary-custom,
.xmlsh-scope .bg-primary-gradient {
  background: var(--tm-primary) !important;
  background-image: none !important;
  border-color: var(--tm-primary) !important;
  color: var(--tm-fg-on-brand) !important;
  box-shadow: none !important;
}
.xmlsh-scope .btn-primary-custom:hover,
.xmlsh-scope .bg-primary-gradient:hover {
  background: var(--tm-primary-hover) !important;
  border-color: var(--tm-primary-hover) !important;
}

/* -----------------------------------------------------------------------------
   7) DARK MODE — tamamı token'dan; ekstra override gerekmez. Yalnız mor banner
   kaynaklı hardcoded gradient'leri scope altında kesinle.
   --------------------------------------------------------------------------- */
html.dark-mode .xmlsh-scope .fm-hero,
html.dark-mode .xmlsh-scope div.fm-hero {
  background: var(--tm-bg-card) !important;
  background-image: none !important;
  border-color: var(--tm-border-color) !important;
}

/* =============================================================================
   8) LAYOUT FIX — GLOBAL PADDING + İÇ-SCROLL KALDIRMA (2026-06-12)
   CEO bağlayıcı gereksinim:
     (1) İÇ SCROLL YOK  → içerik doğal yükseklikte aksın, container'a otursun.
     (2) GLOBAL PADDING → sayfa-içi .container-fluid/.container kendi 1rem yatay
         padding'ini SÜRMESİN; global shell gutter (tm-shell-v2.css:184) tek
         kaynak.
     (3) HARDCODED YOK  → token'lı değerler (--tmv2-sp-*, --tm-*).
   Bu blok .xmlsh-scope ile 2-class özgüllükte; sayfa-içi inline <style>'ın
   tek-class `!important` kurallarını (xml_field_mapping.html / xml_category_
   mapping.html) kaynak-sırasından bağımsız olarak yener. HTML/JS hook'larına,
   id/class sözleşmelerine DOKUNULMAZ — yalnız layout CSS'i normalize edilir.
   ============================================================================= */

/* -- 8.1 GLOBAL GUTTER DEVRI — sayfa-içi container'lar global gutter'a teslim --
   3 sayfanın kök wrapper'ı altındaki .container-fluid/.container kendi yatay
   padding'ini (xml_field_mapping.html:17-25 padding-left/right:1rem) sıfırlar;
   yatay boşluk artık global shell'den gelir. Dikey ritim section-gap token'ı. */
.xmlsh-scope > .container-fluid,
.xmlsh-scope > .container,
.xmlsh-scope .container-fluid,
.xmlsh-scope .container {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* -- 8.2 İÇ-SCROLL KALDIRMA — field mapping --------------------------------
   xml_field_mapping.html inline <style> 8 konteynerde max-height min(Npx,NNvh)
   + overflow:auto sürüyordu → sayfa kısılıp her panel iç-scroll üretiyordu
   ("her şey scroll ediliyor"). Burada cap kaldırılır, içerik doğal akar.
   İSTİSNA: ham XML metni (.xml-preview-code-scroller / .xml-tree-root) gerçekten
   uzun olabildiği için KONTROLLÜ bir tavanla bırakılır (sayfa geneli scroll'suz
   kalsın diye yalnız bu iki ham-metin kutusu). */
.xmlsh-scope .xml-preview-box,
.xmlsh-scope .xml-preview-tab-pane-inner,
.xmlsh-scope .xml-preview-scroll-body,
.xmlsh-scope #previewFieldsBody.xml-preview-scroll-body,
.xmlsh-scope .xml-fields-table-wrap {
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Ham XML metin kutuları: kontrollü tavan (token yok — viewport-relative ölçü
   amaca özel; sayfa-geneli scroll'u önlemek için bilinçli istisna). Yatay taşma
   engellenir, dikey yalnız aşırı uzun ham metinde. */
.xmlsh-scope .xml-preview-code-scroller,
.xmlsh-scope .xml-tree-root {
  max-height: min(480px, 60vh) !important;
  overflow: auto !important;
}

/* Sekme kabuğu sabit yüksekliği bıraktıysa doğal aksın (overflow:hidden iç
   içeriği kırpıyordu). */
.xmlsh-scope .xml-preview-tab-shell {
  overflow: visible !important;
}

/* -- 8.3 İÇ-SCROLL KALDIRMA — kategori eşleştirme --------------------------
   #categoryTableWrapper inline style="overflow-y:auto" + max-height min(58vh,
   560px) → tablo iç-scroll. Tablo zaten SAYFALI (kendi pagination'ı var), bu
   yüzden cap'i kaldırıp doğal akıtmak güvenli; satır sayısını pagination tutar.
   attribute-coverage-values 260px cap'i de doğal akışa çevrilir. */
.xmlsh-scope #categoryTableWrapper,
.xmlsh-scope .attribute-coverage-values {
  max-height: none !important;
  overflow: visible !important;
}

/* -- 8.4 ALT AKSİYON BARI — Kaydet/Sıfırla taşma/kayma engeli --------------
   Aksiyon butonları sayfa akışında; iç-scroll kalkınca doğal yerine oturur.
   Buton satırı container'ı taşmasın + sağ gutter'a yapışmasın diye box-sizing
   ve tam-genişlik garanti. (Konum global desene bırakılır; sabit/fixed YOK.) */
.xmlsh-scope .xml-fields-actions,
.xmlsh-scope .field-mapping-actions,
.xmlsh-scope .category-mapping-actions,
.xmlsh-scope .xmlsh-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--xmlsh-gap);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}