/* =============================================================================
   NEW-FORM EXTENDED — Global form shell bilesenleri
   customize.css'te tanimli olan new-form-* ailesini tamamlayan eklentiler.
   Kapsam: breadcrumb, tabs, mode-badge, content wrapper.
   Light override'lar da bu dosyada — body:not(.is-dark) scope ile.
   ============================================================================= */

/* ============================================================
   1) BREADCRUMB (Form ust gezinti linki)
   ============================================================ */
.new-form-breadcrumb {
    margin-bottom: 16px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.new-form-breadcrumb a {
    color: #797bf2;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.new-form-breadcrumb a:hover {
    color: var(--logi-theme-text-primary);
}

.new-form-breadcrumb span {
    color: var(--logi-theme-text-muted);
    margin: 0 4px;
}

.new-form-breadcrumb .new-form-breadcrumb-current {
    color: var(--logi-theme-text-secondary);
    font-weight: 500;
}


/* ============================================================
   2) TABS (Form ici sekme bari — bottom-border style)
   ============================================================ */
.new-form-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--logi-theme-border);
    padding-bottom: 0;
    overflow-x: auto;
}

.new-form-tab {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-bottom-color 0.2s ease;
    font-weight: 600;
    color: var(--logi-theme-text-muted);
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 0.85rem;
}

.new-form-tab:hover {
    color: var(--logi-theme-text-primary);
    background: rgba(121, 123, 242, 0.1);
}

.new-form-tab.active {
    color: #797bf2;
    border-bottom-color: #797bf2;
}

.new-form-tab i {
    font-size: 0.9rem;
}

.new-form-tab:disabled,
.new-form-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Tab scrollbar */
.new-form-tabs::-webkit-scrollbar {
    height: 4px;
}

.new-form-tabs::-webkit-scrollbar-track {
    background: rgba(59, 59, 65, 0.3);
    border-radius: 2px;
}

.new-form-tabs::-webkit-scrollbar-thumb {
    background: #797bf2;
    border-radius: 2px;
}

/* ============================================================
   3) MODE BADGE (Yeni Kayit / Duzenleme Modu rozeti)
   ============================================================ */
.new-form-mode-badge {
    background: rgba(121, 123, 242, 0.2);
    color: #797bf2;
    border: 1px solid #797bf2;
    padding: 4px 12px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.new-form-mode-badge i {
    font-size: 0.75rem;
}

/* Edit modu varyanti — turuncu */
.new-form-mode-badge.edit {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border-color: #f59e0b;
}

/* Success varyanti — yesil */
.new-form-mode-badge.success {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border-color: #10b981;
}

/* Info varyanti — mavi */
.new-form-mode-badge.info {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border-color: #3b82f6;
}

/* Light tema — accent renkler korunuyor, sadece kontrast icin hafif ayar */
body:not(.is-dark) .new-form-mode-badge {
    background: rgba(121, 123, 242, 0.12);
}

body:not(.is-dark) .new-form-mode-badge.edit {
    background: rgba(245, 158, 11, 0.12);
}

body:not(.is-dark) .new-form-mode-badge.success {
    background: rgba(16, 185, 129, 0.12);
}

body:not(.is-dark) .new-form-mode-badge.info {
    background: rgba(59, 130, 246, 0.12);
}


/* ============================================================
   4) CONTENT WRAPPER (Tab icerigi dinamik injection alani)
   Form section'lar ile AYNI bg — sectionlar content uzerinde
   ic ic karta benzer gozukur, sadece border ile ayrisirlar.
   Padding sectionlarin nefes almasi icin sart.
   ============================================================ */
.new-form-content {
    background-color: var(--logi-theme-bg-card);
    border: 1px solid var(--logi-theme-border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    min-height: 400px;
    overflow: visible;
}

/* Fade-in animasyonu */
@keyframes new-form-content-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.new-form-content > div {
    animation: new-form-content-fadeIn 0.3s ease;
}

/* Son section margin cift boslugu onlesin — herhangi bir derinlikte son child */
.new-form-content .new-form-section:last-child {
    margin-bottom: 0;
}

/* customize.css compact override'i `margin: 8px` shorthand ile base'deki
   `margin-bottom: 20px`'i eziyordu — section'lar alt alta cok yakin
   duruyordu. Sag/sol 8px nefes payi korunarak alt bosluk 20px'e geri
   alindi, ust 0 (content padding yeterli). FROZEN customize.css'e
   dokunmadan duzeltme. */
.new-form-compact .new-form-section {
    margin: 8px 8px 16px 8px;
}

/* customize.css'te .new-form-field iki kere tanimli (satir 7071 ve 8473).
   Ikinci tanim gap:8px + margin-bottom:20px ile ilkini eziyor.
   new-form-grid zaten gap:16px ile satir arasi bosluk veriyor,
   margin-bottom cift bosluk yaratiyor. Override ile sifirliyoruz. */
.new-form-grid .new-form-field,
.new-form-fields-column .new-form-field {
    margin-bottom: 8px;
    gap: 6px;
}


/* ============================================================
   4.1) SECTION HEADER BG OVERRIDE
   Header arka plani section body'den FARKLI olmali — kontrast
   icin bg-tertiary kullaniliyor (referans: VehicleCard-section-header).
   Boylece header gorsel olarak ayrisir ama ayni kart icindeki
   bir blok olarak okunur.
   ============================================================ */
.new-form-section .new-form-section-header {
    background-color: var(--logi-theme-bg-tertiary);
    border-color: var(--logi-theme-border);
}


/* ============================================================
   4.1.1) FORM HEADER BACKGROUND
   customize.css'te .new-form-header'da bg tanimi yok (sadece
   backdrop-filter). Light temada gorunmez kaliyor. Bg'sini
   .new-form-content ile birebir ayni yap.
   ============================================================ */
.new-form-container .new-form-header {
    background-color: var(--logi-theme-bg-card);
    border: 1px solid var(--logi-theme-border);
}


/* ============================================================
   4.2) FORM HEADER ICON (sol kolon)
   Ikon h3'un disinda, header'in direkt child'i olarak duruyor.
   Boylece title (h3) ve subtitle (p) ayni x'te hizali baslar.
   Referans: VehicleCard_header-icon (absolute pozisyonlu).
   Burada flex layout kullanildigi icin ikon dogal flex item.
   ============================================================ */
.new-form-header .new-form-header-icon {
    flex-shrink: 0;
    font-size: 1.4rem;
    color: #797bf2;
    margin-right: 14px;
    margin-top: 2px;
    align-self: flex-start;
}

.new-form-compact .new-form-header .new-form-header-icon {
    font-size: 1.1rem;
    margin-right: 12px;
    margin-top: 1px;
}

/* ============================================================
   4.3) HEADER ANIMATED LINE - COMPACT INCELTME
   customize.css'te ::after height: 2px. Compact modda 1px.
   ============================================================ */
.new-form-compact .new-form-header::after {
    height: 1.5px;
}


/* ============================================================
   4.4) HEADER META - UST AYRAC CIZGI
   Kayit bilgileri (meta info) blogu ile baslik/altyazi arasinda
   ince bir ayrac. Referans: VehicleCard_header-info border-top.
   ============================================================ */
.new-form-header .new-form-meta {
    border-top: 1px solid var(--logi-theme-border);
    padding-top: 10px;
    margin-top: 10px;
}

/* customize.css'teki meta renkleri cok soluk (#6b7280 container, #9ca3af label,
   #d1d5db value). VehicleCard/WarehouseCard'daki daha okunakli renklere
   yaklastiriyoruz ve var() ile tema uyumlu yapiyoruz.
   customize.css FROZEN — override burada. */
.new-form-meta {
    color: var(--logi-theme-text-secondary);
}

.new-form-meta-item span {
    color: var(--logi-theme-text-secondary);
}

.new-form-meta-item strong {
    color: var(--logi-theme-text-primary);
    font-weight: 600;
}

/* Aktif durum — yesil accent korunan renk */
.new-form-meta-item .new-form-meta-status-active {
    color: #10b981;
}


/* ============================================================
   4.4.2) TEXTAREA — global base tanimi
   customize.css'te new-textarea base tanimi yok. Sadece compact
   override (dx-grid-overrides.css) ve modul-spesifik tanimlar var.
   new-input ile ayni gorunum, resize vertical, width 100%.
   ============================================================ */
.new-textarea {
    padding: 10px;
    border: 1px solid var(--logi-theme-border);
    border-radius: 8px;
    background-color: var(--logi-theme-bg-secondary);
    color: var(--logi-theme-text-primary);
    font-size: 0.85rem;
    width: 100%;
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.new-textarea:focus {
    outline: none;
    border-color: #797bf2;
    box-shadow: 0 0 0 3px rgba(121, 123, 242, 0.2);
}

.new-textarea::placeholder {
    color: var(--logi-theme-text-muted);
}

.new-form-compact .new-textarea {
    padding: 6px 8px;
    font-size: 12px;
    min-height: 60px;
}

/* Date input — customize.css 11270-11307'deki global kural
   (.new-input { height: 30px !important; padding: 0 10px !important; box-sizing: border-box; })
   tum input/select/date elemanlarini esit 30px yukseklikte ve sifir vertical padding ile esitler.
   Eskiden burada padding-top/bottom: 6px override'i vardi; native date UI (takvim ikonu + ay/gun/yil
   bolmeleri) icin yer acmaya calisiyordu fakat 30px height + 12px vertical padding cakisinca tarayici
   height'i eziyor ve date input text/select'ten ~5-6px daha kalin goruluyordu (Hakan'in 2026-04-28
   gozlemi: InvoiceCard-invoice_date kalin geliyor). Cozum: override kaldirildi — date input artik global
   kuralla 30px height + 0 vertical padding aliyor, native UI 28px content alanina sigiyor.
   BURAYA AYRI BIR DATE PADDING OVERRIDE EKLENMEZ. */


/* ============================================================
   4.4.3) FORM FIELD — select/select2 full width fix
   Html.Select + select-searchbox Select2'yi tetikliyor.
   new-form-field icindeki select ve Select2 container %100
   genislikte olmali.
   ============================================================ */
.new-form-field .new-select,
.new-form-field .select-searchbox,
.new-form-field .select-searchbox-autocomplete {
    width: 100%;
    min-width: unset;
}

.new-form-field .select2-container {
    width: 100% !important; /* Override Select2 inline width */
}

/* ============================================================
   4.4.4) FORM-SPESIFIK BOYUT TUTARLILIGI (2 nokta atisi kural)
   ============================================================
   Select2 visual state'leri (hover/focus/dropdown vb.) Logitera default global'de zaten
   yonetiliyor; .compact scope Select2 boyutu `dx-grid-overrides.css` line 553'te.
   Burada sadece form-spesifik 2 bug duzeltmesi:
   ============================================================ */

/* 1) .new-form-compact icinde native .new-select compact override eksikligi → 30px hedef
   (Logitera'da .new-form-compact .new-input icin override var, .new-select icin YOK). */
.new-form-compact .new-form-field .new-select {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 26px 0 10px !important;     /* sag 26px = arrow icin yer (.compact .new-select ile birebir) */
    line-height: 28px !important;
    font-size: 13px !important;             /* Logitera compact baseline (dx-grid-overrides .compact .new-select line 269 ile birebir) */
    box-sizing: border-box !important;
}

/* === Label min-height — info-btn icerse de yukseklik degismesin ===
   Sorun: <label> icine `<span class="new-info-btn">` eklenince icon padding (3px*2 + 12px font ≈ 18-20px)
   label height'ini kabartiyor, ayni satirdaki diger field'lerin label'i 14-16px kaliyor →
   `.new-form-field` flex column + gap'inden dolayi alttaki input/select dikey kayiyor.
   Cozum: label min-height sabitle — info-btn olsun olmasin TUM label'lar ayni 22px yukseklik. */
.new-form-compact .new-form-field .new-label {
    min-height: 22px !important;
    display: flex !important;
    align-items: center !important;
}


/* ============================================================
   4.4.1) FILTER SECTION — transparent section esdegeri
   `.new-form-section` ile ayni outer boyutlar (margin) ve
   `.new-form-section-body` ile ayni internal padding tasir.
   Boylece icindeki filtre bar (new-controls), altindaki
   grid section'in body content'i ile soldan-sagdan ayni
   x'te hizali baslar — ama arka plan/border tasimaz, transparent.
   ============================================================ */
.new-form-filter-section {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* margin: section ile ayni (outer hizalama icin).
       padding: 0 — filter content (new-controls) section'in OUTER edge'iyle
       (kart border'iyla) ayni x'te baslar, section CONTENT'iyle degil.
       Boylece filter input'un sol kenari grid card'in sol border'iyla hizali. */
    margin: 0 0 20px 0;
    padding: 0;
}

.new-form-compact .new-form-filter-section {
    /* Compact modda section'in margin: 8px'iyle birebir ayni (her yandan).
       Padding base blokta zaten 0 — tekrar tanimlanmiyor. */
    margin: 8px;
}


/* ============================================================
   4.5) RESULT BANNER (global, reusable)
   API'den dönen başarı/hata mesajını gösteren kompakt bilgi
   şeridi. JS .is-hidden class'ini toggle ediyor; title element'e
   "Başarılı" / "Hata", message element'e API mesajı basiliyor.
   `:empty` pseudo-class boş çocukları otomatik gizler — JS'in
   ekstra display:none toggle yapmasına gerek kalmaz.
   ============================================================ */
.new-form-result-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: rgba(121, 123, 242, 0.08);
    border: 1px solid rgba(121, 123, 242, 0.25);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--logi-theme-text-secondary);
}

.new-form-result-banner::before {
    content: '\f05a';
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', FontAwesome;
    font-weight: 900;
    color: #797bf2;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.new-form-result-banner-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #797bf2;
    margin: 0;
    flex-shrink: 0;
}

.new-form-result-banner-title:empty {
    display: none;
}

.new-form-result-banner-message {
    flex: 1;
    color: var(--logi-theme-text-muted);
}

.new-form-result-banner-message:empty {
    display: none;
}

/* ============================================================
   5) ALERT BOX (Form ici uyari / bilgi / basari kutusu)
   Bulma blockquote (is-warning, is-danger, is-success) uzerine
   eklenen gorsel modernizasyon class'i. Bulma renk/responsive
   mantigi korunuyor, new-form-alert sadece sekil ekliyor:
   border-radius, border-left kalinlik, padding, font-size.
   ============================================================ */
blockquote.new-form-alert {
    border-radius: 8px;
    border-left-width: 4px;
    padding: 12px 16px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--logi-theme-text-primary) !important; /* Bulma blockquote color override */
}

blockquote.new-form-alert p {
    margin: 0 0 4px 0;
    color: var(--logi-theme-text-primary) !important; /* Global p { color: #a2a5b9 } override */
}

blockquote.new-form-alert p:last-child {
    margin-bottom: 0;
}

blockquote.new-form-alert a {
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

blockquote.new-form-alert b {
    color: var(--logi-theme-text-primary);
}

/* ============================================================
   Dark tema — Bulma .content blockquote default arka plan dark
   temada container'la aynı koyulukta görünüyor. Arka plan tema-aware
   override → container'dan biraz belirgin ayrılır.
   Light tema Bulma default'u ile devam eder (Hakan onayı).
   ============================================================ */
body.is-dark blockquote.new-form-alert {
    background-color: var(--logi-theme-bg-tertiary);
}

/* Dark tema — semantic varyant border-left renkleri.
   Bulma'nın is-info / is-warning / is-danger / is-success default
   border'ları dark tema bundle'larında bazen ezilebiliyor; Logitera
   accent'leri ile garanti altına alıyoruz. Light tema'ya dokunulmaz.
   Korunan accent renkler — UI_STANDARDS:
     - #3b82f6 (info — mavi)
     - #10b981 (success — yeşil)
     - #f59e0b (warning — turuncu/sarı)
     - #ef4444 (danger — kırmızı) */
body.is-dark blockquote.new-form-alert.is-info {
    border-left-color: #3b82f6;
}

body.is-dark blockquote.new-form-alert.is-success {
    border-left-color: #10b981;
}

body.is-dark blockquote.new-form-alert.is-warning {
    border-left-color: #f59e0b;
}

body.is-dark blockquote.new-form-alert.is-danger {
    border-left-color: #ef4444;
}


/* ============================================================
   7) TOTALS TABLE (Fatura / siparis toplam ozet tablosu)
   Form section iceriginde saga yaslanan ozet tablosu.
   Reusable — fatura, siparis, teklif formlarinda kullanilir.
   ============================================================ */
.invoice-totals-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.invoice-totals-wrapper {
    background-color: var(--logi-theme-bg-card);
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--logi-theme-border);
    min-width: 420px;
}

.invoice-totals-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.invoice-totals-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--logi-theme-border-light);
}

.invoice-totals-table tr:last-child td {
    border-bottom: none;
}

.invoice-totals-table .label-cell {
    text-align: left;
    color: var(--logi-theme-text-muted);
    font-weight: 500;
}

.invoice-totals-table .value-cell {
    text-align: right;
    font-weight: 600;
    color: var(--logi-theme-text-primary);
    min-width: 130px;
}

.invoice-totals-table .total-row {
    background-color: rgba(121, 123, 242, 0.1);
}

.invoice-totals-table .total-row td {
    border-top: 1px solid rgba(121, 123, 242, 0.3);
    padding: 12px;
}

.invoice-totals-table .total-row .label-cell {
    color: var(--logi-theme-text-primary);
    font-weight: 600;
}

.invoice-totals-table .payable-row {
    background-color: rgba(16, 185, 129, 0.15);
}

.invoice-totals-table .payable-row td {
    border-top: 1px solid rgba(16, 185, 129, 0.3);
}

.invoice-totals-table .payable-row .value-cell {
    color: #10b981;
    font-size: 15px;
}

.invoice-totals-table .payable-row .label-cell {
    color: #10b981;
}


/* ============================================================
   9) BUTTON VARIANTS — EK RENK VE OUTLINED MODIFIER
   customize.css FROZEN — eksik renkler ve outlined modifier
   burada tanimlanir. System 1 (tinted ghost) stiliyle uyumlu.

   Mevcut (customize.css):
     .new-btn         — Mavi tinted (base)
     .new-btn-secondary — Gri tinted
     .new-btn-success — Yesil tinted
     .new-btn-danger  — Kirmizi tinted
     .new-btn-warning — Turuncu tinted
     .new-btn-primary — Mor gradient filled (System 2)

   Bu dosyada:
     .new-btn-info    — Mavi tinted (semantik alias — base ile ayni renk)
     .new-btn-outlined — Modifier: sadece border renkli, hover'da dolar
   ============================================================ */

/* --- INFO VARYANTI (semantik alias — bilgi/nota aksiyonlari icin) --- */
.new-btn-info {
    padding: 8px 16px;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 2px solid rgba(59, 130, 246, 0.4);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: auto !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.new-btn-info:hover {
    background: rgba(59, 130, 246, 0.4);
    color: white;
    border-color: rgba(59, 130, 246, 0.8);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}

.new-btn-info:active {
    transform: translateY(0);
}

.new-btn-info i {
    font-size: 0.9rem;
}


/* --- OUTLINED MODIFIER --------------------------------------
   Kullanim: <button class="new-btn-success new-btn-outlined">
            Sadece border renkli, ic transparent. Hover'da tamamen dolar.
   Renk class'iyla kombinasyon ile calisir — her renk otomatik uyumlu.
   !important gerekli cunku customize.css'teki tinted bg'yi ezmeli.
   ------------------------------------------------------------ */
.new-btn-outlined {
    background: transparent !important;
}

.new-btn-outlined:hover {
    color: white !important;
}

/* Hover olmadan da border net gorunsun — her renk icin tam accent.
   Full shorthand (width + style + color) — baska bir kural border'i
   sifirliyorsa (border: none vb.) bu override geri yukler.
   Text rengi de accent'e cekiliyor cunku customize.css'teki ikinci
   tanimlar (satir 8555/9249 vb.) color'i white yapiyor — outlined'da
   gorunmez oluyor. Hover'da `.new-btn-outlined:hover` white'a donuyor. */
.new-btn.new-btn-outlined,
.new-btn-info.new-btn-outlined {
    border: 2px solid #3b82f6 !important;
    color: #3b82f6 !important;
}

.new-btn-success.new-btn-outlined {
    border: 2px solid #10b981 !important;
    color: #10b981 !important;
}

.new-btn-danger.new-btn-outlined {
    border: 2px solid #ef4444 !important;
    color: #ef4444 !important;
}

.new-btn-warning.new-btn-outlined {
    border: 2px solid #f59e0b !important;
    color: #f59e0b !important;
}

.new-btn-secondary.new-btn-outlined {
    /* Gri paletten (#6b7280) degil, tema variable — tema degisiminde uyumlu kalir */
    border: 2px solid var(--logi-theme-text-secondary) !important;
    color: var(--logi-theme-text-secondary) !important;
}

/* Her renk icin hover'da %100 dolum — accent degerleri.
   color: white !important burada spesifik selector ile (0-3-0 specificity)
   non-hover color override'ini (0-2-0) eziyor — source order'dan bagimsiz. */
.new-btn.new-btn-outlined:hover,
.new-btn-info.new-btn-outlined:hover {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}

.new-btn-success.new-btn-outlined:hover {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.new-btn-danger.new-btn-outlined:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

.new-btn-warning.new-btn-outlined:hover {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

.new-btn-secondary.new-btn-outlined:hover {
    background: var(--logi-theme-text-secondary) !important;
    border-color: var(--logi-theme-text-secondary) !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(107, 114, 128, 0.4);
}

/* Primary (mor) — System 2 gradient filled'i ezip System 1 outlined yapisi */
.new-btn-primary.new-btn-outlined {
    background: transparent !important;
    color: #797bf2 !important;
    border: 2px solid #797bf2 !important;
}

.new-btn-primary.new-btn-outlined:hover {
    background: #797bf2 !important;
    border-color: #797bf2 !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(121, 123, 242, 0.4);
}


/* ============================================================
   8) RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .new-form-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .new-form-tab {
        padding: 10px 15px;
        font-size: 0.8rem;
    }

    .new-form-breadcrumb {
        font-size: 0.75rem;
    }

    .new-form-content {
        min-height: 300px;
    }
}

/* ============================================================
   5) FORM ROW — Section yan yana yerleşim
   Iki new-form-section'i bir satirda yan yana gostermek icin.
   Responsive 1200px altinda stack olur.
   ============================================================ */
.new-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}

.new-form-row:last-child {
    margin-bottom: 0;
}

.new-form-row > .new-form-section {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.new-form-col-50 {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.new-form-col-100 {
    flex: 1 1 100%;
    min-width: 0;
}

/* Responsive — 1200px altinda sectionlar alt alta */
@media (max-width: 1200px) {
    .new-form-row {
        flex-direction: column;
    }
    .new-form-col-50 {
        flex: 1 1 100%;
    }
}

/* ============================================================
   6) FORM HERO HEADER — Avatar + Baslik + Stats + Aksiyonlar
   Gorselli form kartlari icin (ProductCard, VehicleCard, DriverCard).
   Sol: new-form-hero-avatar (file uploader veya ikon)
   Orta: new-form-hero-info (h1 + subtitle + stats grid)
   Sag: new-form-hero-actions (yardim/ses/log/ayar ikonlari)
   ============================================================ */
.new-form-hero-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--logi-theme-bg-tertiary) 0%, var(--logi-theme-bg-primary) 100%);
    border: 1px solid var(--logi-theme-border);
    border-radius: 16px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.new-form-hero-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #797bf2, #10b981, #797bf2);
    background-size: 200% 100%;
    animation: new-form-hero-gradient 3s ease infinite;
}

@keyframes new-form-hero-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ----- AVATAR ----- */
.new-form-hero-avatar {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    border: 2px solid rgba(121, 123, 242, 0.35);
    background: var(--logi-theme-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px var(--logi-theme-shadow-color);
}

.new-form-hero-avatar:hover {
    border-color: rgba(121, 123, 242, 0.6);
    transform: scale(1.02);
}

.new-form-hero-avatar .file_uploader {
    width: 100%;
    height: 100%;
}

.new-form-hero-avatar-placeholder {
    font-size: 2.5rem;
    color: rgba(121, 123, 242, 0.45);
}

/* ----- INFO (ORTA KOLON) ----- */
.new-form-hero-info {
    flex: 1;
    min-width: 0;
}

.new-form-hero-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.new-form-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--logi-theme-text-primary);
    margin: 0;
    letter-spacing: -0.5px;
}

.new-form-hero-title.is-new {
    color: #797bf2;
}

.new-form-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.new-form-hero-badge.type {
    background: rgba(121, 123, 242, 0.12);
    color: #5b5dbd;
    border: 1px solid rgba(121, 123, 242, 0.3);
}

.new-form-hero-badge.status-active {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.new-form-hero-badge.status-inactive {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.new-form-hero-subtitle {
    font-size: 0.85rem;
    color: var(--logi-theme-text-secondary);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.new-form-hero-subtitle i {
    color: #797bf2;
    font-size: 0.8rem;
}

/* ----- STATS (Info icinde) ----- */
.new-form-hero-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.new-form-hero-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--logi-theme-bg-secondary);
    border: 1px solid var(--logi-theme-border);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 1px 3px var(--logi-theme-shadow-color);
}

.new-form-hero-stat:hover {
    border-color: rgba(121, 123, 242, 0.4);
    box-shadow: 0 2px 6px rgba(121, 123, 242, 0.1);
}

.new-form-hero-stat-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(121, 123, 242, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.new-form-hero-stat-icon i {
    color: #797bf2;
    font-size: 0.8rem;
}

.new-form-hero-stat-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.new-form-hero-stat-label {
    font-size: 0.65rem;
    color: var(--logi-theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.new-form-hero-stat-value {
    font-size: 0.85rem;
    color: var(--logi-theme-text-primary);
    font-weight: 600;
}

/* Clickable stat (hover ok) */
.new-form-hero-stat--clickable {
    cursor: pointer;
    position: relative;
    padding-right: 28px;
}

.new-form-hero-stat--clickable:hover {
    border-color: #797bf2;
    background: rgba(121, 123, 242, 0.06);
}

.new-form-hero-stat-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--logi-theme-text-muted);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.new-form-hero-stat--clickable:hover .new-form-hero-stat-arrow {
    opacity: 1;
    transform: translateY(-50%) translateX(2px);
}

/* ----- ACTIONS (SAG KOLON) ----- */
.new-form-hero-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.new-form-hero-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--logi-theme-bg-secondary);
    border: 1px solid var(--logi-theme-border);
    color: var(--logi-theme-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.new-form-hero-action-btn:hover {
    color: #797bf2;
    border-color: #797bf2;
    background: rgba(121, 123, 242, 0.08);
}

.new-form-hero-action-btn i {
    font-size: 0.95rem;
}

/* Responsive: mobilde avatar yukari gecip tam genislik alir */
@media (max-width: 768px) {
    .new-form-hero-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .new-form-hero-avatar {
        width: 84px;
        height: 84px;
        align-self: center;
    }
    .new-form-hero-actions {
        justify-content: flex-end;
    }
}

/* ==========================================
   NEW CHART TOGGLE (.new-chart-toggle)
   Global pill toggle for chart mode selectors
   (Adet/Tutar, Sayı/Maliyet vb.). Birden fazla
   modülde kullanıldığı için global'e taşındı —
   modül CSS'lerinde tekrar tanımlanmasın.
   ========================================== */
.new-chart-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background-color: var(--logi-theme-bg-tertiary);
    border: 1px solid var(--logi-theme-border);
    border-radius: 8px;
}

.new-chart-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1;
    border-radius: 5px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--logi-theme-text-secondary);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.new-chart-toggle button i {
    font-size: 11px;
}

.new-chart-toggle button:hover {
    background: var(--logi-theme-bg-hover);
    color: var(--logi-theme-text-primary);
}

.new-chart-toggle button.active {
    background: var(--logi-theme-bg-card);
    border-color: var(--logi-theme-border);
    color: #797bf2;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* =============================================================================
   INFO BUTTON + TOOLTIP — Label/input yanına eklenebilir bilgi balonu
   Global pattern: standart sayfa/form alanlarında "ne işe yarar" açıklaması.
   Kullanım:
     <label>Hesap Çalışma Tipi
         <span class="new-info-btn">
             <i class="fas fa-info-circle"></i>
             <div class="new-info-tooltip">
                 <div class="new-info-tooltip-header">
                     <i class="fas fa-icon"></i>
                     <span>Başlık</span>
                 </div>
                 <div class="new-info-tooltip-body">
                     <p>Açıklama metni...</p>
                 </div>
             </div>
         </span>
     </label>
   Pure CSS hover ile çalışır — JS gerek yok. Tema-uyumlu (light + dark).
   Modül CSS'lerinde override KULLANILMAZ (UI_STANDARDS).
   ============================================================================= */

.new-info-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
}

.new-info-btn > i {
    font-size: 12px;
    color: var(--logi-theme-text-muted);
    background-color: transparent;
    border-radius: 50%;
    padding: 3px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.new-info-btn:hover > i {
    color: #797bf2;
    background-color: rgba(121, 123, 242, 0.1);
}

/* Tooltip Container — tema uyumlu (light + dark) */
.new-info-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    width: 260px;
    background-color: var(--logi-theme-bg-card);
    border: 1px solid var(--logi-theme-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99999;
    pointer-events: none;
}

.new-info-btn:hover .new-info-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Tooltip Arrow — üst tarafta üçgen ok */
.new-info-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(121, 123, 242, 0.3);
}

/* Tooltip Header — mor accent bant + ikon + başlık */
.new-info-tooltip-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background-color: rgba(121, 123, 242, 0.12);
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid rgba(121, 123, 242, 0.15);
}

.new-info-tooltip-header i {
    color: #797bf2;
    font-size: 0.8rem;
    background: none;
}

.new-info-tooltip-header span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--logi-theme-text-primary);
}

/* Tooltip Body — açıklama metni */
.new-info-tooltip-body {
    padding: 8px 10px;
}

.new-info-tooltip-body p {
    margin: 0;
    font-size: 0.7rem;
    color: var(--logi-theme-text-secondary);
    line-height: 1.4;
    font-weight: 400;
}