/* ═══════════════════════════════════════════════════════════════════
   MILAGRON UI - EKLENTİ UYUMU
   ───────────────────────────────────────────────────────────────────
   DataTables, Handsontable, Quill, TomSelect ve SweetAlert2 kendi
   CSS'leriyle geliyor. Bu dosya onların görünümünü panel paletine
   bağlar; eklenti dosyalarının kendisine dokunulmaz (güncellenebilir
   kalsınlar diye). Karanlık tema da buradan çalışır.

   Yükleme sırası önemli: bu dosya eklenti CSS'lerinden SONRA gelmeli.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   DATATABLES
   ═══════════════════════════════════════════════════════════════════ */
.dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
    color: var(--mg-text-secondary);
    font-size: var(--mg-text-base);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: var(--mg-text-muted) !important;
    font-size: var(--mg-text-base);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    display: inline-block;
    width: auto;
    padding: .6rem 1.1rem;
    font-size: var(--mg-text-base);
    background: var(--mg-surface-2);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-md);
    color: var(--mg-text);
}

.dataTables_wrapper .dataTables_length select {
    padding-right: 2.8rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--mg-accent);
    box-shadow: var(--mg-ring);
}

/* Sayfalama düğmeleri.
   Ölçüler components.css'teki .pagination ile birebir aynı: panelde üç
   ayrı sayfalama çizen yer var (DataTables, sunucu tarafı mg-paging,
   sipariş tablosu) ve üçü yan yana geldiğinde aynı görünmeli. */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    height: 3.4rem;
    margin-left: .5rem;
    padding: 0 1rem !important;
    border: 1px solid var(--mg-border) !important;
    border-radius: var(--mg-radius-md) !important;
    background: var(--mg-surface) !important;
    color: var(--mg-text-secondary) !important;
    font-size: var(--mg-text-base);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--mg-transition), border-color var(--mg-transition), color var(--mg-transition);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--mg-surface-hover) !important;
    border-color: var(--mg-border-strong) !important;
    color: var(--mg-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--mg-primary) !important;
    border-color: var(--mg-primary) !important;
    color: var(--mg-primary-fg) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    border-color: var(--mg-border-subtle) !important;
    color: var(--mg-text-subtle) !important;
    cursor: default;
}

/* ── Görünüm varyantlarını etkisizleştirme ───────────────────────────
   DataTables kendi görünüm sınıflarını taşıyor: "display" tek başına
   stripe + hover + row-border + order-column demek. Panelde sayfalar
   bunları farklı farklı yazmış (display, display stripe, cell-border,
   sınıfsız), sonuçta aynı panelde dört ayrı tablo görünümü oluşmuştu.

   Burada hepsi tek görünüme indirilir: satır ayrımı ince çizgi, zebra
   yok, hücre kenarlığı yok. Yani sayfada hangi sınıf kalmış olursa olsun
   tablo components.css'teki standart tabloyla aynı çıkar. Zebra gerçekten
   isteniyorsa panelin kendi sınıfı var: table.striped.

   Sınıfları sayfalardan tek tek silmek yerine burada etkisizleştirmenin
   sebebi: silinen sınıf bir sonraki kopyala-yapıştırda geri geliyor,
   buradaki kural ise kalıcı. */
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
table.dataTable.stripe tbody tr.odd>.sorting_1,
table.dataTable.display tbody tr.odd>.sorting_1,
table.dataTable.order-column tbody tr>.sorting_1,
table.dataTable.order-column tbody tr>.sorting_2,
table.dataTable.order-column tbody tr>.sorting_3,
table.dataTable.display tbody tr>.sorting_1,
table.dataTable.display tbody tr>.sorting_2,
table.dataTable.display tbody tr>.sorting_3 {
    background-color: transparent !important;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.stripe tbody tr.odd:hover,
table.dataTable.display tbody tr.odd:hover {
    background-color: var(--mg-surface-2) !important;
}

table.dataTable.cell-border tbody th,
table.dataTable.cell-border tbody td {
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
}

table.dataTable.row-border tbody th,
table.dataTable.row-border tbody td,
table.dataTable.display tbody th,
table.dataTable.display tbody td {
    border-top: 0 !important;
}

/* DataTables tabloyu "separate" yapıyor; standart tablomuz "collapse".
   Ayrımı bırakınca hücre çizgileri iki kat görünüyor. */
table.dataTable {
    border-collapse: collapse !important;
    margin: 0 !important;
}

/* Sıralama okları */
table.dataTable thead th {
    background: var(--mg-surface-2);
    border-bottom: 1px solid var(--mg-border) !important;
    color: var(--mg-text-muted);
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
}

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    color: var(--mg-text);
}

table.dataTable tbody tr {
    background-color: transparent !important;
}

table.dataTable tbody tr:hover {
    background-color: var(--mg-surface-2) !important;
}

table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected td {
    background-color: var(--mg-accent-50) !important;
    color: var(--mg-text) !important;
}

table.dataTable.no-footer {
    border-bottom: 1px solid var(--mg-border) !important;
}

.dataTables_wrapper .dataTables_processing {
    background: var(--mg-surface) !important;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-lg);
    box-shadow: var(--mg-shadow-lg);
    color: var(--mg-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TOM SELECT
   ═══════════════════════════════════════════════════════════════════ */
.ts-wrapper {
    font-size: var(--mg-text-md);
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-control {
    padding: .7rem 1.2rem;
    background: var(--mg-surface-2) !important;
    border: 1px solid var(--mg-border) !important;
    border-radius: var(--mg-radius-md) !important;
    box-shadow: none !important;
    color: var(--mg-text);
    min-height: 3.9rem;
}

.ts-wrapper.focus .ts-control,
.ts-control:focus-within {
    border-color: var(--mg-accent) !important;
    box-shadow: var(--mg-ring) !important;
    background: var(--mg-surface) !important;
}

.ts-wrapper.disabled .ts-control {
    background: var(--mg-surface-3) !important;
    opacity: .7;
}

/* Devre dışı kutuda yazma alanı gizlenir.
   TomSelect seçili değerler varken bile placeholder taşıyan bir <input>
   çiziyor. O input tam genişlikte bir esnek öğe olduğu için değerlerin
   ALTINA sarıyor ve kutunun içinde "Cinsiyet seçiniz" gibi ikinci bir
   satır beliriyor. Kutu devre dışıyken orada seçim yapılamadığı için bu
   satır kullanıcıya yapamayacağı bir işi öneriyor.
   Alanın ne olduğunu zaten üstündeki <label> söylüyor.
   Kutu tekrar etkinleştirilirse (.disabled kalkar) input geri gelir. */
.ts-wrapper.disabled .ts-control > input {
    /* tom-select.css bu inputa display: inline-block !important veriyor,
       normal bildirim onu ezemiyor. */
    display: none !important;
}

.ts-control>input {
    color: var(--mg-text);
}

.ts-control::placeholder,
.ts-control>input::placeholder {
    color: var(--mg-text-subtle);
}

/* Seçili öğe etiketleri */
.ts-wrapper.multi .ts-control>div {
    background: var(--mg-accent-50);
    color: var(--mg-accent-700);
    border: 1px solid var(--mg-accent-200);
    border-radius: var(--mg-radius-full);
    padding: 1px 9px;
    font-size: var(--mg-text-sm);
    font-weight: 500;
}

.ts-wrapper.multi .ts-control>div.active {
    background: var(--mg-accent-100);
    color: var(--mg-accent-700);
}

.ts-dropdown {
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-lg);
    box-shadow: var(--mg-shadow-lg);
    color: var(--mg-text);
    margin-top: 4px;
    overflow: hidden;
}

.ts-dropdown .option {
    padding: .8rem 1.2rem;
    font-size: var(--mg-text-base);
    color: var(--mg-text-secondary);
}

.ts-dropdown .active {
    background: var(--mg-surface-3);
    color: var(--mg-text);
}

.ts-dropdown .optgroup-header {
    background: transparent;
    color: var(--mg-text-subtle);
    font-size: var(--mg-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ts-dropdown .no-results {
    color: var(--mg-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   SWEETALERT2
   ═══════════════════════════════════════════════════════════════════ */
div:where(.swal2-container) {
    z-index: 999999999999 !important;
}

.swal2-popup {
    background: var(--mg-surface) !important;
    color: var(--mg-text) !important;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-2xl) !important;
    box-shadow: var(--mg-shadow-xl) !important;
    font-family: var(--mg-font) !important;
    font-size: 1.4rem !important;
}

.swal2-title {
    color: var(--mg-text) !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
    letter-spacing: -.02em;
}

.swal2-html-container,
.swal2-content {
    color: var(--mg-text-secondary) !important;
    font-size: 1.4rem !important;
}

.swal2-actions {
    gap: .8rem;
}

.swal2-styled {
    border-radius: var(--mg-radius-md) !important;
    font-weight: 500 !important;
    font-size: 1.4rem !important;
    padding: .9rem 1.8rem !important;
    box-shadow: none !important;
    transition: background var(--mg-transition), box-shadow var(--mg-transition);
}

.swal2-styled:focus-visible {
    box-shadow: var(--mg-ring) !important;
}

.swal2-styled.swal2-confirm {
    background: var(--mg-primary) !important;
    color: var(--mg-primary-fg) !important;
}

.swal2-styled.swal2-cancel {
    background: var(--mg-surface) !important;
    color: var(--mg-text-secondary) !important;
    border: 1px solid var(--mg-border-strong) !important;
}

.swal2-styled.swal2-deny {
    background: var(--mg-danger-solid) !important;
    color: #fff !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
    background: var(--mg-surface-2) !important;
    border: 1px solid var(--mg-border) !important;
    border-radius: var(--mg-radius-md) !important;
    color: var(--mg-text) !important;
    font-size: 1.4rem !important;
    box-shadow: none !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: var(--mg-accent) !important;
    box-shadow: var(--mg-ring) !important;
}

.swal2-validation-message {
    background: var(--mg-danger-bg) !important;
    color: var(--mg-danger-text) !important;
    border-radius: var(--mg-radius-md);
}

.swal2-footer {
    border-top-color: var(--mg-border) !important;
    color: var(--mg-text-muted) !important;
}

.swal2-close {
    color: var(--mg-text-subtle) !important;
}

.swal2-close:hover {
    color: var(--mg-text) !important;
}

:root[data-theme="dark"] .swal2-container.swal2-backdrop-show {
    background: rgba(0, 0, 0, .68) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   QUILL (zengin metin editörü)
   ═══════════════════════════════════════════════════════════════════ */
.ql-toolbar.ql-snow {
    background: var(--mg-surface-2);
    border: 1px solid var(--mg-border) !important;
    border-bottom: 0 !important;
    border-radius: var(--mg-radius-md) var(--mg-radius-md) 0 0;
    font-family: var(--mg-font) !important;
}

.ql-container.ql-snow {
    background: var(--mg-surface);
    border: 1px solid var(--mg-border) !important;
    border-radius: 0 0 var(--mg-radius-md) var(--mg-radius-md);
    font-family: var(--mg-font) !important;
    font-size: var(--mg-text-md);
    color: var(--mg-text);
}

.ql-editor {
    min-height: 16rem;
    color: var(--mg-text);
    line-height: 1.6;
}

.ql-editor.ql-blank::before {
    color: var(--mg-text-subtle);
    font-style: normal;
}

.ql-snow .ql-stroke {
    stroke: var(--mg-text-muted);
}

.ql-snow .ql-fill {
    fill: var(--mg-text-muted);
}

.ql-snow .ql-picker {
    color: var(--mg-text-secondary);
}

.ql-snow .ql-picker-options {
    background: var(--mg-surface);
    border: 1px solid var(--mg-border) !important;
    border-radius: var(--mg-radius-md);
    box-shadow: var(--mg-shadow-lg);
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--mg-accent) !important;
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--mg-accent) !important;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active {
    background: var(--mg-surface-3);
    border-radius: var(--mg-radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   HANDSONTABLE (toplu düzenleme ızgarası)
   Yalnız renk ve kenarlık hizalaması yapılır; hücre ölçüleri
   eklentinin kendi hesabına bırakılır (bozulmasın).
   ═══════════════════════════════════════════════════════════════════ */
.handsontable {
    font-family: var(--mg-font) !important;
    font-size: var(--mg-text-base) !important;
    color: var(--mg-text);
}

.handsontable td {
    background: var(--mg-surface);
    color: var(--mg-text);
    border-color: var(--mg-border) !important;
}

.handsontable th {
    background: var(--mg-surface-2) !important;
    color: var(--mg-text-muted) !important;
    border-color: var(--mg-border) !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.handsontable .htCore tbody tr:hover td {
    background: var(--mg-surface-2);
}

.handsontable td.area,
.handsontable td.current {
    background: var(--mg-accent-50) !important;
}

.handsontable .wtBorder.current,
.handsontable .wtBorder.area {
    background: var(--mg-accent) !important;
}

.handsontable .htInvalid {
    background: var(--mg-danger-bg) !important;
    color: var(--mg-danger-text) !important;
}

.handsontableInput {
    background: var(--mg-surface) !important;
    color: var(--mg-text) !important;
    box-shadow: var(--mg-ring) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   KOYU TEMADA GÖRSEL DÜZELTMELERİ
   Beyaz zemin varsayan üçüncü parti parçalar için.
   ═══════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] .handsontable .wtHolder {
    background: var(--mg-surface);
}

:root[data-theme="dark"] .ql-snow .ql-picker-label {
    color: var(--mg-text-secondary);
}