/* ============================================================================
   DevExtreme DataGrid — Global Grid Overrides
   Toolbar item uyumu + Column Chooser düzeltmeleri
   ============================================================================ */

/* ==========================================================================
   TOOLBAR — Tüm item'lar aynı yükseklik ve spacing
   ========================================================================== */

/* Toolbar item'lar arası tutarlı boşluk */
.dx-datagrid-header-panel .dx-toolbar-after {
    display: flex;
    align-items: center;
    gap: 2px !important;
}

/* DevExtreme default padding sıfırla — gap yeterli */
.dx-datagrid-header-panel .dx-toolbar-after .dx-toolbar-item {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}

/* Tüm toolbar butonları: sabit yükseklik 32px, düz icon (arka plansız) */
.dx-datagrid-header-panel .dx-toolbar .dx-button {
    height: 32px !important;
    min-height: 32px !important;
    line-height: 32px;
    background: transparent !important;
    color: var(--logi-theme-text-secondary) !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.dx-datagrid-header-panel .dx-toolbar .dx-button:hover {
    background: var(--logi-theme-bg-hover) !important;
    color: var(--logi-theme-text-primary) !important;
}

.dx-datagrid-header-panel .dx-toolbar .dx-button.dx-state-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.dx-datagrid-header-panel .dx-toolbar .dx-button .dx-button-content {
    padding: 0 10px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
}

/* Icon-only butonlar: kompakt padding, icon görünür */
.dx-datagrid-header-panel .dx-toolbar .dx-button:not(.dx-button-has-text) .dx-button-content {
    padding: 0 8px !important;
    justify-content: center;
}

/* Export dropdown — action kısmı (icon) kompakt */
.dx-datagrid-export-button .dx-dropdownbutton-action .dx-button-content {
    padding: 0 8px !important;
}

/* Export dropdown — toggle (arrow) kısmı kompakt */
.dx-datagrid-export-button .dx-dropdownbutton-toggle .dx-button-content {
    padding: 0 6px !important;
}

/* Icon boyutu tutarlı */
.dx-datagrid-header-panel .dx-toolbar .dx-button .dx-icon {
    font-size: 18px !important;
    width: 18px;
    height: 18px;
    line-height: 18px;
}

/* Search panel: .new-search-input standartı */
.dx-datagrid-header-panel .dx-datagrid-search-panel {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin-left: 0 !important;
    background: var(--logi-theme-bg-secondary) !important;
    border: 1px solid var(--logi-theme-border) !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dx-datagrid-header-panel .dx-datagrid-search-panel.dx-state-focused {
    border-color: #797bf2 !important;
    box-shadow: 0 0 0 3px rgba(121, 123, 242, 0.2) !important;
}

.dx-datagrid-header-panel .dx-datagrid-search-panel:hover:not(.dx-state-focused) {
    border-color: var(--logi-theme-border-light) !important;
}

.dx-datagrid-header-panel .dx-datagrid-search-panel .dx-texteditor-container {
    height: 32px !important;
}

.dx-datagrid-header-panel .dx-datagrid-search-panel .dx-texteditor-input {
    height: 32px !important;
    font-size: 13px;
    color: var(--logi-theme-text-primary) !important;
}

.dx-datagrid-header-panel .dx-datagrid-search-panel .dx-placeholder::before {
    font-size: 13px;
    color: var(--logi-theme-text-muted) !important;
}

/* Group panel text yükseklik uyumu */
.dx-datagrid-header-panel .dx-datagrid-group-panel {
    display: flex;
    align-items: center;
    min-height: 32px;
}

/* ==========================================================================
   FILTER ROW — input yazı rengi + focus efekti
   ========================================================================== */

/* Filter row arka plan */
.dx-datagrid-filter-row td {
    background: var(--logi-theme-bg-card) !important;
}

/* Filter row input yazı rengi */
.dx-datagrid-filter-row .dx-texteditor-input {
    color: var(--logi-theme-text-primary) !important;
    background: transparent !important;
}

/* Filter row focus — sadece alt border, hafif */
.dx-datagrid-filter-row .dx-texteditor.dx-state-focused {
    border-color: transparent !important;
    box-shadow: none !important;
}

.dx-datagrid-filter-row .dx-texteditor.dx-state-focused .dx-texteditor-input {
    border-bottom: 2px solid #797bf2;
}

/* Filter row focus — hücre outline kaldır */
.dx-datagrid-filter-row td.dx-focused,
.dx-datagrid-filter-row td.dx-cell-focus-disabled {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--logi-theme-border) !important;
}

/* ==========================================================================
   EXPORT DROPDOWN POPUP — toolbar ile uyumlu
   ========================================================================== */

/* Dropdown container — body'ye ekleniyor, parent selector yok */
.dx-dropdownbutton-popup-wrapper .dx-overlay-content {
    background: var(--logi-theme-bg-card) !important;
    border: 1px solid var(--logi-theme-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden;
}

.dx-dropdownbutton-popup-wrapper .dx-popup-content {
    padding: 4px !important;
}

/* Dropdown list item'ları */
.dx-dropdownbutton-popup-wrapper .dx-list-item {
    border-radius: 6px !important;
    margin: 2px 0;
}

.dx-dropdownbutton-popup-wrapper .dx-list-item .dx-list-item-content {
    color: var(--logi-theme-text-primary) !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
}

.dx-dropdownbutton-popup-wrapper .dx-list-item:hover,
.dx-dropdownbutton-popup-wrapper .dx-list-item.dx-state-hover {
    background: rgba(59, 130, 246, 0.15) !important;
}

.dx-dropdownbutton-popup-wrapper .dx-list-item:hover .dx-list-item-content,
.dx-dropdownbutton-popup-wrapper .dx-list-item.dx-state-hover .dx-list-item-content {
    color: #3b82f6 !important;
}

.dx-dropdownbutton-popup-wrapper .dx-list-item.dx-state-active {
    background: rgba(59, 130, 246, 0.3) !important;
}

.dx-dropdownbutton-popup-wrapper .dx-list-item.dx-state-active .dx-list-item-content {
    color: #fff !important;
}

/* ==========================================================================
   COLUMN CHOOSER POPUP
   ========================================================================== */

/* Pozisyon: sağ üst, sabit, sürüklenemez */
.dx-datagrid-column-chooser > .dx-overlay-content {
    right: 0 !important;
    top: -64px !important;
    left: auto !important;
    transform: none !important;
}

/* Sürükleme ve resize kapat */
.dx-datagrid-column-chooser .dx-popup-draggable {
    cursor: default !important;
}
.dx-datagrid-column-chooser .dx-resizable-handle {
    display: none !important;
}

/* Checkbox ve sütun adı yan yana
   DOM: li.dx-treeview-node > div.dx-checkbox + div.dx-treeview-item */
.dx-datagrid-column-chooser .dx-treeview-node {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
}

.dx-datagrid-column-chooser .dx-treeview-node > .dx-checkbox {
    flex-shrink: 0;
    order: -1 !important;
}

.dx-datagrid-column-chooser .dx-treeview-node > .dx-treeview-item {
    flex: 1 1 auto;
    min-width: 0;
    order: 0 !important;
}

.dx-datagrid-column-chooser .dx-treeview-node > .dx-treeview-item .dx-treeview-item-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   COMPACT MODIFIER — .compact class'ı eklenen container'larda
   new-* bileşenlerini küçültür. Mevcut sayfalar etkilenmez.
   Kullanım: <div class="new-controls compact"> veya <div class="new-panel compact">
   ========================================================================== */

.compact .new-input,
.compact .new-search {
    padding: 7px 10px !important;
    font-size: 13px !important;
    min-width: auto !important;
    min-height: auto !important;
    height: auto !important;
}

.compact .new-select {
    padding: 7px 26px 7px 10px !important;
    font-size: 13px !important;
    height: auto !important;
    min-height: auto !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23797bf2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
}

/* Light tema — tüm new-select arrow garantisi (modül bağımsız) */
body:not(.is-dark) .new-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23797bf2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
}

.compact .new-btn {
    padding: 7px 15px !important;
    font-size: 12px !important;
}

.compact .new-label {
    font-size: 11px !important;
    margin-bottom: 2px !important;
}

/* Compact header */
/* ===== Compact Header — flex layout, subtitle altinda ===== */
.compact .new-header {
    padding: 14px 18px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 10px !important;
    overflow: visible !important;
}

.compact .new-header-icon {
    position: static !important;
    font-size: 1.2rem !important;
    opacity: 1 !important;
    flex-shrink: 0;
}

.compact .new-header h1 {
    font-size: 1.2rem !important;
    margin: 0 !important;
}

/* Subtitle — tam satir genisligi, basligin altina dusmeli */
.compact .new-header-subtitle {
    font-size: 11px !important;
    margin: 0 !important;
    width: 100% !important;
    order: 99 !important;
    padding-left: 30px !important;
}

/* Header actions — saga yaslanir, wrap'ten etkilenmez */
.new-header-actions {
    margin-left: auto !important;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    order: 2 !important;
}

/* new-header-text wrapper varsa — daha temiz layout */
.new-header-text {
    flex: 1;
    min-width: 0;
}

.new-header-text h1 {
    font-size: 1.2rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.new-header-text .new-header-subtitle {
    font-size: 11px !important;
    margin: 2px 0 0 0 !important;
    width: auto !important;
    order: 0 !important;
    padding-left: 0 !important;
}

/* Header aksiyonlar — saga yaslanir */
.new-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.compact .new-controls {
    gap: 8px !important;
    margin-bottom: 0 !important;
    flex-wrap: nowrap !important;
}

.compact .new-filter-grid {
    gap: 10px !important;
}

.compact .new-panel {
    padding: 10px 12px !important;
    margin-bottom: 0 !important;
}

/* Compact content card */
.compact .new-content-card {
    padding: 10px !important;
    border-radius: 8px !important;
}

.compact .new-content-card-header {
    padding: 0 0 8px 0 !important;
    margin-bottom: 8px !important;
}

.compact .new-content-card-title {
    font-size: 14px !important;
}

/* Compact KPI kartlari */
.compact .new-sms-stats-grid {
    gap: 8px !important;
    margin-bottom: 0 !important;
}

.compact .new-sms-stat-card {
    padding: 10px 12px !important;
    gap: 10px !important;
}

.compact .new-sms-stat-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
}

.compact .new-sms-stat-value {
    font-size: 1.2rem !important;
}

.compact .new-sms-stat-label {
    font-size: 10px !important;
}

.compact .new-sms-stat-subtitle {
    font-size: 10px !important;
}

/* Compact tabs */
.compact .new-tabs {
    gap: 5px !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
    padding: 6px !important;
}

.compact .new-tab {
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    border-width: 1px !important;
    gap: 5px !important;
}

.compact .new-tab i {
    font-size: 13px !important;
}

.compact .new-tabs.secondary .new-tab {
    padding: 5px 11px !important;
    font-size: 12px !important;
}

/* Compact tabs — dark tema uyumu */
/* Light tema — secondary tab active daha belirgin */
body:not(.is-dark) .compact .new-tabs.secondary .new-tab.active {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #4338ca !important;
    border-color: #797bf2 !important;
    border-width: 2px !important;
    font-weight: 700 !important;
}

body:not(.is-dark) .compact .new-tabs.secondary .new-tab:not(.active) {
    color: var(--logi-theme-text-muted) !important;
    border-color: var(--logi-theme-border) !important;
}

.is-dark .compact .new-tab {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.is-dark .compact .new-tab:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    color: #fff !important;
}

.is-dark .compact .new-tab.active {
    background: rgba(121, 123, 242, 0.2) !important;
    border-color: rgba(121, 123, 242, 0.5) !important;
    color: #797bf2 !important;
}

.compact .new-textarea {
    padding: 6px 8px !important;
    font-size: 12px !important;
    min-height: auto !important;
}

/* Compact form layout — CTOC ve benzeri formlar için */
.compact .CTOC-column-header {
    padding: 8px 12px !important;
    font-size: 12px !important;
}

.compact .CTOC-column-body {
    padding: 10px !important;
}

.compact .CTOC-column-body .CTOC-form-row {
    margin-bottom: 8px !important;
}

.compact .CTOC-section {
    border-radius: 8px !important;
    margin-bottom: 10px !important;
}

.compact .CTOC-section-header {
    padding: 10px 14px !important;
}

.compact .CTOC-three-column-layout {
    gap: 10px !important;
}

.compact .CTOC-header-card {
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
}

/* Compact form Select2 — form içinde tam genişlik ama compact boyut */
.compact .CTOC-form-group .select2-container {
    width: 100% !important;
}

/* CTOC form Select2 tema uyumu — ordercard.css'te tanımlı */

.compact .CTOC-phone-group .new-input {
    flex: 1 !important;
}

/* Compact multiselect header */
.compact .custom-multiselect-header {
    padding: 6px 8px !important;
    font-size: 12px !important;
    min-height: auto !important;
}

/* Compact Select2 override — new-controls içindeki select2 genişliğini kısıtla */
.compact .new-controls .select2-container {
    flex: 0 0 auto !important;
    min-width: 130px !important;
    max-width: 180px !important;
    width: auto !important;
}

.compact .select2-container .select2-selection--single {
    height: auto !important;
    min-height: auto !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
    border: 1px solid var(--logi-theme-border) !important;
    border-radius: 6px !important;
}

.compact .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    font-size: 12px !important;
    padding-left: 2px !important;
}

.compact .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
}

/* Compact — detaylı panel içindeki select2 tam genişlik */
.compact .new-panel .select2-container {
    width: 100% !important;
    max-width: 100% !important;
}