/* ============================================================
   UI Polish — 2026-06-04
   Cross-page görsel cila: dokuz kritik sayfada density azaltma,
   focus/hover tutarlılığı, mobile overflow koruması, collapsible
   detay alanları için utility'ler.

   Yaklaşım: sınıf bazlı, opt-in. Mevcut bileşenleri ezmez,
   sadece yardımcı modifier'lar sağlar. Phase 1 transition
   bridge (tmNavigateTo) ile çakışma yok.

   Etkilenen sayfalar:
   - dashboard (overview/live/orders)
   - xml_field_mapping, xml_category_mapping, xml_sync,
     xml_sources, xml_add_source
   - buybox_control, commission_analysis, profit_margin_list
   ============================================================ */

/* ------------------------------------------------------------
   1. <details>/<summary> polish — "Daha fazla göster" kalıpları
   Mevcut HTML <details> elementlerinde tutarlı imleç + erişimli
   hover. Sayfalarda teknik detayları collapsible'a taşırken
   tek tip görünüm sağlar.
   ------------------------------------------------------------ */
.tm-polish details > summary,
details.tm-polish-collapsible > summary {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  list-style: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.tm-polish details > summary::-webkit-details-marker,
details.tm-polish-collapsible > summary::-webkit-details-marker {
  display: none;
}
.tm-polish details > summary::before,
details.tm-polish-collapsible > summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  font-weight: 700;
  color: #0163c2;
  transition: transform 0.15s ease;
  margin-right: 0.25rem;
}
.tm-polish details[open] > summary::before,
details.tm-polish-collapsible[open] > summary::before {
  content: "−";
}
.tm-polish details > summary:hover,
details.tm-polish-collapsible > summary:hover {
  background: #eff6ff;
  color: #0f172a;
  border-color: #bfdbfe;
}
.tm-polish details > summary:focus-visible,
details.tm-polish-collapsible > summary:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.tm-polish details[open] > summary,
details.tm-polish-collapsible[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ------------------------------------------------------------
   2. Long-text truncate utilities
   Tablolarda ve kart başlıklarında uzun metni güvenli kırpar.
   Tooltip için title attribute eklenmesi önerilir.
   ------------------------------------------------------------ */
.tm-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.tm-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.tm-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* ------------------------------------------------------------
   3. Mobile table/grid overflow koruması
   xml_sync, buybox_control, commission_analysis gibi geniş
   tablolar mobile 390x844'te yatay scroll'a düşüyor; sarmalayıcı
   sınıfı uygulanan yerlerde scroll içeride tutulur ve gövde
   taşmaz. Sayfa template'lerinde <div class="tm-table-scroll">
   içine sarın.
   ------------------------------------------------------------ */
.tm-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.tm-table-scroll::-webkit-scrollbar {
  height: 8px;
}
.tm-table-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.tm-table-scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ------------------------------------------------------------
   4. Focus ring tutarlılığı
   tabindex'li info chip ve interaktif span'lar tarayıcı default
   outline'ı yerine birleşik bir focus ring kullanır.
   ------------------------------------------------------------ */
.tm-focus-ring,
button.tm-focus-ring:focus-visible,
a.tm-focus-ring:focus-visible,
[role="button"].tm-focus-ring:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* ------------------------------------------------------------
   5. Secondary action grubu — düğme density azaltma
   Birden çok ikincil aksiyonu kompakt bir grup içine alır.
   Buybox toolbar, dashboard live header gibi yerlerde
   .tm-secondary-actions sınıfı uygulanır.
   ------------------------------------------------------------ */
.tm-secondary-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}
.tm-secondary-actions > button,
.tm-secondary-actions > a {
  background: transparent;
  border: 1px solid transparent;
  color: #475569;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.35rem 0.625rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tm-secondary-actions > button:hover,
.tm-secondary-actions > a:hover {
  background: #ffffff;
  color: #0f172a;
  border-color: #e2e8f0;
}

/* ------------------------------------------------------------
   6. KPI density helper'ı
   Mobile'da KPI gridini 2 sütuna düşürür (5/4 sütun ekrana
   sığmıyorsa). Overview tab'ında tm-kpi-grid var; bu sınıf
   isteğe bağlı override sağlar.
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .tm-kpi-grid--compact-mobile {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
  .tm-kpi-grid--compact-mobile .tm-kpi-card__value {
    font-size: 1.05rem !important;
  }
}

/* ------------------------------------------------------------
   7. Skeleton shimmer animasyon kalitesi
   Mevcut .skeleton sınıfı bazı sayfalarda statik gri kalıyor.
   .tm-skeleton-shimmer modifier'ı pürüzsüz nabız efekti ekler.
   ------------------------------------------------------------ */
@keyframes tmPolishShimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.tm-skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(241, 245, 249, 0.6) 0%,
    rgba(226, 232, 240, 0.95) 50%,
    rgba(241, 245, 249, 0.6) 100%
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: tmPolishShimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tm-skeleton-shimmer {
    animation: none;
    background: rgba(226, 232, 240, 0.7);
  }
}

/* ------------------------------------------------------------
   8. Disabled "Coming soon" chip'lerini sustur
   N11 "Yakında" gibi disabled noise pill'lerini visually
   downgrade eder (kaldırılamadığı yerlerde). Buybox'ta zaten
   markup'tan kaldırıldı; bu fallback diğer sayfalar için.
   ------------------------------------------------------------ */
.tm-polish [disabled].mp-pill,
.tm-polish .btn-coming-soon[disabled] {
  opacity: 0.45;
  filter: grayscale(0.85);
}

/* ------------------------------------------------------------
   9. Page hero kompaktlaştırma yardımcısı
   xml_field_mapping zaten kendi .field-mapping-page-hero CSS'ini
   tanımlıyor; bu sınıf hero KPI box'ı için varsayılan kompakt
   ölçüleri sağlar (opt-in).
   ------------------------------------------------------------ */
.tm-hero-compact {
  padding: 0.875rem 1rem !important;
}
.tm-hero-compact h1,
.tm-hero-compact .tm-hero-title {
  font-size: 1.125rem !important;
  line-height: 1.25 !important;
}
.tm-hero-compact p,
.tm-hero-compact .tm-hero-subtitle {
  margin-top: 0.25rem !important;
  font-size: 0.8125rem !important;
}

/* ------------------------------------------------------------
   10. Smooth fade for content that appears post-load
   Field Mapping → Kategori Eşleştirme transition sırasında
   içerik render'ı için yumuşak fade. Phase 1 overlay bridge'i
   ile uyumlu — overlay düşerken içerik hızlı fade-in yapar.
   ------------------------------------------------------------ */
@keyframes tmPolishFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.tm-fade-in {
  animation: tmPolishFadeIn 0.22s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .tm-fade-in { animation: none; }
}

/* =================================================================
   PR-2 2026-06-05: Phase 2 user-page redesign utilities
   --------------------------------------------------------------
   4 cross-page pattern: toolbar overflow disclosure, filter
   bar collapsible, banner queue limiter, segmented tab look.
   Sayfa-bazlı scope'lu CSS dosyaları bu utility'leri tüketir.
   ================================================================= */

/* 11. Toolbar overflow "Daha fazla" — birincil aksiyon görünür kalır,
       ikincil aksiyonlar <details> + summary "Daha fazla" altına. */
.tm-actions-overflow {
  display: inline-block;
  margin: 0;
  position: relative;
}
.tm-actions-overflow > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 0.4rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tm-actions-overflow > summary::-webkit-details-marker { display: none; }
.tm-actions-overflow > summary::before {
  content: "+";
  font-weight: 700;
  color: #0163c2;
  width: 0.85em;
  display: inline-block;
}
.tm-actions-overflow[open] > summary::before { content: "−"; }
.tm-actions-overflow > summary:hover {
  background: #eff6ff;
  color: #0f172a;
  border-color: #bfdbfe;
}
.tm-actions-overflow > summary:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.tm-actions-overflow__body {
  position: absolute;
  z-index: 50;
  right: 0;
  margin-top: 6px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  white-space: nowrap;
}

/* 12. Filter bar collapse — varsayılan açık (loaded state), kapanabilir.
       Boş veri durumunda ilgili Jinja gate gizler; bu, "veri var ama
       kullanıcı sadeleştirmek istiyor" senaryosu için inline disclosure. */
.tm-filters-collapse {
  margin: 0 0 0.75rem;
}
.tm-filters-collapse > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 0.45rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.tm-filters-collapse > summary::-webkit-details-marker { display: none; }
.tm-filters-collapse > summary::before {
  content: "▾";
  display: inline-block;
  font-size: 0.7em;
  transition: transform 0.15s ease;
}
.tm-filters-collapse[open] > summary::before { transform: rotate(180deg); }
.tm-filters-collapse > summary:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.tm-filters-collapse__body {
  padding-top: 0.75rem;
}

/* 13. Banner queue — birden çok conditional banner üst üste açıldığında
       sadece ilk 2 görünür (3+ gizli). DOM'da hepsi olabilir; CSS sınırlar.
       Wrapper element <div class="tm-banner-queue"> içine taşınır. */
.tm-banner-queue {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tm-banner-queue > *:nth-child(n+3) {
  display: none;
}
/* Override: kullanıcı "Daha fazla göster" tıkladığında bir parent
   .tm-banner-queue--all sınıfı ekleyebilirsiniz. */
.tm-banner-queue--all > *:nth-child(n+3) {
  display: revert;
}

/* 14. Segmented tabs — eski Bootstrap pill nav yerine modern
       segmented control görünümü. Tab container'a opt-in class. */
.tm-segmented-tabs {
  display: inline-flex;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  position: relative;
}
.tm-segmented-tabs > * {
  border: 0 !important;
  background: transparent !important;
  color: #475569 !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  white-space: nowrap;
}
.tm-segmented-tabs > .active,
.tm-segmented-tabs > [aria-pressed="true"],
.tm-segmented-tabs > .is-active {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.tm-segmented-tabs > *:hover:not(.active):not([aria-pressed="true"]):not(.is-active) {
  background: rgba(255, 255, 255, 0.6) !important;
  color: #0f172a !important;
}
.tm-segmented-tabs > *:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
@media (max-width: 575.98px) {
  .tm-segmented-tabs {
    flex-wrap: wrap;
    width: 100%;
  }
  .tm-segmented-tabs > * {
    flex: 1 0 calc(50% - 4px);
    text-align: center;
  }
}

/* 15. PR #1728 revision: real first-fold reductions for failed/partial pages. */
.platform-dist-metric-toggle--legacy,
.tm-live-page .tm-live-segs--legacy,
#tmLivePerformancePage .tm-live-segs--legacy,
.tm-live-status-chip-legacy,
.tm-insights-filter-buttons--legacy,
.orders-tab-buttons--legacy,
.xml-sync-filter-btns-legacy {
  display: none !important;
}

.platform-dist-metric-select,
.tm-live-metric-select > select,
.tm-insights-filter-select,
.orders-tab-select,
.xml-sync-filter-select {
  min-height: 34px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.35rem 2rem 0.35rem 0.7rem;
}

.orders-tab-select-wrap,
.platform-dist-metric-select-wrap,
.xml-sync-filter-select-wrap,
.tm-live-metric-select,
.tm-insights-filter-select-wrap,
.valid-status-select-wrap {
  display: inline-flex;
  align-items: center;
}
.valid-status-buttons--legacy {
  display: none !important;
}
.valid-status-select {
  min-height: 36px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.4rem 2rem 0.4rem 0.75rem;
}

.orders-table-sort-btn {
  display: none !important;
}
.orders-sort-host {
  cursor: pointer;
  user-select: none;
}
.orders-sort-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.orders-filter-bar .valid-status-filters,
.orders-filter-bar .valid-status-filters + .d-flex,
.orders-filter-bar .orders-actions-more {
  align-items: center;
}
.orders-filter-bar .valid-status-btn,
.orders-filter-bar .btn-baklava-outline,
.orders-filter-bar .orders-actions-more > summary,
.orders-filter-bar .orders-status-collapse > summary {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.orders-filter-bar .orders-status-collapse,
.orders-filter-bar .orders-actions-more {
  display: inline-flex;
  align-items: center;
}
.orders-filter-bar .orders-status-collapse > summary {
  margin: 0;
  white-space: nowrap;
}
.orders-filter-bar .valid-status-count {
  line-height: 1;
}
@media (max-width: 767.98px) {
  .orders-filter-bar > .d-flex {
    align-items: stretch !important;
  }
  .orders-filter-bar .valid-status-filters,
  .orders-filter-bar .valid-status-filters + .d-flex {
    width: 100%;
  }
  .orders-filter-bar .valid-status-btn,
  .orders-filter-bar .orders-status-collapse,
  .orders-filter-bar .orders-status-collapse > summary,
  .orders-filter-bar .btn-baklava-outline,
  .orders-filter-bar .orders-actions-more,
  .orders-filter-bar .orders-actions-more > summary {
    flex: 1 1 auto;
  }
}

.tm-live-filterdrawer {
  margin: 0 0 0.75rem;
}
.tm-live-filterdrawer > summary {
  margin-left: 1rem;
}
.tm-live-filterdrawer .tm-live-filterbar {
  display: flex;
}

.tm-live-chartbox,
.tm-live-doughnut,
.tm-live-rank,
.tm-action-insights,
.tm-insights-summary {
  min-height: 260px;
}
.tm-live-doughnut__chart {
  min-height: 220px;
}
.tm-live-rank {
  contain: layout paint;
}
@media (max-width: 767.98px) {
  .tm-live-chartbox,
  .tm-live-doughnut,
  .tm-live-rank,
  .tm-action-insights,
  .tm-insights-summary {
    min-height: 220px;
  }
  .tm-live-main-grid__sidebar {
    min-height: 96px;
  }
  .tm-live-page .tm-live-pulseline {
    display: none !important;
  }
  .tm-live-filterdrawer .tm-live-filterbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

.tm-live-page .tm-live-orders-card {
  order: 30;
}
.tm-live-page .tm-live-main-grid {
  order: 40;
}

.xml-sync-tech-details {
  margin-bottom: 0;
}
.xml-sync-tech-details .xml-sync-stats-row {
  display: flex;
}
.xml-sync-row-more {
  width: 100%;
  text-align: left;
}
.xml-sync-row-more > summary {
  width: 100%;
  justify-content: center;
}
.xml-sync-row-more .tm-actions-overflow__body {
  left: auto;
  right: 0;
}
.xml-sync-filter-select {
  max-width: 12rem;
}

#overviewTab .tm-overview-extra-kpi {
  display: inline-flex;
  width: auto;
  margin-top: 0.75rem;
}
#overviewTab .tm-overview-extra-kpi > summary {
  min-height: 36px;
  padding: 0.45rem 0.8rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: none;
}
#overviewTab .tm-overview-extra-kpi > summary:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
#overviewTab .tm-overview-extra-kpi__body {
  min-width: min(22rem, calc(100vw - 2rem));
}
@media (max-width: 767.98px) {
  #overviewTab .tm-overview-extra-kpi {
    display: flex;
    width: 100%;
  }
  #overviewTab .tm-overview-extra-kpi > summary {
    width: 100%;
  }
}

/* Controlled user-shell compacting: keep profile/notifications intact; reduce
   secondary icon strip on dense merchant work pages. */
body:has(.tmv2-dashboard) .tmv2-header-status,
body:has(.tmv2-overview-tab-inner) .tmv2-header-status,
body:has(.tm-live-page) .tmv2-header-status,
body:has(.xml-sync-page) .tmv2-header-status {
  display: none !important;
}
body:has(.tmv2-overview-tab-inner) #tmLivePromoBanner {
  display: none !important;
}
@media (max-width: 767.98px) {
  body:has(.tmv2-dashboard) #languageMenuToggle,
  body:has(.tmv2-dashboard) #darkModeToggle,
  body:has(.tmv2-dashboard) #whatsNewToggle,
  body:has(.tmv2-overview-tab-inner) #languageMenuToggle,
  body:has(.tmv2-overview-tab-inner) #darkModeToggle,
  body:has(.tmv2-overview-tab-inner) #whatsNewToggle,
  body:has(.tm-live-page) #languageMenuToggle,
  body:has(.tm-live-page) #darkModeToggle,
  body:has(.tm-live-page) #whatsNewToggle,
  body:has(.xml-sync-page) #languageMenuToggle,
  body:has(.xml-sync-page) #darkModeToggle,
  body:has(.xml-sync-page) #whatsNewToggle {
    display: none !important;
  }
}