/* ---- Canonical visual language for every Bootstrap modal ---- */
:root {
  --tm-modal-radius: 14px;
  --tm-modal-radius-sm: 10px;
  --tm-modal-border: var(--tmv2-line-2, #e7ebf1);
  --tm-modal-surface: var(--tmv2-surface, #ffffff);
  --tm-modal-surface-muted: var(--tmv2-surface-2, #f8fafc);
  --tm-modal-ink: var(--tmv2-ink, #0f172a);
  --tm-modal-primary: var(--tmv2-primary, var(--color-primary, #0175e4));
  --tm-modal-primary-soft: color-mix(in srgb, var(--tm-modal-primary) 10%, #ffffff);
  --tm-modal-shadow: 0 22px 58px rgba(15, 23, 42, 0.22);
  --tm-modal-backdrop-bg: rgba(15, 23, 42, 0.48);
}

body > .modal {
  --bs-modal-bg: var(--tm-modal-surface);
  --bs-modal-border-color: var(--tm-modal-border);
  --bs-modal-border-radius: var(--tm-modal-radius);
  --bs-modal-header-border-color: var(--tm-modal-border);
  --bs-modal-footer-border-color: var(--tm-modal-border);
  --bs-modal-padding: 1rem;
}

body > .modal.fade {
  transition: opacity 0.2s ease-out !important;
}

body > .modal.fade .modal-dialog {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.985);
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease-out !important;
}

body > .modal.show .modal-dialog {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

body > .modal.show > .modal-backdrop,
body > .modal-backdrop.show {
  background-color: var(--tm-modal-backdrop-bg) !important;
  opacity: 1 !important;
}

body > .modal .modal-dialog {
  width: min(calc(100vw - 24px), var(--bs-modal-width, 500px));
}

body > .modal .modal-content {
  overflow: hidden !important;
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
  border: 1px solid var(--tm-modal-border) !important;
  border-radius: var(--tm-modal-radius) !important;
  box-shadow: var(--tm-modal-shadow) !important;
}

body > .modal .modal-header,
body > .modal .modal-header.bg-primary,
body > .modal .modal-header.bg-success,
body > .modal .modal-header.bg-danger,
body > .modal .modal-header.bg-warning,
body > .modal .modal-header.bg-info,
body > .modal .modal-header.bg-dark,
body > .modal .modal-header.bg-white {
  min-height: 56px;
  gap: 0.75rem;
  padding: 0.85rem 1rem !important;
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
  border-bottom: 1px solid var(--tm-modal-border) !important;
}

body > .modal .modal-title,
body > .modal .modal-header h1,
body > .modal .modal-header h2,
body > .modal .modal-header h3,
body > .modal .modal-header h4,
body > .modal .modal-header h5,
body > .modal .modal-header h6 {
  color: var(--tm-modal-ink) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

body > .modal .modal-header .bg-white,
body > .modal .modal-header .bg-opacity-20 {
  background: var(--tm-modal-primary-soft) !important;
  border: 1px solid color-mix(in srgb, var(--tm-modal-primary) 18%, transparent) !important;
  border-radius: var(--tm-modal-radius-sm) !important;
}

body > .modal .modal-header i.text-white,
body > .modal .modal-header .text-white,
body > .modal .modal-header .bg-white,
body > .modal .modal-header .bg-opacity-20,
body > .modal .modal-header [class*="rounded"] > i {
  color: var(--tm-modal-primary) !important;
}

body > .modal .btn-close,
body > .modal .btn-close-white {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  background-color: transparent !important;
  filter: none !important;
  opacity: 0.68 !important;
  transition:
    background-color 0.15s ease,
    opacity 0.15s ease,
    transform 0.15s ease !important;
}

body > .modal .btn-close:hover,
body > .modal .btn-close:focus {
  background-color: var(--tm-modal-surface-muted) !important;
  opacity: 1 !important;
  transform: scale(1.03);
  box-shadow: none !important;
}

body > .modal .modal-body {
  padding: 1rem !important;
  color: var(--tm-modal-ink) !important;
  background: var(--tm-modal-surface) !important;
}

body > .modal .modal-footer,
body > .modal .modal-footer.bg-light,
body > .modal .modal-footer.bg-white {
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  background: var(--tm-modal-surface-muted) !important;
  border-top: 1px solid var(--tm-modal-border) !important;
}

body > .modal .modal-footer .btn {
  border-radius: 9px !important;
  font-weight: 650 !important;
}

body > .modal .modal-body .bg-light,
body > .modal .modal-body .bg-white.border,
body > .modal .modal-body .rounded-3,
body > .modal .modal-body .rounded-2 {
  border-radius: var(--tm-modal-radius-sm) !important;
}

body > .modal .modal-body .bg-light {
  background: var(--tm-modal-surface-muted) !important;
}

body > .modal .modal-dialog-scrollable .modal-body {
  scrollbar-gutter: stable;
}

@media (max-width: 575.98px) {
  body > .modal .modal-dialog {
    width: calc(100vw - 16px);
    margin: 0.5rem auto !important;
  }

  body > .modal .modal-content {
    border-radius: 12px !important;
  }

  body > .modal .modal-header,
  body > .modal .modal-body,
  body > .modal .modal-footer {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  body > .modal .modal-footer {
    align-items: stretch !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body > .modal.fade,
  body > .modal.fade .modal-dialog,
  body > .modal .btn-close {
    transition: none !important;
  }
}

html.dark-mode body > .modal {
  --tm-modal-border: var(--tmv2-line, #1e2533);
  --tm-modal-surface: var(--tmv2-surface, #10151f);
  --tm-modal-surface-muted: var(--tmv2-surface-2, #0e131c);
  --tm-modal-ink: var(--tmv2-ink, #e6ecf5);
  --tm-modal-primary-soft: color-mix(in srgb, var(--tm-modal-primary) 16%, #10151f);
  --tm-modal-shadow: 0 24px 62px rgba(0, 0, 0, 0.42);
  --tm-modal-backdrop-bg: rgba(2, 6, 23, 0.66);
}

/* Specificity guard: page-level #modal-id overrides must still inherit the global modal language. */
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-content {
  overflow: hidden !important;
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
  border: 1px solid var(--tm-modal-border) !important;
  border-radius: var(--tm-modal-radius) !important;
  box-shadow: var(--tm-modal-shadow) !important;
}

body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-primary,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-success,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-danger,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-warning,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-info,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-dark,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-white {
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
  border-bottom: 1px solid var(--tm-modal-border) !important;
}

body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-body {
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
}

body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-footer,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-footer.bg-light,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-footer.bg-white {
  background: var(--tm-modal-surface-muted) !important;
  border-top: 1px solid var(--tm-modal-border) !important;
}

/* Nested Bootstrap modals are common in legacy pages; they must share the same global design. */
.modal:is(#tmModalSpecificityBoost, .modal) {
  --bs-modal-bg: var(--tm-modal-surface);
  --bs-modal-border-color: var(--tm-modal-border);
  --bs-modal-border-radius: var(--tm-modal-radius);
  --bs-modal-header-border-color: var(--tm-modal-border);
  --bs-modal-footer-border-color: var(--tm-modal-border);
  --bs-modal-padding: 1rem;
}

.modal:is(#tmModalSpecificityBoost, .modal).fade {
  transition: opacity 0.2s ease-out !important;
}

.modal:is(#tmModalSpecificityBoost, .modal).fade .modal-dialog {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.985);
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease-out !important;
}

.modal:is(#tmModalSpecificityBoost, .modal).show .modal-dialog {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-dialog {
  width: min(calc(100vw - 24px), var(--bs-modal-width, 500px));
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-content {
  overflow: hidden !important;
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
  border: 1px solid var(--tm-modal-border) !important;
  border-radius: var(--tm-modal-radius) !important;
  box-shadow: var(--tm-modal-shadow) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-header,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-primary,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-success,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-danger,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-warning,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-info,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-dark,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-white {
  min-height: 56px;
  gap: 0.75rem;
  padding: 0.85rem 1rem !important;
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
  border-bottom: 1px solid var(--tm-modal-border) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-title,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header h1,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header h2,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header h3,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header h4,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header h5,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header h6 {
  color: var(--tm-modal-ink) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-header .bg-white,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header .bg-opacity-20 {
  background: var(--tm-modal-primary-soft) !important;
  border: 1px solid color-mix(in srgb, var(--tm-modal-primary) 18%, transparent) !important;
  border-radius: var(--tm-modal-radius-sm) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-header i.text-white,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header .text-white,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header .bg-white,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header .bg-opacity-20,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header [class*="rounded"] > i {
  color: var(--tm-modal-primary) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .btn-close,
.modal:is(#tmModalSpecificityBoost, .modal) .btn-close-white {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  background-color: transparent !important;
  filter: none !important;
  opacity: 0.68 !important;
  transition:
    background-color 0.15s ease,
    opacity 0.15s ease,
    transform 0.15s ease !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .btn-close:hover,
.modal:is(#tmModalSpecificityBoost, .modal) .btn-close:focus {
  background-color: var(--tm-modal-surface-muted) !important;
  opacity: 1 !important;
  transform: scale(1.03);
  box-shadow: none !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-body {
  padding: 1rem !important;
  color: var(--tm-modal-ink) !important;
  background: var(--tm-modal-surface) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-footer,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-footer.bg-light,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-footer.bg-white {
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  background: var(--tm-modal-surface-muted) !important;
  border-top: 1px solid var(--tm-modal-border) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-footer .btn {
  border-radius: 9px !important;
  font-weight: 650 !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-body .bg-light,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-body .bg-white.border,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-body .rounded-3,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-body .rounded-2 {
  border-radius: var(--tm-modal-radius-sm) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-body .bg-light {
  background: var(--tm-modal-surface-muted) !important;
}

html.dark-mode .modal:is(#tmModalSpecificityBoost, .modal) {
  --tm-modal-border: var(--tmv2-line, #1e2533);
  --tm-modal-surface: var(--tmv2-surface, #10151f);
  --tm-modal-surface-muted: var(--tmv2-surface-2, #0e131c);
  --tm-modal-ink: var(--tmv2-ink, #e6ecf5);
  --tm-modal-primary-soft: color-mix(in srgb, var(--tm-modal-primary) 16%, #10151f);
  --tm-modal-shadow: 0 24px 62px rgba(0, 0, 0, 0.42);
  --tm-modal-backdrop-bg: rgba(2, 6, 23, 0.66);
}

@media (max-width: 575.98px) {
  .modal:is(#tmModalSpecificityBoost, .modal) .modal-dialog {
    width: calc(100vw - 16px);
    margin: 0.5rem auto !important;
  }

  .modal:is(#tmModalSpecificityBoost, .modal) .modal-content {
    border-radius: 12px !important;
  }

  .modal:is(#tmModalSpecificityBoost, .modal) .modal-header,
  .modal:is(#tmModalSpecificityBoost, .modal) .modal-body,
  .modal:is(#tmModalSpecificityBoost, .modal) .modal-footer {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }
}

/* Date range picker popovers use their own positioning, but share modal motion. */
.date-range-picker-modal {
  --tm-modal-border: var(--tmv2-line-2, #e7ebf1);
  --tm-modal-surface: var(--tmv2-surface, #ffffff);
  --tm-modal-surface-muted: var(--tmv2-surface-2, #f8fafc);
  --tm-modal-ink: var(--tmv2-ink, #0f172a);
  display: block !important;
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.16s ease-out,
    visibility 0.16s ease-out !important;
}

.date-range-picker-modal.d-none,
.date-range-picker-modal[style*="display: none"] {
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, 8px, 0) scale(0.985) !important;
}

.date-range-picker-modal .date-range-picker-container {
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
  border: 1px solid var(--tm-modal-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.18) !important;
  overflow: hidden !important;
}

.date-range-picker-modal .date-range-picker-header,
.date-range-picker-modal .date-range-picker-footer {
  background: var(--tm-modal-surface-muted) !important;
  border-color: var(--tm-modal-border) !important;
}

@media (max-width: 575.98px) {
  .date-range-picker-modal,
  body .date-range-picker-modal:is(#tmDatePickerSpecificityBoost, .date-range-picker-modal) {
    left: 8px !important;
    right: 8px !important;
    min-width: 0 !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }

  .date-range-picker-modal .date-range-picker-container,
  body .date-range-picker-modal:is(#tmDatePickerSpecificityBoost, .date-range-picker-modal) .date-range-picker-container {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .date-range-picker-modal .date-range-picker-footer,
  body .date-range-picker-modal:is(#tmDatePickerSpecificityBoost, .date-range-picker-modal) .date-range-picker-footer {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .date-range-picker-modal .date-range-picker-footer .btn,
  .date-range-picker-modal .date-range-picker-footer button,
  body .date-range-picker-modal:is(#tmDatePickerSpecificityBoost, .date-range-picker-modal) .date-range-picker-footer .btn,
  body .date-range-picker-modal:is(#tmDatePickerSpecificityBoost, .date-range-picker-modal) .date-range-picker-footer button {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }
}

html.dark-mode .date-range-picker-modal {
  --tm-modal-border: var(--tmv2-line, #1e2533);
  --tm-modal-surface: var(--tmv2-surface, #10151f);
  --tm-modal-surface-muted: var(--tmv2-surface-2, #0e131c);
  --tm-modal-ink: var(--tmv2-ink, #e6ecf5);
}

/**
 * Trendmetrik — Bootstrap 5 Modal Merkezi Standardı
 *
 * Z-index kaynağı: `static/css/tm-z-layers.css` (tek kaynak, CSS değişkenleri).
 * JS tarafı: `static/js/tm-modal-manager.js` (backdrop reparenting + body lock).
 *
 * KÖKEN SORUN ve ÇÖZÜM
 *   Bootstrap `.modal-backdrop`'u `<body>`'ye ekler. Eğer modal bir stacking
 *   context'li container'da (örn. `main#mainContent.tmv2-page` position:relative
 *   +z-index:1, `.page-shell` isolation:isolate, `.tmv2-analysis-root` vb.)
 *   render edildiyse, modal'ın efektif z-index'i ata'ya göre 1'e sıkışır; body
 *   root'undaki backdrop (1050) ise üstte kalır → dialog tıklanamaz / perdeli.
 *
 *   ÇÖZÜM: tm-modal-manager.js backdrop'u MODAL elementinin İÇİNE, dialog'un
 *   ÖNCESİNE taşır. Aynı stacking context + DOM sırası (backdrop → dialog)
 *   sayesinde dialog DAİMA üstte çizilir. Sayfa-özel z-index override'ları
 *   (9999/999999 vb.) modalı kırsa bile bu mekanizma bağımsız çalışır.
 *
 * PROJE KURALI
 *   Yeni modal stillerinde:
 *     - `.modal` z-index'ini DEĞİŞTİRMEYİN (tm-z-layers.css ele alır)
 *     - `.modal-backdrop` z-index'ini DEĞİŞTİRMEYİN
 *     - Custom overlay/perde kullanıyorsanız class adı `.modal-backdrop`
 *       OLMAMALI; kendi class'ınızı verin + `body.modal-open` altında gizleyin
 *       (tm-z-layers.css'deki guard rule örneğine bakın).
 *     - `pointer-events` yalnızca `.modal-dialog` / `.modal-content` üzerinde
 *       `auto` olmalı; `.modal.show` Bootstrap gereği `pointer-events: none`.
 */

/* ---- Pointer-events (Bootstrap 5 default + defensive overrides) ---- */
.modal.show,
body > .modal.show {
  pointer-events: none !important;
}

.modal.show .modal-dialog,
.modal.show .modal-content,
.modal.show .modal-header,
.modal.show .modal-body,
.modal.show .modal-footer,
body > .modal.show .modal-dialog {
  pointer-events: auto !important;
}

/* Backdrop — click-outside dismiss için tıklanabilir; modal içine taşındığında
   da korunur (Bootstrap mousedown listener DOM pozisyonundan bağımsız). */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
.modal-backdrop.fade.show {
  pointer-events: auto !important;
}

/* ---- Z-index (hard-pin: sayfa override'larına karşı) ---- */
body > .modal,
body > .modal.fade,
body > .modal.show,
body > .modal.fade.show {
  z-index: var(--tm-z-modal, 1055) !important;
}

body > .modal-backdrop,
body > .modal-backdrop.fade,
body > .modal-backdrop.show,
body > .modal-backdrop.fade.show {
  z-index: var(--tm-z-modal-backdrop, 1050) !important;
}

/* ---- Backdrop modal'ın İÇİNE taşındığında (tm-modal-manager.js) ---- */
/* Modal kendi stacking context'ini oluşturur (z:1055). İçindeki backdrop
   absolute + inset:0 ile modal viewport'unu kaplar, z:0; dialog relative z:1 —
   dialog DAİMA backdrop'un üstüne çizilir. */
.modal.show > .modal-backdrop,
body > .modal.show > .modal-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}

.modal.show > .modal-dialog,
body > .modal.show > .modal-dialog {
  position: relative;
  z-index: 1;
}

/* ---- Modal açıkken yan UI elementleri ---- */
body.modal-open #tmFbkOpen,
body.modal-open .tm-feedback-partial-fab {
  pointer-events: none;
}

body.modal-open #tmFbkRoot.tm-fbk-root-shell:not(.tm-fbk--open) {
  pointer-events: none !important;
}

/* ---- Sayfa-özel legacy override'ları ETKİSİZLEŞTİR ---- */
/* Bazı sayfalar hâlâ scope'lu override verebilir (`.order-profit-page .modal`,
   `.product-delete-page .modal-backdrop` vb.). `body >` öncülünü kullandığımız
   kurallar, sayfa scope'undan bağımsız olduğu için çakışma durumunda CSS cascade
   sırasında YİNE kazanır (specificity: `body.modal-open .x` = 0,1,1,1 vs sayfa
   `.page .modal` = 0,0,2,0). Garantiyi `!important` ile sağlıyoruz. */