/* ── zenomWeb genel tema/tasarım altyapısı ───────────────────────────────────
   zenomConnect'in (D:\projeler\_om\zenomConnect\wwwroot\css\site.css) genel/
   yeniden kullanılabilir tasarım sistemi buraya taşındı (2026-10-13) — sayfa/
   grid'e özel kurallar (fatura-grid, evrak-grid, evraklaştırma formu, hesap
   planı F4 modalı vb.) BİLEREK taşınmadı, ileride ilgili ekranlar yazılırken
   kendi sayfa CSS'leri olarak eklenecek. CSS class önekleri ("zc-") connect'teki
   bileşen ailesi adlandırmasıyla tutarlılık için AYNEN korundu, değişen sadece
   marka metni (zenomWeb).
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Renk rolü sözleşmesi (connect/management ile ortak) ─────────────────────
     Mor (--app-vurgu / btn-primary)  : marka/navigasyon — sidebar aktif, logo, brand
     Mavi                             : etkileşim/seçim — checkbox, progress, link, ikincil aksiyon
     Yeşil (success)                  : başarı/onay — ekranda TEK güçlü (solid) CTA
     Sarı/amber (warning)             : bekleyen/ikincil bilgi — durum, aksiyon butonu değil
     Kırmızı (danger)                 : tehlikeli/geri alınamaz aksiyon
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Yazı boyutu ölçekleme ───────────────────────────────────────────────────
   Küçük/Orta/Büyük seçimi (bkz. _Header.cshtml font boyutu dropdown'ı, site.js).
   rem her zaman root <html> boyutuna göre hesaplanır, container'a font-size vermek
   çoğu elemanı etkilemez; zoom ise rem dahil tüm alt ağacı tarayıcı zoom'u gibi
   tutarlı ölçekler. Header/sidebar/footer bilerek kapsam dışı — sadece içerik
   alanı + paylaşılan modal/toast ölçeklenir. */
:root { --zc-font-olcek: 100%; }

.content-wrapper,
#zc-global-modals {
    zoom: var(--zc-font-olcek);
}

.font-size-option-a {
    display: inline-block;
    width: 1.1rem;
    text-align: center;
    font-weight: 600;
}

/* ── Yüksek okunabilirlik ────────────────────────────────────────────────────
   Font boyutu dropdown'ındaki "Yüksek Okunabilirlik" anahtarı (site.js) — gri/
   soluk metin tonlarını maksimum kontrasta çeker. Değişken override'ı DOĞRUDAN
   <body> üzerinde tanımlanır (alt bir container'da değil) — <body>'nin kendi
   `color: var(--vx-body)` kuralı bir KERE hesaplanıp alt elemanlara miras
   kaldığından, override başka bir katmanda yapılırsa kendi `color` kuralı
   olmayan çoğu eleman hiç değişmez. */
body.zc-yuksek-kontrast {
    --vx-body: #161616;
    --vx-heading: #161616;
    --app-metin: #161616;
    --vx-muted: #333;
    --bs-secondary-color: #333;
    --app-soluk: #333;
    --app-cok-soluk: #4d4d4d;
}

body.vx-dark.zc-yuksek-kontrast {
    --vx-body: #f2f2f2;
    --vx-heading: #f2f2f2;
    --app-metin: #f2f2f2;
    --vx-muted: #cfcfcf;
    --bs-secondary-color: #cfcfcf;
    --app-soluk: #cfcfcf;
    --app-cok-soluk: #b3b3b3;
}

body.zc-yuksek-kontrast .table tbody td {
    font-weight: 500;
}

/* Rozet/buton renkli metinleri: "soft" stil (pastel zemin + renkli yazı) yoğun
   ekranda düşük kontrast kalabiliyor — tüm varyantlar filter: brightness/contrast
   ile tek seferde koyulaştırılır. Solid dolgulu/beyaz yazılı rozet-butonlara
   bilerek dokunulmuyor (zaten maksimum kontrastta). */
body.zc-yuksek-kontrast [class*="bg-label-"],
body.zc-yuksek-kontrast [class^="btn-outline-"],
body.zc-yuksek-kontrast [class*=" btn-outline-"] {
    filter: saturate(1.15) brightness(.82) contrast(1.15);
    font-weight: 700;
}

/* Dark'ta bu rozet/butonların metni zaten açık (koyu zemine karşı okunsun diye) —
   aynı brightness(.82) burada tersine etki edip kontrastı düşürür, yön çevrilir. */
body.vx-dark.zc-yuksek-kontrast [class*="bg-label-"],
body.vx-dark.zc-yuksek-kontrast [class^="btn-outline-"],
body.vx-dark.zc-yuksek-kontrast [class*=" btn-outline-"] {
    filter: saturate(1.15) brightness(1.25) contrast(1.15);
}

/* ── Segmented filter control ─────────────────────────────────────────────────
   İki+ seçenekli, tek-seçimli filtreler için ortak bileşen — sayfa başına ayrı
   ayrı badge/pill/btn-group stillemek yerine tüm ekranlarda aynı görünüm.
   Kullanım: dış <div class="sv-chip-row"> içinde <button class="sv-chip
   [active]" data-...="..."> — aktif olan seçilmiş görünür, tıklama/filtreleme
   mantığı sayfanın kendi JS'i sorumluluğunda. */
.sv-chip-row {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: var(--vx-surface-soft);
    border: 1px solid var(--vx-border);
    border-radius: 8px;
}

.sv-chip {
    height: 33px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--vx-body);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.sv-chip:hover {
    background: var(--vx-surface-hover);
    color: var(--vx-heading);
}

.sv-chip.active {
    background: var(--vx-primary-soft);
    color: var(--vx-primary);
    font-weight: 600;
}

/* ── Toolbar trigger + dropdown ortak dili ────────────────────────────────────
   Tema/font seçici (_Header.cshtml, .theme-toggle/.theme-menu) ile grid'lerdeki
   "Sütunlar" seçicisinin (site.js dtAlanSeciciEkle) aynı bileşen ailesinden
   görünmesi için. Sadece görünüm; sütun göster/gizle davranışına dokunmaz. */
.zc-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 31px;
    padding: 0 .7rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--vx-body);
    background: var(--vx-surface-soft);
    border: 1px solid var(--vx-border);
    border-radius: 6px;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.zc-toolbar-btn:hover {
    color: var(--vx-heading);
    background: var(--vx-surface-hover);
}

.zc-toolbar-btn.show,
.zc-toolbar-btn[aria-expanded="true"] {
    color: var(--vx-primary) !important;
    background: var(--vx-primary-soft) !important;
    border-color: var(--vx-primary) !important;
}

.zc-kolon-menu {
    width: 210px;
    padding: 6px;
    background: var(--vx-card);
    border: 1px solid var(--vx-border);
    border-radius: 10px;
    box-shadow: 0 .25rem 1.125rem rgba(75, 70, 92, .2);
    scrollbar-width: thin;
}

.zc-kolon-menu::-webkit-scrollbar {
    width: 6px;
}

.zc-kolon-menu::-webkit-scrollbar-thumb {
    background: var(--vx-border);
    border-radius: 3px;
}

.zc-kolon-menu::-webkit-scrollbar-track {
    background: transparent;
}

.zc-kolon-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 4px 8px;
    border-radius: 5px;
    margin: 0;
}

.zc-kolon-item:hover {
    background: var(--vx-surface-hover);
}

.zc-kolon-item:has(.form-check-input:checked) {
    background: rgba(115, 103, 240, .05);
}

.zc-kolon-item .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.zc-kolon-item .form-check-label {
    margin: 0;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Vuexy temasında .btn-label-danger/.btn-label-secondary var ama .btn-label-warning
   yok — outline-warning beyaz zeminde çok soluk kalıyor. Danger'la aynı desende
   (soluk dolgu + amber metin, hover'da solid) tamamlanıyor. */
.btn-label-warning {
    color: #b45309 !important;
    background: #fff0e1 !important;
    border-color: #fff0e1 !important;
    box-shadow: none !important;
}

.btn-label-warning:hover,
.btn-label-warning:focus {
    color: #fff !important;
    background: var(--vx-warning, #ff9f43) !important;
    border-color: var(--vx-warning, #ff9f43) !important;
}

/* ── 2 aşamalı onay/silme dialogları — zc-confirm-* ──────────────────────────
   #modal-onay (ilk, sakin aşama) ve #modal-onay-kesin (ikinci, destructive
   aşama) — düz sarı/kırmızı header YOK, normal panel/header rengi + küçük
   soft ikon dairesi. İki aşama arasındaki risk artışı ikon/accent rengiyle
   (warning → danger) hissettirilir, header bilerek nötr kalır. */
.zc-confirm-dialog { max-width: 460px; }
.zc-confirm-content { border-radius: var(--modal-radius); }
.zc-confirm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--app-baslik-bg);
    border-bottom: 1px solid var(--app-sinir);
    padding: 18px 22px;
}
.zc-confirm-header .modal-title { font-weight: 600; font-size: 1rem; color: var(--app-metin); }
.zc-confirm-icon {
    width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.zc-confirm-body { padding: 22px; background: var(--app-panel); color: var(--app-metin); font-size: .88rem; }
.zc-confirm-alt { margin-top: 8px; font-size: .78rem; color: var(--app-soluk); }
.zc-confirm-footer { border-top: 1px solid var(--app-sinir); padding: 14px 22px; background: var(--app-panel); }

/* ── Modal accent bandı — merkezi semantic sistem (3px, tam boy) ─────────────
   Her modalın sol kenarında ince (3px) dikey bir renk bandı, modalın "türünü"
   (bilgi / uyarı / tehlike / seçim-oluşturma / başarı) tek bakışta hissettirir.
   Header rengi bilerek nötr kalır — accent SADECE bu ince bant + ikon rengiyle
   taşınır. Kullanım: modal-content'e (zc-confirm-content ile birlikte) tek
   bir zc-accent-* class'ı eklemek yeterli. */
.zc-accent-primary,
.zc-accent-info,
.zc-accent-warning,
.zc-accent-danger,
.zc-accent-success {
    position: relative;
}
.zc-accent-primary::before,
.zc-accent-info::before,
.zc-accent-warning::before,
.zc-accent-danger::before,
.zc-accent-success::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: var(--modal-radius) 0 0 var(--modal-radius);
    z-index: 1;
}
.zc-accent-primary::before { background: var(--app-vurgu); }
.zc-accent-info::before    { background: #00bad1; }
.zc-accent-warning::before { background: var(--app-uyari); }
.zc-accent-danger::before  { background: var(--app-hata); }
.zc-accent-success::before { background: var(--app-alacak); }
body.vx-dark .zc-accent-info::before { background: var(--vx-info, #38bdf8); }

.zc-confirm-body p { margin-bottom: 14px; }
.zc-confirm-body p:last-of-type { margin-bottom: 0; }

/* Bilgilendirme amaçlı (destructive olmayan) modallar için zc-confirm-dialog'un
   biraz daha geniş hali. */
.zc-info-dialog { max-width: 520px; }

/* Nötr (warning olmayan) küçük bilgi notu — soluk zemin + ince kenarlık, vurgu
   ikonun kendi renginde. */
.zc-info-callout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--app-baslik-bg);
    border: 1px solid var(--app-sinir);
    border-radius: 6px;
    font-size: .82rem;
    color: var(--app-soluk);
}
.zc-info-callout i { color: var(--app-vurgu); font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
.zc-info-callout strong { color: var(--app-metin); }

/* Bilgilendirici (info) mavi ton notice kartı — eski "alert alert-info" kutusunun
   yerine. Vendor'ın zaten tanımladığı .bg-label-info renk değerleri reuse edilir. */
.zc-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 14px;
    background: #d6f4f8;
    border: 1px solid rgba(0, 186, 209, .3);
    border-radius: 6px;
    font-size: .82rem;
    color: var(--app-metin);
}
.zc-notice i { color: #00bad1; font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
body.vx-dark .zc-notice {
    background: var(--vx-info-bg, rgba(56, 189, 248, .14));
    border-color: rgba(56, 189, 248, .35);
}
body.vx-dark .zc-notice i { color: var(--vx-info, #38bdf8); }

.zc-confirm-body .form-group { margin-bottom: 16px; }
.zc-confirm-body .form-group:last-of-type { margin-bottom: 0; }
.zc-confirm-body .form-group > label {
    font-weight: 600;
    font-size: .82rem;
    color: var(--app-metin);
    margin-bottom: 6px;
}
.zc-field-help { margin-top: 6px; font-size: .72rem; color: var(--app-soluk); line-height: 1.5; }

/* AdminLTE'nin eski float-tabanlı .card-title{float:left} sistemi için yazılmış
   .card-header::after{display:block;clear:both;content:""} clearfix'i, d-flex
   uyguladığımız header'larda GÖRÜNMEZ bir 3. flex öğesi haline gelip butonu
   gerçek sağ kenar yerine ortalara doğru itiyor — flex kullanılan header'larda
   zaten float clearing'e gerek yok, pseudo-element iptal edilir. */
.card-header.d-flex::after {
    content: none !important;
}

/* Panel/card header alt açıklaması — text-muted değil text-secondary seviyesinde. */
.zc-panel-desc { display: block; margin-top: 2px; font-size: .78rem; color: var(--app-soluk); line-height: 1.5; }

/* ── Büyük/kompleks form modalları — zc-form-* ───────────────────────────────
   Uzun formları düz tek kolon yerine net section'lara ayırmak için — Sihirbaz
   (wizard) modallarında da reuse edilebilir. Ayrı büyük kartlara bölmüyor,
   sadece görsel gruplama (ince separator + başlık). */
.zc-form-section { margin-bottom: 20px; }
.zc-form-section:last-child { margin-bottom: 0; }
.zc-form-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: .82rem;
    color: var(--app-metin);
    padding-bottom: 6px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--app-sinir);
}
.zc-form-section-header i { color: var(--app-vurgu); font-size: .95rem; }
.zc-form-section-header .zc-form-section-action { margin-left: auto; }

/* Seviye seçimi gibi 2-4 seçenekli segmented radio/card grubu — seçili durum
   primary border + primary-soft background ile (CSS :has) JS'e dokunmadan
   tamamen otomatik güncellenir. */
.zc-segmented-group { display: flex; gap: 10px; flex-wrap: wrap; }
.zc-segmented-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 160px;
    padding: 10px 12px;
    border: 1px solid var(--app-sinir);
    border-radius: 8px;
    background: var(--app-panel);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}
.zc-segmented-option:hover { border-color: var(--app-vurgu); }
.zc-segmented-option:has(input:checked) {
    border-color: var(--app-vurgu);
    background: rgba(115, 103, 240, .07);
}
.zc-segmented-option input[type="radio"] { margin-top: 3px; flex-shrink: 0; }
.zc-segmented-group-vertical { flex-direction: column; }
.zc-segmented-group-vertical .zc-segmented-option { flex: 0 0 auto; }
.zc-segmented-option-title { font-weight: 600; font-size: .84rem; color: var(--app-metin); display: flex; align-items: center; gap: 6px; }
.zc-segmented-option-desc { font-size: .74rem; color: var(--app-soluk); margin-top: 1px; }
body.vx-dark .zc-segmented-option:has(input:checked) { background: rgba(115, 103, 240, .16); }

/* Koşul / tekrarlayan form satırları — hafif surface-soft zemin, satırlar
   birbirine yapışmasın diye ince ayraç yerine gerçek boşluk + kenarlık. */
.zc-row-soft {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    margin-bottom: 8px;
    background: var(--app-baslik-bg);
    border: 1px solid var(--app-sinir-ac);
    border-radius: 7px;
}
.zc-row-soft:last-child { margin-bottom: 0; }
.zc-row-grid-header {
    display: flex;
    gap: 8px;
    padding: 0 8px;
    margin-bottom: 6px;
    font-size: .7rem;
    color: var(--app-soluk);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.zc-row-inline-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--app-panel);
    border: 1px solid var(--app-sinir-ac);
    border-radius: 6px;
    font-size: .74rem;
    color: var(--app-metin);
    white-space: nowrap;
}

/* Kompakt sıralama (yukarı/aşağı) kontrolü — iki ayrı büyük outline buton
   yerine tek pill içinde düşük görsel ağırlıklı çift buton. */
.zc-reorder-group {
    display: inline-flex;
    border: 1px solid var(--app-sinir);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.zc-reorder-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--app-soluk);
    font-size: .72rem;
    line-height: 1;
    cursor: pointer;
}
.zc-reorder-btn + .zc-reorder-btn { border-left: 1px solid var(--app-sinir); }
.zc-reorder-btn:hover:not(:disabled) { background: var(--app-baslik-bg); color: var(--app-vurgu); }
.zc-reorder-btn:disabled { opacity: .35; cursor: default; }

/* Tarih aralığı alanları readonly (sadece daterangepicker ile değişir) ama global
   .form-control[readonly] stili disabled ile aynı gri tonu kullanıyor — bu alanlar
   hâlâ tıklanabilir olduğu için normal/etkileşimli görünüme çevriliyor. */
.tarih-aralik-input[readonly] {
    background-color: #fff;
    color: inherit;
    cursor: pointer;
}

/* Grid toolbar arama kutusu — window.dtAramaKutusunuStandardize (site.js) ile
   DataTables'ın kendi "Ara:" kutusunu aynı görünüme çevirir. */
.zc-arama-kutusu { width: 300px; }

/* ── Uygulama geneli CSS değişkenleri ──────────────────────────────────────
   Tema değiştirilmek istendiğinde yalnızca bu dosyayı güncellemek yeterlidir.

   --app-chrome-y : Görünüm penceresinin tepesinden @RenderBody() içeriğinin
                    başladığı noktaya kadar olan toplam yükseklik (AdminLTE 3:
                    navbar 57px + içerik üst padding ~16px).
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    --app-chrome-y:     73px;
    --modal-radius:     8px;

    /* Renk sistemi — Vuexy benzeri; semantic renkler adminlte-vuexy-v4.css'in
       kendi .bg-label-* / --vx-* değerleriyle birebir aynı. */
    --app-bg:           #f8f7fa;
    --app-panel:        #ffffff;
    --app-sinir:        #e6e6e8;
    --app-sinir-ac:     #efeff1;
    --app-baslik-bg:    #f7f6f9;
    --app-metin:        #444050;
    --app-soluk:        #6d6b77;
    --app-cok-soluk:    #a5a2ad;
    --app-vurgu:        #7367f0;
    --app-vurgu-koyu:   #685dd8;
    --app-vurgu-soft:   rgba(115, 103, 240, .12);
    --app-borc:         #7367f0;
    --app-alacak:       #28c76f;
    --app-uyari:        #ff9f43;
    --app-hata:         #ff4c51;
}

/* AdminLTE Vuexy skin - zenomWeb uyarlaması */
.brand-header {
    gap: .25rem;
    padding-right: .75rem;
    padding-left: 1.25rem;
}

.brand-header .brand-image {
    margin-right: .375rem;
}

.brand-header .brand-text {
    font-size: 1.18rem !important;
    letter-spacing: -.025em;
}

.brand-header .brand-menu-toggle {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
}

.sidebar-mini.sidebar-collapse:not(.sidebar-no-expand) .main-sidebar:hover .brand-header .brand-image {
    margin-right: .375rem !important;
}

.main-header .user-company {
    max-width: 240px;
    overflow: hidden;
    color: var(--vx-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Alt menü maddeleri ana maddeden görsel olarak biraz daha hafif — girinti
   zaten var, buna ek olarak font biraz küçük/soluk. */
.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    padding-left: 2rem;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link:not(.active) {
    font-size: .82rem;
    color: var(--app-soluk) !important;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link:not(.active):hover,
.nav-sidebar .nav-treeview > .nav-item > .nav-link:not(.active):focus {
    color: var(--app-metin) !important;
}

/* Üst (parent) menü açıkken kendi linki de "active" class'ı alır — solid/gradient
   mor render edilirse alt (child) satırla neredeyse aynı ağırlıkta iki blok üst
   üste yığılmış gibi görünüyor. Parent grimsi/nötr kalır, sadece gerçekten seçili
   olan child satır solid mor olur. */
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link {
    color: var(--vx-heading) !important;
    background: rgba(75, 70, 92, .08) !important;
    box-shadow: none !important;
}

/* Sidebar'ın en altına sabit (.app-sidebar zaten position:sticky), ana menüden
   görsel olarak ayrışsın diye soluk/küçük — ikincil/meta bir link ailesi. */
.app-sidebar .sidebar-wrapper {
    padding-bottom: 3.25rem;
}

.zc-sidebar-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .6rem .85rem;
    border-top: 1px solid var(--app-sinir);
    background: var(--bs-body-bg, #fff);
}

.zc-sidebar-footer a {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--app-soluk) !important;
    font-size: .8rem;
    text-decoration: none;
}

.zc-sidebar-footer a:hover {
    color: var(--app-metin) !important;
}

.zc-sidebar-footer .nav-icon {
    width: 1.5rem;
    font-size: 1.1rem;
    text-align: center;
}

.sidebar-collapse .zc-sidebar-footer span {
    display: none;
}

body.vx-dark .zc-sidebar-footer {
    background: var(--vx-sidebar-bg);
    border-top-color: var(--app-sinir);
}

body.vx-dark {
    --app-bg: #25293c;
    --app-panel: #2f3349;
    --app-sinir: #464a65;
    --app-sinir-ac: #3b3f59;
    --app-baslik-bg: #34384f;
    --app-metin: #cfcde4;
    --app-soluk: #b0aec4;
    --app-cok-soluk: #8b899e;
    --app-vurgu: #7367f0;
    --app-vurgu-koyu: #685dd8;
    --app-vurgu-soft: rgba(115, 103, 240, .18);
    --app-borc: #9c93ff;
    --app-alacak: #28c76f;
    --app-uyari: #ff9f43;
    --app-hata: #ff4c51;
}

/* ── Dark tema renk sistemi ────────────────────────────────────────────────
   Vendor'ın (adminlte-vuexy-v4.css) --vx-* token'larını burada (sonradan
   yüklenen site.css'te) yeniden tanımlıyor + katmanları (sidebar, toolbar/
   surface, input, tablo başlığı) ayrıştırıyor. Vendor dosyasına dokunulmuyor.
   ─────────────────────────────────────────────────────────────────────────── */
body.vx-dark {
    /* Katmanlar */
    --vx-canvas:            #1e2233;
    --vx-card:              #2d334b;
    --vx-sidebar-bg:        #292e45;
    --vx-surface-bg:        #323850;
    --vx-input-bg:          #292f46;
    --vx-table-header-bg:   #292f44;

    /* Border */
    --vx-border:            #48516d;
    --vx-border-soft:       #3c445e;
    --vx-border-strong:     #596481;

    /* Yazı */
    --vx-heading:           #f1f3fa;
    --vx-body:              #b8c0d8;
    --vx-muted:             #8791ad;
    --vx-placeholder:       #828ca7;

    /* Marka / etkileşim */
    --vx-primary:           #7164f4;
    --vx-primary-hover:     #8277fa;
    --vx-primary-soft:      rgba(113, 100, 244, .18);

    /* Semantic */
    --vx-success:           #27b47e;
    --vx-success-bg:        rgba(39, 180, 126, .16);
    --vx-danger:            #ff5263;
    --vx-danger-bg:         rgba(255, 82, 99, .14);
    --vx-warning:           #e8a537;
    --vx-warning-bg:        rgba(232, 165, 55, .16);
    --vx-info:              #38bdf8;
    --vx-info-bg:           rgba(56, 189, 248, .14);
}

/* Sidebar kendi tonu — vendor'da card ile aynıydı. */
body.vx-dark .main-sidebar {
    background: var(--vx-sidebar-bg) !important;
}

/* Toolbar/card-header, gövdeden bir tık farklı yüzey — vendor'da card ile
   birebir aynı tondaydı. */
body.vx-dark .card-header {
    background: var(--vx-surface-bg) !important;
    border-bottom-color: var(--vx-border-soft) !important;
}

/* Tablo başlığı ayrı yüzey + daha güçlü metin. */
body.vx-dark .table thead th {
    background: var(--vx-table-header-bg) !important;
    color: #dde2f2 !important;
    font-weight: 600;
    border-bottom-color: var(--vx-border-strong) !important;
}

body.vx-dark .table tbody td {
    border-bottom-color: var(--vx-border-soft);
}

body.vx-dark .table tbody tr:hover,
body.vx-dark .table tbody tr:hover td {
    background: #343b56 !important;
}

/* Form alanları — "etkileşimli mi değil mi" belirsizliğini gidermek için
   input katmanı diğer yüzeylerden ayrı ton + net focus ring. */
body.vx-dark .form-control,
body.vx-dark .form-select,
body.vx-dark .input-group-text,
body.vx-dark .select2-container--default .select2-selection--single {
    background: var(--vx-input-bg) !important;
    border-color: var(--vx-border) !important;
    color: var(--vx-heading) !important;
}
body.vx-dark .form-control::placeholder {
    color: var(--vx-placeholder);
}
body.vx-dark .form-control:focus,
body.vx-dark .form-select:focus {
    border-color: var(--vx-primary) !important;
    box-shadow: 0 0 0 3px var(--vx-primary-soft) !important;
}

body.vx-dark .btn-outline-secondary {
    border-color: #69748f;
    color: #d7dcef;
}
body.vx-dark .btn-outline-secondary:hover {
    background: #39405a;
    border-color: #8792ae;
    color: #fff;
}
body.vx-dark .btn:disabled {
    opacity: .42;
}

/* DataTable'lar tema paketinin nowrap/geniş padding kurallarına rağmen
   ekran genişliğini aşmadan kapsayıcıya sığsın. */
.content-wrapper,
.content,
.content > .container-fluid,
.card,
.card-body,
.table-responsive,
.dataTables_wrapper {
    min-width: 0;
    max-width: 100%;
}

.content-wrapper {
    overflow-x: hidden;
}

/* _Layout.cshtml'deki .app-content-header hiçbir sayfada doldurulmuyor —
   AdminLTE'nin kendi .app-main .app-content-header{padding:1rem .5rem} kuralı
   vuexy skin'in .content-header{padding:0} kuralından daha spesifik olduğu için
   kazanıyor. Kullanılmadığı için tamamen gizlenir. */
.content-header {
    display: none;
}

/* Bootstrap'ın .text-muted'u yoğun ekranlarda düşük kontrast — bir tık
   koyulaştırılıyor. Sabit hex yerine değişken: Yüksek Okunabilirlik açıkken
   de bu metin tepki versin diye. */
:root { --zc-text-muted: #495057; }
body.zc-yuksek-kontrast { --zc-text-muted: #333; }

.text-muted {
    color: var(--zc-text-muted) !important;
}

.table-responsive {
    overflow-x: auto;
}

/* Çok satırlı grid'lerde takip kolaylığı için zebra + hover. Bootstrap 5.3'ün
   .table'ı her hücreyi kendi arka planıyla boyar — <tr>'ye düz background-color
   vermek hücrelerin altında kalıp hiç görünmez. Doğru yol Bootstrap'ın kendi
   --bs-table-accent-bg değişkenini set etmek. */
.dataTable tbody tr:nth-child(even) {
    --bs-table-accent-bg: rgba(var(--bs-emphasis-color-rgb), .045);
}

.dataTable tbody tr:hover {
    --bs-table-accent-bg: #f1f0fd;
}

body.vx-dark .dataTable tbody tr:nth-child(even) {
    --bs-table-accent-bg: rgba(255, 255, 255, .045);
}

body.vx-dark .dataTable tbody tr:hover {
    --bs-table-accent-bg: rgba(115, 103, 240, .08);
}

.dataTables_wrapper table.dataTable {
    width: 100% !important;
    table-layout: fixed;
}

.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable tbody td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Sürüklenebilir sütun genişliği (site.js: dtKolonGenislikleriniBaslat) — bu iki
   class'ı kullanan HERHANGİ bir tabloda çalışır. */
table.dataTable thead th.resizable-column {
    position: relative;
}

table.dataTable .column-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    z-index: 3;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

table.dataTable .column-resize-handle::after {
    position: absolute;
    top: 20%;
    right: 3px;
    width: 1px;
    height: 60%;
    content: "";
    background: transparent;
}

table.dataTable thead th.resizable-column:hover .column-resize-handle::after,
body.column-resizing table.dataTable .column-resize-handle::after {
    background: var(--vx-primary);
}

body.column-resizing,
body.column-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* ── Grid'i kalan viewport yüksekliğine sığdırma (opsiyonel, .zc-grid-fill) ──────
   Geniş/uzun DataTable'larda yatay scrollbar'a ulaşmak için sayfanın en altına
   inmek gerekmesin diye. DataTables'ın kendi scrollX/scrollY uzantısı BİLEREK
   kullanılmaz: window.dtKolonGenislikleriniBaslat (site.js) tabloya doğrudan
   <colgroup> ekleyip başlık hücrelerine sürükle-tutamağı bağlıyor, tek/
   bölünmemiş bir <table> varsayıyor — DataTables scrollX başlığı ayrı bir klon
   tabloya taşıdığından bu sistemi kırma riski taşırdı. Tablo DOM'una hiç
   dokunulmuyor, sadece "dom" desenindeki tablo kendi <div class="zc-tablo-scroll">
   sarmalayıcısına alınıyor ve o div overflow:auto (tek gerçek scrollbar) oluyor.
   --zc-grid-height: window.dtGridYuksekligiAyarla (site.js) tarafından JS ile
   canlı ölçülüp yazılır. Sadece masaüstünde (≥992px) devreye girer.

   Başlık position:sticky <thead> SEVİYESİNDE sabitlenir — th SEVİYESİNDE DEĞİL:
   sürükle-genişletme sistemi her ayarlanabilir sütuna .resizable-column class'ı
   ekliyor, ve `table.dataTable thead th.resizable-column { position: relative; }`
   kuralı (yukarıda) aynı specificity'ye sahip olup dosyada sonra geldiği için
   kazanırdı — position:sticky'yi position:relative'e ezerdi. <thead>'e sticky
   vermek bu çakışmayı tamamen atlar. */
@media (min-width: 992px) {
    .zc-grid-fill {
        height: var(--zc-grid-height, auto);
        max-height: var(--zc-grid-height, none);
    }

    .zc-grid-fill > .card-datatable {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .zc-grid-fill > .card-datatable > .dataTables_wrapper {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }

    .zc-grid-fill .zc-tablo-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    .zc-grid-fill .zc-tablo-scroll table thead {
        position: sticky;
        top: 0;
        z-index: 2;
    }
}

/* Yardımcı: tam yükseklik sayfa wrapper — tüm tam yükseklik sayfalarda
   kullanılabilir (ör. ileride bir sihirbaz/evraklaştırma ekranı). */
.app-page {
    height: calc(100vh - var(--app-chrome-y));
    overflow: hidden;
}

/* Tabler loading icons */
.ti-spin {
    animation: ti-spin 1s linear infinite;
}

@keyframes ti-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Uygulama genelinde durum rozetleri (bg-label-*) — vendor tonları uzun süre
   bakan kullanıcı için düşük kontrast, arka plan aynı kalıyor, sadece metin
   koyulaştırılıyor. */
.bg-label-primary   { color: #5c4fd6 !important; }
.bg-label-secondary { color: #5f6270 !important; }
.bg-label-success   { color: #1a9c56 !important; }
.bg-label-info      { color: #0090a3 !important; }
.bg-label-warning   { color: #c96a00 !important; }
.bg-label-danger    { color: #d6272c !important; }

/* Dark modda yukarıdaki koyu tonlar açık zemin üzerinde okunaklıydı ama koyu
   zeminde silikleşiyor — parlak metin + yarı saydam zemine geçiliyor. */
body.vx-dark .bg-label-primary   { color: #aaa2ff !important; background-color: var(--vx-primary-soft) !important; }
body.vx-dark .bg-label-secondary { color: #c7cce0 !important; background-color: rgba(184, 192, 216, .14) !important; }
body.vx-dark .bg-label-success   { color: #5be0ab !important; background-color: var(--vx-success-bg) !important; }
body.vx-dark .bg-label-info      { color: #67d1ff !important; background-color: var(--vx-info-bg) !important; }
body.vx-dark .bg-label-warning   { color: #ffc65c !important; background-color: var(--vx-warning-bg) !important; }
body.vx-dark .bg-label-danger    { color: #ff8a95 !important; background-color: var(--vx-danger-bg) !important; }

/* ── Tüm tablo işlem düğmeleri için ortak ölçü standardı ─────────────────────
   grid-action-cell-1/2: sabit genişlikli "İşlem" sütunları (1-2 buton).
   grid-action-btn: nötr (text-muted benzeri) varsayılan, renk sadece hover'da
   devreye girer — aksiyonun anlamı (primary/success/danger) hover renginde
   taşınır, tabloyu düz renkli ikonlarla doldurmayız. */
.grid-action-cell {
    padding-right: 1px !important;
    padding-left: 1px !important;
    white-space: nowrap;
}

.grid-action-cell-1 {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
}

.grid-action-cell-2 {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
}

.grid-action-buttons {
    display: flex;
    align-items: center;
}

.grid-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 28px;
    min-width: 27px;
    min-height: 28px;
    flex: 0 0 27px;
    padding: 0;
    margin-right: 3px;
    line-height: 1;
    background: transparent;
    border-radius: .375rem;
    box-shadow: none;
}

.grid-action-btn:last-child {
    margin-right: 0;
}

.grid-action-btn.btn-outline-primary,
.grid-action-btn.btn-outline-secondary,
.grid-action-btn.btn-outline-success,
.grid-action-btn.btn-outline-danger {
    color: var(--app-soluk);
    border-color: var(--app-sinir);
    transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.grid-action-btn.btn-outline-primary:hover {
    color: var(--app-vurgu);
    border-color: var(--app-vurgu);
    background: var(--app-vurgu-soft);
}
.grid-action-btn.btn-outline-secondary:hover {
    color: var(--app-metin);
    border-color: var(--app-soluk);
    background: var(--app-baslik-bg);
}
.grid-action-btn.btn-outline-success:hover {
    color: var(--app-alacak);
    border-color: var(--app-alacak);
    background: rgba(40, 199, 111, .12);
}
.grid-action-btn.btn-outline-danger:hover {
    color: var(--app-hata);
    border-color: var(--app-hata);
    background: rgba(255, 76, 81, .12);
}

/* Kompleks/çok alanlı form modalları — küçük confirmation modalından daha
   geniş, sectionlı içerik için. Header/footer sabit, yalnızca body scroll eder
   — Bootstrap'ın kendi .modal-dialog-scrollable'ı AYNEN kullanılmaz çünkü o
   modal-content'e overflow:hidden verip Vuexy'nin close butonunu (transform ile
   header dışına taşan) kırpar; aynı sonuç overflow:hidden OLMADAN, sadece
   body'ye overflow-y:auto vererek üretilir. */
.zc-form-dialog { max-width: 820px; height: calc(100% - var(--bs-modal-margin, 1.75rem) * 2); }
.zc-form-dialog .zc-confirm-content { max-height: 100%; }
.zc-form-dialog .zc-confirm-body { overflow-y: auto; }

/* ── Arama kutusu + kaydırılabilir sonuç listesi içeren "seçim modalı" kalıbı
   (zc-lookup-*) — UI İSKELETİ, VERİ BAĞLANMADI. connect'te "F4 ile hesap seçimi"
   (muhasebe hesap planı arama) için kullanılıyordu; zenomWeb'de henüz bir Hesap
   (hesap planı) entity'si yok (bkz. CLAUDE.md faz planı — muhasebe ekranları çok
   ileride), bu yüzden burada sadece görsel kabuk + F4 konvansiyonu taşındı, gerçek
   arama/veri çekme (js/hesap-secici.js) BİLEREK taşınmadı. Hesap (veya benzeri bir
   arama-seç) entity'si eklendiğinde: #modal-zc-lookup içini doldurup kendi JS'ini
   yazmak yeterli, kabuk (genişlik, kısayol şeridi, satır hiyerarşisi, kaydırma)
   hazır. Genişlik ~720px — bu tür modaller veri yoğun, diğer zc-confirm-*
   modallarından (460-520px) kasıtlı olarak daha geniş. */
.zc-lookup-dialog { max-width: 720px; }

.zc-lookup-shortcut-bar {
    padding: 10px 16px;
    background: var(--app-baslik-bg);
    border-bottom: 1px solid var(--app-sinir);
    font-size: .78rem;
    color: var(--app-soluk);
}
.zc-lookup-shortcut-bar kbd {
    background: var(--app-panel);
    border: 1px solid var(--app-sinir);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .7rem;
    color: var(--app-metin);
    box-shadow: none;
}
.zc-lookup-shortcut-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.zc-lookup-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--app-soluk); }
.zc-lookup-chip kbd { margin-right: 1px; }

/* Sonuç listesi — modal body içinde TEK gerçek scrollbar (60vh tavan), klavye
   okuma için tabindex taşıyabilir. */
.zc-lookup-list {
    max-height: 60vh;
    overflow-y: auto;
    outline: none;
    background: var(--app-panel);
    scrollbar-width: thin;
    scrollbar-color: var(--app-sinir) transparent;
}
.zc-lookup-list::-webkit-scrollbar { width: 8px; }
.zc-lookup-list::-webkit-scrollbar-track { background: transparent; }
.zc-lookup-list::-webkit-scrollbar-thumb { background: var(--app-sinir); border-radius: 4px; }
.zc-lookup-list::-webkit-scrollbar-thumb:hover { background: var(--app-soluk); }

/* Satır hiyerarşisi — ana/alt/detay seviyeleri (connect'te hesap kodu kırılımı
   için kullanılıyordu, örn. 1. seviye=ana hesap güçlü, 3. seviye=detay normal
   ağırlıkta). Genel bir "ağaç/hiyerarşi listesi" kalıbı olarak reuse edilebilir. */
.zc-lookup-row { padding: 5px 16px; cursor: pointer; white-space: nowrap; color: var(--app-metin); }
.zc-lookup-row .zc-lookup-row-kod { display: inline-block; min-width: 96px; margin-right: 12px; color: var(--app-soluk); font-variant-numeric: tabular-nums; }
.zc-lookup-row .zc-lookup-row-ad { color: inherit; }
.zc-lookup-row.zc-lookup-lvl-0 { font-weight: 600; }
.zc-lookup-row.zc-lookup-lvl-0:not(.zc-lookup-secili) { background: var(--app-baslik-bg); }
.zc-lookup-row.zc-lookup-lvl-1 { font-weight: 500; }
.zc-lookup-row.zc-lookup-lvl-2 { font-weight: 400; }
.zc-lookup-row:hover:not(.zc-lookup-secili) { background: var(--app-sinir-ac); }

/* Seçili/güncel satır (klavyeyle gezinirken de aynı gösterge) — düz parlak mavi
   blok yerine primary-soft zemin + sol accent + koyu primary metin. */
.zc-lookup-row.zc-lookup-secili {
    background: rgba(115, 103, 240, .16);
    color: var(--app-vurgu-koyu);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--app-vurgu);
}
.zc-lookup-row.zc-lookup-secili .zc-lookup-row-kod { color: inherit; opacity: .85; }

/* Seçilemeyen (ara/özet) satırlar — hiyerarşi bağlamı için görünür ama
   soluk/italik. */
.zc-lookup-row.zc-lookup-row-ara { cursor: default; color: var(--app-soluk); font-style: italic; }
.zc-lookup-row.zc-lookup-row-ara:hover { background: none; }

/* ── Tam ekranda (F11) header otomatik gizleme (site.js: zcHeaderAutoHideUygula) ──
   .app-header normalde CSS Grid akışında (grid-area: lte-app-header); gizliyken
   position:fixed + translateY(-100%) ile akıştan tamamen çıkarılır, fare üst
   kenara (zc-header-hotzone) götürülünce geçici olarak overlay şeklinde üste
   biner. */
.zc-header-hotzone {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    z-index: 1035;
}

.zc-header-hotzone.zc-aktif {
    display: block;
}

body.zc-header-auto-hide .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 100vw;
    transform: translateY(-100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

body.zc-header-auto-hide .app-header.zc-header-gorunur {
    transform: translateY(0);
}

/* ── Kimliksiz (auth) sayfalar — giriş/cihaz doğrulama/davet kabul ───────
   management.om.com.tr'deki Views/Auth/Login.cshtml'den uyarlandı (2026-10-14,
   kullanıcı isteği: "daha modern bir giriş formu"). Renkler sabit değil,
   zenomWeb'in kendi --app-* değişkenleri (bkz. yukarıdaki :root) — dark mode
   otomatik uyumlu, management'taki gibi hardcoded hex değil. */
.auth-outer {
    width: 100%;
    max-width: 440px;
    padding: 1.5rem 1rem;
    position: relative;
    z-index: 1;
}

.auth-outer::before {
    content: "";
    position: absolute;
    top: -28px;
    left: -38px;
    width: 180px;
    height: 180px;
    border-radius: 18px;
    border: 1.5px solid var(--app-vurgu-soft);
    background: var(--app-vurgu-soft);
    opacity: .5;
    z-index: -1;
    pointer-events: none;
}

.auth-outer::after {
    content: "";
    position: absolute;
    bottom: -22px;
    right: -44px;
    width: 140px;
    height: 140px;
    border-radius: 18px;
    border: 2px dashed var(--app-vurgu-soft);
    background: var(--app-vurgu-soft);
    opacity: .5;
    z-index: -1;
    pointer-events: none;
}

@media (max-width: 575px) {
    .auth-outer::before, .auth-outer::after { display: none; }
}

.auth-card {
    background: var(--app-panel);
    border-radius: 12px;
    padding: 2.25rem 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}

@media (max-width: 575px) {
    .auth-card { padding: 1.75rem 1.25rem; }
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.75rem;
}

.auth-brand img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--app-vurgu-soft);
    object-fit: contain;
}

.auth-brand-name {
    font-size: 1.15rem;
    font-weight: 650;
    color: var(--app-metin);
    letter-spacing: -.02em;
}

.auth-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--app-metin);
    margin-bottom: .35rem;
}

.auth-subtitle {
    font-size: .875rem;
    color: var(--app-soluk);
    margin-bottom: 1.5rem;
}

.pwd-wrapper { position: relative; }
.pwd-wrapper .form-control { padding-right: 2.75rem; }
.pwd-toggle {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding: 0 .75rem;
    background: transparent;
    border: 0;
    color: var(--app-cok-soluk);
    cursor: pointer;
    line-height: 1;
}
.pwd-toggle:hover { color: var(--app-vurgu); }

.btn-auth {
    background: linear-gradient(72.47deg, var(--app-vurgu) 22.16%, rgba(115, 103, 240, .7) 76.47%);
    border: 0;
    color: #fff;
    font-weight: 500;
    font-size: .9375rem;
    padding: .65rem 1.25rem;
    border-radius: 6px;
    transition: box-shadow .2s;
}
.btn-auth:hover {
    box-shadow: 0 4px 14px rgba(115, 103, 240, .45);
    color: #fff;
}

.auth-forgot {
    font-size: .8125rem;
    color: var(--app-vurgu);
    text-decoration: none;
}
.auth-forgot:hover { color: var(--app-vurgu-koyu); text-decoration: underline; }